Atomic design 이란

Atomic Design 이란

물질의 개념을 웹에 적용하여 인터페이스를 세분화한 디자인 시스템을 만드는 방법론. Atomic Design에서는 컴포넌트를 atom, molecules, organisms, templates, pages로 세분화함

1) Atom(원자)

가장 기본적인 구성 요소(HTML Tag 또는 스타일 속성이 적용된 HTML Tag)

2) Molecules(분자)

원자의 조합으로 구성된 요소

3) Organisms(유기체)

분자 또는 원자 또는 유기체의 조합으로 구성된 요소

4) Templates

페이지의 레이아웃 형성하는 컴포넌트

5) Pages

템플릿 컴포넌트에 데이터가 포함된 컴포넌트

장점

1) 유지보수성 향상
2) 컴포넌트의 복잡도 낮춤
3) 디자인의 일관성 높임
4) Storybook을 활용하여 디자이너와 빠른 의사소통
5) UI 테스트 편의성 증가

적용방법

1) atoms

동일한 속성의 컴포넌트는 스타일 속성(border, color, font-size, image url ...)에 따라 분리하여 관리
ex)

components - atoms - Button - Button(index.tsx)
                            - OutlineButton
                            - ContainedButton
                            - RoundOutlineButton
                            - RoundContainedButton
                   - Input  
                   - Radio  
                   - Textarea 
                   - CheckBox - CheckBox(index.tsx) 
                              - CircleCheckBox
                              - SquareCheckBox 
                   - Image    - Image(index.tsx)
                              - ThumbnailImage
                              - ProfileImage
                   - Icon
                   ...                                   

2) molecules

분자는 원자의 조합으로 구성된 요소이다.

ex)

molecules - Buttons - DeleteButton(Icon + Button)
                    - ApplyButton(Icon + Button)             
                    ... 
          - Inputs  - SearchInput(Input + Icon)
                    ...
          - CheckBoxes - CheckboxWithIcon(Icon + CheckBox)
                        ...
          - InputFields - (Input + Label)
                        ...
          ... 

3) organisms

organisms은 분자 또는 원자 또는 다른 유기체의 조합으로 구성된 요소이다.
다양한 요소(원자, 분자, 유기체)들과 조합하여 구성될 수 있는 컴포넌트이다.
여러 요소를 포함할 수 있는 컴포넌트는 유기체로 정의한다.

ex)

 - organisms - SideFilter
             - TransactionFilter
             - Tables - Table
                      - ResultTable
             - SelectBoxes - SelectBox
                           - BolerLessSelectBox
                           ...
             - Forms  - SettingForm - index.tsx
                                    - SettingFormHeader
                                    - SettingFormBody  
                      ...   

4) templates

페이지의 레이아웃을 형성하는 컴포넌트. template에 의존된 컴포넌트는 동일 디렉토리에 위치한다.

ex)

 - templates - ..PageTempate
               ...

5) pages

템플릿 컴포넌트에 데이터가 포함된 컴포넌트

ex)

 - pages - Expense - index.tsx
                   - Modal  - ExpenseModal
                            - ReportAddModal
                            - ExpenseRuleModal
                   - Wizardes - ...
         - Report  - ReportList
                   - ReportDetail
                   - Modal 
         - Policy  - PolicyDetail
                   - PolicyList 
                   - Modal
         - Modales - ... 
         ...