아토믹 디자인 패턴(Atomic Design)

실제 네이버에서 적용한 사례 - www.youtube.com/watch?v=33yj-Q5v8mQ&feature=youtu.be

[네이버 아토믹 디자인 패턴]

---

아토믹 디자인이란?

요약하면, 디자인을 토대로 하나씩 쪼개고 쪼갠 것을 합쳐서 페이지를 완성하는 것을 말한다.

개념설명 - atomicdesign.bradfrost.com/chapter-2/

Atomic Design Methodology | Atomic Design by Brad Frost

[아토믹 디자인 패턴 요약본]

 

아토믹디자인(Atomic Design)은 어떻게 쓰고, 쓰면 뭐가 좋습니까?

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

 

디자인을 할 때 한 화면의 산출물만을 구성하는 디자인 작업이 아닌, 디자인을 구성하는 요소들을 종합적으로 디자인하여 체계적이면서 관리와 변형이 쉬운 디자인시스템이라고 하는 산출물을 구성하는 데에 있어서 응용하기가 좋은 것이 아토믹디자인입니다. 아토믹디자인이 제시하는 작은 입자들이 모여 큰 디자인의 틀을 구성한다는 개념적 원리를 염두에 두고 디자인시스템을 잡아가는 일종의 방향성을 제시해 주는 가이드라인으로 활용이 가능할 것 같습니다.

아토믹디자인의 이점이라고 한다면 사실 디자인시스템과 같은 작업은 많은 디자인 요소들을 분류하고 이들을 개념적으로 정의하는 일을 수반하는데 이 때 작업자 주관에 지나치게 의존하게 되는 등 분류와 체계화의 개념적 틀이 부재함으로써 작업에 많은 어려움이 발생할 수 있습니다. 이같은 부분을 보완할 수 있는 것이 아토믹디자인 방법론으로, 디자인시스템 구성에 있어서 요소들을 분류하고 조합하는 과정에 있어서 이론적 틀로 활용함으로써 좀 더 원활한 디자인시스템 제작 작업이 가능할 것입니다.

 

 

- 앵귤러 아토믹 디자인패턴 예제

github.com/sergio9104/angular-atomic-design-boilerplate

sergio9104/angular-atomic-design-boilerplate