Atomic Design에 대해 살펴 보았습니다.

조사해 본 경위

React를 공부하고 3개월 정도 지나지만 책을 읽고 「Atomic Design」라고 하는 디자인 시스템이라는 개념이 나오고 「뭐야 이것!?」라고 생각해 조사해 보았습니다.

React와 Atomic Design의 궁합이 꽤 좋은 것 같다.

Atomic Design이란?

Atomic Design은 다음 5가지 구조로 페이지를 나누어 각각의 역할을 명확히 하고 재사용 가능한 컴포넌트를 만들어 가는 것입니다.

Atoms (원자)

Molecules (분자)

Organisms (유기체)

템플릿 (템플릿)

Pages (페이지)

Atoms(원자)

Atoms(원자)는 UI를 구축하는 최소 단위입니다. 그래서 그 이상으로 세세하게 분할할 수 없습니다.

ToDoList의 모의로 예를 들면



이러한 구성의 페이지를 Atom으로 나누면 다음과 같이 됩니다.

텍스트 양식

추가 버튼

체크 박스

텍스트

체크 박스

텍스트

같이 나눌 수 있습니다.

Atoms는 Atomic DesignかつWebサイトを構築する上で基本的なものであり重要な要素です。

Molecules(분자)

Molecules(분자)가 되면, UI가 어떤 의미를 가지고 어떻게 사용되는지가 구체성이 나옵니다.

방금 전의 Atoms 단체만을 보면, 무엇을 하면 좋을지 모르겠죠? 그러나 Molecules가 되면 입력 폼이 있어 버튼이 있기 때문에, 「무언가를 입력해 송신하는구나ー」라고 보다 구체적인 인터페이스가 되는 것을 알 수 있습니다.



Atoms를 조합해 복잡한 Molecules가 되어 버리면, 다른 곳에서 주의가 필요.

Organisms(유기체)

Organisms(유기체)는 Atoms나 Molecules가 조합되어 이용됩니다. AtomsやMoleculesとの大きな違いは再利用性があまり求められてないと言う点です。
Organisms의 대표로 헤더를 들 수 있습니다.

Templates(템플릿)

Templates(템플릿)은 와이어프레임과 동일하며 페이지에 이미지와 실제 데이터가 반영되는 前 상태입니다.

페이지 (페이지)

Pages(페이지)는 Templates에 대해 페이지에 이미지나 실제 데이터를 반영시킨 것입니다.

Atomic Design을 사용하는 이점

팀으로서의 공통 개념이 태어난다

구조적인 생각이 태어난다

개발 속도가 빨라진다

톤 & 매너가 태어난다

톤 & 매너는 디자인 용어라고합니다. 이 사이트가 자세히 게재되었습니다.

라고 하는 메리트가 있다고 합니다. 단점으로는 파일량이 많아진다고 합니다.

React 파일 구성

├── public // コンパイル済み各公開ファイル
│   └── assets
│   └── index.html
└── src
    ├── components // Reduxに依存しないReactのコンポーネントディレクトリ
    │   ├── atoms
    │   └── molecules
    ├── containers // Reduxとコネクトするコンポーネント
    │   ├── organisms
    │   └── pages
    ├── redux // ReduxのAction,Reducer,Storeを扱うディレクトリ
    │   ├── middlewares // 主にAPI処理をまとめたディレクトリ（ReduxでいうとAction発行時にReducerの前でインターセプトする処理）
    │   ├── modules
    │   └── records
    ├── styles // 基本的なスタイルを定義する
    │   ├── core
    │   ├── foundation
    │   └── utility
    └── utils // 汎用的な処理をするUtil用ディレクトリ

[ htps : // 이치 마루 니데시 응. 코 m/2017/05/레아 ct-레즈 x-아토미 c-이무타 bぇ/:에 m베 d:해 ]

조사하고 있으면 이런 느낌으로 만들고 있는 분이 계셨습니다.

마음이 가면 Atomic Design+Redux+React로 TodoList를 만들어 보겠습니다.