Atoms ⊂ Molecules ⊂ Organisms ⊂ Templates ⊂ Pages
디자인 시스템: 어떤 조직이 디지털 인터페이스를 디자인하고 구축하는 방식에 대한 이야기 - Brad Frost
design systems are systems of systems. A design system often contains many subsystems that make an interface tick
- UI components and variants in design and code
- Design tokens
- Typography system
- Color system
- Layout/Grid System
- Icon System
Atomic Design: 디자인 시스템을 만드는 한 가지 방법론
Atoms
atom: 더 이상 분해할 수 없는 기본 컴포넌트. 다른 atom과 결합해서 유용하게 쓰일 수 있다.
ex) label, input, button - HTML element
font, animation, color palette, layout
Molecules
molecule: 여러 개의 atom들을 결합해 잣니의 고유한 특성(한 가지 기능 수행)을 가진다. SRP(Single Responsibility Principle)원칙에 따라 구성되며 재사용성/UI의 일관성/쉬운 단위 테스트 에서의 이점을 갖는다.
Organisms
organism: molecule보다 복잡하고, 서비스에서의 명확한 영역과 특정 컨텍스트를 갖는다. atom과 molecule에 비해 좀 더 구체적으로 표현되기 때문에 상대적으로 재사용성은 떨어진다.
Templates
template: page를 만들 수 있도록 만들어진 organism과 molecule의 집합체. 실제 컴포넌트들을 레이아웃에 배치하고 뼈대를 잡는 와이어프레임 느낌이다.
Pages
실제 콘텐츠와 컴포넌트들을 적용해 사용자에게 보여지는 최종 UI. template의 인스턴스 느낌이다.
References
카카오 FE 기술블로그
[Atomic Design - Brad Frost]
