Ch.14 디자인 토큰과 시스템

원자 디자인과 컴포넌트

Atomic Design의 5계층(Atoms→Pages)을 구분할 수 있다컴포넌트 합성(Composability)의 원리를 이해한다Variants와 Props를 활용한 컴포넌트 API 설계 방법을 설명할 수 있다

버튼 하나로 전체 시스템이 시작됩니다

새 프로젝트를 시작할 때마다 버튼, 입력창, 카드를 처음부터 다시 만듭니다. 디자이너가 수정을 요청하면 30개 파일을 하나씩 고칩니다. 반복되는 이 비효율, 어떻게 해결할까요?

수십 개의 화면과 수백 개의 UI 요소를 어떻게 체계적으로 관리할 수 있을까?

브래드 프로스트의 Atomic Design — 화학의 원자·분자 개념을 UI에 적용하여, 작은 단위에서 큰 화면까지 조립하듯 설계하는 방법론입니다.

article

핵심 내용

UI를 원자부터 조립합니다

Atomic Design은 브래드 프로스트(Brad Frost)가 2013년에 제안한 UI 설계 방법론입니다. 화학에서 원자가 분자를 이루고 분자가 유기체를 이루듯, UI도 가장 작은 단위에서 큰 단위로 합성(compose)해 나갑니다.

Atomic Design 5계층

1. Atoms (원자): 더 이상 분해할 수 없는 최소 UI 요소. 버튼, 입력창, 레이블, 아이콘

2. Molecules (분자): 원자의 조합. 검색바 = 입력창 + 버튼 + 아이콘

3. Organisms (유기체): 분자의 조합. 헤더 = 로고 + 네비게이션 + 검색바 + 프로필

4. Templates (템플릿): 유기체의 배치 구조. 실제 콘텐츠 없이 레이아웃만 정의

5. Pages (페이지): 템플릿에 실제 콘텐츠가 채워진 최종 화면

핵심 원칙: 각 계층은 아래 계층의 조합으로만 구성됩니다. Page는 Template을, Template은 Organism을, Organism은 Molecule을, Molecule은 Atom을 조립합니다.

좋은 컴포넌트는 레고 블록처럼 조립됩니다

합성(Composability)이란 작은 컴포넌트를 조합해 더 큰 컴포넌트를 만드는 원리입니다. 버튼 하나를 잘 만들면 폼, 모달, 카드, 네비게이션 어디에서든 재사용할 수 있습니다. 핵심은 각 컴포넌트가 하나의 책임만 갖는 것입니다.

합성의 원칙: 하나의 컴포넌트 = 하나의 책임 → 어디서든 조립 가능

Variant(변형)은 동일한 컴포넌트의 시각적·기능적 변형입니다. 버튼 하나에 Primary, Secondary, Ghost, Danger 등의 Variant를 두면, 새로운 컴포넌트를 만들 필요 없이 Props 하나로 전환할 수 있습니다.

좋은 컴포넌트 API는 최소한의 Props로 최대한의 유연성을 제공합니다. Props가 10개 이상이면 컴포넌트를 분리해야 한다는 신호입니다.

컴포넌트 설계의 좋은 예와 나쁜 예

Atomic Design에서 '검색바(입력창 + 버튼 + 아이콘의 조합)'는 어느 계층에 해당하는가?

Atomic Design에서 Template과 Page의 차이는 실제 콘텐츠의 유무이다

하나의 컴포넌트에 Props가 많을수록 유연성이 높아 좋은 설계이다

key

primary | secondary | ghost | danger — 시각적 스타일 전환

sm | md | lg — 크기 조절 (토큰 기반 간격·폰트 적용)

true | false — 비활성 상태 (색상 토큰 자동 전환)

선택적 아이콘 위치 (left | right) — Molecule로의 확장

compare_arrows

항목	잘 설계된 컴포넌트	잘못 설계된 컴포넌트
책임	하나의 역할만 담당 (버튼은 클릭 동작만)	여러 역할을 한 컴포넌트에 혼합 (버튼+폼+검증)
Props	3~5개의 명확한 Props (variant, size, onClick)	15개 이상의 Props, 용도 불분명한 플래그 다수
토큰 사용	spacing.md, color.primary 등 토큰만 참조	padding: 16px, color: #3B82F6 하드코딩
합성	다른 컴포넌트와 자유롭게 조합 가능	특정 부모 컴포넌트에서만 작동 (강한 결합)

좋은 컴포넌트 = 단일 책임 + 토큰 기반 + 최소 Props + 자유로운 합성

check_circle

퀴즈와 인터랙션으로 더 깊이 학습하세요