아토믹 디자인 (Atomic Design)
아토믹 디자인은 '화학적 관점'에서 영감을 얻은 디자인 시스템 방법론이다.
작은 단위으 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로써 지속적으로 개발하기 용이하게 하는 방식이다.
💡 모든 것은 atom(원자)로 구성된다.
- atom(원자)들이 결합하여 molecule(분자)를
- molecule(분자)는 더 복잡한 organism(유기체)로 결합
→ 컴포넌트는 atom, molecule, organism, template, page 의 5가지 레벨로 나뉜다.
💡 디자인 단계별로 추상적인 것에서 주체화하는 단계를 가진다.
Atom (원자)
→ 더 이상 분해할 수 없는 가장 작은 단위의 기본 컴포넌트
- lavel, input, button 과 같은 기본 HTML 요소
- 태그 / 글꼴 / 애니메이션 / 컬러 팔레트 / 레이아웃 과 같은 추상적인 개념도 포함 가능 (* 단일 컴포넌트로 사용하기엔 어려운 경우 존재 )
- 어떤 context가 주어지던지 이에 해당하는 컴포넌트가 생성될 수 있어야 한다. ( 추상적이지만 최대한 포용할 수 있게 다양한 상태 필요 )
EX) button_disabled, hover, different sizes...- 마진이나 위치값을 가지고 있지 않는다
⚙️ atom 은 모든 기본 스타일을 한 눈에 보여주므로 디자인 시스템을 개발, 디자인할 때 유용하다.
Molecule (분자)
→ 아래와 같이 atom들을 결합할 경우 button atom 을 클릭하여 form을 전송하는 molecule로 정의할 수 있다
label atom 이 input atom 을 정의하고, button atom을 클릭하면 양식이 제출된다. 그 결과로 검색기능이 필요한 곳이면 어디든지 놓을 수 있는 간편하고 재사용 가능한 구성요소가 탄생했다.
추상적인 atom 들이 결합하면 목적이 생긴다.
⚙️ molecule은 한 가지 일을 하는 것, atom(원자) 의 위치값을 지정하기도 한다.
Organism (유기체)
→ 앞 단계보다 좀 더 복잡하고 서비스에서 표현될 수 있는 명확한 영역과 특정 맥락을 가짐.
- 분자가 되지 않은 atom(원자)이 엮이기도 한다
- organism(유기체)는 분자와 원자의 위치값을 조정한다
우리가 방문하는 거의 모든 웹사이트에서 이러한 유형의 organism(유기체)를 볼 수 있다
Template (템플릿)
→ page 를 만들 수 있도록 여러개의 organism, molecule 로 구성.
실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임.
실제 콘텐츠가 없는 page 수준의 벼대라고 정의할 수 있다
- Layout / Nostyling : 템플릿에는 스타일링이나 컬러는 들어가지 않는다. 페이지의 그리드를 정해주는 역할.
- Template 의 중요한 점 : 최종 콘텐츠가 아니라 페이지의 기본 콘텐츠 구조에 초점을 마추는 것.
디자인 시스템은 콘텐츠의 동적 특성을 성명해야 하므로 제목 및 텍스트 구절의 이미지 크기 / 문자 길이와 같은 구성요소의 중요한 속성을 명확히 해야 한다.
Page (페이지)
→ 유저가 볼 수 있는 실제 콘텐츠를 담고있다. atom 설계의 가장 구체적인 단계.
- 템플릿을 이용해 각 그리드에 컴포넌트를 그려넣는다.
- 태표적인 텍스트, 이미지 및 미디어를 템플릿에 넣어 실제 콘텐츠를 표시한다.
Atomic 디자인의 장점
⭐️ 추상적인 것과 구체적인것을 빠르게 전환 할 수 있다.
⭐️ 인터페이스가 원자적 요소로 세분화 된 것을 동시에 볼수있다.
⭐️ 이러한 요소가 함께 결합하여 최종 경험을 형성하는 방법을 볼 수 있다.
UXUI Designer