Atomic Design

1. Atomic Design 등장 배경

다양한 기기에서 웹 환경 제공으로 일관된 사용자 경험 제공이 더욱 중요해 짐
프로젝트 규모가 커질수록 디자인 요소 관리와 UI의 일관성 유지 중요성 대두
UI를 물질의 가장 작은 단위인 원자(atom)처럼 최대한 쪼개고, 그것들을 조합하고 점진적으로 확장시켜 일관성 있는 디자인 시스템을 구축하는 것을 목표로 하는 프론트엔드 개발 방법론이 등장 by. 웹 디자이너 Brad Frost

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

원자(Atoms)

디자인의 가장 기본적이고, 더 이상 쪼갤 수 없는 구성 요소를 의미
인풋, 라벨, 아이콘, 버튼 등의 예시가 이에 해당

분자(Molecules)

원자들이 모여 하나의 단위로 작동하는 UI의 집합
분자는 원자들이 결합하여 더 복잡한 구조를 이루는 중간 단계
제목에 따라 해당 분자의 목적(입력값)이 달라지듯, 기능에 따라 분자들 재사용 가능

유기체(Organisms)

원자로 구성된 분자와 달리 유기체는 원자 및 분자 더 나아가 유기체로도 구성될 수 있는 조금 더 복잡한 UI 구성 요소
일반적으로 페이지의 특정 섹션 e.g.) 헤더와 사이드바 같은 것들

템플릿(Templates)

페이지 레벨의 레이아웃을 구성하는 요소
원자와 분자 그리고 유기체를 이용해 페이지에 들어갈 요소들을 만들었다면, 템플릿은 이러한 요소들의 배치와 페이지의 전체적인 구조를 정의해, 일관된 사용자 경험을 제공
즉, 요소들이 어떻게 배치되고 상호작용하는지를 정의 가능

페이지(Pages)

아토믹 디자인에서는 데이터와 디자인의 분리가 중요하기에, 데이터 없이 단순한 UI 요소들의 집합으로 템플릿, 데이터와 디자인이 합쳐진 요소를 페이지로 구분
따라서 페이지는 복제한 템플릿에 실제 콘텐츠들을 채워 넣은 요소로 완성된 UI의 모습을 담고 있음
따라서 아토믹 디자인에서 페이지는 가장 구체적인 단계라고 볼 수 있으며 사용자에게 보이는 최종 결과물 확인 가능

3. 아토믹 디자인의 장점

모듈화와 재사용성
유지 보수의 편리함
확장성