✅ 문제 정의
- 컴포넌트 구조 설계 시 명확한 기준이 없음.
- 팀원들이 각자의 의미있는 기준으로 컴포넌트를 나눔.
- 성격이 비슷한 컴포넌트를 묶어 여러 방법으로 페이지를 표현 가능.
- 제각각인 규칙으로 인해 문제 발생
- 관심사가 너무 많음.
- 재사용이나 확장이 어려운 컴포넌트 발생.
- 기준이 없어서 구조에 대한 코드 리뷰가 어려움.
- 좋은 구조를 가진 컴포넌트를 만들기 어려움.
✅ Atomic design
위와 같은 문제는 디자인 시스템으로 어느정도 해결 할 수 있다고 생각한다. 디자인 시스템을 통해 서비스의 고유한 타이포그래피, 컬러 팔레트 등 이러한 디자인의 기초 요소들을 만들고 이것을 기반으로 공통 컴포넌트를 잘 정의하여 위 문제들을 해결할 수 있다. 카카오 페이지 웹에서는 디자인 시스템 방법론인 아토믹 디자인을 활용하여 디자인 시스템을 구축하고 있다.
디자인 시스템과 아토믹 디자인
brad frost에 따르면 디자인 시스템은 어떤 조직이 디지털 인터페이스를 디자인하고 구축하는 방식에 대한 이야기라고 말한다. 디자인 시스템은 여러가지 하위 시스템을 포함하는데,UI 컴포넌트와variants,타이포그래피 시스템,컬러 팔레트 시스템,레이아웃 / 그리드 시스템등이 있다. 아토믹 디자인은 디자인 시스템을 만드는 방법론이다.
brad frost의 아토믹 디자인 은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 모든 것은 atom(원자)으로 구성되어있고 atom(원자)들이 서로 결합하여 molecule(분자)이 되고, molecule는 더 복잡한 organism(유기체)으로 결합하여 궁극적으로 모든 물질을 생성한다. 아토믹 디자인에서는 이 개념을 차용해서 컴포넌트를 atom, molecule, organism, template, page의 5가지 레벨로 나눈다.
✅ Organism을 나누는 기준
organism은 UI에서 명확한 영역을 갖습니다. 이 명확한 영역에 대한 정의는 주관적이라 여러 가지 방식으로 해석될 수 있다.
극단적으로는 A와 같이 큰 영역을 organism이라고 할 수 있고, B와 같이 비슷한 유형의 책임을 그루핑하여 구분할 수 있다.
A보다는 B와 같이 공통된 컨텍스트를 묶어 organism 컴포넌트로 표현하면 적당한 책임을 가진 컴포넌트를 작성할 수 있다. 예를 들어 CommentListToolbar 컴포넌트의 경우 댓글 데이터를 다루는 책임을 가지고 있다. 또한 Comment 컴포넌트는 레이아웃이나 Comment를 리스트로 표현할 때 여백 처리를 쉽게 할 수 있다.
✅ UI 모델링
디자인된 페이지를 담당 개발자들과 함께 아토믹 컴포넌트 단위와 네이밍을 작성한다.
카카오 페이지 웹에서는 figjam을 이용하여 UI 모델링을 진행한다. 이 작업을 같이 하게되면 논의를 통해 적절한 단위의 아토믹 컴포넌트를 작성할 수 있다. 또한 팀원 간 아토믹 단위에 대한 주관적인 기준을 점점 맞춰나갈 수 있다. 단 한번의 모델링으로 이상적인 아토믹 디자인 단위를 나눌 수 없다. 컴포넌트를 실제 코드로 작성하며 혹은 다른 페이지에서 비슷한 디자인의 컴포넌트가 추가된다면 얼마든지 변경될 수 있다. UI 모델링 외에도 지속적인 커뮤니케이션, 긴밀한 피드백을 통해 이상적인 아토믹 디자인 구조로 나아갈 수 있다.
