Moait
홈인기 피드모든 블로그모든 태그
홈인기 피드모든 블로그모든 태그
아토믹 디자인을 활용한 디자인 시스템 도입기 섬네일

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

카카오엔터테인먼트 favicon카카오엔터테인먼트·Frontend·
ReactJavaScriptStorybookAtomic Design
2022년 05월 05일0

AI 요약

이 글은 AI가 요약했어요. 정확한 내용은 꼭 원문을 확인해 주세요!

핵심 요약

카카오엔터테인먼트의 카카오페이지 웹은 아토믹 디자인과 디자인 시스템 도입으로 컴포넌트 파편화와 스타일 불일치를 개선하고, 스토리북·피그마 기반 UI 모델링으로 재사용성과 협업 효율성을 높이려 했다.

주요 경험

  • 컨텍스트 기반 네이밍(Atom/Molecule/Organism) 규칙 수립으로 의사소통 개선
  • Compound 컴포넌트로 Organism의 유연성 확보
  • 레이아웃 주입으로 스타일 재사용성 강화 및 스토리북 운영

얻은 인사이트

  • 주관적 분할은 팀 합의로 보완 필요
  • figjam·피그마 네이밍 싱크가 협업 효율 높임
  • 재사용성 향상을 위한 외부 스타일 주입 접근이 효과적

연관 피드

%가 높을수록 이 글과 비슷할 가능성이 높아요!
합성 컴포넌트로 재사용성 극대화하기 섬네일
77%

합성 컴포넌트로 재사용성 극대화하기

카카오엔터테인먼트 favicon카카오엔터테인먼트·2022년 07월 31일
스토리북 작성을 통해 얻게 되는 리팩토링 효과 섬네일
76%

스토리북 작성을 통해 얻게 되는 리팩토링 효과

카카오엔터테인먼트 favicon카카오엔터테인먼트·2022년 06월 09일
사용자 경험과 성능 개선 방법 in 카카오웹툰 섬네일
74%

사용자 경험과 성능 개선 방법 in 카카오웹툰

카카오엔터테인먼트 favicon카카오엔터테인먼트·2022년 01월 20일