[React] 아토믹 디자인(Atomic Design) 을 이용한 컴포넌트 개발

안녕하세요. J4J입니다.

 

이번 포스팅은 Atomic Design에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Atomic Design이란?

 

Atomic Design은 최근 React를 이용하여 컴포넌트 개발할 때 떠오르고 있는 디자인 기법 중 하나로 효율적인 인터페이스 디자인 시스템을 만들어내기 위해 사용됩니다.

 

Atomic Design은 다음과 같이 크게 5가지로 구성됩니다.

 

• Atom (원자)
• Molecule (분자)
• Organism (유기체)
• Template (템플릿)
• Page (페이지)

 

 

반응형

 

 

Atom

 

Atom은 디자인 할 수 있는 요소 중 가장 작은 구성단위를 의미합니다.

 

대표적으로 기본 마크업 구성 요소들인 input, button 등이 여기에 해당되고 마크업 요소들뿐만 아니라 color, font style 등도 Atom으로써 분류합니다.

 

간단한 예시로 아래의 값들이 모두 Atom으로써 분류될 수 있습니다.

 

Atom 예시

 

 

 

 

Molecule

 

Molecule은 여러 Atom 요소들을 조합하여 만들어내는 구성단위를 의미합니다.

 

상황에 따라 다르겠지만 일반적으로 Card, SearchField 등이 Molecule로써 분류될 수 있습니다.

 

간단한 예시로 아래의 값들이 모두 Molecule로써 분류될 수 있습니다.

Molecule 예시

 

 

 

 

Organism

 

Organism은 여러 Molecule과 Atom 요소들을 조합하여 만들어내는 구성단위를 의미합니다.

 

일반적으로 CardList, Navigation 등이 Organism으로써 분류될 수 있습니다.

 

간단한 예시로 아래의 값이 Organism으로 분류될 수 있습니다.

 

Organism 예시

 

 

 

 

Template

 

Template은 여러 Organism, Molecule, Atom 요소들을 조합하여 만들어내는 구성단위를 의미합니다.

 

경험상 아무래도 Page를 구성하기 바로 직전 단계의 컴포넌트이기 때문에 이전 구성 단위들에 비해 컴포넌트의 비중이 전반적으로 적은 구간이었습니다.

 

간단한 예시로 아래의 값이 Template으로 분류될 수 있습니다.

 

Template 예시

 

 

 

 

Page

 

Page는 지금까지 나온 모든 구성 요소들을 조합하여 만들어내는 구성 단위를 의미합니다.

 

또한 이름만 들으면 모두 아시는것처럼 URL을 입력했을 때 나오는 하나의 페이지로써도 생각하실 수 있습니다.

 

간단한 예시로는 아래의 값이 Page로 분류될 수 있습니다.

 

Page 예시

 

 

 

 

사용 계기

 

회사에서 신규 프로젝트를 하면서 컴포넌트 디자인적인 부분에 대해 고민을 했었습니다.

 

지금까지 개발을 하면서 따로 "디자인" 이라는 개념으로써 컴포넌트 구성을 한 적이 없었습니다.

 

그러다 보니 컴포넌트에 대한 기준점이 불명확하여 개발 통일성을 해쳤고, 또한 재사용을 어느 수준까지 해야 될지도 쉽게 판단하지 못했었습니다.

 

이런 문제점들을 해결하고자 관련 레퍼런스들을 찾아보며 Atomic Design을 접할 수 있었고 Atomic Design을 프로젝트에 적용해내면 기존에 가지고 있던 문제점들이 보완될 수 있을 것이라고 생각하여 사용하게 되었습니다.

 

 

 

 

장점

 

경험적인 부분에서 느꼈던 장점은 다음과 같습니다.

 

• 총 5가지의 단계별로 구성된 컴포넌트들로 인해 컴포넌트 기준을 명확히 잡을 수 있음
• 재사용의 방향을 잡기가 수월함

 

 

 

 

단점

 

경험적인 부분에서 느꼈던 단점은 다음과 같습니다.

 

• 개발자들의 주관적인 견해가 들어가기 때문에 동일한 화면을 만들더라도 디자인 구조가 달라질 수 있음
• 컴포넌트들이 서로 의존되어 있어서 컴포넌트 하나가 변경되더라도 전체적인 디자인 구조를 수정할 수도 있음

 

 

 

 

결론

 

비록 대규모의 프로젝트는 아니었지만 기존 방식과 달리 Atomic Design을 적용하며 프로젝트를 진행했을 때 결과적으로 더 많은 이점을 가져다줬다고 생각합니다.

 

특히 컴포넌트 디자인에 대한 기준점이 명확하다는 것이 개인적으로 크게 도움이 되었습니다.

 

아마도 나중에 다음 프로젝트를 진행할때 Atomic Design보다 더 좋은 방식의 컴포넌트 디자인이 없다고 생각된다면 해당 프로젝트에도 Atomic Design을 이용할 것으로 생각합니다.

 

 

 

하지만 잘못 이용하면 오히려 독이 될수도 있다고 생각했습니다.

 

예를 들면, 공통으로 사용되지 않고 특정 페이지나 컴포넌트에서만 사용되는 요소들까지도 모두 디자인 구성요소에 포함시켜버리면 확인해야 할 파일 규모들이 커지기 때문에 불편함을 야기할 것으로 보입니다.

 

또한 아무래도 재사용성을 높이려고 하다보니 margin, padding 등의 값들이 호출되는 곳마다 상이할 수 있어서 이런 속성 값들은 컴포넌트에 기본 값을 적용하더라도 props로 전달받아 사용하는 것을 권장합니다.

 

 

 

 

 

 

 

 

이상으로 Atomic Design에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.