[와우 디자인 시스템 개발기] 프로젝트 세팅

이번에는 씨엠씨 친구들과 하는 디자인 시스템이 아니다.
GDSC Hongik이라는 단체에서 개발팀으로 참여하고 있는데, 여기서 개발하는 디자인 시스템에 관한 글이다.
이름은 와우 디자인 시스템이다.
 
warrr-ui 덕분에 계속해서 디자인 시스템 관련 공부를 해오다 보니, GDSC에서도 많이 적용해 볼 수 있었다.
와우 디자인 시스템을 개발하기 위해서 약 5주간 공부를 해왔었는데, warrr-ui와 상당히 비슷한 플로우였다.
다만, 다른 점은 시간적 제약으로 인해서 딥다이브까지는 못한 거 같다.
 
GDSC에서 만드는 프로덕트는 약 300명의 학회원들이 실제로 사용해본다.
그래서, 더 완성도 있게, 기한에 맞춰서 개발해야 한다.
 
이번에 개발하는 와우 디자인 시스템도 추후 GDSC 어드민, 스터디 서비스, 학회원들의 프론트엔드 스터디에 활용될 예정이라 보다 완성도 있게 개발하고 싶었다.
 
일단, 어쩌다 보니까 내가 프로젝트 세팅을 주로 하게 되어서 관련해서 글을 써보려고 한다.

 

패키지 구조

일단, 패키지 구조부터 알아보자.

wow-design-system/
├── apps/
│   └── wow-docs/
└── packages/
    ├── theme/
    ├── wow-icons/
    ├── wow-tokens/
    └── wow-ui/

 
이렇게 패키지 구조를 정했는데, 일단 wow-docs는 우리가 생각하는 디자인 시스템 문서 페이지이다.
물론, 당장은 시간이 없어서 문서 페이지까지는 제작하지 못하고, wow-ui 스토리북의 문서화를 많이 신경 써서 배포할 예정이다.
추후 시간이 된다면 이 문서 페이지까지 개발해보려고 한다.
디자인 시스템인데 문서가 제대로 갖춰져 있지 않다는 건...
 
어쨌든 넘어가고, theme은 npm으로 배포하지 않고 우리가 내부적으로 활용할 theme을 정의한 패키지이다.
우리는 이 디자인 시스템에서 panda css를 사용하기로 정했고, 이를 활용하기 위한 자잘한 세팅들이 추가적으로 필요하다.
원래는, wow-tokens, theme 패키지 없이 preset이란 걸 사용해서 사용자에게 panda css를 사용하도록 강제할 수 있기는 한데, 그렇게 하는 것보다 panda css 사용자가 조금 불편하더라도 기술 스택에 제한 없이 사용하기를 원했다.
그래서 wow-tokens에는 string 값으로 토큰을 다 정의해 뒀고, theme에서는 우리가 wow-tokens에 정의한 토큰을 panda css에서 사용할 수 있도록 구성했다.
 
이런 구성을 생각해 내기까지도 정말 많은 과정이 있었다.
panda css 공식 문서에서는 preset을 개발하는 것을 권장하기는 한다.
하지만, 이렇게 하면 panda css 사용자 외에는 이 라이브러리를 쓸 수 없기 때문에,,, 위 방법으로 진행하기로 했다.
https://panda-css.com/docs/guides/component-library
 
그리고, wow-icons는 이름만 봐도 알다시피 아이콘 패키지이다.
이 아이콘 패키지에서도 뭔가 도전해보고 싶은 것들이 되게 많았다.
당근의 디자인 시스템팀 고수 개발자 정현수 님이 개발한 seed-icon 같이 피그마와 깃허브를 연동해서 아이콘을 자동으로 생성해 주는 거라든지,,,
지금 wow-icons에서는 리액트 컴포넌트 방식으로만 아이콘을 사용하도록 되어 있는데, svg 파일도 수용할 수 있도록 설정을 변경한다든지,,,
스크립트를 사용해서  모든 아이콘 파일이 들어있는 파일을 개별 아이콘 파일로 분리한다든지,,,
정말 많았지만 지금은 이걸 다 도전할 만큼의 시간을 들일 수는 없는 상황이라 추후 기회가 되면 꼭 더 도입해보고 싶다.
그리고 warrr-ui에 이 부분들을 더 도입해보려 한다.
 
