🎨 디자인 측면에서의 Atomic Design
Atom
단일 Atom은 각 특성에 의해 형성된 특정한 모양의 띈다. 위 그림은 하나의 UI 기능을 가진 하나의 원자 기호를 나타내며, 특정 기호는 어떤 UI 기능이든 할당될 수 있다.
( 버튼, 레이블, 텍스트 필드와 같은 고유한 속성을 할당 )
Molcule
단일 요소(원자 Atoms)가 결합하여 명확한 단위 기능을 형성한 것이 분자 Molecule입니다.
모듈식 디자인 프로세스에서 element들은 결합하여 명확한 기능을 하는 고유한 단위를 구성
분자 Molecule에서 세 개의 원자 Atom는 다양한 방식으로 배열될 수 있습니다.
오른쪽 이미지와 같이 배치된 UI Unit의 배치에서 사용자가 인터랙션의 의미를 파악할 수 있 는 가장 좋은 기능적 배치의 디자인입니다.
Organism
Element(원자 Atom)가 결합한 UI Unit(분자 Molecule)은 Interface Patterns(유기체 Organism)을 구성합니다. 유기체는 단일 기능 단위뿐만 아니라 반복되는 패턴 등 다양한 개별 element로 구성될 수 있습니다. 오른쪽 이미지의 유기체 Organism는 9개의 UI Units로 구성된 반복 패턴으로 구성되어 있습니다. 사용자는 (숫자를 터치하는) 인터페이스의 기능을 쉽게 인지할 수 있습니다.
Template
왼쪽 이미지의 반복되는 패턴 내의 분자는 원자로 구성됩니다.
오른쪽 이미지와 같이 사용자가 숫자를 입력하는 인터랙션이 이뤄지는 동안 UI가 표시됩니다. 이렇게 반복되는 패턴은 명확하고 구조화된 템플릿 Template을 구성합니다. 이는 User Path에서 일관되게 유지됩니다.