아토믹디자인 (atomic design)
쉽게 풀면
아주 작은 부품(원자)부터 시작해서 그것들을 조합해 더 큰 화면 단위로 쌓아 올리는 방식으로 디자인 시스템을 만드는 방법이에요. 그래서 작은 부품부터 시작해서 점점 큰 화면을 조립해 나가는 방식이에요.
왜 중요한가
아토믹 디자인은 UI를 원자(버튼·입력창)→분자→유기체→템플릿→페이지의 다섯 층위로 나누어 조립하는 방법론으로, 디자인 시스템과 컴포넌트 라이브러리의 구조를 설명하는 공통 어휘가 되었습니다. 작은 단위의 변경이 전체에 일관되게 전파되도록 하여 디자이너와 개발자가 같은 조립 단위로 대화할 수 있게 합니다. 작은 요소부터 큰 화면까지 체계적으로 구성해 디자인 시스템의 확장성을 높인다.
논문에서는 이렇게 쓰입니다
가장 작은 단위부터 점진적으로 조합해 복합 컴포넌트를 구성한 디자인 시스템 설계 절차를 설명한다.
이 방법론이 궁극적으로 지향하는 목표가 일관성과 재사용성 확보임을 설명한 문장입니다.
조금 더 깊게 보면
이 방법론은 Brad Frost가 2013년 제안했고, 그 자신도 화학 은유는 사고 도구일 뿐 다섯 층위를 엄격히 지키는 것이 목적은 아니라고 밝혔습니다. 실무에서는 어떤 부품이 분자인지 유기체인지 논쟁으로 시간을 쓰는 것이 흔한 함정입니다. 또한 아토믹 디자인은 시각 컴포넌트 구조를 다루지 디자인 토큰 같은 값의 층위나 콘텐츠 전략은 다루지 않으므로, 디자인 시스템 전체의 방법론으로 보기에는 범위가 좁습니다. 아토믹 디자인은 더 이상 나눌 수 없는 최소 단위인 원자부터 이를 조합한 분자, 유기체 순으로 요소를 쌓아 올리는 위계를 제안해, 디자인 시스템 구축 시 요소 간 재사용 관계를 명확히 한다. 이 위계는 화학의 비유를 빌린 것일 뿐 실제 화학 구조를 반영하지는 않으며, 어디까지를 원자로 볼지는 팀마다 다르게 정의된다.
주의할 점
아토믹디자인의 계층 구조를 지나치게 엄격하게 적용하면 실제 화면 구성의 유연성이 떨어지고 관리 복잡도가 증가할 수 있다. 원자 단위를 어디까지로 볼지 팀마다 기준이 달라 일관성 있게 적용하기 어려울 수 있다.