본문 바로가기
컴포넌트ㅣ인스턴스ㅣ프로퍼티ㅣ베리언트ㅣ오토레이아웃 컴포넌트 재사용 가능한 디자인 요소 (원본이라고 생각하면 된다) 피그마에서 버튼, 아이콘, 헤더, 푸터 등과 같이 디자인이 반복적으로 사용되는 요소들에 사용된다 컴포넌트를 만들어 사용함으로써 일관성을 유지하면서 프로젝트의 효율성을 높일 수 있다 컴포넌트를 수정하면 인스턴스가 함께 변경된다 인스턴스 (컴포넌트의 복제본) 컴포넌트의 모양, 스타일 등을 상속 받는다 수정 가능 인스턴스를 수정해도 기존 컴포넌트에는 영향을 안준다 컴포넌트 단축키 cmd+option+K 컴포넌트 디테치 (연결해제) 방법 마스터 컴포넌트는 원본이라 디체치가 안된다. (Detach Component 플러그인 쓰면 가능) 인스턴스 디테치 1) 우클릭->Detach instance 2) 또는 ctrl + alt + B 마스터를 실수로 지.. 2024. 2. 20.
디자인 가이드ㅣ스타일 가이드ㅣ디자인 시스템ㅣ호버ㅣ토글ㅣ글래스모피즘ㅣ인디케이터 호버(Hover) 피그마 디자인 도구에서 마우스를 요소 위로 움직일 때 나타나는 시각적 효과를 말한다 토글(Toggle) 버튼, 스위치 등의 UI 요소를 클릭하거나 터치하여 특정 기능을 켜거나 끌 때 사용되는 용어 글래스모피즘(Glassmorphism) 유리와 관련된 소재의 시각적 효과를 따라 하는 디자인 트렌드. 투명한 유리 판과 같은 효과를 내고 배경, 텍스트, 아이콘 등의 요소들이 유리 뒤로 흐르는 듯한 느낌이 난다. 인디케이터 (Indicator) 어떠한 상태, 위치, 조건을 나타내는 아이콘 또는 표시 요소 작업 진행 상태를 나타내는 프로그레스 바, 배터리 아이콘, 현재 페이지 위치를 표시하는 페이지 인디케이터 등 사용자에게 시스템의 상태나 작동 중인 기능에 대한 시각적 정보를 제공한다 디자인 가.. 2024. 2. 20.
02.20.24 TIL 오늘 어떤 문제가 있었나요? 작업을 하다 보니 나도 모르게 또 프로토타입에 꽂혀서 원하는 동작 구현 하는 방법을 열심히 찾다가 도저히 모르겠어서 튜터님께 여쭤보러 갔었다. 튜터님께서 은은~하게 웃으시며 "그 프로토타입 동작은 추후에 강의가 직접 진행될 거니까~ 이번에는 컴포넌트에만 집중해 보세요~ 그래도 프로토타입 제작에 대한 영상은 메시지로 보내드릴게요~"라고 답해주셨다. 어제의 TIL을 보니 "결론은 앱으로 하던 웹으로 하던 피그마의 컴포넌트 속성과 오토레이아웃을 이용해서 팀원 소개 페이지를 만들기(클론 만들기와 비슷)였다..."라고 내 스스로 분명 글을 썼는데 왜 또 이런 거지. 원인을 분석해 보니 두 가지 정도의 이유가 있었다. 1. 컴포넌트, 인스턴스, 베이언트, 프로토타입, 와이어 프레임, 오.. 2024. 2. 20.
와이어 프레임 와이어 프레임이란? 소프트웨어나 웹 디자인의 세계에서 비슷하게 정의된다. 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합이다. 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시 될 내용), 기능(인터페이스의 작동 방식)을 설명하는데 사용 된다. 와이어프레임은 디자인 요소(이미지, 비디오, 텍스트)가 포함되기 전 상태이다. 와이어프레임을 통해 디자이너는 시각 디자인의 세부 묘사에 너무 치우치지 않고 전체적인 디자인 전략을 세울 수 있다. 제작 방법 1. 펜과 종이를 사용한 스케치 2. 그래픽 디자인 소프트웨어 사용 2024. 2. 19.
02.19.24 TIL 오늘 어떤 문제가 있었나요? 이번주 미니 프로젝트가 피그마로 와이어 프레임 만들기인데 결과는 비슷하게 예상했지만 과정을 이해하는 데 있어 약간의 시간이 걸렸다. 나의 시점: 팀원들을 소개하는 피피티 화면 같은걸 만드는 거구나 -> (팀원들과 앱 화면으로 할지 웹 화면으로 할지 의논함) -> 어? 근데 앱이나 웹이나 혹시 지정된 사이즈가 있는 건가? 물어봐야겠다 -> 튜터님들과 매니저님들께 물어보러 감 -> 튜터님은 꼭 피그마를 사용하지 않아도 된다고 함. 앱 사이즈인지 웹 사이즈인지 정확하지 않다고 함. 하지만 현업에서는 태블릿 사이즈나 맥북 에어 사이즈를 쓰신다고 추천해 주심. 일단 확실하지 않으니 매니저분께 여쭤보기로 하심 -> (여기서부터 혼란이 더 생겼다) -> 매니저님은 피그마를 사용해야 하고,.. 2024. 2. 19.
사전캠프 4주차 WIL 4주 동안의 사전캠프가 끝이 났다. 첫 1주째는 새로운 팀원분들과 친해지는 시간, 매니저님들에게 질문하는 용기를 내는 시간, 노션과 슬랙에 적응하는 시간을 가졌었다. 2, 3주째는 본격적으로 강의에 집중을 했고, 팀원분들과 조금 친해져서 농담도 나누며 재밌게 보냈다. 하지만 여전히 내가 잘할 수 있을까? 부족하면 어쩌지? 하는 걱정이 있었다. 4주째는 무엇이든 물어보살과 사전설명회를 통해 다들 같은 고민을 하고 있고 나는 소수가 아니다! 라는 생각이 들어 용기가 생겼다. 한 달 동안 주어진 피그마 강의를 통해 기본기를 다졌고, 팀원들과 어떻게 하면 더 빠르게 친해질 수 있을지, 스파르타를 통해 내가 어떤 것을 배워야 하는지에 대한 목표가 명확해졌다. 일단 팀이 배정되면 카메라를 꼭 키고 하자는 약속을 해.. 2024. 2. 19.
사전설명회 들은 후 노트 정리 ✅ UX UI 디자이너가 갖춰야 할 필수 역량 1. 사용자 경험에 대한 이해 (사용자 경험 설계 능력) 2. 문제 도출 및 해결 능력 3. 협업 능력 (원활한 커뮤니케이션 스킬) 4. 비쥬얼 역량, 디자인 툴 사용 능력 ✅ 취업 시 중요한 것 포트폴리오! 포트폴리오를 통해 문제를 시각적으로 해결할 수 있는지를 보여줘야 한다. (예쁘기만 한 포트폴리오 X! 문제 해결 과정이 중요하다) 면접을 위한 기반이라고 생각하면 된다. ✅ 프로젝트나 공부를 할 때 노트 정리를 자주 해두자. 나중 되면 어떤 생각으로 작업했는지 기억이 안 난다. 2024. 2. 15.
피그마 강의 3주차 숙제 (플러그인) 2024. 2. 13.
용어 정리 코드스니펫 nippet은 작은 조각이라는 뜻으로, 코드 스니펫(Code Snipet)은 '코드 조각', 즉 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 의미한다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. ChatGPT Generative Pre-trained Transformer (사전 훈련된 생성 변환기) 정보를 텍스트 형태로 제공해주는 인공지능 챗 봇 ChatGPT API Application Programming Interface의 줄임말이다. 음식점에 손님, 점원, 요리사가 있다고 했을때, 결과물=요리사, 주문을 넣는 사람=손님, 이 둘을 연결해주는 매개체 또는 수단=점원에 비유할 수 있다. 랜딩페이지 landing(착륙)의 의미로 사용자가 처음으로 접하는.. 2024. 2. 7.

티스토리툴바