[피그마 강의] 3주차: 컴포넌트와 인스턴스, 디자인 시스템, UI 디자인 기본 이해하기

 

3-5) 마스터 컴포넌트와 인스턴스

 

컴포넌트란?

• 구성품이라는 뜻을 가지고 있으며, 파운데이션을 조합해 만들어지는 구성품을 이야기한다. 
• 컴포넌트는 디자인과 개발에서 모두 쓰인다. 
• 디자인에서는 피그마로 만든 UI 블록과 같은 말로 사용한다. 
• UI 디자인에서는 파운데이션을 조합해 만든 디자인 단위의 개념이다. 

 

마스터 컴포넌트란?

• 컴포넌트 기능의 핵심이다. 
• 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해준다. 
• 마스터 컴포넌트는 원본이며 변하지 않는다. 
• 원본 그대로이기 때문에 수정이 필요하면 수정하면 되고, 지우고 싶으면 지워도 된다. 
• 마스터 컴포넌트를 복제하면 ▶️ 복제본, 인스턴스가 생긴다. 

 

인스턴스

• 인스턴스는 마스터 컴포넌트의 복제본이다. 
• 마스터 컴포넌트를 복사하면 ▶️ 인스턴스가 생긴다. (= 컴포넌트의 속성을 그대로 이어받는다. )
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

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

• 편의상 마스터 컴포넌트를 컴포넌트라고 부른다. 
• 컴포넌트를 수정하면 ▶️ 인스턴스에도 반영된다. 
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

• 인스턴스를 먼저 수정하면, 컴포넌트를 수정해도 반영되지 않는다. (인스턴스 수정이 컴포넌트 변경보다 더 우선이다.)
• 컴포넌트를 지워도 인스턴스는 남아 있음. but 인스턴스 편집하려면 컴포넌트 복구해야 한다. 
• 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경된다. (연결해제 = Detach 분리하다)

 

 

3-6) 디자인 시스템의 이해

 

디자인 시스템이 필요한이유

• 웹 사이트나 앱을 디자인 하는 데, 이 웹과 앱을 제품(프로덕트)라고 부른다.
• 빠르게 디자인을 반복하면 UI를 매번 새로 만들기 어렵고, 문제가 뭔지 파악할 시간도 부족하다.
  ▶️ 이때 UI를 만들어 놓고 필요할 때 가져와서 사용하면 편하다.
• 하지만 다른 디자이너, 개발자와도 일해야 한다. 즉, UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야 한다. 

 

디자인 시스템의 목적

• 반복적인 UI를 미리 만들어서 효율적으로 사용 가능 가능하다. 
• 일관된 사용법을 지킬 수 있고 팀 전체가 같은 정도로 이해하고 만들 수 있다. 

 

UI 키트와 디자인 시스템의 차이

• UI 키트: 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않는다. 
• 디자인 시스템: UI의 구조, 쓰는 방법, 유의해야하는 부분까지 상세하게 적혀있는 문서다.
  • 디자인 시스템은 문서의 형태를 갖추고 있다.
  • 디자인 시스템은 UI 자체 뿐만 아니라, UI의 규격과 스펙, 사용 사례, 주의사항 등이 총망라된 종합적인 제품 가이드라인이다. 

 

디자인 시스템의 장단점

• 디자인 시스템은 팀 전체의 속도와 효율을 위해서 만들지만, 간혹 효율을 떨어뜨리는 경우가 생길 수 있다.
• 장점:
  • 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어든다.
  • 누가 만들어도 동일한 품질의 제품을 설계할 수 있다. (주관적인 판단이 들어가지 않아 통일됨!)
• 단점:
  • 다양한 형태의 UI를 모아 하나로 통일하는 과정이 오래걸린다. 
  • 필요한 건 몇 개 없는데 비해 UI가 과하게 많아질 수 있다. 
  • 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려보면 혁신이 줄어든다. (디자인 시스템을 활용하려다 보니 새로운 아이디어나 다양한 형태의 UI를 만드는 것에 대해 소극적으로 변하게 됨)

 

디자인 시스템의 구성 요소와 원리

• UI를 구성하고 있는 요소: color, radius, spacing, font, icon
  
  
• 이 요소들은 그 자체로는 기능을 가지고 있지 않는다. 이 요소들을 모아서 버튼이라는 UI로 결합해야 '눌러서 작동시킨다'라는 기능이 생긴다. 
• 즉, 위 요소들은 기능을 가지고 있진 않지만, UI를 만드는 기초 재료들이다. 
• 원자를 모아서, 분자를 만드는 게 아토믹 디자인 시스템의 핵심 개념이다. (수소와 산소라는 재료이자 원자들을 합쳐 '마실 수 있는 물' 분자를 만드는 개념, 아토믹 디자인 시스템: 원자를 결합하는 개념의 디자인 시스템)
• 참고하면 좋은 다른 회사의 디자인 시스템 (-> 시간 날 때, 아티클 찾아볼 때 등등 살펴보기!) 

🌟 머티리얼 디자인

Material Design

 

🌟 라인디자인 시스템

LINE Design System for Messenger

 

🌟 밀리의 서재 디자인 시스템

millie Design Library 2.0

 

🌟 라이트닝 디자인 시스템

Lightning Design System 2

 

🌟 디자인 시스템 DB

Design Systems Database & Gallery

 

 

3-7) UI 디자인 기본

 

UI의 분류

· 크게 6가지 정도로 분류할 수 있다. 

• 액션: 사용자가 중요한 행동을 수행할 때 
• 인풋: 사용자의 입력을 받을 때 (= 텍스트 필드, 셀렉트 박스)
• 인포메이션: 사용자에게 안내 사항이나 서비스 상태 전달할 때 (= 토스트 메시지, 스낵바, 라벨)
• 컨테이너: 컴포넌트가 여러 개 결합되어 하나의 덩어리를 이루는 컴포넌트
• 내비게이션: 사용자가 페이지를 이동할 때
• 컨트롤: 사용자가 설정이나 값을 수정할 때

 

의사상태

· 컴포넌트에게도 별명이 있다. 

• 애칭이나 별명으로 불린다고 '나'는 바뀌거나 사라지지 않는다. 
• 컴포넌트도 마찬가지로 기본 자체는 유지한 채, 상황에 따라 다른 스타일을 가지는 경우가 있는데, 그런 다른 스타일을 의사상태 라고 한다. 

· 의사상태에서 의사란 가짜의, 가상의 라는 뜻이며, 컴포넌트의 가상의 상태를 표시할 때 사용한다. 

· 예시: 버튼에 마우스를 호버하면 색깔이 바뀌는 것 = 실제 버튼이 다른 걸로 바뀐 게 아니라 버튼이 가진 가상의 상태를 나타내는 것이다.