Atomic design, 원자에서 페이지까지 디자인을 화학처럼

한 줄로

2013년 프론트엔드 디자이너 브래드 프로스트(Brad Frost)가 화학 비유로 디자인 시스템을 5단계로 나눴습니다. 그 책이 디자인 시스템 분야의 교과서가 됐습니다.

어디서 왔나

2013년, 브래드 프로스트는 자기 블로그에 "Atomic Design"이라는 글을 올렸습니다. 핵심 비유는 단순했습니다.

"디자인은 화학과 같다. 원자가 모여 분자가 되고, 분자가 모여 유기체가 된다. 유기체가 모여 템플릿이, 템플릿에 콘텐츠가 들어가면 페이지가 된다."

5단계입니다.

Atoms(원자)는 더 이상 쪼갤 수 없는 최소 단위입니다. 버튼, 입력 필드, 라벨, 색상 토큰, 폰트. Molecules(분자)는 원자 몇 개의 조합입니다. "라벨 + 입력 + 버튼"이 모인 검색 폼. Organisms(유기체)는 분자가 모인 큰 덩어리입니다. 헤더, 카드 리스트, 푸터. Templates(템플릿)은 페이지의 골격. 콘텐츠 없이 레이아웃만. Pages(페이지)는 실제 콘텐츠가 들어간 완성 화면입니다.

이 글이 너무 큰 반응을 얻어서 프로스트는 2016년 Atomic Design 책을 출간했습니다. 이 책 이후로 모든 디자인 시스템(Material, Carbon, Polaris, Lightning)이 사실상 atomic 구조를 따릅니다.

지금 우리가 쓰는 방식

컴포넌트 라이브러리 구조: Storybook의 폴더 구조도 atoms/molecules/organisms로 나누는 경우가 흔합니다. 디자인 토큰 = atom: 색상, 간격, 폰트 변수를 가장 아래 레이어로. 테스트 단위: 단위 테스트는 atom과 molecule 단위, E2E는 page 단위입니다.

바이브 메이커가 챙길 한 가지

Atomic design의 진짜 가치는 "분류"가 아니라 "재사용 단위를 정의하는 어휘"입니다. 새 화면을 만들 때 "버튼 하나 더"가 아니라 "이건 atom인가 molecule인가"를 묻는 순간, 디자인 시스템이 자라기 시작합니다.

관련

Design tokens · Component library · Material Design