Front-end) 프로젝트 아토믹 디자인 패턴 적용

이전 포스트

Front-end) 프로젝트 설계 및 기초 세팅

---

✅ Intro

• 아토믹 디자인 패턴을 간단하게 공부하고 이것의 장단점 대해 간략하게 설명해보자.
• 아토믹 디자인 패턴을 적용하고 설계해 보자.
• 아토믹 디자인 패턴에서도 단점이 명확하게 존재하는데 왜 쇼핑몰 프로젝트를 진행할 때 해당 구조를 왜 선택했지를 파악해보자.
• 아토믹 디자인 기초 설계

 

🔍 아토믹 디자인이란?

아토믹 디자인 패턴은 UI 설계 방법 중의 하나로, 화면을 분해 가능한 가장 작은 단위인 원자 단위까지 나누어, 각 컴포넌트의 재활용성을 높이고 화면 구성을 쉽게 제작하는 접근 방식 중 하나이다.

• 원자(Atoms)
  • 더 이상 쪼갤 수 없는 최소 단위까지 쪼갠 컴포넌트
  • 가장 기본적인 button, input, img 등을 포함
• 분자(Molecules)
  • 최소 2개의 원자가 모여서 만들어진다.
  • 최소 1가지의 기능을 수행하는 List와 같은 레이아웃을 조립하는 단위 
• 유기체(Organisms)
  • 원자와 분자가 모여 만들어진다.
  • 사용자의 의미와 역활이 존재하는 단위
• 템플릿(Templates)
  • 실제 데이터가 포함되기 이전의 프로젝트 최종 레이아웃이다.
  • 유기체 들이 모여 만들어진다.
• 페이지(Pages)
  • 최종적으로 실제 데이터를 받아 유저에게 화면으로 보여주는 최종 단계

아토믹 디자인(Atomic Design) 공부 및 사용

 

 

❓ 쇼핑몰에서 어떻게 아토믹 디자인 패턴을 적용하여 개발 했는지?

아토믹 디자인 패턴은 정확한 규칙이 정해져 있는것이 아닌 것 처럼 프로젝트에 적용하는 것 또한 명확한 규칙이 정해져 있지 않아서 어려움을 겪었다.

 

어려웠던 점

위에서는 간단하게 아토믹 디자인 패턴에 대해서 알아봤는데 디자인에서 해당 컴포넌트는 분자인지 유기체 인지 구분이 안가는 요소들이 존재 했고 비지니스 로직은 유기체 부터 들어가야 될지 템플릿부터 들어가야 될지도 많은 협의와 고민을 해보았다. 

 

결론

비지니스 로직은 Header를 제외한 나머지 원자, 분자, 유기체에는 비지니스 로직을 두지 않았다.

프로젝트 내에서 재활용 할 컴포넌트는 대부분 Atoms(원자)에 버튼이나 Molecules(분자) 버튼 그룹 등 컴포넌트들을 협의 후에 설계 하였다.

 

쇼핑목 아토믹 디자인 패턴 적용

• 아래 이미지와 코드와 함께 아토믹 디자인 패 적용을 확인해보자

🔍 Atoms (원자)

• avatar : 프로필 아바타 등의 아바타를 image Props를 통해서 이미지를 전달받아 사용해 재활용성을 높였다. 

• button : 기본적인 버튼으로 onClick이나 onMouseOver 등의 Props를 통해 서비스 로직의 Handler와 연결하도록 설계하였다.

• checkBox : 회원가입 화면에서 checkBox 버튼을 통해 동의 여부나checkBox 기능을 사용할 때 주로 사용한다.

• chip : 쇼핑몰 상품에 태그 등을 이용할 때 주로 사용한다.

• collpase : Header에 있는 부모 카테고리를 MouseOver하면 자식 카테고리를 보여주는데 그때 하나의 컴포넌트 마다 collase 컴포넌트를 호출한다.

• datePicker : 달력 컴포넌트

• input : 텍스트를 입력받는 input 태그를 컴포넌트로 생성하여 onChange 를 Props로 받아 change Handle은 서비스 로직에서 처리하도록 설계 하였다.

• option : 상품 옵션 등을 text Props로 입력 받아 해당 상품의 옵션을 나타내기 위한 컴포넌트

• progress : Loading 화면에 circle progress를 표현할 때 사용할 예정이다.

• source : icon, image, video로 source 폴더로 구조를 나눠놨다
  • icon : mui에서 제공되는 icons-material 컴포넌트를 props로 받아 아이콘을 화면에 나타내기 위한 컴포넌트
  • image : image url을 props로 받아 이미지를 보여주는 컴포넌트
  • video : video를 화면에 보여주는 컴포넌트
• text : 전반적으로 홈페이지에 사용하는 텍스트를 재활용 할 수 있게 props를 content로 전달 받아 처리했다.
• toggle : 토글 버튼 컴포넌트

 

🔍 Molecules (분자)

 

•  banners : atoms에 있는 image 컴포넌트를 합쳐서 이미지 베너 컴포넌트를 구축할 예정이다.

•  card : 메인 페이지, 카테고리 페이지에서 상품을 표시 할 때 사용하기 위한 카드 컴포넌트이다.

•  icon : atoms에 있는 icon 컴포넌트를 두개 이상을 사용하는 iconGroup 컴포넌트이다.

•  link : link 컴포넌트 props에 children이라는 React.Node를 전달 받아 button Link, text Link 형식의 컴포넌트를 만들어 재활용성을 높였다.

•  masonry : image 컴포넌트를 2개 이상을 재활용해서 격자 형태로 레이아웃을 구성한 컴포넌트

