오늘은 프론트엔드 디자인 설계 기법인 atomic design에 대해서 알아보겠습니다. 기존의 javascript, jquery로 만든 프로젝트에서 컴포넌트의 재사용성에 대한 불편함이 리액트로 넘어와서도 여전히 존재함을 느껴왔습니다. 이는 적절한 디자인 설계 틀이 없어서 발생한 문제라고 생각합니다. Atomic Design은 간단히 컴포넌트의 단위를 매우 작게 쪼개어 큰 단위로 조립해가는 단계를 나누는 방법입니다. 마치 작은 레고를 합쳐서 하나의 큰 결과물을 내는 방법과 같습니다. 그럼 atomic design에 대해 간단하게 알아보겠습니다.
Atomic Desing
Atomic design은 페이지의 컴포넌트들의 단위를 매우 작게 쪼개어 조립하는 방법입니다. Stephen Hay가 인용한 말과 같이 페이지를 디자인 하는 것이 아니라, 컴포넌트의 시스템을 디자인하는 방법입니다. 즉, 컴포넌트들을 어떤 단위로 관리하는지에 대한 방법론입니다.
단위
디자인 설계를 5가지 부분으로 나누는 방법입니다. 왼쪽에서 부터 가장 작은 단위에서 큰 단위로 조립됩니다.
- Atoms
- Molecules
- Organisms
- Templates
- Pages
1. atoms
- 가장 기본적인 컴포넌트 블록입니다.
- 예를들어, label, input, button 등 입니다.
- color platettes나 폰트 혹은 애니메이션 같은 추상적인 컴포넌트들도 포함됩니다.
2. molcules
- atom들의 그룹
- 컴파운드들의 가장 작고 기틀이 되는 단위
- molcules 들은 자신만의 property를 가질 수 있습니다.
- 디자인의 중추적인 역할을 합니다.
- 예를들어, form, input, button은 개별적으로는 별로 중요하지 않지만, 세가지가 합쳐진다면 검색이라는 하나의 역할을 수행할 수 있습니다.
- "하나의 일을 하고 그 일을 잘해라" 가 가능하게 됩니다.
3. organism
- molcule들의 그룹
- 인터페이스가 어떠한 모양을 갖기 시작하는 단계
- 다른 mocule들을 바꿔서 사용할 수 있습니다.
- 독자적이고 변형이 가능하고 재사용가능한 컴포넌트들을 만들 수 있습니다.
4. templates
- organism들의 그룹
- layout과 디자인을 볼 수 있는 단계
- 각각의 추상적인 molecules와 organism들에게 context를 제공하여 구체적인 페이지가 되는 단계
- 클라이언트가 볼 final design이 됩니다.
5. pages
- 페이지는 template의 구체적인 구현체
- placeholder 대신 실제 사진을 입력
- 디자인 시스템의 효율성을 테스트해보는 단계
장점
해당 문서에서 제공하는 장점은 다음과 같습니다. 기본적으로 작은 단위의 역할을 분리함으로서 얻을 수 있는 이득이라고 생각합니다. 특히 재사용성에 있어서 많은 장점을 얻을 것이라 예상됩니다.
- 역할의 분리
- 재사용성
- 확장성
- 지속가능성
- 팀단위의 작업 가능
- 추상화 단계에서 구체적 단계로 이동
- 구체화단계에서 유사점 발견 가능
- 분해보다는 조립
정리
기존의 javascript와 jquery로 만든 웹프로젝트를 진행하면서 불편했던 점이 정말 많았습니다. 특히, 컴포넌트들을 재사용하기 힘들고, state 관리가 쉽지 않아 비슷한 내용의 코드가 늘어나는 것이 불편했습니다. 여러가지 디자인 패턴을 이용해서 극복할 수 있었지만 쉬운일은 아니였습니다.
그러고 리액트를 사용함으로서 위 두 문제를 어렵지 않게 해결할 수 있었습니다. 물론 리액트에도 해결해야될 부분들이 있지만 next.js와 redux를 도입하므로서 어렵지 않게 해결할 수 있었습니다.
문제는 여전히 컴포넌들을 재사용하기 힘들었다는 점인데, 그는 이러한 설계적인 부분에 대한 정확한 가이드라인이 없다는데 기인한다고 생각됩니다. 예를들어 스프링의 경우 Controller, Service, Repository, Entity 등 레이어 별로 역할을 나누어서 재사용할 수 있는 틀이 마련되어 있습니다. 그에 반에 리액트는 라이브러리이다 보니 그런 틀을 적립하기 힘들었습니다. 특히 저는 프론트앤드 개발자가 아니기 때문에 시스템 설계에 대한 부분에 감을 잡기 힘들었습니다.
아토믹 디자인은 각 부분의 역할을 충실히 이루어지게 만들어줍니다. 여기에서도 강조하는 부분은 디자인은 누구든지 할 수 있지만 디자인을 설계하는 측면에서는 혼자서 고민하기는 힘들다고 생각합니다. 개발은 혼자서 하는 것이 아니기 때문에 여러 구성원이 합리적으로 동의할 수 있는 설계를 따라갈 수 밖에 없습니다. 개인적으로는 지금까지 간지러웠던 부분들을 잘 긁어준 설계라 적극적으로 차용할 예정입니다. 특히, next.js의 특성상 pages라는 컴포넌트를 따로 둠으로서 atomic design 설계에 쉽게 적용할 수 있다고 생각합니다.
기존에 리액트를 개발하면서 atomic design 방식을 사용했을 때, 예상되는 고민 사항과 어떻게 해결해야할지 정리를 하면서 글을 마무리 해보도록 하겠습니다.
1. atom 단위에서의 설계
component를 생성하는 단계에서 atom의 properties들의 변경이 빈번해질 것으로 예상이 됩니다. 문제는 매번 변화할 때마다 atom에 의존하는 다른 컴포넌트들에 영향이 미치지 않아야 될 것인데 이는 bottom up 방식의 테스트 개발로 해결 할 수 있을 것이라 예상됩니다. 비록 테스트로 100% 커버가 불가능 할 수 도 있지만 가장 작은 단계에서 테스트 커버리지를 높힘으로서 최대한 디펜던시에 대한 영향을 줄일 수 있을 것 같습니다.
2. 한없이 늘어나는 molcules
atom의 개수는 한정적이지만 molcule들의 수는 조금만 모양이 달라져서 많이 늘어 날 것이라 예상이 됩니다. 예를들어 오른쪽에 있던 atom을 위로도 사용할 수 있도록 만든다면 공통적인 부분들을 모아서 하나의 컴포넌트로 만들 수도 있지만 그런 공통분모를 찾을 때까지의 시간을 걸릴 수 있을 것이라 생각합니다. 이 또한 짧은 단위의 리펙토링을 통해 공통분모를 찾아 하나의 컴포넌트로 해결할 수 있도록 처리하는 것이 좋은 방법이라 생각이 됩니다.
