nx 기반 모노레포 구축기 (1) 프로젝트 구조

모노레포 도입 계기

 

문제 상황

웹 리뉴얼 프로젝트를 시작하면서 기존 웹 서비스를 분석하는 작업에 들어갔다. 특히 많은 팀원들이 공감했던 부분은 사용자 경험이 다방면에서 굉장히 좋지 않다는 것이었다. 특히 디자인적인 부분만 서술해보자면 아래와 같이 일관적이지 못한 사용자 경험과 Voice & Tone, 파악할 수 없는 디자인 원칙과 패턴이 있었고, 더 큰 문제점은 디자인 유지보수를 위한 문서화가 되어 있지 않다는 문제가 있었다.

 

figma 파일이나 디자인 관련 기획 내용은 찾아보기 힘들었기 때문에 현상황에서 할 수 있는 것은 실제 서비스되고 있는 화면을 캡쳐하여 분석하는 방법밖에 없었다. 그 전에 해당 홈페이지를 개발 하셨던 분은 이미 수 년 전 기관을 떠나셨고 잠깐 한국에 체류하셨던 외국 분이셨기 때문에 연락할 수 있는 방법이 없었다. 

 

현재 사이트 일부 화면 

 

나 역시 해당 기관에서 컨트리뷰터로 개발을 하고 있기 때문에, 언제든 내 뒤를 이어 추후 리뉴얼된 웹 사이트를 유지보수할 수 있는 시스템을 만들어야 되겠다는 생각이 들었다. 그 시작은 바로 디자인 시스템을 구축하는 것이었다.

 

디자인 시스템이란?

디자인 시스템은 브랜드의 가치관을 녹이고 사용자에게 일관된 경험을 만들기 위해 Color, Typography, Spacing 등과 같은 재사용 가능한 요소들을 정의한 후 각 컴포넌트에 적용시켜 코드 화하고, 기획자와 디자이너 그리고 개발자까지 다양한 직무의 인원들 모두가 협업이 가능하게 도움을 주는 디자인 가이드에서 개발까지를 포괄하는 기능 요소의 모음이라고 볼 수 있다.

일관적인 브랜드 디자인 원칙 내에서 중앙 집중화된 디자인 시스템 관리는 새로운 구성원이 추가되었을 경우에도 서비스에 관련된 내용을 한눈에 파악하고 원활한 작업을 수행할 수 있게 해준다.

 

즉, 디자인 시스템 구축은 웹 리뉴얼이라는 큰 프로젝트 내에서 독립된 또 하나의 프로젝트가 되는 것이다. 디자인 시스템이 구축이 되면 다른 필요한 프로젝트(웹 서비스, 앱 서비스, admin 서비스 등)에서 공통된 코드를 사용할 수 있게 되며, 이를 기반으로 일관된 사용자 경험과 원활한 유지보수가 가능하게 된다.

 

프로젝트 설계

프로젝트에 들어가기 앞서 미리 고민해본 부분은 해당 웹 리뉴얼 프로젝트가 어디까지 확장될 수 있는가? 였다. 이미 NGO 내에서 다양한 소식을 전달하는 서비스가 티서비스 블로그 등으로 문제 없이 제공되고 있었고, 실제 유저들이 사용하고 있는 NGO 내 지식인과 같은 서비스는 우리가 리뉴얼할 joinworld 웹사이트가 유일했다. 따라서 크게 확장되어봤자 웹의 admin 페이지, 유저 페이지, (필요하다면 앱) 정도며 그 이상 디자인 시스템이 사용될 추가적인 서비스는 없을 것이라 판단했다. 실제로 지금 상황에서 우리가 리뉴얼할 프로젝트는 현재로서는 웹의 유저 페이지 뿐이었다.

 

그렇기 때문에 디자인 시스템 프로젝트를 따로 저장소에서 관리하며 패키지를 배포하고(npm publish) 가져오는 것보다 프로젝트들을 하나의 저장소에서 관리하여 코드를 중앙 집중화하고 통합하는 것이 효율적이고, 동일한 버전관리로 유지보수하는 데 있어서도 인수인계에 큰 어려움이 없을 것이라고 판단해서 디자인시스템과 실 서비스 프로젝트를 함께 관리하는 모노레포 체제를 구축했다.  

 

프로젝트 구조

 

업무 흐름으로 서술하다면 아래와 같다.

 

프로젝트 구조

 

 

[디자인팀]

1. 디자인 팀에서 Figma의 Tokens Studio for Figma 플러그인으로 디자인 토큰을 레포지토리로 push
2. token.json 파일이 해당 레포지토리의 figma 브랜치에서 업데이트 됨

 

@join-world/theme 패키지

foundation (폰트, 색상, 타이포)

1. 해당 레포지토리의 figma 브랜치에서 token.json 변경 감지 
2. 디자인 토큰 파일 기반으로 프론트에서 작업할 수 있도록 css파일 및 ts파일로 만듬
3. 해당 파일들을 빌드하여 export (@join-world/esbuild-config 패키지 사용)  

 

@join-world/ui-components-layout 패키지

layout 컴포넌트 (Flex, Grid, Box 등)

1. 만들어진 파운데이션을 import해서 레이아웃 컴포넌트 제작 (@join-world/theme 패키지 사용)  
2. 해당 파일들을 빌드하여 export (@join-world/esbuild-config 패키지 사용)  

 

+ 그외 @join-world/ui-components-button 등 패키지 제작 예정 

 

@join-world/web 패키지

• 만들어진 디자인 시스템을 바탕으로 실제 서비스 제작

 

@join-world/storybook 패키지

• 만들어진 디자인 시스템을 storybook으로 문서화

 

레퍼런스

Design Token으로 GS SHOP App 디자인 시스템 구축 스토리