•  modal : children이라는 React.Node props를 전달받아 팝업 창을 띄워주는 컴포넌트

•  pagination : 쇼핑몰 카테고리 아이템들의 각 페이지마다 아이템의 정보를 페이지 단위로 props를 전달받아서 화면에 표시해주는 컴포넌트

• piechart : 상품 리뷰들의 정보를 props로 받아 pieChart로 화면 상으로 명확한 수치를 보여주기 위한 컴포넌트
• selectBox : atoms에 있는 option 컴포넌트를 두개 이상을 사용하여 selectBox로 원한은 옵션을 선택하도록 만들 때 쓰는 컴포넌트
• swiper : atoms에 있는 image 컴포넌트를 props로 받아와 메인 Swiper 배너로 화면에 나타내기 위한 컴포넌트

 

이렇게 organisms(유기체)를 제외한 팀원끼리 협의를 통해서 atoms와 molecules를 설정해 보면서 느겼던 문제점을 간단히 설명해 보자

 

개발을 진행하면서 atoms와 molecules, organisms 설정의 문제점

※아토믹 디자인 패턴의 기본 개념이 원자가 모여 분자가 되고 분자가 모여 유기체가 되고, 유기체를 결합하여 템플릿 틀을 만들고 거기에 데이터를 입혀줘 최종적인 하나의 페이지가 완성이 된다.

아토믹 디자인 패턴의 기본 이론은 너무나도 당연한 개념처럼 쉬워 보였지만, 개발을 할 때 우리가 직면했던 문제들은 전혀 그렇지가 않았다.

 

❓ 이 컴포넌트는 분자일까 유기체일까??

위에서 아토믹 디자인 패턴의 기본 이론으로만 따지고 보면 쉽게 나눌 수 있는거 아니야??
아니요, 저희가 개발 하면서는 느끼기에는 쉽지 않은 문제였다고 생각한다.

 

이론상으로는 직관적으로 나누어져 있지만 컴포넌트 구조로 생각해 보면 명확히 구분되어 있지가 않다. 컴포넌트들은 매우 다양하게 재사용될 수 있기 때문에 어느 단계에 정확히 속해있는지 구분 짖기 어려웠다.

간단하게 아래와 같이 예를 들어서 설명해 본았다.

piechart로 예를 든다면, piechart로만 놓고 본다면 piechart 단일로는 여러 가지 원자들의 조합으로 만들어졌기 때문에 molecules로 볼 수 있지만, 위 이미지와 같이 전체창의 piechart는 단순히 텍스트와 그래프 뿐만 아니라, 다양한 리뷰 점수의 퍼센트와 같은 복합적인 데이터를 시각화하고 여러 molecules (piechart, 퍼센트 텍스트 등)가 모여서 좀 더 복잡한 organism으로 볼 수도 있다고 할 수 있다.

이렇게 단계를 구분짖기 애매모호한 상황이 발생하면서, 대응하는 데 시간이 많이 소요하게 되었다.

 

빠르게 컴포넌트를 개발하기 위해 도입한 아토믹 디자인 패턴인데, 아토믹 디자인 패턴 때문에 컴포넌트 개발이 느려지는 상황이 발생하게 되면서 디자인 패턴의 개념을 완전히 이해하지 못하고 적절하지 않은 방식으로 패턴을 적용했다는 것이 문제점이 였던거 같다.

 

개발을 진행하면서 내가 느낀 아토믹 디자인의 장단점

• 장점
  • 원자(atoms), 분자(molecules), 유기체(organisms) 등 단위로 만들어둔 컴포넌트들을 재사용할 수 있다.
  • 유기체, 템블릿 단계에서 개발 속도가 빨라져 적은 인원으로 빠른 개발이 가능해진다.
  • 체계적인 컴포넌트 관리가 가능하다.
  • 컴포넌트 마다 각각의 스타일을 가지고 있어 일관성 있는 디자인 개발이 가능해진다.
• 단점
  • 아토믹 디자인 패턴의 5단계의 구분이 명확하지 않아, 컴포넌트를 어떤 기준으로 나누고 관리하고 재사용할 지 판단이 어려워 진다.
  • 명확하지 않은 판단 기준 때문에 프로젝트 협업에 의견 충돌이 발생한다.
  • 개발자가 러닝 커브가 너무 오래 걸려 정작 프로젝트를 빠른 개발을 하기위해 채택했던 디자인 패턴을 공부하는 시간으로 날려버릴 수 있다.

 

이렇게 장점과 단점이 명확하면서까지 우리는 왜 아토믹 디자인 패턴을 선택하였는가?

 

✅ 이렇게 많은 단점과 협업할 때 힘들면서도 아토믹 디자인을 선택한 이유

• 컴포넌트를 단계로 나누어서 재사용할 수 있다는 장점
• 러닝 커브가 오래걸려도 그 만큼 숙지를 한다면 빠른 개발을 할 수 있다는 장점
• 체계적으로 컴포넌트를 관리 할 수 있다는 장점
• 연결 되어 있는 컴포넌트가 하나만 변경해도 다 같이 변경하여 원하는 대로 변경 가능하게 끔 하여 유지보수를 더욱 수월하게 할 수 있다는 장점

 

이러한 장점들을 가지고서 프로젝트에서 아토믹 디자인을 선택하게 된 이유와 설계도 알아보았으니 다음은 GraphQL설정 및 선택한 이유를 살펴 보자

 

참고

출처 : https://atomicdesign.bradfrost.com/chapter-2/

Atomic Design Methodology | Atomic Design by Brad Frost

---

Front-end) 프로젝트 GraphQL 연동과 커스텀 Hook

다음 포스터