디자인 토큰 & 워크플로우

디자인 시스템 컴포넌트, 베리언트

피그마 오픈카톡방2026. 3. 7.

질문사항

디자인 시스템 구축 시 컴포넌트화를 먼저 진행해야 할까요? 또한, 베리언트(Variants)의 개념과 활용법이 헷갈립니다.

답변

디자인 시스템 구축 시 컴포넌트화의 순서는 프로젝트 상황과 팀의 워크플로우에 따라 달라질 수 있습니다.

Top-down (화면 우선): 일부 디자이너는 몇 가지 핵심 화면을 먼저 디자인하여 전체적인 흐름과 비주얼을 파악한 후, 그 안에서 반복되는 요소들을 컴포넌트화하고 점차 확장해 나가는 방식을 선호합니다. 이는 초기 단계에서 전체적인 맥락을 놓치지 않고 빠르게 결과물을 볼 수 있다는 장점이 있습니다.

Bottom-up (컴포넌트 우선): 다른 디자이너는 버튼, 입력 필드 등 가장 기본적인 UI 요소들을 먼저 컴포넌트화하고, 이를 조합하여 더 큰 컴포넌트(예: 카드, 헤더)를 만들고, 최종적으로 화면을 구성하는 방식을 선호합니다. 이 방식은 일관성을 강력하게 유지하고 재사용성을 극대화하는 데 유리합니다.

하이브리드: 실제로는 두 가지 방식을 혼합하여 사용하는 경우가 많습니다. 핵심 화면을 통해 주요 컴포넌트의 필요성을 파악하고, 동시에 기본적인 컴포넌트들을 구축하며 점진적으로 시스템을 완성해 나갑니다.

베리언트(Variants)는 하나의 컴포넌트 내에서 다양한 상태나 유형을 관리할 수 있게 해주는 기능입니다. 예를 들어, '버튼' 컴포넌트가 있을 때, `primary`, `secondary`, `disabled` 등의 상태나 `small`, `medium`, `large` 등의 크기를 베리언트로 정의하여 하나의 컴포넌트에서 쉽게 전환하며 사용할 수 있습니다. 이는 컴포넌트의 수를 줄이고 관리 효율성을 높이는 데 매우 유용합니다.