디자인 시스템으로 제품 출시 주기를 35% 개선한 방법

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

이런 장면을 떠올려보세요. 저는 앱의 버튼 컴포넌트가 세 가지 버전으로 나뉘어 있는 화면을 보고 있었습니다. 마케팅팀은 선명한 네온 블루 버튼을, 엔지니어링팀은 밋밋한 회색 버튼을, 프로덕트팀은 그 중간 어딘가에 있는 버튼을 쓰고 있었죠.

디자이너, 개발자, 제품 관리자, 마케터로 구성된 우리 팀의 여러 부서는 각자 따로 움직였고, 그 결과 사용자에게 혼란을 주고 런칭을 지연시키는 일관성 없는 UI가 계속 만들어졌습니다. 출시 주기는 최대 12주까지 늘어났고, 시간의 40%는 리디자인 논쟁에 낭비되고 있었습니다.

저는 우리에게 단순한 스타일 가이드가 아닌, 모두를 하나로 묶어주는 살아 있는 프레임워크로서의 디자인 시스템이라는 걸 알았습니다.

제가 이 시스템을 처음부터 구축하고 출시 시간을 35% 단축한 방법을 알려드리겠습니다.

디자인 시스템이란 정확히 무엇일까요? 빠르게 배우며 깨달은 것들

