FE 0.5인 리소스로 디자인 시스템 구축한 방법

2025년 설 연휴, 여러분은 어떻게 보내고 있나요? 새롭게 시작하기 위해 준비하는 분도, 휴식을 취하는 분도 있을 텐데요. 요즘IT에서는 설 연휴를 맞아 주요 기업의 유익한 블로그 콘텐츠를 소개하는 시리즈를 준비했습니다. 그들은 어떻게 사고하고 일하는 걸까요?

이번 글에서는 패션 플랫폼 29CM의 프론트엔드 플랫폼팀이 '효율적인 디자인 시스템'을 구축한 경험을 소개합니다.

안녕하세요! 29CM에서 UI/UX를 일관되게 제공하기 위해 디자인 시스템을 개발 및 유지보수하고 있는 신다혜입니다. 현재 Ruler 디자인 시스템을 관리하고 있으며, 0.5인의 리소스에서 효율적으로 운영하기 위해 노력하고 있습니다.

리소스가 제한된 상황에서 효율적인 관리 방안을 고민하며 얻은 경험과 인사이트를 공유하고자 합니다.

빠르게 성장하는 기업에서는 다수의 태스크가 동시에 발생하기 때문에 특정 업무에 집중하기 어려운 상황이 많습니다. 디자인 시스템 필요성에도 불구하고 모든 리소스를 투입할 수 없던 29CM의 대안은, 이미 잘 만들어진 디자인 시스템을 도입하는 것이었습니다.

“사람들이 사지 않는다면 최고의 제품을 생산하는 것이 무슨 의미가 있겠는가?”

— 도널드 노먼

디자인 시스템에도 지속 가능한 제품이라는 관점이 중요합니다. 뛰어난 컴포넌트를 만들어도 사용되지 않으면 무의미하죠. 29CM의 디자인 시스템도 고객과 개발자에게 각각 가치가 제공되어야 합니다.

따라서 디자인 시스템은 MVP 형태로 빠르게 구축하고, 짧은 iteration을 통해 가치 검증 후 발전시켜야 한다고 생각합니다.

어드민 디자인 시스템 구축 시, Ant Design(ANTD)을 도입했습니다. 기회비용 측면에서 이득이기 때문이죠. 어드민 서비스는 기능에 집중해야 하며, ANTD 같은 라이브러리는 풍부한 기능을 제공합니다.

실제로 ANTD 도입 후 디자인 및 개발 작업 시간을 각각 75%, 87% 단축했습니다.

디자이너와 개발자 리소스를 각각 1/4, 1/8 줄이면서 보다 중요한 문제에 집중할 수 있게 됐습니다.

대고객 서비스는 더욱 매력적인 UI/UX 제공이 필요합니다. 이를 위해 TailwindCSS와 tailwind-variants를 도입하여 스타일링 성능을 개선했습니다.

디자인 시스템으로 약 37개 컴포넌트를 제작했으며, 운영 중遇단 문제와 인사이트를 공유하겠습니다.

완벽한 컴포넌트를 한 번에 구현하는 것은 어렵습니다. 예로 Dialog 컴포넌트에서 종료 버튼이 겹치거나, Tabs의 스펙 누락과 같은 문제를 경험했습니다.

반복적인 피드백과 개선이 중요하며, 자생할 수 있는 가이드라인과 프로세스가 필요합니다.

핵심 컴포넌트부터 구축하고, 짧은 피드백 주기를 통해 개선하세요.

기여 가이드라인을 작성하고, 자동화 도구를 활용해 품질 유지와 리뷰 시간을 절감하세요.

디자인 시스템에서 가장 중요한 것은 고객의 불편함을 해결하는 것입니다. 이를 위해 지속적으로 개선하며 가치를 제공하는 시스템을 만들어야 합니다. 감사합니다.

<원문>

해당 기사는 GPT를 이용하여 요약한 내용입니다.