카카오페이지 웹, 아토믹 디자인 적용기: 컴포넌트 파편화 해결과 실전 팁

카카오페이지 웹은 기존 Container-Presentational 패턴의 한계로 인해 컴포넌트 파편화와 설계 기준 부재 문제를 겪었습니다. 이에 따라 아토믹 디자인(Atomic Design) 방법론을 도입하여 디자인 시스템을 구축하고, 팀 내 일관성과 재사용성을 확보했습니다.

아토믹 디자인 적용과 겪은 문제

아토믹 디자인은 Atom, Molecule, Organism, Template, Page의 5단계로 컴포넌트를 분류합니다. 하지만 실제 적용 과정에서 Molecule과 Organism을 나누는 기준의 주관성이 주요 장애물로 작용했습니다. 컨텍스트 유무와 단일 책임 원칙(SRP)을 기준으로 삼았으나, 명확한 영역 정의가 모호한 경우 팀원 간 합의에 시간이 소요되었습니다.

또한, 유사하지만 세부 디자인이 다른 컴포넌트(예: 댓글과 대댓글)가 발생할 때 중복 컴포넌트 생성이나 불필요한 Props 증가 문제가 나타났습니다. 이에 대해 카카오페이지 팀은 Compound Components 패턴을 활용하거나, Organism 정의를 재검토하여 유연하게 대처했습니다.

실전 운영 팁 및 해결 전략

카카오페이지는 아토믹 디자인을 효과적으로 정착시키기 위해 다음과 같은 실무 규칙을 적용했습니다.

• 외부 주입 원칙: 컴포넌트의 상태 제어, 이벤트 핸들러, 레이아웃 관련 스타일(마진, 패딩 등)은 컴포넌트 내부가 아닌 외부에서 Props로 주입합니다. 이를 통해 스토리북에서 컴포넌트 상태를 쉽게 확인하고 재사용성을 높였습니다.
• 단일 출처(Single Source of Truth): 디자이너가 작성한 피그마(Figma) 컴포넌트 네이밍을 리액트 컴포넌트 네이밍과 동일하게 유지합니다. 이를 통해 개발자와 디자이너 간 의사소통 오류를 줄이고 효율성을 높였습니다.
• 협업 기반 UI 모델링: **피그잼(FigJam)**을 활용해 개발자와 디자이너가 함께 아토믹 단위와 네이밍을 정의합니다. 한 번의 모델링으로 완벽한 구조를 만들기보다는, 지속적인 피드백과 코드 리뷰를 통해 이상적인 구조로 점진적으로 개선해 나갑니다.