피그마 기초 완전 정복 - 컴포넌트 심화 활용 (컴포넌트 조합과 관리 편)

1. 오늘 학습 키워드

- 합성 컴포넌트

- 네스티드 인스턴스

- 탭 컴포넌트

- 컴포넌트 합치기

- 컴포넌트 분리하기

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<합성 컴포넌트 (Compound Component)>

- 여러 컴포넌트와 파운데이션 요소를 조합해 만든 컴포넌트

- 일반적인 계층 구조를 벗어나 컴포넌트를 조합하는 예외 상황
→ 원칙적으로는 파운데이션 → 컴포넌트 → 더 큰 컴포넌트 순으로 구성됨

- 복잡한 UI를 하나의 단위로 관리하여 재사용성과 일관성을 높일 수 있음

-  대표적인 예시
버튼, 카드, 리스트, 탭, 다이얼로그, 바텀시트 등과 같은 복잡한 구조의 컴포넌트

 

 

- 버튼은 폰트, 컬러, 여백, 곡률 등의 파운데이션 요소를 조합해 만든 컴포넌트

 

 

<네스티드 인스턴스 (Nested Instance)>

- Nested - 감싼, Nest - 둥지 = 둥지 안에 있듯이 다른 컴포넌트 안에 들어가 있다는 의미

- 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 직접 조작할 수 있게 해주는 기능
- 네스티드 인스턴스가 가진 컴포넌트는 대부분 합성 컴포넌트임

→ 컴포넌트 내부에 다른 컴포넌트들이 들어가 있기 때문

 

네스티드 인스턴스를 사용하는 이유

• 컴포넌트를 만들면 컴포넌트에 프로퍼티를 적용할 수 있음
  - 텍스트 프로퍼티, 불리언 프로퍼티, 인스턴스 스왑, 배리언츠 등
• 프로퍼티는 해당 컴포넌트를 선택한 후 프로퍼티 패널에서 수정할 수 있음
• 컴포넌트가 다른 컴포넌트의 구성 요소로 사용되면 하위 컴포넌트를 직접 선택해야 하는 불편함이 발생
  → 네스티드 인스턴스, 감싼 인스턴스 기능을 사용해 불편함을 완화시킴
• 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 제어할 수 있도록 하는 기능이 있음

 

 

 

<탭 컨포넌트>

- 네비게이션 컴포넌트의 한 종류

- 현재 화면을 전환해주는 요소

 

 

탭의 구조

- 탭 메뉴 → 개별 탭 아이템

- 탭 → 여러 탭 메뉴를 묶어 구성한 컴포넌트

1. 인디케이터(Indicator)

- 탭이 선택되어 있는지 알려주는 표시자

 

2. 라벨/레이블(Label)

- 탭 제목을 나타내는 텍스트, 탭 이름이라고도 부름

 

 

탭 디자인의 다양성

- 서비스마다 다양한 디자인 형태로 구현함

- 선택된 탭과 선택되지 않은 탭을 명확하게 구분할 수 있어야 함

- 사용자가 현재 선택된 위치를 쉽게 인지할 수 있다면 다양한 디자인을 적용할 수 있음

 

 

탭 메뉴 만들기

 

 

탭 만들기

 

 

 

<컴포넌트 합치기>

1. 별개의 컴포넌트들을 하나의 컴포넌트로 합치기

 

2. 컴포넌트 셋에 개별 컴포넌트를 새로 추가하기

 

 

 

<컴포넌트 분리하기>

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정 도중 합성 컴포넌트를 과도하게 사용하는 경우의 단점이 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 컴포넌트 구조가 지나치게 복잡해지면 관리가 어려워지고 프로퍼티 설정도 복잡해질 수 있어 적절한 수준의 분리가 중요하다는 점을 이해하게 되었다.

2)

 학습 과정 도중 탭 메뉴 제작 시 발생하는 오류가 무엇인지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 컴포넌트가 아닌 프레임으로 작업하거나 배리언트, 네스티드 인스턴스를 잘못 설정하는 경우가 대표적인 원인이라는 점을 이해하게 되었다.

3)

 학습 과정 도중 컴포넌트를 합치고 분리하는 과정에서 흔히 발생하는 오류가 무엇인지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 컴포넌트가 아닌 일반 프레임을 선택해 Combine as Variants가 활성화되지 않거나, 컴포넌트 셋 외부에 잘못 드래그하여 의도하지 않은 위치에 배치되는 경우가 대표적인 오류라는 점을 알게 되었다. 따라서 작업 전 대상이 컴포넌트인지 확인하고, 레이어 구조를 함께 점검하는 것이 중요하다는 점을 이해하게 되었다.