Design System: 쓸만한 연습장을 찾아서

Ocean Road: COLDSURF의 디자인 시스템 Problem: 블로그를 모노레포에서 떼어내니..Idea: 연습장을 만들자 Solve: tsdown + storybook + workspace 마치며

디자인 시스템, 모두 각자 개성도 다르고 use case도 제각각 일 것 같습니다. 득과 실이 분명한 디자인 시스템, 저도 아직까지는 어떤 방식이 웹이나 앱 서비스를 구성하는 플랫폼 적인 요소로써의 좋은 디자인 시스템인지는 명확하게 정의할 순 없는 것 같습니다.

Ocean Road: COLDSURF의 디자인 시스템

저는 COLDSURF라는 서비스를 만들면서, 초기단계부터 디자인 시스템인 ocean-road 패키지를 고려하면서 만들었습니다.

제일 처음 COLDSURF를 오픈소스로 public repo로 관리하던 시절부터, pnpm 모노레포 시스템을 통해서 React 웹 컴포넌트와 React Native 컴포넌트를 모두 고려하는 디자인 시스템을 가지고 있었지요.

또한, color token 정도를 커버하는 ocean-road-design-tokens라는 패키지도 하나의 모노레포에서 패키지화 하여 운영하고 있었어요.

Problem: 블로그를 모노레포에서 떼어내니..

그렇게 소소하게 운영하던 디자인 시스템이 하나의 문제점을 맞닥뜨리기 시작했습니다.

기존 모노레포에서 같이 COLDSURF 웹 Nextjs에 종속되어 Static하게 배포되던 블로그 라우트를 떼어내기로 한 순간이었지요.

블로그 라우트를 따로 떼어내어, blog.coldsurf.io 라는 host로 따로 관리하고 레포조차 떼어낸 이유는 다음과 같았습니다.

블로그 글이 쌓이기 시작하자 배포 빌드를 하는 시간이 불필요하게 너무 오래걸리는 것 같다.

SSG route를 한번 빌드할 시점마다 180개정도 만들게 되니, 꽤나 불필요하게 static site generation에 시간을 들이게 되더군요.

블로그는 수정 없던 간단한 배포임에도 SSG에 여러번 시간을 들이게 되는 점이 마음에 걸리기 시작했습니다.

물론, SSG build를 최적화 하여 시간을 줄이는 방법도 고려했었지만 현 상황에서는 따로 레포도 떼어내고 host도 분리하는게 가장 좋은 방법이라고 생각했습니다.

이렇게 모노레포에서 여러개의 폴리레포로 분리가 되니, 기존 하나의 모노레포에 속했던 디자인 시스템 패키지를 github package로 배포하여 사용해야 하는 일이 발생했지요.

Idea: 연습장을 만들자

위에서 정의한 Problem은 사실 디자인 시스템 레포도 따로 떼어내어 관리하면 그닥 어렵지 않은 과정이긴 합니다만, 실제 모노레포에서 따로 패키지화를 해보면 과정이 순탄하지만은 않습니다.

또한, 모노레포에서 떼어내는 만큼 이점을 가져가야겠다고 생각했는데요. 그래서 다음과 같은 아이디어를 냈습니다.

매번 웹 플랫폼에 직접적으로 테스트하면서 컴포넌트를 개발했던 일을 Storybook을 통해 개발단계에서 연습장을 만들어보자.

또한, 이 연습장을 만들어 https://storybook.ocean-road.coldsurf.io/ 와 같이 배포하게 되면 웹에서도 여러 사람이 디자인 시스템을 구경할 수 있을 것이라고 생각했어요.

Solve: tsdown + storybook + workspace

실제 구성은 간단하게 ocean-road라는 레포에서 storybook을 결합한 형태로 모노레포로 관리하고 있습니다.

또한 base, extensions, next, native로 폴더를 따로 분리하여 관리하고 있기도 하지요.

빌드 시스템은 tsdown 이라는 좋은 빌드 툴을 사용하여 RN과 nextjs도 지원하는 디자인 시스템을 구성하고 있지요.

아직까지 컴포넌트 사용성을 올리는 측면의 작업 등의 최적화가 많이 남아있긴 하지만, 블로그에서 헤더와 푸터 등을 공통으로 붙이고 나니 무엇인가 만족감이 느껴졌습니다.

마치며

원래는 하나의 레포에서 관리하던 단순한 디자인 시스템이었지만, 실제 멀티 플랫폼에서 사용하기 위한 DX 등을 고려하며 만들어보니 기존 컴포넌트를 옮기는 작업부터 시작하여 모듈화까지 거치는 많은 bootstrap 작업이 필요했던 것 같습니다.

하지만, 디자인 시스템의 명확한 득인 개발 측면에서 모듈화하여 생산성을 높이는 작업은 꽤나 만족스럽지 않았나 싶습니다.

또한, storybook을 통해 웹으로 배포하니 https://storybook.ocean-road.coldsurf.io/ 와 같은 좋은 연습장도 만들게 되었습니다.

자신만의 서비스를 구성하고 있는 분이라면, 간단한 디자인 시스템을 통하여 생산성을 높여보는 경험은 아주 좋은 경험이 되지 않을까 하며 글을 마치겠습니다.