작은 스타트업에서 디자인 시스템 쉽게 구축하기 (feat. Catalyst)

스타트업에서 프로덕트를 개발하다 보면, 디자인 시스템의 필요성을 절감하게 됩니다. 특히 리소스가 부족한 작은 스타트업일수록 이 문제는 더욱 두드러집니다. 저희 노티플라이도 예외는 아니었죠. TailwindCSS를 사용하여 빠르게 프로덕트를 개발하고 있었지만, 점점 커지는 프로젝트 규모에 따라 몇 가지 문제점들이 나타나기 시작했습니다.

노티플라이 개발팀이 직면한 가장 큰 문제는 className의 중복 사용과 유지보수의 어려움이었습니다. 비슷한 스타일의 컴포넌트들이 여기저기 흩어져 있었고, 이를 일관성 있게 관리하는 것이 점점 더 힘들어졌죠. 디자인 변경이 필요한 경우, 수많은 파일을 일일이 찾아다니며 수정해야 했습니다. 이는 개발 속도를 떨어뜨릴 뿐만 아니라, 실수로 인한 버그 발생 가능성도 높였습니다. 예를 들어, 아래와 같은 코드가 전체 프로젝트에서 30군데 이상 사용되고 있었습니다.

<textarea
    className="block h-32 w-full rounded-md border-gray-300 text-sm font-light text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:h-40 md:h-48"
    defaultValue={campaignData.message.body}
    readOnly
/>

이 부분의 디자인을 변경하려면 관련된 모든 파일을 찾아서 일일이 수정해야 하는 상황이었죠. 이는 엄청난 시간과 노력을 요구하는 작업이었습니다.

제품 개발 초기에는 이러한 디자인/UX 문제보다는 기능 본연의 문제를 해결하는 것만으로 벅찼기에 신경이 쓰이지 않았지만, 제품이 안정화되고 고객이 늘어남에 따라 UX 개선 요구가 점점 많아졌고, 리소스가 없는 스타트업에서 ad-hoc 으로 매번 고객 문의를 대응하는 것은 리소스를 효율적으로 쓰는 것에 가장 큰 걸림돌이었습니다. 또한 이러한 시스템의 부재로 발생한 일관성 없는 디자인은 사용자 경험을 저하시키며, 심지어 브랜드 신뢰성마저 위협할 수 있었습니다. 이러한 이유로 디자인 시스템은 단순히 '좋은 것'을 넘어 '필수적인 것'이 되었습니다.

이런 문제들을 해결하기 위해, 노티플라이 개발팀에서는 디자인 시스템 도입을 고민하기 시작했습니다. 디자인 시스템을 구축하면 일관된 UI 컴포넌트를 재사용할 수 있고, 유지보수도 훨씬 수월해질 것이라 기대했죠. 하지만 문제는 리소스였습니다. 디자인 시스템을 구축하는 것은 상당한 시간과 노력이 필요한 작업이었기 때문이죠.

