Atomic Design

목차

1. 배경
2. Atomic Design
3. 문제점
4. 결론

 

배경

지금까지 개발해 온 프론트 페이지들의 구조는 어떻게 보면 대부분 비슷하지만, 자세히 들여다보면 제대로 된 구조가 없어서 (스스로 정해놓은 규칙이 없어서) 손이 가는데로 개발이 된 경우가 많았습니다.

스스로 어느정도 정형화 된 패턴을 통해 규칙을 정해두면 가독성도 좋아지고 재활용성도 좋아질거라 생각했습니다. 그래서 디자인 패턴을 서치중 아토믹 디자인이 눈에 들어와 정리해 봤습니다.

Atomic Design

1. Designing Systems
2. Atomic Design Methodology
3. Tools of the Trade
4. The Atomic Workflow
5. Maintaining Design Systems

페이지를 만들때 구조화 하는 부분인, 아토믹 디자인 패턴중 2번 주제인 Atomic Design Methodology 만 공유 하겠습니다.

 

Atomic Design - Atomic Design Methodology

Atomic Design은 컴포넌트를 5가지 별개의 단계로 나누는 방법론입니다. ****

(사실 모두가 해오던 컴포넌트 구조를 화학용어를 이용해서 직관적으로 설명)

1. 원자 (Atoms)
2. 분자 (Molecules)
3. 유기체 (Organisms)
4. 템플릿 (Templates)
5. 페이지 (Pages)

 

1. 원자 (Atoms)

원자는 양식 라벨, 입력, 버튼 등 (기능이 있는 한 더이상 나누기 힘든) 기본 HTML 요소
글꼴 크기나 색깔과 같은 고유한 속성
인터페이스의 원자는 인터페이스를 구성하는 기본 빌딩 블록 역할

2. 분자 (Molecules)

예를 들어 라벨, 검색 입력 및 버튼을 함께 결합하여 검색 양식을 만들 수 있습니다.
검색 양식 분자는 검색기능이 필요한 모든 위치에 놓을 수 있고, 쉽게 재사용 가능한 구성요소 입니다.
인터페이스에서 분자는 하나의 목적으로 함께 작동하는 UI 요소의 비교적 단순한 그룹

3. 유기체 (Organisms)
혹은 검색 양식을 테이블과 함께 HistoryTable 유기체를 만들 수 있습니다.상대적으로 재사용성이 낮아집니다.
atom, molecule에 비해 좀 더 구체적으로 사용자에게 의미있는 정보 또는 서비스를 제공하지만,
검색 양식을 헤더 컨텍스트에 넣어서 네비게이션과 로고 등을 합쳐 Navbar 유기체를 만들 수 있습니다.

4. 템플릿 (Templates)
템플릿은 page를 만들 수 있도록 여러개의 organism, molecule로 구성할 수 있습니다. 아래 이미지와 같이 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임입니다.

 

5. 페이지 (page)
page는 사용자가 볼 수 있는 최종 컨텐츠가 보이는 화면입니다. 일반적으로 하나의 URL당 하나의 Page 컴포넌트가 존재합니다.

 

인스타그램을 예시로 보면 아래 이미지와 같습니다.

 

 

문제점

설명만 본다면 크게 문제가 있어보이지는 않지만, 실제로 구현을 하다보면 애매모호한 부분이 생깁니다.

특히 컴포넌트를 구성하다보면 Molecules(분자)과 Organisms(유기체) 중 어디에 두어야 할지 고민하게 됩니다. 혹은 Molecules(분자) 이면서 Organisms(유기체)가 될 수도 있습니다.

사람마다 다르게 정의를 내릴 가능성이 크기에 기획과정에서 규칙을 정해야 합니다.

규칙 예시

1. React 용 Atomic Design 기반 Starter Kit인 ARc는 일단 너무 고민하지 말고 아무 곳에 넣고 추후 어떤 레이어에 속해야 하는지 알게 되면 정리하라고 권합니다.
2.  - Molecule은 데이터를 표시하고 이벤트를 받을 수 있지만 "하나의 역할"만을 가진다.
    - Organism은 사용자에게 의미를 가지는 기능적 요구사항에 포함되는 경우에 해당

 

결론

아토믹 디자인 패턴을 공부하면서, 현재 페이지에만 사용하게끔 개발하지 않고, 최대한 재사용이 가능하도록 고민하고 개발하는 습관을 가져야 겠다고 반성하게 되었습니다. (다시 사용하지 않더라도)

그리고 많은 적용 실패 경험담들을 보면서 Atomic Design을 포함하여 다양한 방법론이나 패턴을 적용할 때 맹목적으로 따르면 안되겠다고 생각했습니다.