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

간단 소개

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

AI Summary

카카오페이지 웹의 디자인 시스템 도입 배경
- 기존 컴포넌트 개발 방식의 문제점: 컴포넌트 파편화 및 명확한 설계 기준 부재
- 디자인 시스템을 통해 UI 일관성을 유지하고 재사용성을 높이는 것을 목표
아토믹 디자인 적용 과정 및 문제점
- 아토믹 디자인의 5단계 (Atom, Molecule, Organism, Template, Page) 개념 설명
- Molecule과 Organism 구분 기준의 주관성 문제 발생
- Organism 내에서 약간 다른 디자인 요구사항 발생 시 중복 컴포넌트 증가 및 불필요한 Props 증가 문제
해결 방법 및 추가 노력
- Compound 컴포넌트를 활용하여 Organism 구조 유연성 확보
- UI 모델링을 통해 팀원 간 아토믹 단위 기준 통일
- 디자이너가 작성한 피그마 컴포넌트를 신뢰 가능한 단일 출처로 활용
- 레이아웃 스타일을 아토믹 컴포넌트 외부에서 주입하여 재사용성 극대화