[CS] 아토믹 디자인이란 ?

 

아토믹 디자인(Atomic Design)은 디자인 요소를 구성하는 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 다섯 가지 계층으로 구분하고, 이를 조합하여 디자인 시스템을 구축하는 방법론입니다.

이 방법론은 디자인 요소를 단순한 형태로 분해하여 조립함으로써 확장성이 뛰어나고 일관된 디자인 시스템을 만들 수 있습니다.

 

 

1. Atoms(원자)

가장 작은 단위인 원자는 디자인 요소의 가장 기본적인 부분을 말합니다. 원자는 웹 인터페이스에서 적용되는 버튼, 입력 필드, 아이콘 등과 같이 다른 디자인 요소로 구성될 수 없는 가장 작은 단위입니다.

Atoms(원자) 예시

2. Molecules(분자)

분자는 원자들이 조합된 디자인 요소 입니다. 예를 들어 검색창은 입력 필드, 검색 버튼, 라벨 등의 원자들이 조합된 분자입니다.

Molecules(분자) 예시 - 검색 창

3. Organisms(유기체)

유기체는 분자들이 조합되어 만들어진 디자인 요소입니다. 예를 들어, 헤더, 푸터, 카드 등은 여러 분자들이 조합되어 만들어진 유기체입니다.

Organisms(유기체) 예시 - 각종 사이트의 Header

4. Templates(템플릿)

유기체가 조합되어 만들어진 디자인 요소입니다. 레이아웃, 컴포넌트를 주입받기 위해 준비합니다. 비즈니스 로직이 아니라 스타일링에 집중한 단위 입니다.

Templates(템플릿) 예시

5. Pages(페이지)

템플릿에 알맞는 컴포넌트를 주입하게되면, 템플릿에서 미리 만들어 놓은 레이아웃에 맞게끔 사용할 수 있도록 합니다. 전체적인 로직이나 상태 등을 Page 레벨에서 컨트롤합니다.

 

아토믹 디자인의 장점

• UI 요소를 작은 부분으로 나누어 재사용 가능한 컴포넌트로 만들기 때문에, 개발자는 코드의 중복을 피하고, 재사용성을 높이며, 시간과 비용을 절약할 수 있습니다.
• 일관성 있는 UI를 구축하는 데 도움이 됩니다.
• UI의 특정 부분을 쉽게 수정하거나 업데이트 할 수 있으므로 유지 보수 용이상이 향상됩니다.
• UI 요소를 작은 부분으로 쪼개어 테스트 가능한 단위로 만듭니다. 이를 통해 개발자는 UI테스트를 보다 쉽게 수행할 수있습니다.

한계점

• 최소 단위로 분리하고 조합하는 과정에서 추가 복잡성을 초래할 수 있습니다.
• 이론상 각 단계별 관계는 명확해 보이나 현실적으로 프로젝트가 커질 수록 그 경계가 모호해집니다.

 

 

 

출처

https://bradfrost.com/blog/post/atomic-web-design/

https://yozm.wishket.com/magazine/detail/1531/

https://maeng2418.github.io/react/atomic_design/