기존 코드 문제점
짧은 기간 내 제작/배포가 목적이었다 보니,
컴포넌트 구성에 있어서 Tap만 나누고 각 Tap에 모든 코드를 때려박으며 개발을 했다.
각 탭의 코드량이 약 500줄, template 코드만 200줄 가까이 됐었다.
그러다 보니 점점 유지보수가 까다로웠다.
컴포넌트를 나누긴 해야 하는데 어떻게 나눠야 할지 가늠이 되지 않던 중,
Atomic 디자인 패턴을 알게 되었다.
Atomic 디자인이란?
화학적 관점에서 영감을 얻은 디자인 시스템. 모든 것은 atom(원자)으로 구성되어있고 atom(원자)들이 서로 결합하여 molecule(분자)이 되고, molecule는 더 복잡한 organism(유기체)으로 결합하여 궁극적으로 모든 물질을 생성한다. 아토믹 디자인에서는 이 개념을 차용해서 컴포넌트를 atom, molecule, organism, template, page의 5가지 레벨로 나눈다.
- Atom: 더 이상 분해할 수 없는 기본 컴포넌트
- Molecule: 한 가지의 일을 하는 고유한 특성을 가진 컴포넌트
- Organism: 서비스에서 표현될 수 있는 명확한 영역, 재사용성이 낮아진다.
- Template: 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임
- Page: 유저가 볼 수 있는 최종 UI
이 설명이 상당히 매력적으로 다가와 바로 적용을 해봤다. 우선 첫 번째 Tap인 기록하기 Tap만 적용을 해보기로 했다.
적용하며 느낀 점
-
우선 코드를 보나 파일 구조를 보나 아주 눈이 편해서 좋았다. 구성 요소를 명확하게 할 수 있기 때문이다.
-
컴포넌트를 atomic하게 잘게 쪼개다 보니, 쪼갤 때는 작은 요소도 컴포넌트화 해야해서 번거로운 점도 있었지만, 만들고 나니 재사용성이 높은 컴포넌트가 많아졌다.
-
제시되는 기준대로만 나누면 될 것 같았지만, 이건 지극히 주관적이어서 모호한 부분이 있었다. 특히 Molecule과 Organism 의 경계가 그랬다.
개인 프로젝트라서 내 주관적으로 했지만, 팀 프로젝트나 회사에서 적용할 때는 팀원들 간의 기준을 좁힐 필요가 있겠다 생각했다. -
2번과 약간 모순되지만 재사용성이 그리 높지 않을 수도 있는 것 같다.
만약 비슷하지만 다른 컴포넌트가 필요해지면, props로 해결할 지 새로 만들어야할 지 애매해지는 것 같다.
