21-01-28 게시 됨21-01-28 업데이트 됨Frontend / React.js14분안에 읽기 (약 2159 단어)

Atomic Design - 1 Intro

이 글은 Atomic Design의 목적과 활용에 대해 간단하게 다룬다. 이후 시리즈에서는 실제 적용 예시를 다루고자 한다.

목적

현대 프론트엔드는 두 가지 복잡성을 맞이했는데, Atomic Design은 이 문제를 해결하는데 효과적이다.

이전에 비해 다양한 해상도를 지원해야 함.
UI 컴포넌트의 종류가 다양해지고 복잡해짐. 많은 상태를 갖게 됨.

즉 유지보수 비용이 크게 늘어난 상태이다. 소프트웨어 개발에서 복잡성을 낮추는 방식은 분할 정복과 의존성 격리를 통한 SRP 만족인데, Atomic Design은 프론트엔드의 구성 요소를 디자인 수준에서 분할하므로, 개발자는 이를 재사용하여 총 개발 비용을 낮출 수 있다.

기존에도 HTML, CSS 수준에서 컴포넌트 개발이 어느 정도 가능했으나 React.js의 등장 후 CSS-in-JS 라는 생태계가 조성된 덕분에 컴포넌트 개념의 완전한 구현이 가능해졌기 때문에 Atomic Design이 더 많이 언급되고 활용되는 듯하다.

현대에는 디자인 시스템 (EN)을 사용하는 것이 일반적인데, 디자인 시스템이란 브랜딩 디자인, 컴포넌트를 위한 스타일 가이드, 컴포넌트 등으로 구성된 디자인 & 추상적인 개념의 집합이다.

이런 디자인 시스템의 Typo, Spacing 등을 포함해 컴포넌트를 라이브러리로 개발해놓으면, 전사적으로 디자인이 통일성을 갖게 되기도 하고 개발 측면에선 이미 개발된 디자인 요소를 빠르게 선언적으로 활용할 수 있기 때문에 생산성에 많이 유리하다.

이미 널리 알려진 디자인 시스템의 라이브러리 또한 많다. 아무래도 Material Design의 구현체인 Material-UI가 가장 유명할 것이다.

Atomic Design의 접근 방식은 디자인 시스템을 구축하는 데 효과적이므로 많이 사용된다. 이후에 Atomic Design이 어떻게 개발 과정에서 유용하게 사용되는지 설명한다.

이론

가장 큰 개념으로 페이지, 컴포넌트가 있다. 컴포넌트가 조합돼 페이지를 구성하는 형태이다.

컴포넌트는 조합되므로 재사용된다. 즉 효율적이며 페이지 간 일관성 또한 보장된다.

컴포넌트는 아래의 4개의 하위 요소로 나뉜다. (작은 순으로 정렬)

원자 (Atom)
분자 (Molecule)
유기체 (Organism)
템플릿 (Template)

원자 (Atom)

더 분해할 수 없는 가장 작은 요소이다. 아주 작은 기능도 Atom의 조합으로 만들어지는, 콘텐츠로서의 구체성은 없다.

(ex) 검색 폼: { 검색 Text, 검색 Input 바, 전송 버튼 } 이라는 Atom의 조합으로 생성 (여기서 어떻게 조합하는지는 또 별개의 정보.)

종류:

버튼
텍스트 인풋, 색 팔레트, …
타이포그래피, 제목 (h1, h2, h3, …)
아이콘
체크박스, 라디오 버튼

분자 (Molecule)

분자는 원자들의 조합을 그 단위로 한다. 분자부터 콘텐츠로서의 구체성이 있다.

(ex) 검색 폼: { 검색 Text, 검색 Input 바, 전송 버튼 } 이라는 구체적인 목적이 있는 요소.

분자는 원자들의 조합이지만 계속해서 재사용성이 유지해야 한다.

(ex) 검색 폼은 여러 페이지에서 사용됨.

아무래도 재사용성 유지를 위해 적은 수의 Atom을 조합하여 그 범용성을 높인다.

유기체 (Organism)

유기체는 분자 뿐만 아니라 원자까지 조합해 만들어진다.

유기체부터는 재사용이 강제되지 않는다. 즉 분자와 유기체의 차이는 재사용성이라고 생각할 수 있다.