본론으로 들어가기 전에, 먼저 디자인 시스템이란 무엇 인지 부터 알아볼까요? 단순히 버튼과 색상이 담긴 Figma 파일이 아닙니다. 재사용 가능한 컴포넌트, 디자인 토큰(예: 기본 파란색을 나타내는 #007BFF), 가이드라인, 그리고 제품 전반에 걸쳐 확장 가능한 코드 라이브러리를 담은 단일 기준점입니다.

쉽게 말해, 더 강력해진 아토믹 디자인에 가깝습니다. 컬러와 폰트 같은 atoms, 버튼 같은 molecules, 카드 같은 organisms가 모두 문서화되고 코드화되어 일관성을 유지하는 구조입니다. 저희는 웹, iOS, 안드로이드, 심지어 마케팅 랜딩 페이지까지 디자인 시스템을 적용했습니다. 디자인 시스템이 없으면 UI는 전달 게임처럼 조금씩 어긋납니다. 반대로 디자인 시스템이 있으면 모든 화면이 하나의 앱처럼 느껴지고, A/B 테스트 결과 사용자 인지 부하도 25% 줄어듭니다.

이전의 혼란: 숫자로 보는 경각심

저희 핀테크 앱은 50만 명의 사용자를 확보했지만, 내부의 혼란이 팀을 갉아먹고 있었습니다. 디자이너들은 Figma에서 끝없이 반복 작업을 하고, 개발자들은 React로 컴포넌트를 처음부터 다시 만들고, PM은 실제 제품과 맞지 않는 픽셀 퍼펙트 목업을 계속 쫓고 있었습니다. Jira 대시보드의 지표는 상황이 얼마나 심각한지 보여주고 있었습니다.

재설계 요청이 전 분기 대비 60% 급증했습니다.

UI 불일치로 인해 스프린트 속도가 25% 감소했습니다.

모바일 웹 환경이 일치하지 않을 경우 사용자 이탈률이 18% 증가했습니다.

저는 여러 플랫폼에 걸쳐 200개 이상의 화면을 검토했습니다. 버튼 변형만 70개가 넘었습니다. 개발자들이 “디자인 두더지 잡기” 같다고 불평한 것도 무리가 아니었습니다.

부서 간 회의는 논쟁으로 변질되었습니다. “하지만 제 버전이 전환율이 더 좋아요!”라는 식이었죠. 이제 팀을 하나로 모아야 할 때였습니다.

1단계: 흩어진 팀원들을 모아 드림팀 만들기

저는 혼자 해결하려 하지 않았습니다. 저는 리더십 팀에 한 장짜리 제안서를 공유했습니다. “하나의 시스템, 35% 더 빠른 릴리즈, 더 만족도 높은 팀”이라는 메시지였습니다. 그 결과 ‘디자인 길드’가 승인되었습니다. 디자인 3명, 엔지니어링 4명, 프로덕트 2명, 마케팅 1명으로 구성된 10인 팀이었습니다. 매주 45분씩 싱크 미팅을 진행했고, 불필요한 이야기는 최대한 덜어냈습니다.

첫 번째 성공: 원칙에 대한 합의 도출. 우리는 네 가지 핵심 원칙을 투표로 정했습니다. 일관성, 확장성, 접근성(WCAG 2.2 AA), 속도였습니다. 저는 Miro 보드를 활용해 워크숍을 진행했고, 모든 구성원이 각자의 페인 포인트를 포스트잇으로 정리하게 했습니다. 결과는 분명했습니다. 첫날부터 85%의 구성원이 방향성에 동의했고, 출발점이 0%였다는 점을 생각하면 큰 변화였습니다.

수치 분석: Google Analytics와 내부 도구로 기준 지표를 잡았습니다. 디자인 시스템 도입 전 컴포넌트 재사용률은 고작 15%였습니다.

2단계: 기반 구축 — 토큰 및 핵심 컴포넌트

이미 있는 것을 다시 만들 필요는 없죠. 작은 것부터 시작했습니다. 저는 작게 시작했습니다. 가장 먼저 디자인 토큰부터 정리했습니다. 피그마(Figma)의 Variables를 활용해 12개의 컬러, 8단계의 타이포그래피 스케일, 그리고 4px 기준의 스페이싱 그리드를 정의했습니다. 이 토큰들은 Style Dictionary를 통해 JSON으로 내보내 개발 환경과 동기화했습니다.

다음으로는 공유 피그마 라이브러리에 50개의 핵심 컴포넌트를 만들었습니다.

버튼: default, hover, loading 등 6가지 상태로 정리했고, 기존 70개가 넘던 변형을 대폭 줄였습니다.

폼: input, select 컴포넌트를 포함해 React Hook Form 기반의 검증 흐름까지 함께 정리했습니다.

내비게이션: 탭과 사이드바를 포함했고, Tailwind breakpoint를 기준으로 모바일 퍼스트 구조를 적용했습니다.

개발 연동은요? 거의 마법 같았습니다. 저는 실시간 React 프리뷰를 확인할 수 있는 Storybook 인스턴스를 구축했습니다. GitHub Actions로 토큰 동기화를 자동화했고, 디자인 변경 사항은 5분 안에 코드에 반영될 수 있었습니다.

팀의 프로토타입 제작 속도가 3배 빨라졌습니다. 초기 테스트 결과, 화면당 프로토타입 제작 시간이 4시간에서 1.5시간으로 단축되었습니다.

이 레이어드 인터페이스들은 핵심을 잘 보여줍니다. 정리된 토큰이 버튼과 내비게이션으로 이어지는 흐름은 런칭 이후의 라이브러리 구조와 닮아 있었습니다.

3단계: 도입 및 활용 — 성공적인 워크숍

저항도 만만치 않았습니다. 한 개발자는 “이러면 제 창의적인 흐름이 막히잖아요!”라고 말했습니다. 그래서 저는 실습 중심 워크숍으로 분위기를 바꿨습니다. 세션은 2시간씩 진행했고, 한 번에 20명씩 참여했습니다. 실시간 Figma Jam을 진행하고, Storybook에서는 페어 프로그래밍을 함께했습니다. 워크숍에는 게임 요소도 넣었습니다. 각 팀이 디자인 시스템으로 화면을 빠르게 재구성하는 방식이었고, 우승 팀에게는 커피 쿠폰을 제공했습니다.

문서화는요? 가이드라인, 변경 로그, 해야 할 것과 하지 말아야 할 것을 정리한 간결한 Notion 허브로 만들었습니다. 빠른 점검을 위해 Slack bot도 만들었습니다. #design-system 채널에서 호출하면 바로 확인할 수 있었습니다. 도입률은 빠르게 올라갔고, 8주 만에 컴포넌트 재사용률은 78%까지 상승했습니다.

해결한 과제들은 다음과 같습니다:

버전 불일치(Version drift) : Semantic Versioning(v1.2.3)을 적용하고 linting으로 강제해 관리했습니다.

예외 케이스(Edge cases) : ‘컴포넌트 오피스아워’를 열어 커스텀 니즈를 수집하고 해결했습니다.

결과: 35% 더 빨라진 릴리즈 주기, 그리고 그 이상의 변화

6개월이 지나자, 지표가 분명한 성과를 보여주기 시작했습니다. 엔지니어링 처리량은 두 배로 늘었고, 디자이너들은 픽셀 단위의 수정이 아니라 더 나은 경험을 고민하는 데 집중할 수 있었습니다. 마케터들은 일관된 변형안을 바탕으로 더 자신 있게 A/B 테스트를 진행할 수 있었습니다. 한 PM은 이렇게 농담했습니다. “고양이들을 한데 모으는 것 같았는데, 이제는 전부 같은 품종이 된 느낌이에요.”

ROI를 계산해보면, 연간 약 25만 달러의 개발 시간을 절감한 셈이었습니다. 평균 개발 단가는 시간당 150달러로 계산했습니다. 정돈된 사용자 경험 덕분에 사용자 유지율은 12% 상승했습니다.

실행 방법: 누구나 따라 할 수 있는 5단계 플레이북

이 방법을 따라하고 싶으신가요? 제가 여러 플랫폼에서 검증한, 군더더기 없는 로드맵을 공개합니다.

철저히 감사하기(1주차): 모든 UI 요소를 목록화합니다.

사용 도구는 Figma Inspect와 Zeplin export입니다. 중복 요소를 표시하세요. 우리 팀은 필요한 것보다 3배나 많은 요소를 가지고 있었습니다.

모든 것을 토큰화하기(2~3주차) : Figma의 Themed UI에서 Variables를 구축합니다.

Tokens Studio를 통해 CSS/JS와 동기화합니다. 실무 팁을 하나 덧붙이면, hex code보다 color-brand-primary처럼 시멘틱 네임을 사용하는 것이 좋습니다.

컴포넌트 스프린트(4~6주차) : 80/20 법칙을 기준으로 우선순위를 정합니다.

사용량의 80%를 커버할 수 있는 핵심 20%의 컴포넌트부터 만드는 방식입니다. Figma library, Storybook, 그리고 iOS용 SwiftUI 같은 네이티브 키트를 함께 준비합니다.

핸드오프 자동화하기(7주차): GitHub Actions와 Figma Dev Mode를 활용합니다.

코드 생성 기능을 활용하면서 핸드오프 오류는 90% 줄었습니다.

런칭하고 고정하기(8주차 이후): 기존 에셋은 deprecated 처리하고, linting으로 사용 기준을 강제합니다.

Datadog 대시보드로 지속적으로 모니터링합니다. 전체 일정은 MVP까지 2개월, 6개월 안에 95% 커버리지까지 확장하는 흐름이었습니다.

크로스 플랫폼 팀의 협업 방식: 디자이너, 개발자 및 그 외 구성원 간의 동기화

크로스 플랫폼은 가장 까다로운 과제였습니다. 모바일은 React Native, 웹은 Next.js, 여기에 Flutter 실험까지 진행하고 있었기 때문입니다. 협업을 위한 접착제는 무엇이었을까요? 바로 공통된 규칙과 절차였습니다 .

디자인-개발 회의 : 매일 15분씩 진행했고, 월요일은 iOS, 화요일은 Android처럼 플랫폼을 돌아가며 다뤘습니다.

플랫폼 길드 : iOS 개발자는 SwiftUI 토큰을 소유하고, 웹 개발자는 Tailwind 설정을 담당합니다. 그리고 매주 변경 사항을 병합했습니다.

제로 트러스트 감사 : UI 변경 사항이 포함된 모든 PR은 Storybook 기준으로 자동 리뷰가 실행되도록 했습니다.

크로스 트레이닝 잼 : 디자이너는 React 기초를 배우고, 개발자는 Figma 세션을 참관합니다. 결과적으로 핸드오프 과정의 마찰은 65% 줄었고, 소요 시간은 2일에서 4시간으로 단축됐습니다.

Slack 채널(#ds-web, #ds-mobile)과 공유 Confluence 위키 덕분에 모두가 최신 정보를 공유할 수 있었습니다. 이제 “제 환경에서는 잘 되는데요”라는 변명은 통하지 않았습니다.

효과: 단순한 성공을 넘어, 일하는 방식을 바꾼 전환점

파급 효과는요? 상당했습니다.

속도 : 엔지니어들은 2.1배 더 많은 기능을 출시했고, 디자이너들은 40% 더 빠르게 아이디어를 구상했습니다.

일관성 : 픽셀 단위의 어긋남이 사라졌고, 웹과 모바일 간 매칭률은 95%에 도달했습니다.

비용 절감 : 재작업 비용을 연간 25만 달러 줄였고, 추가 인력 없이 3개의 앱으로 확장할 수 있었습니다.

사용자 만족도 : NPS는 1.6포인트 상승했고, 신뢰감 있는 UI 덕분에 전환율은 14% 올랐습니다.

팀 사기 : eNPS는 28포인트 상승했고, 논쟁은 줄어든 대신 더 나은 시도를 할 시간이 늘었습니다.

정량화된 ROI: 첫해에 4배의 수익 효과를 냈고, AR/VR 프로토타입까지 추가되면서 효과는 계속 누적되었습니다.

교훈: 반복 개선하지 않으면 시스템은 죽는다

이 시스템은 한 번 만들어두고 끝낼 수 있는 것이 아니었습니다. 사용자 히트맵과 개발자 설문조사를 통해 6개월마다 정기적으로 점검을 진행합니다. 이제 Figma Dev Mode 같은 AI 도구는 코드 스니펫의 90%를 자동으로 생성합니다. 가장 큰 교훈은 무엇일까요? 바로 기여자들에게 권한을 부여하는 것입니다 . "새 컴포넌트 요청" 양식에 한 달에 15건의 제출이 들어오면서 시스템이 자연스럽게 발전해 나갔습니다.

팀이 파편화되어 있다면 지금 당장 시작하세요. 철저하게 감사하고, 모든 것을 토큰화하고, 집요하게 워크숍을 운영하세요. 릴리즈 주기뿐 아니라, 여러분의 멘탈도 분명 고마워할 겁니다.

원문 출처: https://medium.com/@dollyborade07/how-i-created-a-design-system-for-cross-functional-workflow-and-improved-product-release-cycles-5bf764d47191

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.