피그마 기초 완전 정복 - 비디자인 환경 이해 및 비요소 만들기 (컴포넌트와 디자인 시스템 편)

1. 오늘 학습 키워드

- 마스터 컴포넌트
- 인스턴스

- 디자인 시스템

---

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

 

<컴포넌트>

회로를 구성하는 부품들도 회로 구성품(컴포넌트)이라고 부름

 

- 구성품이라는 의미

- 컴포넌트는 디자인과 개발에서 모두 사용되는 개념

- 피그마를 다루는 디자이너들에게는 '피그마로 만든 UI 블록'와 같은 의미임

- UI디자인에서의 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 의미함

- 개발에서는 구현 방식에 따라 의미가 조금 다르게 사용될 수 있음

 

→ 상황에 따라 의미가 달라질 수 있으므로 맥락을 확인하고 사용하는 것이 중요함

 

 

마스터 컴포넌트(Master Component)

피그마에서 마스터 컴포넌트는 ❖ 아이콘이 붙어 있음

 

- 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심

- 반복되는 디자인을 재사용하여 동일한 UI를 빠르게 제작할 수 있음

- 복사된 디자인을 한 번에 수정하고 관리할 수 있음

 

특징
- 마스터 컴포넌트는 원본임 → 변하지 않음

- 원본은 직접 수정하거나 삭제할 수 있음

- 마스터 컴포넌트를 복제하면 인스턴스(컴포넌트의 복제본)가 생성됨

 

 

 

인스턴스(Instance)

인스턴스는 ◇ 아이콘이 붙어 있음 (복제본이라는 의미)

 

- 마스터 컴포넌트의 복제본

- 마스터 컴포넌트를 복사하면 인스턴스가 생기므로 컴포넌트의 속성을 그대로 이어 받음

 

 

 

마스터 컴포넌트와 인스턴스의 관계

1. 컴포넌트를 수정하면 인스턴스에도 반영됨

 

2. 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음

→ 인스턴스를 수정하는 것이 컴포넌트 변경사항을 이어 받는 것보다 우선 적용됨

 

3. 컴포넌트를 지워도 인스턴스는 남아 있음

→ 인스턴스를 편집하거나 수정하려면 컴포넌트를 복구해야 함

 

4. 연결을 해제하면 인스턴스는 컴포넌트와 분리되고 일반 프레임으로 변경됨

→ 연결 해제는 Detach(디태치; 분리하다)라고 부름

 

 

 

<디자인 시스템>

디자인 시스템의 필요성

• 웹과 앱은 하나의 제품(프로덕트)으로 관리됨
• 디자이너는 사용자의 문제를 발견하고 디자인으로 개선함
• 반복적인 UI를 매번 새로 만드는 것은 비효율적임
• 재사용 가능한 UI를 활용하면 작업 속도와 효율을 높일 수 있음
• 여러 디자이너가 동일한 기준으로 UI를 제작할 수 있어야 함
• 디자이너와 개발자가 같은 기준을 공유해야 일관된 제품을 만들 수 있음

 

디자인 시스템의 목적

• 반복적인 UI를 효율적으로 관리함
• 팀 전체의 일관된 이해

 

디자인 시스템의 장단점

장점

• 디자인을 반복적으로 활용할 수 있어 시간과 비용을 절감할 수 있음
  - 반복되는 UI와 컴포넌트를 재사용함으로써 불필요한 작업을 줄어듬
  - 디자이너와 개발자가 더 중요한 업무에 집중할 수 있음
  
  
• 누가 작업하더라도 동일한 품질의 제품을 만들 수 있음
  - 일관된 가이드라인과 규칙을 제공하여 사람마다 다른 방식으로 디자인되는 문제를 줄일 수 있음
  - 팀 전체가 동일한 기준으로 작업할 수 있어 협업 효율성이 높아지고 커뮤니케이션 비용이 감소함

단점

• 다양한 형태의 UI를 하나의 기준으로 통일하는 과정에 많은 시간과 비용이 필요함
  - 디자인 시스템 구축을 위해서는 디자이너뿐만 아니라 개발자와 기획자도 공통된 기준과 맥락을 이해해야 함
  - 팀 전체의 합의와 지속적인 관리가 필요해 구축 과정이 복잡해질 수 있음
  
  
