Design System 기반 Component library 개발 및 배포 경험기

📌배경

사내 여러 프로젝트에서 UI 컴포넌트들을 pkg로 말게 되었는데 ... 당연하게도 pkg로 배포하게 된 이유는 `생산성`에 있다. 정해진 컴포넌트들을 그대로 가져다가 쓰면 프로젝트를 진행하면서 미리 구축된 컴포넌트를 쓸 수 있으니 작업속도가 폭발적으로 증가할거라는 기대였다. 

📌과정

프로젝트 세팅부터 라이브러리 선정, 그리고 컴포넌트 개발까지 모든 과정을 거의 혼자 진행했다. 별도의 라이브러리 없이 컴포넌트 개발을 진행하는 것은 작업속도와 안정성 측면에서 굉장히 비효율적이라 생각하여 shadcn ui ( radix-primitive 기반 ) 를 적극 이용하였다. 동시에 스타일링은 `tailwind`를 이용하였다. css in js는 사실상 서버 컴포넌트에서는 지원을 하지 않기에 목록에서 뺏고 css, scss, tailwind 중 작업속도가 빠르고 개인적으로 유지보수성도 좋다고 생각하는 tailwind.css를 이용하였다. tailwind를 이용하여 컴포넌트의 스타일링을 동적으로 적용하고 동시에 스타일을 overide 하기 위해 tailwind-merge와 clsx 를 조합한 유틸함수를 이용하였다. 

 

처음에 간단한 컴포넌트를 만들때 ( 예를들어 Button과 같이 하나의 <button> tag를 이용한 컴포넌트 ) 같은 경우는 수월하게 개발을 진행할 수 있었지만 Tab이 달린 아코디언이나 Select가 조합된 input 같이 복잡한 UI 의 경우 개발을 진행하면서 고민을 많이 할 수 밖에 없었다.  

 

하나의 UI 컴포넌트를 조합형으로 만들도록 할지 아니면 단일으로 만들지, props를 어떤걸로 산정해야 할지, children을 무엇으로 할 지, naming은 어떻게 할지 등등 생각해야 할 것들이 한 두가지가 아니였다. 특히 이 컴포넌트는 여러 프로젝트에서 사용될 예정이기에 이런 고민들은 더욱 더 신중히 진행되었다. 만약 라이브러리가 업데이트 되었을 시 해당 라이브러리를 사용한 프로젝트 코드가 이곳저곳에서 수정하게 될 상황이 생기면 정말 최악이다.

 

이런 고민끝에 DX를 고려하여 왠만하면 최대한 하나의 UI컴포넌트에 props로 variant와 옵셔널한 조건을 주입하여 다양한 형태의 UI를 구현하도록 방향을 정하였다. 사실 처음부터 이런방향으로 가진 않았다. 처음엔 라이브러리를 사용하는 개발자들도 sub component를 조합하여 하나의 UI 컴포넌트를 만드는 방향으로 진행을 했는데 여러 개발자분들이 사용하기에 불편하다는 의견이 많이 접수되어 DX를 고려하여 단일컴포넌트 형태로 작업을 진행하였다.

 

작업을 진행하고 pkg를 말기 위해 내가 작성한 .ts, .tsx 파일들을 compile 하여 root/dist 내부에 담아두었다. build 옵션은 tsconfig.json에서 설정 가능하다. 동시에 package.json 내부에 dependency, devDependency, peerDependency,  node version, 경로 설정 등을 진행해야 한다. 

 

라이브러리의 배포는 gitlab의 pacakge 기능을 이용하였다. pacakge manager는 npm을 이용하였고 배포된 pkg는 그 유효범위를 산정할 수 있었는데 나는 회사 gitlab 내부의 모든 프로젝트에서 이 pkg에 gitlab access token만 있으면 install할 수 있게 설정하였다. 

📌후기

이번 공통 UI 라이브러리 개발은 단순히 컴포넌트를 만드는 작업을 넘어, 앞으로의 프로젝트들이 더 빠르고 효율적으로 진행될 수 있도록 기반을 마련하는 의미 있는 경험이었다. shadcn ui, tailwind 같은 오픈소스 라이브러리를 적극 활용해 개발 생산성을 극대화했고, 동시에 실제로 사용될 현업 프로젝트들의 DX를 고민하며 여러 번 방향을 조정했다.

 

혼자 진행하는 작업이었지만, 결과적으로 이 라이브러리가 여러 프로젝트의 공통 기반이 될 수 있도록 완성도를 높였다는 점에서 뿌듯함을 느낀다. 앞으로 이 라이브러리가 새로운 UI나 기능이 필요할 때 유연하게 확장될 수 있도록, 그리고 사용자의 목소리를 계속 반영해 더 나은 형태로 발전할 수 있도록 꾸준히 관리해나갈 계획이다.