아토믹 디자인 패턴 (Atomic design pattern)
아토믹 디자인에 관한 글을 읽고 내용을 요약한 글입니다.
포스트: https://atomicdesign.bradfrost.com/chapter-2/
아토믹 디자인 패턴 (Atomic design pattern)
아토믹 디자인은 원자, 분자, 유기체, 템플릿 및 페이지가 동시에 함께 작동하여 효과적인 인터페이스 디자인 시스템을 만드는 것입니다. 아토믹 디자인은 웹 기반 인터페이스 뿐만 아니라 모든 사용자 인터페이스에 적용됩니다.
아토믹 디자인 다섯 단계
아토믹 디자인 패턴은 다섯가지 단계로 구성된 방법론이며, 다섯 단계는 다음과 같습니다.
- Atoms(원자)
- Molecules(분자)
- Organisms(유기체)
- Templates(템플릿)
- Pages(페이지)
1. Atoms(원자)
원자가 물질의 기본 구성 요소라면, 인터페이스에서의 원자는 모든 사용자 인터페이스를 구성하는 기초 구성 요소 역할을 합니다. form label, input, button과 같은 기본 HTML 요소가 포함됩니다.
2. Molecules(분자)
분자는 서로 결합되어 뚜렷한 새로운 특성을 갖는 원자 그룹입니다. 인터페이스에서의 분자는 하나의 단위로 함께 기능하는 비교적 단순한 UI 요소 그룹입니다. form label, search input, button을 조합해서 search form 분자를 만들 수 있습니다.
조합하면 추상적인 원자는 목적을 가지게 됩니다. form label 원자는 search input를 정의하고, button 원자를 클릭하면 form이 제출됩니다. 그 결과 검색 기능이 필요한 곳에 어디에나 놓을 수 있는 간단하고 재사용 가능한 구성요소가 됩니다.
3. Organisms(유기체)
유기체는 분자/원자/다른 유기체 그룹으로 구성된 비교적 복잡한 UI 구성 요소입니다. 이러한 유기체는 독립된 섹션의 인터페이스를 구성합니다.
헤더에는 고유한 속성과 기능을 가진 여러 개의 작은 인터페이스 부분을 포함하지만, 인터페이스의 독립된 섹션인 것이 그 예입니다.
4. Templates(템플릿)
템플릿은 구성 요소를 레이아웃에 배치하고 디자인의 기본 콘텐츠 구조를 보여줍니다.
페이지의 골격을 정의함으로써 다양한 동적 콘텐츠를 처리할 수 있는 시스템을 만들 수 있습니다. 또한 최종 결과물(최종 콘텐츠)보다는 페이지의 기본 콘텐츠 구조에 초점을 맞춥니다.
5. Pages(페이지)
페이지는 사용자가 실제로 보게 되는 최종 UI를 보여주며, 디자인 시스템의 효과성을 테스트하는 데 필수적입니다. 페이지는 실질적인 콘텐츠를 적용해 디자인 패턴이 제대로 작동하는지 확인하고, 필요한 경우 분자, 유기체, 템플릿을 수정할 수 있는 기회를 제공합니다. 또한, 페이지는 템플릿의 다양한 변형을 반영하여 강력하고 유연한 디자인 시스템을 구축하는 데 중요한 역할을 합니다.
정리를 해보면,
- Atoms(원자)은 더 이상 나눌 수 없는 UI 요소로, 인터페이스의 기본적인 빌딩 블록 역할을 합니다.
- Molecules(분자)은 원자의 모음으로, 비교적 단순한 UI 컴포넌트를 형성합니다.
- Organisms(유기체)은 비교적 복잡한 컴포넌트로, 인터페이스의 개별 섹션을 형성합니다.
- Templates(템플릿)은 컴포넌트를 레이아웃 내에 배치하고 디자인의 기본적인 콘텐츠 구조를 보여줍니다.
- Pages(페이지)는 템플릿에 실제 콘텐츠를 적용하고, 최종 UI를 보여주며, 디자인 시스템의 탄력성을 테스트하기 위해 다양한 변형을 설명합니다.
아토믹 디자인을 적용한 예
출처: https://atomicdesign.bradfrost.com/chapter-2/
원자
여러 개의 아이콘, 텍스트, 두 가지의 이미지 요소(아바타 이미지, 기본 이미지)로 구성
분자
여러 개의 아이콘들로 이루어진 하단 메뉴 바, 사용자가 좋아요를 누르거나 댓글을 달 수 있는 아이콘으로 이루어진 요소, 텍스트와 이미지의 조합들로 구성
유기체
사용자 정보, 이미지, 이미지 주변의 동작(액션)들, 좋아요 수와 이미지 캡션의 조합으로 구성
템플릿
레이아웃의 맥락에서 구성 요소가 조합
페이지
실제 콘텐츠가 들어있는 최종 결과물
장점과 단점
장점
- 재사용성: 작은 컴포넌트를 재사용
- 일관성: 각 컴포넌트가 동일한 스타일 가이드를 따름
- 유연성: 작은 단위의 요소들을 다양한 조합으로 사용할 수 있음
- 테스트 용이: 작은 단위로 나뉜 컴포넌트를 개별적으로 테스트할 수 있음
단점
- 초기 설정 복잡: 모든 컴포넌트를 세분화하고 구조화해야함
- 과도한 세분화: 너무 많은 작은 컴포넌트로 나누면 관리가 어려울 수 있음
- 학습 곡선: 처음 접하는 디자이너나 개발자는 익숙해지기까지 시간이 걸릴 수 있음
- 예상치 못한 문제 발생: 개별 컴포넌트를 통합하여 하나의 완성된 페이지를 만드는 과정에서 예기치 못한 문제가 발생할 수 있음
결론
아토믹 디자인 패턴은 체계적이고 일관된 UI 설계를 가능하게 하며, 재사용성과 유지보수성 면에서 큰 장점을 제공합니다. 초기 설정과 관리의 복잡성, 그리고 학습 곡선이 있지만, 잘 구축된 아토믹 디자인 시스템은 효율적이고 견고한 사용자 인터페이스를 만들 수 있는 강력한 도구입니다. 이 패턴을 통해 개발자와 디자이너는 더 나은 협업을 할 수 있고, 사용자에게 일관되고 직관적인 경험을 제공할 수 있습니다.
아토믹 디자인 패턴 관련 읽으면 좋은 포스트들