이런 고민 끝에 저희가 찾은 해결책은 Catalyst였습니다.
Catalyst는 TailwindCSS를 기반으로 쉽게 디자인 시스템을 구축할 수 있게 해주는 라이브러리입니다. Catalyst는 무려 TailwindUI 팀에서 배포하는 Application UI Kit 입니다. (참고: https://tailwindcss.com/blog/introducing-catalyst)
물론 Catalyst 외에도 디자인 시스템 구축을 위한 다양한 도구들이 있지만, 저희 팀에서 최소한의 공수를 들이고 싶었기 때문에, 아래 사항을 고려해 Catalyst 를 선택하게 되었습니다.

• 기존 컴포넌트 그대로 사용 가능 - Catalyst 컴포넌트는 tailwindUI 컴포넌트를 오버라이드하기 때문에 모든 props 를 그대로 사용할 수 있습니다.
• 라이브러리 의존성 0 - 라이브러리를 따로 설치하는 것이 아닌, tailwind 세팅만 되어있다면 zip 파일을 다운받아서 사용하는 것이기에 라이브러리 의존성이 없습니다.
• 커스터마이징 - zip 파일을 다운받아서 추가하는 것이기에, 추가하고자 하는 속성이나 변경하고 싶은 속성이 있다면 직접 코드레벨에서 수정이 가능합니다.
• 다만, TailwindUI 를 구매해야 다운로드 받을 수 있다는 점이 한가지 아쉬운 부분입니다만 (1회 구매 무제한 사용, 스크린샷 참조), 저희는 Catalyst 도입 이전부터 TailwindUI 를 구매했었기에 이 부분은 크게 문제가 되지 않았습니다.

Catalyst 도입 과정은 매우 간단했습니다. (참고: https://catalyst.tailwindui.com/docs)

위 설치 가이드 문서에 나와있는대로 몇가지 dependency (tailwindcss 와, headlessui/react, clsx) 를 설치해주고, zip 파일을 다운 받아 압축을 풀어준 후 적절한 위치에 코드를 넣어주면 끝입니다.

그 다음, Catalyst에서 제공하는 컴포넌트를 import하여 사용하면 됩니다.

위에서 잠시 보여드린 textarea 컴포넌트를 예로 들면,

<textarea
    className="block h-32 w-full rounded-md border-gray-300 text-sm font-light text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:h-40 md:h-48"
    defaultValue={campaignData.message.body}
    readOnly
/>

Catalyst의 Textarea 컴포넌트를 사용하여 다음과 같이 변경할 수 있습니다.

import { Textarea } from '@/components/catalyst/textarea';

<Textarea
    className="block h-32"
    defaultValue={campaignData.message.body}
    readOnly
/>

보시다시피, className에 일일이 스타일을 지정하는 대신, Catalyst에서 제공하는 props를 사용하여 간단히 스타일을 지정할 수 있습니다.

기존 className:

block h-32 w-full rounded-md border-gray-300 text-sm font-light text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:h-40 md:h-48

변경 후 className:

block h-32

이렇게 변경한 후, 공통으로 적용해야할 디자인 변경이 필요한 경우에는 해당 컴포넌트 하나만 수정하면 되므로 유지보수가 훨씬 쉬워집니다.

Catalyst를 도입한 후, 저희 팀은 많은 변화를 경험했습니다. 무엇보다 개발 속도가 향상되었습니다. 디자인 시스템 덕분에 더 이상 중복된 코드를 작성할 필요가 없어졌고, 새로운 페이지를 만들 때도 일관된 컴포넌트를 재사용할 수 있게 되었죠. 또한 디자인 변경에 드는 공수도 크게 줄어들었습니다. 컴포넌트 하나만 수정하면 되니까요.

물론 Catalyst가 만능은 아닙니다. 프로젝트의 특성에 따라 다른 도구가 더 적합할 수도 있죠. 하지만 저희처럼 리소스가 부족한 스타트업, 특히 이미 TailwindCSS를 사용하고 있는 팀이라면 Catalyst는 가장 효과적인 선택이 될 것입니다. 디자인 시스템 구축에 드는 비용을 최소화하면서도 빠르게 성과를 낼 수 있으니까요. 

오늘은 Catalyst 를 이용해 작은 스타트업에서 최소한의 리소스로 디자인 시스템을 구축한 후기를 공유했습니다. 앞으로도 여러분에게 도움이 될만한 경험이 있다면 공유해보겠습니다.

노티플라이에서 Flutter 개발자 분들을 위한 푸시 알림 웨비나를 준비했습니다! (2024년 5월 중 예정, 아래 상세페이지에서 확인가능)
Flutter 를 이용해 푸시 알림을 개발하려고 하시거나, 앱 푸시 알림에 관심이 있으신 분들은 무료 웨비나에 참여하셔서 좋은 정보를 얻어가시기 바랍니다.

아래 링크에서 신청하실 수 있습니다 :)

https://event-us.kr/m/80892/15613

​

마지막으로 노티플라이에 관심 있으신 분들은 언제든 저희 팀에 연락 주시기 바랍니다. contact@greyboxhq.com
돈 버는 푸시 알림 서비스를 제작하고 싶은 분이라면 노티플라이를 꼭 활용해 보세요 :) https://notifly.tech/ko