[Design Pattern] : Atomic Design (아토믹 디자인)

프로젝트를 시작하면서 기존에 React를 왜 사용했는지를 모를 만큼 작성된 코드에는 React의 장점? 강점? 을 전혀 찾아볼 수가 없었다... 😭 😭 😭 😭

 

한 페이지에 길면 10000라인이 넘는 코드들이 있고, 누군가 수정을 하려고 그 페이지 코드를 보면 닫고 싶은 마음이니깐...

(재사용 가능한 부분이 전혀 없음...  단순한 컴포넌트 몇 개를 제외하면...)

 

지난주 새로 오신 시니어 프런트분이 코드를 보고 분석하고, 새로운 프로젝트를 시작함에 앞으서 우리가 새롭게 적용해야 할 방향성을 제시해 주셨다. ( 물론 선택된 방향의 결과만 듣게 되었지만... 선택한 이유를 물어볼 예정 🥲)

 

그중에서 오늘은 우리가 사용하는 NextJs에서 사용할 디자인 패턴 Atomic Design에 대해서 간단하게 적어보고,  해당 패턴에 대한 느낀 점과 우려되는 점만 작성해 볼 예정이다. (프로젝트가 진행되면서 느낀 점을 계속 포스팅할 예정! )

 

---

1. Atomic Design

아토믹 디자인을 여러 블로그나 글을 봤을 때 공통적으로 설명하는 바는 가장 작은 단위(기능)로 쪼개서 그것들을 조립해서 사용하는 방식으로 이해했다.

Atomic Design

---

Atom(원자)

• 가장 작은 단위의 컴포넌트
• button, icon, input 같은 최소 기능의 컴포넌트로 볼 수 있다.

Atom(원자)

---

Molecules(분자)

• 원자 + 원자 (2개 이상)의 원자로 이루어져 있다.
• 쉽게 보면 검색창 같이 input + button으로 이루어진 컴포넌트이다.

Molecules(분자)

---

Organism(유기체)

• 분자들 또는 분자 + 원자로 이루어진 컴포넌트다.
• 헤더 메뉴와 같은 컴포넌트이다.

Organism(유기체)

---

Templetes(템플릿)

• 유기체들의 집합이다.
• 해당 레이아웃을 확인하고 해당 컴포넌트들이 작동하는지 볼 수 있는 단계다.

Templetes(템플릿)

---

Page(페이지)

• 템플릿을 이용해서 실제 데이터를 보여주는 단계다. (완성)

Page(페이지)

---

2. 장 / 단점

• 👍🏻 장점
  •  컴포넌트 재사용성이 뛰어나다
  • 실제 개발하는 애플리케이션과 분리해서 개별 컴포넌트를 개발하고 테스트가 가능하고, 피그마와 같은 디자인 도구에도 확인이 가능하다. ( 디자인에서 나누어진 컴포넌트로 개발)
  • 팀프로젝트 시 스타일 가이드를 최소로 할 수 있다. (이미 만들어진 컴포넌트를 조합하는 형태)
  • 디자인의 수정이 용이 ( 개별 컴포넌트만 수정하면 끝)
• 👎🏻단점
  • Atom단위로 나누고 컴포넌트 개발에 많은 시간이 소비된다.
  • 구분의 기준이 명확하지 않으면 팀 프로젝트시 혼란스럽다. ( 기존 프로젝트에 있는 컴포넌트를 나누는 것만으로도 나누는 사람마다 기준이 달라서 헷갈린다.)
  • 다양한 케이스가 생기면 atom 이외 많은 단계에서 과도한 props를 전달하게 된다. 
  • 명확한 UI디자인이 없다면 굉장히 작성해야 할 컴포넌트가 많아진다.

 

---

3. 느낀 점

실제로 프로젝트 구현단계는 아니다. 지금은 기존 프로젝트에서 나눌수 있는 컴포넌트의 최소단위 atom부터 나누고 하나씩 조합할 수있는 컴포너트를 분류하고 있다. 

분류만 했을 뿐인데도 명확한 디자인 패턴에 이해가 없어서 초반에는 굉장히 혼란스러웠다. 어디까지 나눠야 하고 , 이렇게까지 나눠야 하는 게 맞는 것인가? 하는 의문도 들었다.

그리고 이 하나의 컴포넌트를 어떻게 관리하면 좋을지 걱정도 앞섰다. 

다만, 처음부터 탄탄하게 컴포넌트를 만들어낸다면 이후에 좋은 결과가 있지 않을까 기대도 된다.

 

이전에 StoryBook이라는 라이브러리를 처음 알았을 때는 왜 이 라이브러리를 사용하지?라는 의문이 있었는데, 컴포너트 분류 작업을 하면서 갑자기 떠올라서 우리 프로젝트에 적용해봤으면 좋겠다.

 

내일은 StroyBook에 대해서 한번 알아보고 블로그로 남겨봐야겠다.

 

 

 

참고링크

https://bradfrost.com/blog/post/atomic-web-design/