<aside> 💡 이 글은 제가 공부하고 이해한 내용들을 핵심만 간추린 것입니다. 이 글만 가지고는 아토믹 디자인에 대한 깊이 있는 이해는 어려우니, 꼭! 참고 자료를 같이 읽어보실 것을 추천드립니다!

</aside>

참고 자료

• 아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 (by 신형섭) 아토믹 디자인이 무엇인지 설명한 입문서입니다. 아토믹 디자인이 처음이라면, 이 글부터 읽어보는 걸 추천합니다!
• Atomic Design (by Brad Frost) 아토믹 디자인에 대한 가이드라인을 적은 책입니다. 영어라 읽기 힘들긴 하지만, 다 읽는다면 아토믹 디자인에 대한 심도 있는 이해를 하실 수 있을 겁니다.

Atomic Design이란?

: 디자인 요소들을 나누어 파악하고, 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식

디자인 요소들

: Atoms → Molecules → Organisms → Templates → Pages

Atoms 각각의 View. TextView, Input Forms, Image 등이 여기에 해당한다.

Molecules Atoms 여러 개를 모아서 최소 단위의 기능을 하도록 구성한 것.

Organisms

Templates

Pages

장점?

"디자인시스템 구성에 있어서 가이드라인으로 활용할 수 있습니다."

• 체계적이면서 관리와 변형이 쉬운 디자인 시스템을 만들 수 있다.
• 디자인의 변경에 더욱 쉽게 대응할 수 있다.