RN 디자인 시스템 구축하기 - 1편, atomic design

01. Atomic Design

- 컴포넌트를 atoms, molecules, organisms, templates, pages 5단계로 나눠서 관리하는 방식

 

(1) atoms (원자)

 - 가장 작은 단위 요소, 더 이상 분해할 수 없는 기본 컴포넌트

 - button, text, input, 글꼴, 애니메이션, 컬러 팔레트, 등의 추상요소도 포함.

 

(2) molecules (분자)

 - atom들을 최소의 역할을 수행할 수 있게 합해둔 그룹, atom 들을 결합.

 - 재사용성, 일관성 

 - molecules는 한 가지 일을 해야한다. SRP (Single Responsibility Principle)

 - button + text + input

search form molecules

 

(3) organisms

 - layout 단위로 하나의 interface, 명확한 영역과 특정 컨텍스트를 가진다.

 - atom, molecule, organism으로 구성할 수 있다.

 - header, navigation

 

 (4) templates

  - organisms을 레이아웃, 데이터 흐름으로 연결하여 전체적인 페이지 구조를 만듦 

  - 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임

  - 실제 콘텐츠가 없는 page 수준의 스켈레톤 

 

 (5) pages

  - templates + data , 유저가 실제 볼 수 있는 콘텐츠를 담고 있다. templage의 인스턴스 

 

 

02. Molecule과 Organism 나누기 

- 컨텍스트가 있는 경우 organism, 

- UI 적인 요소루 SRP를 지킬 수 있다면 재사용하기 쉬운 molecule, molecule의 컴포넌트 네이밍은 주로 UI 적 네이밍 

출처 : 카카오엔터 개발블로

 

03. 작업 프로세스 예시