Atomic Design

Atomic Design이란?

디자인 시스템을 위한 방법론.

 

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

참고 https://snowball.digital/blog/intro-to-atomic-design

 

Atoms

모든 디자인 시스템에서 기본 요소로, 컴포넌트를 구성하는 가장 기본 블록 역할. 

더 분해할 수 없는 성질. HTML 태그의 요소라고 생각하면 된다. 

ex) label, Input, button 등 

+ 색상, 타이포그래피, 애니메이션, 간격 시스템 같은 추상적이거나 눈에 보이지 않는 것들

 

Molecules

 혼자 있을 때는 의미가 없는 원자 Atoms을 결합함으로써

비교적 의미 있는 요소가 된 것을 분자 Molecules.

분자는 한 가지 일만 잘할 수 있도록 단순하게 구성되어야 한다.

ex) 검색 Label과 Input Item의 결합은 작은 검색 form이 된다.

그리고 검색이 위치한 다양한 곳에서 재사용될 수 있게 된다.

 

Organisms

여러 개의 Molecules로 구성된 것이다.

분자 및 원자로 구성된 UI를 구성하는 요소이다.

위에서 원자로 구성한 검색 폼은 페이지 상단에 존재하는 헤더의 구성으로 사용되게 됩니다. 

상품 리스트, 상품 검색 결과, 장바구니 등에서도 사용될 수 있습니다.

ex) logo, navigation search form, social media channel이 합쳐진 구성

 

 

Templates

여러 개의 Organisms로 구성된 것으로 어느 정도 최종 완성본에 가깝다.

HTML의 Wireframe(뼈대)이다.

템플릿은 페이지를 구성하는데 필요한 모든 필수 요소들의 구조를 표시한다.

 

Pages

Template의 인스턴스

Template의 Contents 부분이 실제 User가 볼 수 있는 것들로 채워진 인터페이스다.

 

어제 리액트 공부하다가 하나도 이해가 안되는 거....

열 빡 받고 울고 싶고 그랬는데

먼저 확 든 생각이

"자바스크립트도 기초 안 다져있는데 리액트 해서 뭐하나...."

 

그래서 갑자기 자바스크립트 이용한 사이트 만들면서

개념 확실하게 잡고 리액트 하기로 결심!ㅋㅋㅋㅋㅋ

 

이제 모르는 개념은 지나치지 말고

블로그에 기록해놔야지!!!!! 아자아자!!!!