아토믹 디자인 이해하기 2탄

7 min readOct 6, 2022

사내에서 아토믹 디자인을 도입하기위해 hand-on 프래그램을 준비했습니다. 프로그램이 어떻게 진행되었는지 공유합니다. 아토믹 디자인에 대한 이해도를 높이고 디자인 시스템에 방법론을 도입하고자하는 디자이너분들에게 도움이 되었으면 합니다.

1. 목적

아토믹 디자인 멘탈 모델에 대한 이해를 높이고 우리 제품에 적용할 수 있는 기준을 설정합니다.

(디자인) 신규 프로젝트에서 처음부터 아토믹하게 디자인을 해야하나요?

아닙니다. 아토믹 디자인의 각 단계는 선형(linear) 프로세스가 아니기 때문. 일단 한 두 페이지가 완성되면 그 안에서 패턴을 찾고 개별 요소 정의 → 신규 프로젝트에서는 디자인 토큰을 이용해서 디자인 시작

글로벌 아톰은 어떻게 하나요?

(유영) 현재 글로벌하게 쓰이는 것이 없으니 고려하지 않는 것이 맞다고 생각. 이후에 여러 프로덕트에서 쓰이는 아톰들이 생긴다고 하면 그 때 정리.

디자인 토큰의 범위

디자인 토큰은 비주얼 벨류(visual value)라고 할 수 있음. 이후에 디자인 토큰을 가지고 만든 최소한의 UI 조각을 아톰이라고 할 수 있음. 주로 global token들은

typography, color, shadows, opacity
border, animation curves
spacing, transition, media-query (breakpoint), z-index
(유영) 아이콘은 전 프로덕트에 global하게 쓰이냐, 각 프로덕트별로 따라 쓰이냐에 따라 달라질 것 같음. 다음 주에 디자인팀에서 아이콘에 대해서 논의를 하니, 결정된 사항이 생기면 전달할 예정.

(디자인) 아이콘 있는 버튼의 특수성

보통 버튼은 아톰에 속함. 그런데 아이콘과 텍스트가 함께 있는 버튼은 더 쪼갤 수 있지 않냐는 의견이 있음. → 버튼은 아이콘이 있던 없던 아톰으로 생각. 아이콘의 유무는 버튼의 하나의 속성으로 봄.

아토믹 디자인 멘탈 모델의 각 단계에서 우리가 적용할 단계들은?

실습해보고 논의

molecule = 1SRP (Single Responsibility Principle)

SRP는 하나의 모듈은 하나의, 오직 하나의 액터에 대해서만 책임져야 한다는 것을 의미하는 디자인 원칙

organism = 서비스에서 Layout을 기준으로 나눌 수 있는 영역

위 기준으로 판단하기 모호할 경우에는 일단 organism으로 작성한 후에 리뷰를 통해 적절하게 변경 논의

B와 같이 공통된 컨텍스트를 묶어 organism 컴포넌트로 표현하면 적당한 책임을 가진 컴포넌트 작성 가능.

네이밍

하나의 organism에 유형이 더 추가 될 때 고려할 수 있는 옵션

리액트의 신뢰 가능한 단일 출처(single source of truth)를 차용하여 디자이너가 작성한 네이밍을 리액트 컴포넌트의 네이밍과 동일하게 작성

디자이너와 개발자가 동일한 이름을 가지고 빠르고 쉽게 대화
EX. 프로필 설정 페이지의 저장 버튼이 아닌 “solid button”, “Bottom Fixed Button” 이라는 공통된 네이밍으로 의사소통

디자인된 페이지를 디자이너와 개발자가 함께 아토믹 컴포넌트 단위와 네이밍 작성

단 한 번의 모델링으로 이상적인 아토믹 디자인 단위를 나눌 수는 없음. 실제 코드로 작성하며 또는 비슷한 디자인의 컴포넌트가 추가되며 얼마든지 변경될 수 있음.

(개발) 레이아웃과 관련된 스타일은 외부에서 주입

재사용성을 높이기 위해 margin, padding, width 등과 같은 스타일은 아토믹 컴포넌트에서 정의하지 않고 사용하는 곳에서 레이아웃을 지정할 수 있도록 합니다.
(유영) 모든 스타일말고 어디에 배치되느냐에 따라 달라 질 수 있는 스타일 한정. default style은 디자이너가 지정하고 재사용성 고려하여 변경될 수 있는 스타일은 props로 다룰 수 있게.