• 실제로 사용하는 UI는 많지 않은데 디자인 시스템 규모만 커져 관리 부담이 증가할 수 있음
  - 디자인 시스템을 유지,보수하고 업데이트하는데 지속적인 리소스가 필요함
  - 기존 디자인 시스템을 우선적으로 활용하게 되어 혁신적인 UI 탐색이 줄어들 수 있음
  - 팀이 정해진 규칙에 지나치게 의존할 경우 유연성과 창의성이 감소할 가능성이 있

 

UI키트 VS 디자인 시스템

비유 1. 단어와 문법

단어와 규칙이 있으면 하나의 문장으로 통일됨

 

비유 2. 재료와 레시피

- UI키트는 단어, 디자인 시스템은 문법

- UI만 있고 규칙이 없다면,  구성원마다 UI를 다르게 이해하고 일관성이 무너짐

 

UI키트

- 사용하는 규칙과 방법 없음, 단순히 UI를 모아둔 것

 

디자인 시스템
- UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서

- UI 자체뿐만 아니라 UI의 규격과 스펙, 사용 사례, 주의 사항 등의 종합적인 제품 가이드라인

 

UI 키트를 사용하는 경우

- 팀 규모가 작고 구성원 간 소통이 원활한 경우
→ 복잡한 디자인 시스템보다 UI 키트 수준으로 관리하는 것이 더 효율적임

 

→ 팀과 제품의 발전 단계에 따라 유연하게 선택해야 됨

 

 

UI 구성 요소

- 예시

• 버튼은 텍스트, 색상, 아이콘, 여백 등 다양한 요소가 결합되어 만들어짐
• 각각의 요소는 단독으로 기능을 수행하지 않음
• 여러 요소가 결합되어 버튼이라는 UI를 구성할 때 사용자가 상호작용할 수 있는 기능이 생김
• UI를 만드는 기초 재료임

 

 

아토믹 디자인 시스템 (Atomic Design System)

 

 

 

- 기초 재료들은 UI를 구성하는 가장 작은 단위, 아토믹 디자인에서는 이를 원자(Atom)에 비유함

- 아토믹 디자인은 작은 원자(Atom) 요소를 결합해 분자(Molecule)를 구성하는 방식으로 UI를 설계함

- 대부분의 디자인 시스템은 원자 요소를 조합해 다양한 UI 컴포넌트를 만듦
→ 버튼, 체크박스, 모달 등

 

---

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

1) 

 학습 과정 도 컴포넌트를 삭제한 후 다시 복구할 때 원본 값이 없는 경우는 어떻게 관리하는지에 대한 궁금증이 생겼다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 디자인 시스템은 컴포넌트 라이브러리와 버전 관리를 통해 변경 이력을 기록하며, 필요 시 이전 버전으로 복구하거나 재사용 가능한 컴포넌트를 다시 적용할 수 있다는 점을 알게 되었다.

2)

 학습 과정에서 UI 키트는 팀 규모가 작고 소통이 원활한 경우에만 사용하는 것인지에 대한 의문이 생겼다.

 이를 해결하기 위해 추가 학습을 진행한 결과, UI 키트는 스타트업이나 소규모 팀뿐 아니라 빠른 프로토타이핑이 필요하거나 제품 복잡도가 높지 않은 경우에도 효율적으로 활용될 수 있다는 점을 알게 되었다.

3)

 학습 과정 도중 아토믹 디자인과 UI 키트의 차이점이 명확하게 이해되지 않았다. 둘 다 버튼, 입력창, 체크박스 등 UI 요소를 다루고 있어 비슷한 개념으로 느껴졌기 때문이다.

 이를 해결하기 위해 추가로 학습을 진행한 결과, 아토믹 디자인은 원자(Atom), 분자(Molecule), 유기체(Organism)와 같이 작은 요소를 조합하여 UI를 설계하는 방법론이며, UI 키트는 이러한 설계 과정을 통해 만들어진 버튼, 모달, 드롭다운 등의 UI 컴포넌트를 모아둔 결과물이라는 점을 알게 되었다. 즉, 아토믹 디자인은 UI를 체계적으로 설계하기 위한 기준과 방법이고, UI 키트는 설계된 UI 요소들의 집합이라는 차이를 이해할 수 있었다.