[+4] 컴포넌트와 컴포넌트 제작 실습
🚩오늘의 키워드
- 온보딩 강의 수강(체계적으로 배우는 피그마 기초 완전 정복 4,5강)
- 강의 내 개인 과제 진행
😶TODAY I LEARNED
[체계적으로 배우는 피그마 기초 완전정복 4강]
오늘은 컴포넌트 프로퍼티, 배리언츠와 컴포넌트를 응용하는 방법을 배웠다.
① 컴포넌트 프로퍼티 - 컴포넌트의 상태와 속성을 조절할 수 있는 기능.
· 의사상태에서 형태가 변화하거나, 컴포넌트 안의 요소가 바뀌는 경우 하나의 컴포넌트를 바탕으로 효율적으로 디자인 할 수 있음.
· 컴포넌트 프로터피 안에는 배리언츠와 프로퍼티 2가지의 속성이 존재한다.
| 배리언츠 (Variants) 변종/변화 |
컴포넌트의 가상의 상태를 만들 때 사용 ex) 마우스 오버 등 |
 |
| 프로퍼티 (Property) 속성 |
디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용 ex) 버튼의 아이콘 변경, 텍스트의 변경 |
 |
· 배리언츠를 제외한 피그마 프로퍼티 3가지
→ 👁️ Boolean - Y/N을 선택하는 형식(켜기/끄기, 참/거짓, 예/아니오). 레이어나 특정 요소를 껐다 켰다 할 수 있게 해줌.
→ ◇ Instance swap - 인스턴스를 다른 인스턴스로 교체하는 기능. 주로 버튼 안의 아이콘, 팝업 안의 버튼을 교체할 수 있게 해줌.
→ 𝐓 Text - 컴포넌트 안에 있는 텍스트를 패널에서 수정할 수 있도록 해줌.
③ 버튼의 위계(Priority, Hierarchy)
· Priority(프라이어리티, 우선순위), Hierarchy(허이어라키, 계층/계급)으로 부름.
· 얼마나 중요한 행동을 하기 위한 것인가 라는 의미로 중요하지 않을 수록
1순위(프라이머리) > 2순위(세컨더리) > 3순위(터시어리)의 순으로 버튼을 사용한다.
[버튼의 위계 배리언츠 만들기 실습]
[버튼의 크기/상태 배리언츠 만들기 실습]
+ 추가적으로 오토 레이아웃을 정리하는데도 사용하는 것을 알았다. 가짓수가 많으면 편리할지도.
[버튼 컴포넌트에 아이콘 추가하기]
1. 백터 아이콘을 컴포넌트로 변경 → 프레임 속성 메뉴에 있는 Create multiple components를 사용하면 편함!
2. 컴포넌트를 복사하여 인스턴스로 변경 후, 버튼 안에 넣기.
[아이콘에 프로퍼티 적용하기]
1. 컴포넌트를 선택, 프레임 속성 패널에서 👁️ Boolean 선택
2. 프로퍼티의 이름과 기본값 설정
3. 아이콘 컴포넌트를 선택하고 가시성 패널에서 ⎆ 을 통해 프로퍼티를 적용 ( ! 표시가 떠있다면 적용되어있는 요소가 없다는 뜻 )
[버튼 컴포넌트의 아이콘 변경 - 인스턴스만 가능!!!]
1. 컴포넌트를 선택, 프레임 옵션 + > 프로퍼티 메뉴에서 ◇ Instance swap 선택
2. 변경할 아이콘을 선택 후 가시성 패널에서 ⎆ 을 통해 프로퍼티를 적용
tip! 프로퍼티를 적용할 때 Create component property 패널에서 Preferred values 옆 + 버튼을 이용하면
변경할 버튼을 미리 즐겨찾기 해 둘 수 있다.
[버튼 컴포넌트의 텍스트 변경]
1. 컴포넌트를 선택하고 프레임 옵션 패널의 + > 프로퍼티 메뉴에서 Text 선택
2. 이름과 기본값 설정
3. 텍스트 패널에서 ⎆ 을 통해 프로퍼티를 적용
④ 합성 컴포넌트 - 컴포넌트를 모아 컴포넌트를 만드는 경우.
바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조의 컴포넌트들이 여기에 속한다.
⑤ 네스티드 인스턴스 - 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작할 수 있도록 도와주는 속성.
[합성 컴포넌트 - 탭 컴포넌트 만들기]
1. 라벨이 될 텍스트 입력
2. 오토레이아웃(shift + a)으로 감싸주기
3. 만들고 싶은 탭 개수만큼 복제
4. 모두 선택 후 개별 배리언츠로 변경
5. 배리언트 적용 후, 값을 ON/OFF로 변경
tip! 참/거짓으로 분류할 수 있는 경우 피그마가 자동으로 토글 스위치로 만들어준다!
[개별 메뉴 인스턴스를 하나의 탭 컴포넌트로 다시 만들기]
1. 인스턴스(복제본)를 오토레이아웃으로 묶기
2. 탭 컴포넌트를 선택, 프레임 옵션에서 + > 프로퍼티 목록에서 Nested Instances 적용
→ Nested Instances는 적용되어있는 프로퍼티가 묶인 상태에서만 뜨는 것 같다. 맞는지 검증 필요.
3. 네스티스 인스턴스 설정
[컴포넌트 합치기/분리하기]
1. 컴포넌트 생성 후 각각 개별 컴포넌트로 변경
2. 모두 선택 후 Combine as variants 선택
→ 새로운 컴포넌트로 결합되며, 프레임 이름을 가진 배리언츠로 변경된다.
이름이 피자인 배리언츠를 음식이라는 이름을 가진 컴포넌트 안에서 꺼내면 음식/피자로 바뀜
[체계적으로 배우는 피그마 기초 완전정복 5강]
5강에서는 로컬 디자인(화면 단위의 디자인), 핸드오프, 프로토타입을 실습을 통해 배웠다.
① 히어로 섹션 - 메인화면의 가장 상단 영역, 가장 중요한 메세지를 전달하는 영역
ex) 프로모션, 이벤트 배너
② 앱 바 컴포넌트 - 컴포넌트 > 네비게이션에 해당하는 컴포넌트
→ 앱 화면 상단에 고정되어 현재화면의 이름 · 이전화면으로 돌아가기 · 보조 기능 제공 등의 역할
→ 앱 바(머터리얼 디자인), 네비게이션 바(iOS) 등 디자인 시스템마다 부르는 명칭이 다름
→ 타이틀, 힌트 텍스트, 리딩 엘리먼트, 트레일링 엘리먼트의 구조로 이루어져있다.
| 타이틀(Title) | 현재 화면의 제목을 보여줌 |  |
| 힌트 텍스트(Hint Text) | 보조적으로 필요한 정보를 적어줌 | |
| 리딩 엘리먼트(Leading Element) | 뒤로가기, 닫기 아이콘을 사용하는 영역 | |
| 트레일링 엘리먼트(Trailing Element) | 설정, 더보기 등 화면과 관련된 보조기능 제공 |
★ 로컬 디자인 할 때 참고 사항
1. 화면의 좌우 여백은 앱 마다 조금씩 다르지만 글로벌 마진 값은 16 ~ 24 사이, 가끔 32인 경우도 있음!
2. 파일 옆 에셋에서 다른 페이지에서 만든 에셋(인스턴스가 필요할 경우)을 불러올 수 있다. 드래그하면 불러와짐!
[앱 바 컴포넌트 제작]
앱 바는 다양한 디자인으로 이루어져있고 같은 앱 안에서도 홈 화면, 검색화면 등 화면마다 맞는 디자인으로 제작되어있다.
따라서, 다양한 디자인을 미리 만들어두고 배리언츠로 관리한다.
1. 컴포넌트에 텍스트 레이어를 만들고 텍스트를 적는다.
2. 오토레이아웃을 적용하고, 스타일을 적용한다.
3. 필요할 경우리딩 엘리먼트, 트레일링 엘리먼트를 넣어준다.
4. 텍스트의 리사이징 값을 Fill container로 적용한 후, 텍스트 정렬을 변경한다.
5. 컴포넌트로 변환 후, 프로퍼티 적용.
[홈 화면 제작]
③ 리스트 컴포넌트 - 컴포넌트 > 컨테이너에 해당하는 컴포넌트
→ 동일한 정보가 담긴 덩어리를 반복적인 패턴으로 보여줄 때 사용
ex) 쇼핑 앱의 상품목록, 배달 앱의 가게·메뉴
→ 라벨/레이블, 디스크립션, 리딩 엘리먼트, 트레일링 엘리먼트의 구조로 이루어져있음.
| 라벨/레이블 | 리스트의 이름/제목 |  |
| 디스크립션(Description) | 리스트의 보조 설명 | |
| 리딩 엘리먼트(Leading Element) | 리스트 앞 쪽에 있는 요소 (아이콘, 이미지) |
|
| 트레일링 엘리먼트(Trailing Element) | 텍스트보다 더 뒤에 있는 요소 |
[리스트 컴포넌트 제작]
[목록 화면 만들기]
[상세 화면 만들기]
1. 버튼 컴포넌트의 인스턴스를 불러온다.
2. 버튼 컴포넌트의 인스턴스를 오토레이아웃으로 한 번 더 감싸준다.
→ 배경은 흰색 : 아래로 스크롤 했을 때 뒷 배경이 보이는 것을 방지하고 버튼이 아래에 잘 붙어있게 하기 위함.
3. 너비를 화면에 맞게 적용한다.
[로그인 화면 만들기]
1. 텍스트 필드 삽입
2. 체크박스 = 체크박스 인스턴스 + 텍스트레이어(자동로그인)를 오토레이어로 묶어 적용
3. 텍스트 필드 아래에 버튼을 붙일 경우에는 흰 배경으로 감쌀 필요 없음!
④ 프로토타입(Proto-type) - 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것.
→ 구현 정도에 따라 Lo-fi(흐름만 파악) 와 Hi-fi(실제와 같거나 유사)로 나눌 수 있다.
→ 피그마의 프로토타입은 프리뷰 모드, 프레젠테이션 모드 2가지가 존재한다.
프리뷰는 디자인 중에도 바로 실행 가능(shift + space), 프레젠테이션 모드는 공유·프레젠테이션 가능
⑤ 오버 플로우 - 프레임 밖으로 컨텐츠가 넘어가는 것.
→ 오버플로우가 발생하면, 프레임 밖에 있는 컨텐츠를 스크롤로 보여줄 수 있음.
스크롤이 필요하다면? 프레임보다 컨텐츠가 더 길게 있어야 적용 가능!
⑥ 스크롤 컨테이너 - 오버플로우가 생긴 프레임을 스크롤이 가능하게 만들어주는 기능
| No scrolling | 스크롤하지 않음, 기본값 |
| Horizontal | 컨텐츠가 가로로 넘칠 때, 가로 방향으로 스크롤 |
| Vertical | 컨텐츠가 세로로 넘칠 때, 세로 방향으로 스크롤 |
| Both directions | 가로·세로 방향으로 모두 스크롤 |
⑦ 디자인 핸드오프 - 디자인을 제대로 전달하기 위해 의도·규격·속성 등을 개발자와 소통하는 문서.
→ 디자인의 전체적인 구조, 각 프레임의 크기/길이, 여백/간격, 사용된 폰트 및 컬러 스타일 등이 포함된다.
→ 핸드오프를 전달 할 땐 통일된 구성, 최대한 자세하게, 모두가 아는 쉬운 단어로 작성해야한다.
[핸드오프 작성이 어렵다면..]
플러그인을 활용하면 시간을 단축할 수 있다.
🫠 오늘의 회고
오늘은 피그마 기초 완전정복 강의를 완강했다.
분명 어제까지는 할 만했는데, 강의를 끄고 혼자 만들어보려고 하면 머리가 새하얘지는 중이다.
그래서 그런지 계획했던 시간보다 시간을 오버해 사용했다😅
제일 헷갈리는 부분은 부르는 명칭!! 명칭만 아니면 기능적인 부분은 대충 알 것 같은데..
아무래도 정리를 해두고 기억이 안 날 때마다 찾아보면서 공부를 해야할 듯 싶다.
어제 걱정한 1on1은 시간표가 나왔는데, 내 순서까지는 아직 멀어서 한 시름 놨다 하하
+ 티스토리는 왜 글을 쓸 때 나오는 좌우 여백과 업로드하면 나오는 좌우 여백이 다른지??
열 맞춰 적어놓고 업로드하면 다 깨져서 열받아..😡