Atomic Design

http://bradfrost.com/blog/post/atomic-web-design/

https://brunch.co.kr/@ultra0034/63

아토믹 디자인이란

원자 단위들을 서로 결합하여 분자를 형성하고 차례로 더 복잡한 유기체로 결합하여 모든 물질들을 창조하는 개념이다. 인터페이스 전체를 기본 빌딩 블록으로 나누고 작업을 하는 것이다.

• 원자(Atoms)
• 분자(Molecules)
• 유기체(Organisms)
• 탬플릿(Templates)
• 페이지(Pages)

원자(Atoms)

원자는 물질의 기본 빌딩 블록이다. <label>, <input>, <button> 등을 의미한다.

분자(Molecules)

원자들을 서로 결합하여 명확한 기능이 만들어 진다. 가장 작은 기본 단위라고 할 수 있다. 분자들은 그 자체의 특성을 가지고 있으며 디자인 시스템의 중추 역할을 한다.

예를 들어 <label>, <input>, <button>을 조합하여 검색 폼을 만들 수 있다.

분자를 만들 때 가장 중요한 것은 한 가지만 하고 그거 하나만 잘해라라는 사고방식으로 만들어야 한다.

분자에서 유기체로의 구축하기 위해서는 분자 컴포넌트가 Standalone(독립적)이고, Portable(기동성)있고, Reusable(재사용) 가능하게 제작해야 한다.

유기체(Organisms)

분자들을 결합하여 유기체를 만든다. 유기체는 비교적 복잡하고 인터페이스에서 구분된 영역을 형성하는 서로 결합되어 있는 분자 그룹이다.

유기체는 서로 비슷하거나 아니면 서로 상이한 분자 유형으로 구성될 수 있다. 메인 내비게이션, 검색, 소셜 미디어 등 다양한 컴포넌트로 구성할 수 있다.

탬플릿(Templates)

페이지(Pages)