아토믹 디자인 방법론(Atomic Design Methodology)

아토믹 디자인이란, UI를 구축할 때 작은 컴포넌트(Atoms, Molecules, Organisms)부터 시작하여 이를 조합해 Templates를 만들고, 마지막으로 Templates 위에 실제 컨텐츠를 넣어 Pages를 구성하는 방식을 말한다.

추상적인 개념부터 구체적인 개념까지를 아우르는 아토믹 디자인

우선 각 요소에 대해 살펴보자.

 

Atom
The basic building blocks로 정의되며, 예를 들어 Input Text field와 Button이 있다.

 

Molecule
Groups of atoms, The smallest fundamental units로 정의되며, 예를 들어 Input Text field와 Button을 조합하여 Search Form이라는 Molecule을 만들거나, Logo Icon과 Button들을 조합하여 Navigtion Bar Molecule을 만들 수 있다.

 

Organism
Groups of molecules, Distinct section of an interface로 정의되며, 보통 페이지의 Header, Body, Footer를 뜻한다. Navigtion Bar와 Search Form을 조합하여 Header를 구성하는 것을 예로 들 수 있다.

 

Templete
Groups of organisms, Stitched together to form pages로 정의되며, 쉽게 Wire Frame을 생각하면 된다. 여기에 실제 컨텐츠를 채우면 Page가 된다.

 

Page
Where we start to see the design coming together and the layout in action로 정의되며, 완성된 페이지를 뜻한다. Templete과 Page의 구분이 헷갈린다면 Community Templete으로 Video Community Page와 Talk Community Page를 모두 만들 수 있다는 점을 기억하자.

 

가장 작은 단위인 Atom부터 디자인하고 만들면 되는걸까?

- 그렇지 않다. 개발 전에 다양한 버전의 디자인을 구상하고, 확정된 디자인이 나온 후에 개발을 시작해야 한다. 예를 들어 버튼 하나를 디자인 하더라도 서로 다른 수십개의 색상과 사이즈를 만들어보고 디자인을 채택하라. 확정된 디자인을 토대로 버튼은 어떻게 생겼는지(Atom), 폼은 어떻게 생겼는지(Molecule), 헤더는 어떻게 생겼는지(Oranism) 등 표준화 작업과 디자인의 패턴을 찾는 것이 중요하다. 이 과정에서 재사용성을 고려할 수 있다.

 

왜 아토믹 디자인을 사용하는가?

- 아토믹 디자인은 재사용성과 확장성에 장점이 있다. 컴포넌트를 만들어 놓으면 이를 조합하여 새로운 기능이나 페이지를 빠르게 구현할 수 있다. 또한 일관된 디자인을 통해 UI/UX를 향상시키고 전체 디자인에 통일성을 부여하며 고객친화적인 서비스를 구축할 수 있다는 장점이 있다.

 

폴더 구조는 어떻게 가져가면 좋을까?

MyProject
└── src
    ├── apis
    │   ├── clubApis.ts
    │   ├── communityApis.ts
    │   ├── feedbackApis.ts
    │   ├── matchApis.ts    
    │   └── userApis.ts
    ├── assets
    │   ├── icons
    │   ├── images
    │   └── logos
    ├── components
    │   ├── atoms
    │   │   ├── Button.tsx
    │   │   ├── Button.stories.tsx
    │   │   ├── Input.tsx
    │   │   └── Input.stories.tsx
    │   ├── molecules
    │   │   ├── MatchSearchBar.tsx
    │   │   ├── MatchSearchBar.stories.tsx
    │   │   ├── UserAvatar.tsx
    │   │   └── UserAvatar.stories.tsx
    │   ├── organisms
    │   │   ├── Header.tsx
    │   │   ├── Header.stories.tsx
    │   │   ├── Footer.tsx
    │   │   └── Footer.stories.tsx
    │   ├── templates
    │   │   ├── MainLayout.tsx
    │   │   ├── MainLayout.stories.tsx
    │   │   ├── CommunityLayout.tsx
    │   │   └── CommunityLayout.stories.tsx
    │   └── pages
    │       ├── HomePage.tsx
    │       ├── HomePage.stories.tsx
    │       ├── VideoCommunityPage.tsx
    │       └── VideoCommunityPage.stories.tsx
    ├── data
    │   └── futsalCourts.json
    ├── fonts
    │   └── ScoreDream.woff2
    ├── hooks
    │   └── useAxios.tsx
    ├── routes
    │   └── index.tsx
    ├── stores
    │   ├── clubStore.ts
    │   ├── communityStore.ts
    │   ├── feedbackStore.ts
    │   ├── matchStore.ts
    │   └── userStore.ts
    ├── styles
    │   └── GlobalStyle.ts
    └── types
        ├── buttonType.ts
        └── inputType.ts