우리가 채택한 구조는 진짜 유명한 디자인 시스템 레포지토리를 하나하나 분석해 가면서 어떻게 구성하는 게 좋을지 많이 고민한 후 구성한 구조이다.
아래 레포지토리에서는 seed-design처럼 css var를 활용해서 세팅도 해보려고 도전해 봤었다.
https://github.com/ghdtjgus76/design-system-setting
 
그런데, 토큰 값 하나가 바뀐다면 우리는
- stylesheet/global.css 변경 후 배포
- tokens/color.ts 또는 tokens/typography.ts 변경 후 배포
이렇게 두 가지 과정을 거쳐야 하고,
 
panda css를 사용하고 있는 우리 라이브러리 사용자는
- tokens, stylesheet 다시 다운로드
- panda.config.ts에서 globalVars 등록
이렇게 번거로운 과정을 거쳐야 한다.
 
이렇게 불편할 거면 디자인 시스템을 쓰는 의미가 있나? 하는 생각이 들었다.
그래도 css 라이브러리는 최대한 제한 없이 이 라이브러리를 쓸 수 있도록 하고 싶었고, 그중에서 가장 낫다고 생각하는 방법이 현재처럼 tokens와 theme을 분리해서 사용하는 방법이었다.
 
이렇게 세팅 연습만 네 번을 하고 나서야,,, 겨우 결정을 할 수 있었다.
 

모노레포

우리는 지금 터보레포라는 모노레포 환경에서 개발 중이다.
지금은 프로젝트 세팅을 하면서 wow-docs에서 우리가 적용한 설정들이 잘 적용되는지 확인한 후 다시 npm에 배포하고 있다.
그런데, 내 로컬 환경에서는 문제없이 잘 돌아가고 있는데, 다른 팀원이 아래와 같은 에러가 발생한다고 했다.

 
알고 보니까, 모노레포 환경에서 다른 패키지를 가져올 때는 우리가 기대한 것처럼 npm 패키지 상에 배포된 것을 가져오는 것이 아니라 package.json의 exports 속성에 정의된 파일을 가져오는 것이었다.
wow-ui의 package.json에는 아래와 같이 우리가 npm에 배포할 때 어떻게 내보낼 것인지 정의해 주는 부분이 있는데, 여기서 파일을 읽어서 가져오게 된다.
하지만, 빌드를 별도로 하지 않았다면 dist 폴더가 생성될 리가 없다.
그래서 클론한 후에는 pnpm install, pnpm build 과정이 필요한데, 이 부분을 알지 못했던 것이다.

"exports": {
    "./styles.css": "./dist/styles.css",
    "./Box": {
      "types": "./dist/Box/index.d.ts",
      "require": "./dist/Box.cjs",
      "import": "./dist/Box.js"
    },
    "./Button": {
      "types": "./dist/Button/index.d.ts",
      "require": "./dist/Button.cjs",
      "import": "./dist/Button.js"
    }
  },

 
https://turbo.build/repo/docs/handbook/sharing-code/internal-packages#3-import-the-package
위 글을 읽어봐도 좋을 것 같다.
별도의 빌드 과정을 거쳐주면 위에서 발생했던 모듈을 찾지 못하는 에러는 잘 해결된다.
 
추가적으로, 이렇게 모노레포 환경에서 테스트해 보는 것과 별도의 프로젝트를 생성해서 테스트해보는 게 달라서, 추가적으로 다른 프로젝트를 생성해서 wow-ui 컴포넌트들이 잘 적용되는지 확인해 봤다.
번들링 하고 나서 배포한 후 wow-docs에서는 분명 잘 적용됐는데, 다른 프로젝트에서는 경로를 찾을 수 없다는 에러가 발생하기도 했었다.
어떤 면에서는 모노레포가 편하기도 하지만, 어떤 면에서는 아닌 것 같기도,,,
이렇게 여러 번의 테스트를 거쳐 겨우 잘 작동하도록 세팅할 수 있었다.
 
이렇게, 정말 힘들게 세팅을 했는데, 생각보다 수정돼야 할 부분이 많았다.
세팅 연습을 네 번을 했는데도 디자인 시스템을 개발하기에는 아직 많이 부족한 것 같다.
그래도 이번에 세팅해 보면서 모노레포에 대해서도, 디자인 시스템에 대해서도 많이 공부해 볼 수 있는 경험이었던 것 같다.