아토믹 디자인을 활용한 디자인 시스템 도입기
프론트엔드
아토믹 디자인을 활용한 디자인 시스템 도입기
두줄요약
카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다.\n컨텍스트 기반 분류, Storybook·Figma 연계, 외부 스타일 주입 원칙을 적용했습니다.
문제 상황
- 관리되지 않은 버튼과 스타일로 인한 UI 파편화 및 유지보수 부담
- 컴포넌트 분리 기준 부재로 재사용·확장 어려움과 구조 리뷰 한계
구조와 흐름
- Atom·Molecule·Organism·Template·Page의 다섯 단계로 UI 구성
- Molecule은 단일 책임의 재사용 UI, Organism은 서비스 컨텍스트와 명확한 영역 보유
- Template은 콘텐츠 없는 페이지 스켈레톤, Page는 실제 콘텐츠를 적용한 인스턴스
해결 방법
- 컨텍스트 유무와 SRP를 기준으로 Molecule·Organism 구분, 모호한 경우 리뷰 기반 조정
- 변형이 많은 Organism에 compound 컴포넌트 적용 또는 단위 재정의
- Figma 네이밍 연계, FigJam UI 모델링, Storybook 기반 상태·동작 검증
주의할 점
- 아토믹 디자인 단계를 순차적 분해 절차가 아닌 UI를 바라보는 멘탈 모델로 활용
- 마진·패딩 등 레이아웃 스타일은 컴포넌트 외부 주입으로 재사용성 확보
- 단일 모델링 결과에 고정하지 않고 구현·피드백 과정에서 지속적 구조 개선
