Atomic Design

1. Atomic Design 등장 배경

• 다양한 기기에서 웹 환경 제공으로 일관된 사용자 경험 제공이 더욱 중요해 짐

• 프로젝트 규모가 커질수록 디자인 요소 관리와 UI의 일관성 유지 중요성 대두

• UI를 물질의 가장 작은 단위인 원자(atom)처럼 최대한 쪼개고, 그것들을 조합하고 점진적으로 확장시켜 일관성 있는 디자인 시스템을 구축하는 것을 목표로 하는 프론트엔드 개발 방법론이 등장 by. 웹 디자이너 Brad Frost

2. 아토믹 디자인의 구성 요소

원자(Atoms)

• 디자인의 가장 기본적이고, 더 이상 쪼갤 수 없는 구성 요소를 의미

• 인풋, 라벨, 아이콘, 버튼 등의 예시가 이에 해당

분자(Molecules)

• 원자들이 모여 하나의 단위로 작동하는 UI의 집합

• 분자는 원자들이 결합하여 더 복잡한 구조를 이루는 중간 단계

• 제목에 따라 해당 분자의 목적(입력값)이 달라지듯, 기능에 따라 분자들 재사용 가능

유기체(Organisms)

• 원자로 구성된 분자와 달리 유기체는 원자 및 분자 더 나아가 유기체로도 구성될 수 있는 조금 더 복잡한 UI 구성 요소

• 일반적으로 페이지의 특정 섹션 e.g.) 헤더와 사이드바 같은 것들

템플릿(Templates)

• 페이지 레벨의 레이아웃을 구성하는 요소

• 원자와 분자 그리고 유기체를 이용해 페이지에 들어갈 요소들을 만들었다면, 템플릿은 이러한 요소들의 배치와 페이지의 전체적인 구조를 정의해, 일관된 사용자 경험을 제공

• 즉, 요소들이 어떻게 배치되고 상호작용하는지를 정의 가능

페이지(Pages)

• 아토믹 디자인에서는 데이터와 디자인의 분리가 중요하기에, 데이터 없이 단순한 UI 요소들의 집합으로 템플릿, 데이터와 디자인이 합쳐진 요소를 페이지로 구분

• 따라서 페이지는 복제한 템플릿에 실제 콘텐츠들을 채워 넣은 요소로 완성된 UI의 모습을 담고 있음

• 따라서 아토믹 디자인에서 페이지는 가장 구체적인 단계라고 볼 수 있으며 사용자에게 보이는 최종 결과물 확인 가능

3. 아토믹 디자인의 장점

• 모듈화와 재사용성

• 유지 보수의 편리함

• 확장성