실무에서 바로 쓰는 피그마 7 - 컴포넌트와 인스턴스 : 재사용 가능한 디자인 시스템 구축

 

지난 글에서 오토 레이아웃을 통해 유연하고 반응형인 UI를 만드는 방법을 배웠습니다. 이제 이 오토 레이아웃의 능력을 극대화하고, 나아가 효율적인 디자인 시스템을 구축하는 데 필수적인 개념인 컴포넌트(Components)와 인스턴스(Instances)에 대해 깊이 있게 다룰 차례입니다. 컴포넌트는 재사용 가능한 UI 요소의 마스터이며, 인스턴스는 이 마스터의 복사본입니다. 이 강력한 기능을 마스터하면 디자인의 일관성을 유지하고, 수정 작업을 획기적으로 줄이며, 팀 협업의 생산성을 폭발적으로 높일 수 있습니다.

 

7.1 컴포넌트(Component)란 무엇인가? 디자인 재사용의 시작

Figma에서 컴포넌트는 재사용 가능한 UI 요소들의 마스터 또는 원본입니다. 한 번 만들어서 디자인 파일 전체 또는 팀 라이브러리에서 무한히 복사하여 사용할 수 있는 블록이라고 생각하면 됩니다. 버튼, 입력, 필드, 카드, 내비게이션 바 등 자주 사용되는 모든 UI요소는 컴포넌트로 만들 수 있습니다.

 

7.1.1 컴포넌트의 필요성 및 장점

과거에는 버튼 하나를 디자인해도, 모든 화면에 수동으로 복사하고, 만약 버튼의 색상이나 크기가 변경되면 모든 버튼을 일일이 찾아 수정해야 했습니다. 이는 시간 낭비는 물론, 휴먼 에러로 인한 디자인 불일치를 초래했습니다. 컴포넌트는 이러한 문제를 해결합니다.

• 일관성 유지 : 모든 인스턴스는 마스터 컴포넌트의 속성을 상속받으므로, 디자인 전체의 일관성을 쉽게 유지할 수 있습니다.
• 생산성 향상 : 한 번 컴포넌트를 만들면 무한히 재사용할 수 있으므로, 디자인 작업 속도가 매우 빨라집니다.
• 수정 시간 단축 : 마스터 컴포넌트 하나만 수정하면, 해당 컴포넌트를 사용한 모든 인스턴스에 변경사항이 자동으로 반영됩니다. 이는 대규모 프로젝트에서 디자인 수정 시간을 획기적으로 줄여줍니다.
• 협업 효율성 증대 : 팀원들이 동일한 컴포넌트 라이브러리를 공유함으로써, 각자의 디자인 전체 시스템과 일관성을 유지하게 됩니다. 디자인 시스템 구축의 핵심 기반이 됩니다.
• 개발 효율성 향상 : 개발자는 컴포넌트를 기반으로 코드를 작성할 수 있어, 디자인과 개발 간의 간극을 줄이고 개발 생산성을 높입니다.

7.1.2 컴포넌트 생성 방법

컴포넌트를 만드는 방법은 매우 간단합니다.

1. 컴포넌트화할 요소 선택 : 버튼, 아이콘, 카드 등 컴포넌트로 만들고자 하는 레이어 또는 프레임을 선택합니다.
(일반적으로 오토 레이아웃이 적용된 프레임을 컴포넌트로 만드는 것이 가장 유연합니다.)

2. 생성 방법 :

• 단축키 : Ctrl+Alt+K(Window) / Cmd + Option + K(Mac)
• 상단 툴바 : 상단 툴바 중앙에 있는 Create component 아이콘(마름모 4개 모양) 클릭
• 마우스 우클릭 : 선택된 요소에 마우스 우클릭 > Create component 선택

3. 결과확인 : 컴포넌트가 생성되면 해당 레이어의 아이콘이 보라색의 마름모 4개 모양으로 변경되고, 레이어 패널에서도 같은 아이콘이 표시됩니다. 이는 해당 레이어가 마스터 컴포넌트임을 의미합니다.

7.2 인스턴스(Instance)란 무엇인가? 컴포넌트의 활용

