개요
이전 포스팅에서 Atomic Design 을 적용하기 위한 기초 개념정도 조사를 끝마쳤다.
이후 내가 개발하고 있는 블로그 프로젝트 에 적용해서 1차적인 컴포넌트 구조 변경이 어느정도 완료 되었다.
이에 따른 변화점과 개인적인 생각을 글로 남긴다.
적용 과정
일단 프로세스는 개인적으로 아래와 같이 진행하였다.
모든 컴포넌트를 원자(Atomic) 단위로 분해
일단은 처음 적용은 재사용 여부와 관계 없이 모든 컴포넌트를 최대한 작게 쪼개 보았다.
이 과정을 하면서 이것까지 쪼개야되나..? 라는 생각도 많이 들었지만 일단은 분해해서 Atom 디렉토리에 모아 두었다.
원자들을 활용해서 분자(molecules) 단위로 재구성
분자 단위까지의 구성에서부터는 조금은 설계가 수월했다.
일단, 원자단위로 모든 컴포넌트를 쪼갰으니, 각 분자에 필요한 컴포넌트를 조합하면 되는 부분이었다.
이때, 추가적으로 원자(Atom) 의 styledComponent 에 전달할 Props(fontSize, fontWeight, Color...) 등등을 조금 더 디테일 하게 잡을 수 있었다.
중요하게 고민했던 부분은 최대한 많은 컴포넌트에서 재사용 할 수 있도록 Props 와 Type을 세세하게 명시하는 부분이었다.
확실히 이런 협업에 필요한 설계를 진행할때 Typescript로 인해서 수월했던 부분들이 많았던것 같다.
어쨋든, 이러한 과정으로 분자까지 분해를 하였고, 분자 또한 재사용이 예상되는 컴포넌트와 그렇지 않은 컴포넌트들이 있었지만 개인적으로 파일 구조가 통일성 있게 되는 것이 좋았기 떄문에 모두 분리 하였다.
최종 섹션을 구성하는 유기체(Organism) 단위로 재구성
이제 필요한 분자들을 조합해서 유기체를 구성하였다.
구조를 설계하면서 분해하다 보니 유기체(Organism) 의 경우에는 각 페이지에서 각각의 섹션 느낌이 많이 들었다.
예를들어, 아래와 같이 구성을 하였다.
- Red: Atom
- Blue: Molecule
- Green: Organism
위와 같이 분해하였다.
이렇게 분해하니 기존에 아무 기준없이 설계한 디자인 시스템의 구조 보다 확실히 재사용 할 수 있는 컴포넌트들이 많이 보였다.
Template 과 Page 의 애매모호함
Gatsby 에서 Static Generate 하기 위한 방법은 아래와 같다.
- Page 폴더에 페이지를 구성한다.
- Template 컴포넌트를 만들고 gatsby.node.config 파일에서 해당 템플릿을 활용하여 createPage 를 통해 사전 Generating 한다.
이러한 이유로 사실 구조를 나눌때 Template 과 Page 단위가 조금 애매한 부분이 있었다.
그래서 일단 POST와 관련된 페이지는 추가적인 라우팅이 필요하다는 기준을 새우고 가장 메인이 되는 Landing Page(Main) 은 page 폴더 내에서 처리하도록 하였다.
결과정리
일단 작업을 하면서 느낀점은 확실히 재사용이 가능한 페이지가 많았다는 점이다.
물론 CSS 로 좀 더 디테일한 props 를 전달하는 복잡함은 있었지만, 한번 적용해놓으면 생각보다 원자 혹은 분자 단계에서 많은 재사용을 할 수 있었다.
실제로 ATOM 에서 생각보다 많은 컴포넌트를 재사용하였고, 각각의 Styles이 많이 줄어들었고 더욱 유의미한 것은 번들링 사이즈이다.
실제로 pnpm 으로 패키지매니저를 바꾸면서 번들 크기가 많이 줄었긴 하였다.
추가적으로, 컴포넌트 구조를 변경하고 중복되는 컴포넌트들을 줄여서 재사용을 한 결과 약 2MB 정도의 번들 크기가 줄어들었다.