Atomic Design Pattern 파헤치기

더 나은 폴더 구조 만들기

개발을 하다 보면 누구나 한 번쯤은 더 단정된 폴더 구조를 만들기 위해 고민 해보곤 합니다.

폴더 구조는 정해진 명확한 개념이 없고 주관적 기준이 많이 반영 되기 때문에 모두의 기준을 충족 시키는 것은 굉장히 어려운 일입니다.

때문에 아직도 폴더 구조에는 어떠한 답이랄 것이 없는데요, 오늘은 이렇게 폴더 구조 설계를 고안하는 과정에서 조금이나마 도움을 주고자

Atomic Design Pattern이라는 하나의 디자인 패턴을 소개해보려 합니다.

Atomic Design Pattern 이란?

그렇다면 Atomic Design Pattern은 정확히 어떤 것일까요?

 

위의 사진은 Atomic Design Pattern을 설명할 때 가장 널리 쓰이는 사진입니다.

Atomic Design Pattern은 간단히 요약하면 컴포넌트를 5가지 단계로 나누어 관리하는 패턴을 말합니다.

하지만 사진으로만 봐선 각 단계의 차이가 잘 와닿지 않습니다. 그렇다면 이 단계들은 도대체 무엇일까요?

Atomic Design Pattern을 이루는 5가지 레벨

해당 패턴에서 5가지 레벨들은 다음과 같은 의미를 가집니다

 

• Atoms: 원자
• Molecules: 분자
• Organisms: 유기체
• Templates: 템플릿
• Pages: 페이지

사실 이렇게만 정의 해놓으면 아직은 감이 잡히지 않기 마련입니다. 이해를 돕기 위해 사진을 첨부 해보겠습니다.

 

위의 사진은 Atomic Design Pattern의 전체적인 흐름과 구조를 한 눈에 보여주고 있습니다.

그렇다면 이제 우리는 사진에 보이는 5가지 레벨들은 다음과 같이 정리할 수 있습니다.

 

• Atoms: 최소한의 디자인 단위
• Molecules: Atoms가 모여 최소 한가지 기능을 수행하게 되는 단위
• Organisms: Molecules와 Atoms가 더해져 유저에 대해 역할이 존재하는 단위
• Templates: 아직 data가 뿌려지지 않은 최종 레이아웃
• Pages: Templates에서 data가 합쳐져 사용자에게 전달이 되는 최종 디자인

Atomic Design의 장단점

 

Atomic Design Pattern을 사용하면 계층별로 정렬되는 단정된 폴더 구조가 설계 되거나, 컴포넌트의 재사용성이 높아지는 등의 확실한 효과들을 얻게됩니다.

 

하지만 이러한 Atomic Design Pattern에도 분명한 문제점들이 존재합니다.

바로 규모가 커질수록 프로젝트가 굉장히 복잡해질수 있으며, 가장 큰 문제점은 이 5가지 레벨들로 나누는 기준도 개개인의 관점에 따라 달라진다는 것입니다.

 

가장 많이 관점이 갈리는 부분은 Molecules와 Organism 였습니다.

 

그냥 Atomic Design 기준대로 컴포넌트를 나누면 되는거 아닌가? 라고 생각 할 수 있습니다. 하지만 이 두 단계들은 어떠한 한 기준이 없기 때문에 역시 주관적인 관점에 영향을 많이 받기 마련입니다. 따라서 협업을 해야 하는 경우 서로서로가 이 기준을 좁히는데 많은 시간이 소요 될 수 있습니다.

그렇다면 꼭 사용해야 할까?

사실 Atomic Design Pattern을 사용하는 것에 있어서 어려움과 복잡함을 느끼는 것은 어찌 보면 어느 정도 당연한 결과입니다.

 

그렇기에 Atomic Design 방법론을 무작정 따르기보다는 팀이나 프로젝트의 디자인 환경을 고려하여 그것에 맞는 규칙을 만들어 나가야 합니다.

 

이 글을 읽었다면 글이 여러분의 Atomic Design Pattern 도입에 대한 고민 해결에 조금이나마 도움이 되었으면 좋겠습니다.