인스턴스는 마스터 컴포넌트의 복사본입니다. 인스터는스는 마스터 컴포넌트의 모든 속성을 상속받지만, 개별적으로 일부 속성을 변경(오버라이드)할 수 있는 유연성을 제공합니다.

 

7.2.1 인스턴스 생성 방법

인스턴스는 마스터 컴포넌트를 복사하여 만듭니다.

1. 마스터 컴포넌트 복사 : 마스터 컴포넌트를 선택한 후 Ctrl(Window)/Cmd(Mac) + C, Ctrl(Window)/Cmd(Mac) + V(복사-붙여넣기)를 하거나, Alt(Window)또는 Option(Mac)키를 누른 채 드래그하여 복사합니다.

2. Assets 패널 활용 : 

• 좌측의 Layers 패널 옆 Assets패널을 클릭합니다.
• Local components 또는 Team library에서 원하는 컴포넌트를 찾아 캔버스나 프레임 안으로 드래그 앤 드롭하여 인스턴스를 생성합니다. 이 방법은 컴포넌트가 많아질수록 효율적입니다.

3. 결과 확인 : 생성된 인스턴스는 레이어 패널에서 빈 마름모 모양 아이콘으로 표시됩니다.

 

7.2.2 인스턴스 오버라이드(Instance Overrides)

인스턴스는 마스터 컴포넌트의 속성을 상속받지만, 개별적으로 다음과 같은 속성들을 오버라이드(Override,덮어쓰기)하여 변경할 수 있습니다.

• 텍스트 내용 : 인스턴스 내부의 텍스트 레이어는 내용을 자유롭게 변경할 수 있습니다.
• 색상 : 채우기(Fill), 선(Stroke)등의 색상을 변경할 수 있습니다.
• 효과 : 그림자(Drop Shadow)등의 효과를 추가하거나 변경할 수 있습니다.
• 크기 : 인스턴스 자체의 크기를 조절할 수 있습니다. (단, 오토 레이아웃이 적용된 경우 내부 요소의 Resizing 설정에 따라 동작이 달라질 수 있습니다.)
• 가시성(Visibility) : 인스턴스 내의 특정 레이어를 숨기거나 표시할 수 있습니다.(레이어 패널에서 눈 아이콘 클릭)
• 컴포넌트 스왑(Component Swap) : 인스턴스 자체를 동일한 종류의 다른 컴포넌트 인스턴스로 교체할 수 있습니다.(예 : 기본 버튼 인스턴스를 보저 버튼 인스턴스로 변경) 이 기능은 컴포넌트 속성(Component Properties)과 함께 사용될 때 매우 강력합니다.

오버라이드된 속성 관리 : 

• 오버라이드 표시 : 오버라이드된 속성은 속성 패널에서 점선으로 된 아이콘으로 표시됩니다.
• 오버라이드 초기화 : 오버라이드된 속성을 원래 마스터 컴포넌트의 값으로 되돌리려면, 해당 속성 옆의 점선 아이콘을 마우스 우클릭하여 Reset all overrides 또는 Reset[속성명] override를 선택합니다.

주의 : 인스턴스 내부에서 레이어의 순서를 변경하거나, 레이어를 추가/삭제하는 등의 구조적인 변경은 불가능합니다. 이러한 변경이 필요하다면 마스터 컴포넌트를 직접 수정해야 합니다.

7.3 베리언트(Variants) : 컴포넌트의 상태 및 종류 관리

베리언트는 컴포넌트의 다양한 상태(State)나 종류(Type)를 하나의 컴포넌트 세트 안에서 효율적으로 관리할 수 있게 해주는 기능입니다. 예를 들어, 버튼 컴포넌트 하나로 기본/호버/활성화 상태와 Primary/Secondary/Danger 타입을 한번에 관리할 수 있습니다.

 

7.3.1 베리언트 생성 방법

1. 마스터 컴포넌트 준비 : 베리언트로 만들 여러개의 마스터 컴포넌트(예 : Button / Primary / Default. Button/Primary/Hover)를 나란히 배치합니다. (각각 별도의 마스터 컴포넌트여야 합니다.)

2. 모든 컴포넌트 선택 : 베리언트로 묶을 모든 마스터 컴포넌트를 선택합니다.

3. 베리언트 생성 : 우측 속성 패널의 Component 섹션에서 Combine as variants 버튼을 클릭합니다.

