아토믹 디자인은 디자인 시스템을 만드는 디자이너들에게 이미 유명한 방법론, 브래드 프로스트(Brad Frost)에 의해 고안되었다.
- 화학적 관점에서 영감을 얻어 세워진 디자인 시스템으로
- 주변의 모든 것들이 atom(원자)로 구성되어 있고, 이것들이 모여 molecule(분자)이 되고, molecule이 모여 organism(유기체)로 결합한다.
- 디자인시스템도 이와 같이 아주 작은 요소들을 정의하고 이 요소들을 결합해 그 다음 상위 요소를 정의하고...이것들을 몇 번 반복하는 것
아토믹디자인과 디자인시스템
- 아토믹 디자인에서는 이 개념을 활용해 atom, molecule, organism, template, page 5가지 레벨로 나눈다.
1. Atom(원자)
- Atom 원자는 물질의 기본 요소이다.
- 아토믹디자인에서 Atom 원자 = 버튼, 인풋, 레이블 과 같이 인터페이스를 구성하는 가장 기초적인 요소로 더 이상 쪼개질 수 없는 것들을 의미한다.
- 그림에는 안 나와있지만 컬러, 폰트, 애니메이션같은 추상적인 요소가 포함되기도 한다. (사실상 정해진 바 없음)
2. molecule(분자)
- 원자들이 모여 분자가 되면 목적을 가지게 된다. 사용자는 분자 요소를 보고 목적을 가진 어떠한 행동을 취할 수 있게 된다.
- 'enter keyword 키워드를 입력하세요' 라는 레이블 atom원자는 인풋 atom을 정의한다. 해당 영역에서 키워드를 입력하라는 인풋 atom 을 설명하고 있다.
- 사용자는 해당 분자를 보고 키워드 입력 후, 검색 버튼 atom 원자를 클릭하는 행동을 취할 수 있다.
3. orgamism (유기체)
- 분자 또는 원자를 조합한 것으로 하나의 유기체로서 독립적인 인터페이스 성격을 가진다.
- 분자+분자 / 원자+분자 / 유기체+유기체 / 유기체+분자 / 유기체+원자...
- 유기체의 그룹도 유기체로 칭하는 것으로 보아 다음 단계인 Template 의 전 단계까지 유기체라고 부르는 것 같다.
- 아래 해더는 검색 인풋 분자 + 로고 원자 + 네비게이션 분자로 구성된다.
4. template 템플릿
- 사진 이미지와 같이 실제 사용되는 컨텐츠를 뺀, 페이지의 뼈대
- 유기체, 분자, 원자 요소들이 레이아웃에 따라 배치된 상태이다.
- 분자와 유기체에 대한 맥락을 제공할 수 있으며 이러한 요소들이 레이아웃 내에서 어떻게 기능하는지 확인할 수 있다.
5. page (페이지)
- 실제 이미지, 글이 포함된, 콘텐츠가 들어간다. 최종 UI 를 볼 수 있는 곳
atom > molecule > organism > template > page 구조
참조 : Atomic Design https://atomicdesign.bradfrost.com/chapter-2/