웹사이트나 앱 화면을 디자인하다 보면 로그인 버튼, 메인 구매 버튼, 상품 카드 등 거의 동일하게 생긴 요소들이 수십 개 이상 반복되어 쓰이게 된다. 그런데 만약 브랜드의 메인 색상이 파란색에서 초록색으로 바뀌거나, 버튼 모서리의 둥글기(Corner Radius) 값을 4px에서 8px로 바꿔야 하는 상황이 오면 어떻게 해야 할까?
컴포넌트 개념을 모른다면 화면 하나하나를 일일이 찾아다니며 수십 개의 버튼 색상과 테두리를 수동으로 수정해야 한다. 이 과정에서 누락되는 화면이 생기거나 수치가 달라지는 실수가 빈번하게 발생한다.
이런 재앙을 막아주는 피그마의 핵심 기능이 바로 'Component(컴포넌트)'와 'Variant(베리언트)'다. 공통으로 쓰이는 UI 요소를 하나의 '원본 부품'으로 지정해 두고, 필요할 때마다 복사해 사용하며 일괄 관리하는 원리를 알아보자.
디자인 시스템에서 컴포넌트의 작동 원리는 '붕어빵 틀과 붕어빵'의 관계와 완전히 똑같다.
Main Component (원본/붕어빵 틀): 캔버스에서 요소를 선택하고 단축키
Ctrl + Alt + K(맥은Cmd + Option + K)를 누르면 보라색 다이아몬드 4개 모양의 메인 컴포넌트가 생성된다. 화면의 뼈대를 이루는 원본 부품이다.Instance (복사본/붕어빵): 메인 컴포넌트를 복사(
Ctrl + C/V또는Alt드래그)해서 만든 수많은 복사본들이다. 단일 보라색 다이아몬드 아이콘으로 표시된다.
핵심은 '메인 컴포넌트(원본)의 변화는 모든 인스턴스(복사본)에 실시간으로 즉시 반영된다'는 점이다. 원본 버튼의 색상을 초록색으로 바꾸는 순간, 수십 개의 페이지에 뿌려져 있던 복사본 버튼들이 한꺼번에 초록색으로 바뀐다.
반대로 복사본(인스턴스)은 고유의 텍스트 내용(예: '확인', '취소', '장바구니 담기')만 개별적으로 다르게 수정할 수 있다. 구조와 스타일의 통일성은 유지하면서 내용만 다채롭게 채워 넣을 수 있는 것이다.
실무에서는 하나의 버튼도 상태나 형태에 따라 다양한 버전이 필요하다. 기본 상태(Default), 마우스를 올렸을 때(Hover), 누르고 있을 때(Pressed), 비활성화 상태(Disabled) 등 상황에 맞는 형태가 준비되어 있어야 한다.
과거에는 이런 상태들을 '버튼_기본', '버튼_호버', '버튼_비활성화'처럼 개별 컴포넌트로 따로따로 만들어 관리하느라 레이어 창이 복잡해지곤 했다. 이를 깔끔하게 하나로 묶어주는 기능이 바로 Variants(베리언트)다.
유사한 목적을 가진 컴포넌트들을 마우스로 함께 선택한 뒤, 우측 패널에서 [Combine as variants] 버튼을 누르면 하나의 속성 상자 안에 묶이게 된다.
이렇게 베리언트로 묶어두면 우측 패널에서 드롭다운 메뉴나 토글스위치를 딸깍 클릭하는 것만으로 버튼의 상태(State)나 크기(Size: Small, Medium, Large)를 자유롭게 전환할 수 있다. 화면을 디자인할 때 일일이 다른 컴포넌트를 찾아 불러올 필요 없이, 하나의 버튼 속성만 바꿔가며 빠르게 작업할 수 있게 된다.
컴포넌트와 베리언트를 구축할 때 실무에서 꼭 지켜야 하는 관리 습관은 '이름 규칙(Naming)'이다.
컴포넌트 이름에 슬래시(/)를 사용하면 피그마가 이를 자동으로 폴더 구조처럼 인지한다. 예를 들어 컴포넌트 이름을 Button / Primary / Large 형태로 작성하면, 피그마는 [Button]이라는 큰 그룹 안에 [Primary] 스타일의 [Large] 크기 옵션으로 깔끔하게 분류해 준다.
또한 6편에서 배운 오토 레이아웃(Auto Layout)을 먼저 적용한 상태에서 컴포넌트를 만드는 것이 철칙이다.
오토 레이아웃이 적용된 컴포넌트는 복사본(인스턴스) 상태에서 글자가 길어지거나 아이콘이 추가되어도 상자의 여백이 깨지지 않고 자동으로 반응하기 때문에, 완성도 높은 반응형 UI 부품을 구축할 수 있다.
[핵심 요약]
메인 컴포넌트(
Ctrl + Alt + K)는 원본 부품 역할을 하며, 메인 컴포넌트를 수정하면 모든 복사본(인스턴스)에 일괄 반영된다.Variants(베리언트)를 활용하면 버튼의 기본, 호버, 비활성화 등 다양한 상태와 크기 옵션을 하나의 컴포넌트 세트로 묶어 간편하게 전환할 수 있다.
슬래시(
/) 기호를 활용한 명확한 이름 규칙 설정과 오토 레이아웃 기반의 컴포넌트 제작이 수월한 UI 관리의 핵심이다.
[다음 편 예고] 다음 편에서는 피그마에서 완성한 디자인을 실제 웹/앱 화면으로 개발할 때 비율이 깨지는 원인과 '레이아웃 제약(Constraints)' 설정법을 다룹니다.
0 댓글