4. 결과 확인 : 선택된 컴포넌트들이 하나의 큰 보라색 베리언트 컨테이너로 묶이고, 각 컴포넌트에는 Property1=Default와 같은 속성 라벨이 붙습니다.

 

7.3.2 베리언트 속성 정의

베리언트 컨테이너를 선택하면 우측 속성 패널 Variants 섹션에서 속성을 관리할 수 있습니다.

1. 속성 추가(Add new Property) :

• 속성 이름을 입력합니다. (예 :State, Type, Size)
• 각 베리언트 컴포넌트를 클릭한 후, 속성 패널에서 해당 속성의 값을 입력합니다.(예 : State의 값으로 Default, Hover, Pressed 등)
• 슬래시(/)를 사용하여 컴포넌트 이름을 명명했다면(예 : Button.Primary/Default, Button/Secondary/Hover),Figma가 자동으로 속성을 추론하여 생성해줍니다.

2. 인스턴스에서 베리언트 사용 : 

• 베리언트 세트의 인스턴스를 캔버스에 가져다 놓으면, 우측 속성 패널에서 드롭다운 메뉴를 통해 정의한 속성 값들을 쉽게 변경할 수 있습니다.(예 : State : Default를 State : Hover로 변경)
• 불리언 속성(Boolean property, On/off 스위치)을 정의하면 토글 스위치 형태로 나타나 더욱 편리하게 사용할 수 있습니다.(예 : show icon : True / show icon : False)

7.4 컴포넌트 속성(Component Properties) : 인스턴스 유연성의 극대화

컴포넌트 속성은 Figma 2022년 5월에 발표된 기능으로, 베리언트의 다음 단계라고 할 수 있습니다. 인스턴스에서 직접적으로 변경할 수 있는 속성들을 마스터 컴포넌트 수준에서 정의하여 인스턴스 작업의 유연성과 효율성을 극대화합니다.

 

7.4.1 컴포넌트 속성의 종류 및 설정

마스터 컴포넌트를 선택한 상태에서 우측 속성 패널 Component 섹션에서 속성을 추가할 수 있습니다.

1. Text Property(텍스트 속성) :

• 설정 : 마스터 컴포넌트 내부의 텍스트 레이어를 선택하고, 우측 속성 패널 Text섹션 옆의 Create text property아이콘을 클릭합니다. 속성 이름을 지정하고 기본값을 설정합니다.
• 활용 : 버튼 텍스트, 카드 제목 등 인스턴스마다 텍스트 내용이 달라지는 경우 사용합니다. 인스턴스에서 직접 텍스트를 수정할 수 있는 입력 필드가 나타납니다.

 

2. Boolean Property(불리언 속성) :

• 설정 : 마스터 컴포넌트 내부의 특정 레이어(아이콘,이미지 등)을 선택하고 Layer 섹션 옆의 Create boolean property아이콘을 클릭합니다. 속성 이름과 기본값(True/False)을 설정합니다.
• 활용 : 아이콘 표시/숨기기, 체크박스 선택/해제 등 특정 요소의 가시성을 토글해야할 때 사용합니다. 인스턴스에서 토글 스위치 형태로 나타납니다.

 

3. Instance Swap Property (인스턴스 스왑 속성) :

• 설명 : 마스터 컴포넌트 내부의 특정 컴포넌트 인스턴스(예 : 아이콘 컴포넌트 인스턴스)를 선택하고 Instance 섹션 옆의 Create instance swap property 아이콘을 클릭합니다. 속성 이름을 지정하고 기본 인스턴스를 선택합니다.
• 활용 : 컴포넌트 내의 아이콘 종류 변경, 아바타 이미지 변경 등 특정 컴포넌트 인스턴스를 다른 인스턴스로 쉽게 교체해야 할 때 사용합니다. 인스턴스에서 드롭다운 메뉴로 원하는 컴포넌트를 선택할 수 있습니다.

 

4. Variant Property (베리언트 속성) :

베리언트를 만들 때 자동으로 생성되는 속성입니다.

 

7.4.2 컴포넌트 속성의 장점

