Atomic Design Pattern 은 무엇인가
- Atomic Design Pattern은 2013년 6월(생각보다 역사가 오래된 패턴입니다) Brad Frost에 의해 처음으로 제시된 디자인 패턴입니다. 리액트가 처음으로 오픈소스화 된 것이 2013년 5월 JSconf에서인 것으로 볼 때, 거의 리액트의 탄생과 궤를 같이 했다고도 볼 수 있습니다. 이는 프론트엔드 시스템을 구성하는 컴포넌트들을 논리 구조 (Building Blocks) 단위로 나누어 효율적으로 재사용하도록 만들어서, 불필요한 "코드 중복"을 제거하고 "클린"한 아키텍쳐를 유지할 수 있도록 합니다. (atoms, molecules, organisms, templates등에 대한 정의는 아래 Refernce에 있는 원본에 자세하게 나와있습니다.)
Atomic Design Pattern 의 문제점
- 리액트를 사용해서 프론트엔드 웹 애플리케이션을 개발하는 경우, 많은 곳에서 Atomic Design Pattern을 사용하게 됩니다.
- 컴포넌트를 하나의 함수로 보고, 클린 아키텍쳐의 관점에서 재사용 가능한 컴포넌트들을 그 기능과 구성에 따라 구조화 하여 사용하는 이 패턴은 어느샌가 프론트엔드 아키텍쳐를 이루는 하나의 교과서처럼 되어 알려지고 있습니다.
하지만 이 Atomic Design Pattern을 실제 애플리케이션에 적용해서 개발하다보면 생각보다 많은 부분들이 "추상적"이고 "주관적"이라는 느낌을 받는 경우가 많습니다. 오히려 적용한 이후에 코드가 더 관리가 어려워지고 지저분해지는 경우도 많은데, 이는 Atomic Design Pattern이 처음 등장할 때 그 사용처가 "Design System"에 한정되어 있기도 했고, 디자인 패턴을 이루는 Atoms, Molecules, Organisms등의 개념 자체도 단순하며, 예시는 "Input", "Button", "Form"등의 단순한 구조들에 한정되어 있기 때문입니다.
출처:
https://yeoulcoding.me/m/220
https://ui.toast.com/weekly-pick/ko_20200213
(영문)
What is Atomic Design?
In 2016, Brad Frost introduced Atomic Design as a modular methodology for building simple, maintainable, pattern libraries. It does this by building larger, more complex UI components from smaller and simpler UI components.¹ Atomic Design buckets these components into five categories: atoms, molecules, organisms, templates, and pages. We’ll run through each type below, but the tl;dr is that “atoms” represent the absolute simplest design element and “templates” represent the most complex.
Source: https://bootcamp.uxdesign.cc/everything-you-need-to-know-about-atomic-design-c7310d8a0bbe
