아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹팀이 컴포넌트 파편화와 설계 기준 부재 문제를 해결하기 위해 아토믹 디자인 방법론을 도입하고 디자인 시스템을 구축한 실전 경험을 공유한다. 이론적 정의부터 실제 팀 내 운용 기준까지 단계별로 다루어 디자인 시스템 도입을 고민하는 팀에 실질적 가이드가 된다.

핵심 포인트 - 도입 배경: 디자인 미관리 컴포넌트로 인한 파편화(버튼 스타일이 페이지마다 다름)와 명확한 컴포넌트 설계 기준 부재로 코드 리뷰 어려움 발생 - 아토믹 디자인 5단계: Atom(불가분 기본 요소) → Molecule(SRP 단일 책임 조합) → Organism(서비스 컨텍스트 보유 영역) → Template(와이어프레임 수준 레이아웃) → Page(실제 콘텐츠를 담은 최종 UI) - 선형 프로세스가 아님: 단계별 순서대로 만드는 게 아니라 전체와 부분을 동시에 바라보는 멘탈 모델 - Molecule vs Organism 경계 기준 주관성 문제: 팀 내 합의를 좁히는 데 시간이 많이 소요됨 — 컨텍스트 보유 여부와 Layout 기반 영역 분리로 기준 정립 - 재사용성과 컨텍스트의 트레이드오프: Atom/Molecule은 재사용성 높음, Organism은 컨텍스트 특화로 재사용성 상대적으로 낮음 - UI 모델링 과정: 페이지 스크린샷을 찍고 고유 UI 패턴을 카테고라이징하는 과정으로 팀 공통 멘탈 모델 형성

상세 정리 - Container-Presentational 패턴의 한계: presentational 컴포넌트를 개발자 판단에 맡기면 파편화 심화 - Atom: label, input, button 같은 HTML 기본 요소 수준. 단독 사용보다 상위 단계에서 결합해 가치 발휘 - Molecule의 SRP 원칙: "한 가지 일"만 하는 Molecule은 재사용성, UI 일관성, 테스트 용이성을 동시에 확보 - Organism: header 컨텍스트에 logo(atom) + navigation(molecule) + search form(molecule) 조합 예시 - Template: 실제 콘텐츠 없는 Page 수준 스켈레톤. 와이어프레임으로 레이아웃 구조만 표현 - Page: Template의 인스턴스. 빈 장바구니/10개 담긴 장바구니처럼 다양한 콘텐츠 적용 가능 - 팀 기준 정립 팁: Brad Frost의 아토믹 디자인 플로우(페이지 스크린샷 → UI 패턴 카테고라이징)를 실제 서비스에 적용 - 디자인 시스템은 타이포그래피·컬러 팔레트·레이아웃/그리드 시스템 등 하위 시스템 포함 - 컴포넌트 명명과 분류 기준을 팀 내 문서로 합의해 두면 신규 입사자 온보딩 비용 절감

왜 읽나: 아토믹 디자인의 이론과 카카오페이지 웹팀의 현장 적용 경험을 함께 담아, 디자인 시스템 도입 시 맞닥뜨리는 기준 모호성과 팀 합의 과정을 구체적으로 이해할 수 있다.