아토믹 디자인

디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해 디자인을 구성하는 방식을 의미해요.

마치 레고 블럭같은 느낌이죠!

하나의 레고 블럭을 다른 레고 블럭과 조합해 최소한의 구성이 완성되고 여러 레고 블럭을 조합하면 할 수록 완성도가 높아지는 모습을 생각하면 좋을 듯 해요.

아토믹 디자인 개념

• Atoms (원자) : button, input text 등의 최소한의 컴포넌트
• Molecules (분자) : Atoms의 조합으로 만들어져 하나의 목적을 수행
• Organisms (유기체) : Molecules의 조합으로 Interface의 개별적인 영역
• Templates (템플릿) : 컴포넌트를 배치, 설계 구조를 보여줌으로 인해 실제 UI의 레이아웃을 담당
• Pages (페이지) : Templates의 레이아웃을 뼈대로 실제 컨텐츠로 구성하여 구체화한 모습

ATOMS

MOLECULES

ORGANISMS