2024/07/20 아토믹디자인

아토믹 디자인

정의

디자인 시스템을 구성하는 방법론.

사용자 인터페이스(UI)와 사용자 경험(UX)을 효율적으로 설계하기 위해
작은 구성 요소에서 시작하여 점차 복잡한 구조로 발전시키는 접근 방식
이 방법론은 브래드 프로스트(Brad Frost)에 의해 제안됨

다섯 가지 주요 단계

1. 원자(Atoms): 가장 기본적인 UI 구성 요소로, 더이상 분해할 수 없는 기본 컴포넌트
   버튼, 입력 필드, 아이콘 등 단일 요소.
   원자는 독립적으로 존재하며, 스타일과 기능을 포함.

2. 분자(Molecules): 원자들이 결합하여 형성된 작은 UI 구성 요소.
   예를 들어, 레이블과 입력 필드, 버튼이 결합된 검색 바와 같은 형태.
   중요한건 한가지 일을 한다는 점.

3. 유기체(Organisms): 여러 개의 분자가 결합하여 더 복잡한 UI 구성 요소를 형성
   명확한 영역과 특정 컨텍스트를 가짐.
   예를 들어, 헤더, 카드 컴포넌트 등이 이에 해당.

4. 템플릿(Templates): 유기체들이 조합되어 페이지의 크고 작은 구조를 형성.
   템플릿은 레이아웃을 정의하고, 각 유기체의 위치와 관계를 설정.
   실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임

5. 페이지(Pages): 템플릿에 실제 콘텐츠가 채워져 최종적으로 사용자에게 보여지는 형태
   이는 사용자가 실제로 보는 최종 결과물.
   template의 인스턴스

장단점

장점

재사용성: 작은 구성 요소(원자)를 기반으로 하여 다양한 UI를 만들 수 있어,
코드와 디자인의 재사용성이 높아짐.

일관성: 아토믹 디자인을 사용하면 디자인 시스템의 일관성을 유지가능.
각 구성 요소는 고유한 스타일과 기능을 갖추고 있어,
전체 사용자 인터페이스가 통일된 느낌을 줌.

유지보수 용이성: 각 구성 요소가 독립적으로 관리되므로, 수정 및 유지보수가 용이.
특정 원자나 분자를 수정하면, 이들을 사용하는 모든 유기체와 템플릿에 자동으로 반영

협업 촉진: 디자이너와 개발자 간의 의사소통이 원활해지며,
명확한 구조 덕분에 팀원들이 각자의 역할을 이해하고 협력할 수 있음.

확장성: 새로운 구성 요소를 쉽게 추가할 수 있어,
프로젝트가 성장함에 따라 디자인 시스템을 확장하기 용이

단점

초기 설정의 복잡성: 아토믹 디자인을 처음 도입할 때,
구성 요소를 세분화하고 체계적으로 정리하는 과정이 시간이 걸림.

과도한 세분화: 너무 많은 작은 구성 요소로 나누게 되면, 관리가 복잡해질 수 있으며,
각 요소의 관계를 이해하기 어려워질 수 있음.

디자인의 제한: 특정 원자나 분자가 너무 엄격하게 정의되면,
창의적인 디자인 접근이 제한될 수 있음.

학습 곡선: 팀원들이 아토믹 디자인의 개념을 이해하고 적용하는 데 시간이 필요
특히 새로운 팀원에게는 학습 곡선이 있을 수 있음

의사소통의 필요성: 각 구성 요소의 기능과 디자인 의도를 명확히 하기 위해
팀원 간의 지속적인 의사소통이 필요