• 인스턴스 패널 간소화 : 베리언트로 너무 많은 조합을 만드는 대신, 컴포넌트 속성을 활용하여 인스턴스 속성패널을 훨씬 깔끔하고 직관적으로 만들 수 있습니다.
• 유연성 향상 : 인스턴스에서 직접적으로 변경할 수 있는 속성을 정의함으로써, 디자이너는 마스터 컴포넌트를 수정할 필요 없이 인스턴스 수준에서 빠른 변경이 가능해집니다.
• 개발자 핸드오프 용이성 : 컴포넌트 속성으로 정의된 것들은 개발자에게도 명확하게 전달되어, 개발 과정에서 디자인 의도를 더욱 정확하게 반영할 수 있습니다.

7.5 효율적인 컴포넌트 및 디자인 시스템 구축 팁

1. 작은 단위부터 시작 : 처음부터 모든 것을 컴포넌트화하려고 하기보다, 버튼, 아이콘 등 가장 작은 단위의 재사용 가능한 요소부터 컴포넌트를 만듭니다.

2. 오토 레이아웃과 컴포넌트 결합 : 오토 레이아웃으로 만든 유연한 프레임을 컴포넌트로 만들면, 텍스트 내용이나 요소 개수가 바뀌어도 깨지지 않는 강력한 컴포넌트를 만들 수 있습니다. 이는 필수적인 조합입니다.

3. 명명 규칙(Naming Convention) : 컴포넌트와 베리언트 속성명에 일관된 명명 규칙을 적용하여 찾기 쉽고 이해하기 쉽게 만듭니다. 슬래시(/)를 사용하여 계층 구조를 만드세요(예 : Button/Primary/Default, Icon/24px/Home)

4. 컴포넌트 페이지(Component Page) : 모든 마스터 컴포넌트를 별도의 페이지(예 : Components, Design System)에 모아두면 관리하기 편리합니다. 이 페이지는 디자인 시스템의 싱글 소스 오브 투르스가 됩니다.

5. 팀 라이브러리(Team Library) : 팀 프로젝트에서는 반드시 컴포넌트를 팀 라이브러리에 게시하여 모든 팀원이 공유하고 사용할 수 있도록 합니다. 이는 디자인 일관성과 협업 효율성의 핵심입니다.

6. 버전 관리 : 컴포넌트를 수정할 때는 단순히 덮어쓰기보다, 변경 내역을 기록하고 필요하다면 버전 관리 시스템(Figma버전 히스토리 또는 플러그인)을 활용하여 이전 버전으로 돌아갈 수 있도록 합니다.

7. 문서화 : 컴포넌트의 사용 가이드라인, 속성 설명, 사용 예시 등을 함께 문서화하여 팀원들이 컴포넌트를 올바르게 사용할 수 있도록 돕습니다.

8. 플러그인 활용 : 

• Component Replacer : 특정 컴포넌트 인스턴스를 다른 컴포넌트 인스턴스로 쉽게 교체할 수 있습니다.
• Master : 인스턴스에서 바로 해당 마스터 컴포넌트로 이동할 수 있습니다.

7.6 마치며 : 확장 가능한 디자인의 핵심

이번 글에서는 Figma의 컴포넌트, 인스턴스, 베리언트, 그리고 컴포넌트 속성이라는 강력한 기능들을 깊이 있게 다루었습니다. 이 기능들을 마스터하는 것은 단순히 디자인 속도를 높이는 것을 넘어, 확장 가능하고 일관성 있는 디자인 시스템을 구축하는 데 필수적인 역량입니다.

 

컴포넌트와 인스턴스 개념은 처음에는 다소 복잡하게 느껴질 수 있지만, 작은 요소부터 적용해보며 점진적으로 익숙해지는 것이 중요합니다. 이 모든 기능들이 서로 유기적으로 결합될 때 Figma의 진정한 잠재력이 발휘되며, 여러분의 디자인 워크플로우는 혁신적으로 개선될 것입니다.

 

다음 글에서는 프로토타입과 인터렉션 : 사용자 경험 시뮬레이션이라는 주제로, 디자인된 화면들을 연결하여 실제 사용자 흐름을 시뮬레이션하고 인터렉션을 추가하는 방법에 대해 알아보겠습니다. 컴포넌트와 오토 레이아웃으로 견고하게 만든 UI에 생명을 불어넣는 과정이 될 것입니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!