스타트업에서 디자인 시스템 만들기 2
React Native UI library 만들 준비하기
이전 글을 쓰고 3개월가량 시간이 지났습니다. 스타트업이 그렇듯 많은 재밌는(?) 일들을 겪고 프로젝트를 조금 더 꼼꼼히 개선하며 작업하다 보니 시간이 벌써 이렇게 흘렀습니다. 저 또한 디자인 시스템을 만들고 UI 라이브러리를 만드는 것이 처음이다 보니 시행착오를 겪고 지금에서야 정리가 조금 됐다 생각해 글을 이어 나가보려 합니다. 케어닥 간병인 매칭 앱은 React Native로 개발하고 있기 때문에 React Native UI 라이브러리를 만드는 과정을 공유하도록 하겠습니다.
머릿속으로 구상한 비즈니스를 서비스로 녹여내기 위해서는 첫 번째로 생각이 글로 정리가 되어야 합니다. 이는 제안서의 형태로 만들어지며 함께 할 멤버들은 꼬시기 위해 또는 투자유치를 위한 첫 단추가 되며 가장 중요한 일입니다. 글로 정리가 안된다면 절대로 그다음으로 넘어가면 안 되며 만약 정리가 안된 상태에서 시작한다면 주먹구구식의 프로젝트가 될 확률이 매우 큽니다. 글로 정리가 됐다면 서비스의 흐름을 만들어 MVP를 돌리게 됩니다. 그리고 계속 서비스의 흐름을 수정하고 또는 비즈니스가 바뀔 수도 있으며 STP 또한 바뀔 수 있습니다. 어느 정도 서비스의 흐름이 확정이 되면 개발을 시작합니다. 그 근간이 되는 것이 바로 데이터베이스 스키마입니다. 그리고 코드에서는 이를 추상화된 객체(model 혹은 entity)가 앱 또는 웹의 가장 기본적인 뼈대가 되는 것은 자명한 사실입니다.
비즈니스의 목적이 명확하고 서비스 흐름이 견고해야 완성도 있는 서비스가 나올 수 있습니다. 이는 코파운더들 혹은 결정권자들의 몫이며 이를 최대한 많이 공유하는 것이 그들의 사명입니다.
이러한 추상화된 객체나 공용 모듈들을 프로젝트별로 공유하기 위해서는 첫 번째로 stack의 통일이 필요합니다. 저는 php개발자 시절 Laravel이라는 프레임워크를 즐겨 사용했으며 Laravel은 package개발에 대한 가이드를 기본으로 제공하기 때문에 공용 모듈들은 package로 개발해 웹, 콘솔 등에 사용했던 경험이 있어서 자연스럽게 처음부터 UI 라이브러리를 공용 모듈로 만들기로 했습니다.
라이브러리를 개별 프로젝트로 구성해 npm package로 제작해 배포해 사용하는 방법은 React Native나 Next 등 특정 프레임워크에 의존되어 사용하는 라이브러리들을 개발하기에는 테스트가 힘들고 실제 눈으로 확인해가며 개발을 하기 힘들다는 문제가 있습니다. git+ssh로 dependency로 사용하면 아마도 node modules의 collision을 경험하게 되며 기형적인 라이브러리가 될 확률이 높습니다. 이쯤 되면 포기하고 싶어 집니다.
monorepos, 그리고 lerna와 yarn workspace
lerna는 이러한 딜레마를 해결하기 위해 나온 라이브러리입니다. lerna에 대한 자세한 내용은 공식 링크를 참고하시면 될 듯하며, 간략히 는 monorepos를 관리, 배포해주는 툴입니다. yarn workspace는 종속성과 충돌을 피하게 해 줍니다. lerna는 옵션으로 yarn workspace 사용 여부를 설정할 수 있습니다. lerna와 yarn workspace의 조합으로 root에는 라이브러리를 사용할 프레임워크 (React Native, Next 등)를 이용하고 packages 밑으로는 라이브러리들을 만들고 root 프레임워크 등을 이용해 눈으로 확인해가며 라이브러리를 만들고 snapshot testing을 이용한 테스트등 UI 라이브러리 모듈 별로 단위 테스트까지 완료한 후 lerna를 이용해 versioning과 npm release까지 가능하게 됩니다. UI 라이브러리에 가장 많이 사용되리라 생각되며 stack을 통일했다면 많은 util 함수 혹은 resource들 (다국어 메시지에 대한 json파일들)까지도 포함할 수 있습니다. 민감함 정보(model 혹은 entity)의 라이브러리의 경우에는 npm private(비용이 드는 것은 피할 수 없어 보입니다.)를 이용하면 됩니다.
devops에 여유가 있거나 능력자가 있는 스타트업의 경우는 저는 알지 못하는 magic을 이용해 더욱더 gracefully 하게 할지도 모르는 일입니다.
이렇듯 UI 라이브러리의 개발과 덤으로 코드 파편화와 공용 모듈에 대한 고민은 많은 개발자들의 숙명이라고 생각하며 lerna의 이용은 그 challenge에 대한 하나의 시도라 생각됩니다. (이것 밖에 방법이 없어보...)
브런치 에디터의 한계로 hands on보단 boilerplate를 만들어 공유합니다.
[boilerpalte] https://github.com/fifthsage/lerna_example
monorepos와 코드 파편화에 관련해 다시 상기해보고 정리를 한번 해 보시며 boilerplate를 살펴보시다 보면 어렵지 않게 UI 라이브러리 환경 구성에 성공 하실 수 있으시리라 생각합니다. 이제 환경 구성을 했으니 다음 글에서는 실제 디자이너가 export한 zeplin을 보며 sync를 맞춰 가는 내용을 정리할 예정입니다.
