이 글은 카카오 FE 기술 블로그 '아토믹 디자인을 활용한 디자인 시스템 도입기'를 정리한 글이다.
⭐ 카카오 FE 기술 블로그 '아토믹 디자인을 활용한 디자인 시스템 도입기' 바로가기
✍️ 서론
- container-presentational 패턴을 사용했었다. 그러나 문제가 발생했고 대안을 찾아야 했다.
🥲 카카오 페이지 웹에서 컴포넌트 개발시 겪은 문제
컴포넌트의 파편화
- 디자인시스템에서 관리되지 않는 버튼은, 각 페이지마다 스타일이 제각각일 수 있다.
- 이렇게 하면 유지보수가 어렵고, 디자인부서와의 소통이 번거롭게 된다.
명확한 컴포넌트 설계 기준 미비
- 정확한 규칙없이 팀원마다 각자의 기준으로 컴포넌트를 나누면, 좋지 않은 컴포넌트가 생길 수 있다.
- 기준이 없으므로 컴포넌트 구조에 대한 코드 리뷰를 하기 어렵다.
⚛️ Atomic design
- 디자인 시스템으로 디자인의 기초 요소를 만들고 => 이를 기반으로 공통 컴포넌트를 정의하여 위 문제들을 해결할 수 있다.
- 아토믹 디자인은 화학적인 '원자 -> 분자 -> 유기체' 개념에서 영감을 얻어 만들어졌다.
- 컴포넌트를 atom, molecule, organism, template, page로 나눈다.
Atom
- 더 이상 분해할 수 없는 기분 컴포넌트이다.
- 기본 HTML element : label, input, button
- 추상적인 요소 : 글꼴, 애니메이션, 컬러 팔레트, 레이아웃
Molecule
- 여러 atom을 결합하여 자신의 고유한 특성을 가진다.
ex) buttom atom => button atom을 클릭하여 form을 전송하는 molecule - molecule은 "한 가지 일"을 한다. SRP(Single Responsibility Principle) 원칙을 따라야 한다.
Organism
- 앞 단계보다 좀 더 복잡하지만, 명확한 영역과 특정 컨텍스트를 가진다.
ex) header - 좀 더 구체적이고 복잡하므로 앞 단계에 비해 상대적으로 재사용성이 낮아진다.
Template
- page처럼 여러 organism, molecule로 구성되어 있습니다. 그러나 실체 콘텐츠는 없는 와이어 프레임입니다.
Page
-
template에 실제 콘텐츠를 담고 있다. template의 인스턴스라고 할 수 있다.
-
atomic design은 단계 별로 나아가는 선형적인 프로세스가 아니다. 한 페이지를 전체로서, 또 각각의 콜렉션으로서 이해할 수 있도록 도와주는 멘탈 모델이다.
😊 아토믹 디자인을 적용하면서 겪은 것들
Molecule과 Organism 을 나누는 기준의 주관성
- molecule은 한가지 책임만 지므로 재사용하기 쉽다. 따라서 주로 UI적인 네이밍을 한다.
- organism은 컨텍스트를 가지므로 네이밍에도 컨텍스트가 포함된다.
- 이를 기준으로 판단하기 모호할 경우, 일단 organism으로 작성한 후 코드 리뷰를 통해 적절하게 변경한다.
Organism을 나누는 기준
- 공통된 컨텍스트를 묶어 organism으로 만들면 적당한 책임을 가진 컴포넌트를 작성할 수 있다.
약간 다른 Organism이 있을 때 중복 컴포넌트가 생기거나 불필요한 Props의 증가
- 이런 경우 organism 내에서 compound 컴포넌트를 이용하여 해결책을 찾을 수 있다.
- compound 컴포넌트를 사용하면 컴포넌트 구조에 유연하게 대처할 수 있다.
- 또는, organism 정의를 다시 하거나 다른 단위의 atomic 컴포넌트로 재정의하여 해결할 수 있다.
💨 아토믹 디자인 방법론 이외에 하고 있는 것들
컴포넌트를 제어하는 것들은 아토믹 컴포넌트 외부에서 주입
- 스토리북을 사용하면 상태와 동작을 한눈에 확인하고 유연성과 재사용성이 높아진다.
- UI 상태, 동작에 대한 이벤트 핸들러를 외부에서 처리할 수 있도록 props로 다룬다.
아토믹 컴포넌트의 원천은 디자이너가 작성한 피그마 컴포넌트
- 디자이너의 네이밍과 리액트 컴포넌트의 네이밍을 동일하게 작성하면 빠르고 쉽게 대화가 이루어질 수 있다.
UI 모델링
- 카카오 페이지 웹에서는 figjam을 이용해서 UI 모델링을 진행한다.
- 이 작업을 다른 개발자들과 함께 하면 논의를 통해 적절한 아토믹 컴포넌트를 작성할 수 있다.
레이아웃과 관련된 스타일은 외부에서 주입
- 재사용성을 높이기 위해 마진, 패딩 등의 스타일은 아토믹 컴포넌트에서 정의하지 않고 컴포넌트를 사용하면서 주입하도록 한다.
- 인라인 스타일로 원하는 스타일을 전달하면, 가장 바깥쪽 DOM 요소가 구조 분해 할당을 이용하여 attribute로 받는다.
✍️ 결론
- atomic design 방법론을 무조건 따르기 보다는 개발 및 디자인 환경에 맞는 장치나 규칙을 만들며 디자인 시스템을 구축해나가고 있다.
