아토믹 디자인 패턴(atomic design)

정의

사용자 인터페이스를 작고 단순한 컴포넌트로 분리하여 효율적으로 관리하는 방법론

 

 

역사

2013년 6월 브래드 프로스트(Brad Frost)라는 스타일 가이드 관련 경험도가 높은 웹디자이너가 제시한 디자인 패턴입니다.

 

 

아토믹 디자인 구조

구조는 원자(Atoms) -> 분자(Molecules), 유기체(Organisms), 템플릿(Templetes), 페이지(Pages)로 이루어져 있습니다.

 

 

1. 원자(Atoms)

atomic design — Atoms example

• 사용자 인터페이스에서 더 이상 쪼갤 수 없는 가장 작은 컴포넌트입니다.
• 대표적인 원자 컴포넌트는 레이블(Label), 텍스트(Text), 컨테이너(Container), 버튼(Button), 아이콘(Icon) 등입니다.

 

 

2. 분자(Molecules)

atomic design — Molecules example

• 두 개 이상의 원자로 구성된 컴포넌트입니다. 
• 대표적인 분자 컴포넌트는 입력 폼(Input forms), 내비게이션(Navigation), 카드(Card) 등입니다.

 

 

3. 유기체(Organisms)

atomic design — Organisms example

• 원자와 분자들의 조합으로 이루어진 컴포넌트입니다.
• 대표적인 유기체 컴포넌트는 헤더(제목, 검색 표시줄, 항목 목록), 여러 카드를 관리하는 그리드 등입니다.

 

 

 

4. 템플릿(Templates)

atomic design — Templates example

• 유기체, 분자 및 원자들의 조합으로 이루어진 컴포넌트입니다.
• 대표적인 템플릿 컴포넌트는 Lorem Ipsum, Image Placeholder 등으로 채워진 스켈레톤 뷰 등입니다.

 

 

5. 페이지(Pages)

atomic design — Pages example

• 실제 콘텐츠들을 배치한 UI를 보여주며, 템플릿의 구체화된 컴포넌트입니다.
• Page는 사용자가 볼 수 있는 최종 콘텐츠가 보이는 화면입니다.

 

 

장점

• 가독성 향상: 템플릿을 보기만 해도 문자 그대로 코드를 읽을 수 있으며 구성 요소 구조는 매우 간단합니다.
• 유지 관리 가능성: 향상된 가독성은 응용 프로그램의 유지 관리에 정비례합니다.
• 재사용성: 중복되는 컴포넌트를 줄일 수 있고, 결과적으로 개발 소요시간을 단축할 수 있습니다.

 

 

단점

• 러닝 커브가 매우 높음: 컴포넌트 개념에 대한 높은 이해도를 필요로 한다.
• UI 변화에 유연하지 않음 : 컴포넌트는 너비에 대해 알 수 없기 때문에 실제 페이지의 사이즈가 변경될 때 크기가 조정된다.
• 많은 시간 소요: 컴포넌트 재사용성을 고려하는 것에 시간 소모가 큽니다.

 

 

왜 아토믹 디자인을 사용할까?

여러 가지 글들을 종합해 본 결과, 다는 아니지만 아키텍처를 고려하지 않고 개발한 프로젝트들이 점점 커지면서, 새로운 기능을 하나 추가할 때마다 여러 코드를 재작성하는 일들이 반복되기 때문에.. 아토믹 디자인의 필요성이 느껴서 사용한다고 합니다.

 

 

마무리

오늘은 요새 웹 프런트를 개발한다고 하면 한 번씩 고민하게 되는 아토믹 디자인 패턴에 대해서 공부해봤습니다.

공부를 해보니 아토믹 디자인 패턴이 모든 상황에서 좋은 디자인 패턴이 아니라는 걸 알게 되었습니다.

프로젝트가 커지면 고려해 볼만하나 초창기 또는 상황이 여유롭지 않다면 아토믹 디자인 패턴은 오히려 오버 엔지니어링이 될 수도 있겠다는 생각이 들었습니다. 

아직 부족하거나 틀린 부분이 있을 수도 있으니 주의하시면 좋을 거 같습니다.

이번 포스팅은 마무리하면서 다음 포스팅에서 뵙겠습니다.