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

간단 소개

카카오페이지 웹의 디자인 시스템 도입 과정과 아토믹 디자인 적용 시 겪는 문제점, 해결 방안을 제시합니다.

AI Summary

카카오페이지 웹의 컴포넌트 개발 문제점
- 컴포넌트 파편화: 디자인 시스템 내 관리 부재로 스타일이 제각각.
- 설계 기준 미비: 팀원별 자의적 기준, 재사용성 낮은 컴포넌트 발생.
아토믹 디자인 적용과 과제
- 아토믹 디자인: atom, molecule, organism, template, page 5단계로 컴포넌트 분류.
- molecule/organism 구분 주관성: 컨텍스트 유무, UI 요소 기준으로 판단.
- organism 분할 기준 모호성: 영역 정의 주관적, 중복 컴포넌트/props 증가 가능성.
개선 노력
- 컴포넌트 제어 외부 주입: 스토리북 활용, 상태/동작 props 처리.
- 피그마 컴포넌트 활용: 디자인-개발 네이밍 통일, UI 모델링으로 아토믹 단위 합의.
- 레이아웃 스타일 외부 주입: 재사용성 확보.