프론트엔드
아토믹 디자인을 활용한 디자인 시스템 도입기
두줄요약
카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다.\n단위 구분의 주관성은 UI 모델링·코드 리뷰·compound 컴포넌트로 보완했습니다.
문제 상황
- 관리되지 않은 버튼·스타일로 인한 UI 파편화와 유지보수 비용
- 컴포넌트 분리 기준 부재로 인한 재사용·확장·코드 리뷰의 어려움
구조와 흐름
- atom·molecule·organism·template·page의 5단계로 UI 구성 요소 모델링
- 컨텍스트와 단일 책임 기준으로 molecule·organism 구분
- template을 콘텐츠 없는 페이지 스켈레톤, page를 실제 콘텐츠 인스턴스로 정의
주의할 점
- 아토믹 디자인 단위 구분의 주관성으로 인한 팀 내 기준 조율 필요
- 유사 organism의 중복 또는 조건성 props 증가 가능성
- 단계별 선형 구현 절차가 아닌 UI 전체와 부분을 함께 보는 멘탈 모델
적용해볼 점
- compound 컴포넌트와 단위 재정의로 변형 UI와 구조 변화 대응
- Storybook 기반 상태·이벤트 외부 주입, Figma 네이밍 연계, FigJam UI 모델링 활용
- 마진·패딩 등 레이아웃 스타일을 외부에서 주입해 컴포넌트 재사용성 확보