(ex) Header, Footer 컴포넌트

유기체는 Container의 형태를 띄기도 한다. (ex) ProductList (ProductListItem의 배치 역할)

아무래도 이런 List 컴포넌트는 재사용하기 어렵기 때문에 유기체로 분류되는 것이 일반적이다.

몇 개의 Organism을 배치하면 하나의 페이지가 완성된다고 하는데 잘 모르겠다.

템플릿 (Template)

하위 컴포넌트들의 배치가 목적인 컴포넌트로, 페이지 구조나 레이아웃 구성을 담당한다.

하위 컴포넌트는 자신의 형태만 다룰 뿐 자신이 어떻게 배치될 지에 대해 책임지지 않는데, 템플릿은 이러한 컴포넌트들을 어떻게 배치시키고 표현할 것인지 결정한다.

약간 UI = render(state) 느낌이기도 하다.

페이지 (Page)

페이지는 템플릿에 예제/실제 데이터가 들어간 상태를 말한다. (ex) Mockup

템플릿에 데이터를 주고 초기화한 인스턴스라고 생각해도 좋다.

장점

Atomic Design은 디자이너도 함께 실행해야 하는 것이지만 개발자 측면에서의 장점만 나열하겠다.

1. 원활한 의사소통

컴포넌트 단위로 나누는 것은 그 단위가 미리 정의가 돼야 하며 모두가 동의해야 한다. 그러한 단위를 굳이 Atomic Design이 주장하는 바대로 따를 필요는 없지만 의사 소통 이전에 미리 정의돼야함은 변함이 없다. 이 때 Atomic Design은 이런 단위를 미리 정의해서 제공한다.

충분히 납득할만한 수준으로 잘 정의됐으며 이미 널리 알려져 있기 때문에 사용할 가치가 높다고 생각한다.

2. 의존성 분리

Atomic Design에 부합하도록 각 요소를 잘 분리한다면 아래와 같은 실익을 얻을 수 있다.

개발 과정을 병렬로 진행할 수 있고
각 요소가 변경되더라도 변경되는 요소를 최소한으로 줄일 수 있음

3. 작은 컴포넌트

Atomic Design의 각 단위에 맞게 하나의 역할을 하는 컴포넌트로 개발하면 각 컴포넌트를 작게 유지할 수 있다. 덕분에 그 개수가 늘어나도 변경에 의한 변경을 최소화할 수 있으며 따라서 복잡성이 지수적으로 올라가기보다 선형적으로 증가할 것이다. 뭐든 작게 유지하는 것은 key to computer science 이고 UNIX 철학에도 들어맞는다.

Make each program do one thing well.

주의점

1. 재사용을 위한 반응형 디자인

컴포넌트는 데이터에 따라 여러 상태를 가질 수 있고, 따라서 여러 해상도에서 표시될 수 있다. 컴포넌트가 여러 해상도를 지원하려면 가로 너비(width)가 변할 수 있게 개발해야 한다.

/* before */
.button {
    width: 120px;
}

/* after */
.button {
    width: auto;
}

2. 하위 컴포넌트에서 레이아웃 속성 최대한 피하기

Atomic Design에서 컴포넌트를 배치하는 역할은 상위 컴포넌트의 역할이다. 배치란 위치를 결정하는 일이고 따라서 각 컴포넌트는 자신이 그려지는 바깥 범위의 레이아웃을 방해하면 안 된다.

/* 여백은 배치(레이아웃) 속성이며 이렇게 스스로 값을 줘버리면 배치하는 입장에서 굳이 덮어써야 한다. */
.atom {
    margin-right: 30px;
}

/* Atom을 조합하는 Molecule이 조합된 Atom을 알아서 배치하는 것이 적절하다. */
.molecule .atom {
    margin-right: 15px;
}

3. CSS3 Flexbox/GridBox 사용하기

flex, grid 속성은 배치에 최적화된 속성이며 Organism의 경우 List 컴포넌트와 같이 Molecule을 배치하는 역할을 주로 하기 때문에 이 때 사용하는 것은 적절하다고 할 수 있다.

.organism {
    width: 300px;
    height: 300px;
    
    display: flex;
    align-items: center;
}

실제 활용 예시

Atomic Design으로 Todo 만들기 (KR)

출처: 더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드 (Aladin)