Modulabs Design System 2.0
모두의연구소 디자인시스템 2.0
Overview
도메인별로 제각각이던 컴포넌트는 디자인 파편화를 넘어, 팀 전체의 리소스를 이중으로 갉아먹는 비효율의 원인이었습니다.
저는 팀장으로서 '실제로 잘 쓰이는 시스템'을 목표로 v2.0 프로젝트를 이끌었습니다.
단순히 규칙을 나열하는 대신, 기능을 중심으로 컴포넌트를 통합하여 제품 출시 속도를 높이는 데 집중했습니다.
기간
2025년 08- 12
나의 역할
프로젝트 리드
Work Flow
이 프로젝트는
'Terminology -> Goal & Scope -> Making -> Review'의 순서로 진행하였습니다.
Behind
the Scenes
문서 밖에서 살아 움직이는 시스템
Step
2
목표 및 범위 설정
시스템의 함정인 '완벽주의' 경계하기
디자인 시스템이 제품보다 비대해지는 '시스템을 위한 시스템'이 되지 않도록 목표를 실질적인 제작 효율에 맞췄습니다. 브랜드 어셋과 디자인 시스템 각각의 목적을 명확히 문서화하여, 불필요한 공력을 줄이고 팀의 의사결정 속도를 높이는 데 집중했습니다
Brand Asset
Goal
일관된 브랜드 경험 제공
Goal
디자인 의사결정 시간을 단축한다.
Alert
완벽을 추구하지 않는다.
Design System
Goal
일관된 브랜드 경험 제공
Goal
디자인 의사결정 시간을 단축한다.
Alert
서비스에 맞춘 '꼭' 필요한 범위 설정
현실적인 제작 범위와 우선순위 협의 이상적인 시스템 구축에 매몰되지 않기 위해, 현재 서비스 상황에서 당장 해결이 시급한 핵심 요소로 제작 범위를 한정했습니다. 이 과정에서 PO 그룹과 긴밀히 소통하며 비즈니스 일정에 차질이 없도록 '프로젝트'의 범위를 전략적으로 확정했습니다.
또한 모션, 그래픽 스타일, 보이스앤톤 등 브랜드의 캐릭터와 밀접하게 연관된 가이드라인은 브랜드 정체성이 확립된 이후에 정의하는 것이 효율적이라고 판단했습니다. 대신 이번 범위에서는 서비스 운영에 즉각적인 효율을 줄 수 있는 요소를 구축하는 데 집중했습니다.
Foundation
Color System
Typo System
Grid/Spacing & Layout Scale
Elevation
Components & Icon
네이밍
고정속성, 변동속성 구분
재사용 기준
유지/보수 방법
llustration & Image Style
Brand Asset 완료 이후
Guidelines
Accessibility (접근성)
Motion & Animation
Voice & Tone / UX Writing
Brand Asset 완료 이후
Process
버전 관리
디자이너 ↔ 개발자 핸드오프 규칙
Behind
the Scenes
협업의 언어로 완성되는 시스템
디자인 시스템의 본질은 문서화가 아닌
'의사소통의 비용'을 줄이는 데 있습니다.
메신저와 회의실에서 오가는 수많은 논의를
시스템의 규칙으로 치환하며 정답을 찾아가는 과정을 기록했습니다.
Step
3
만들기
디자인 시스템 v2.0 구축의 핵심은 속도와 효율이었습니다.
모든 컴포넌트를 한꺼번에 만드는 비효율을 제거하기 위해, 다음과 같은 4단계 전략적 워크플로우를 설계했습니다.
01. AI 기반 컴포넌트 전수 조사: 기존 서비스들에 산재된 UI 요소들을 AI 툴을 활용해 빠르게 추출하고 카테고리화하여 전체 범위를 정의했습니다.
02. 우선순위 매핑: 추출된 리스트 중 '실무 활용 빈도'와 '도메인 간 공통 사용 여부'를 기준으로 제작의 우선순위를 정립했습니다.
03. UI 통합 및 문서화: 파편화되어 있던 개별 UI들을 하나의 표준으로 통합하고, Naming과 Anatomy 등 개발 협업을 위한 규약을 명문화했습니다.
04. 배포 준비: 최종 검수된 컴포넌트를 즉시 제품에 적용 가능한 'Production-Ready' 상태로 전환했습니다.
[설계] 시스템의 비대화를 방지하는 '재사용 정의
컴포넌트는 효율적인 개발을 위한 핵심 수단이지만,'재사용'에 대한 기준이 없으면 시스템은 비대해집니다.
저는 실무자마다 달랐던 판단 기준을 '2개 이상의 도메인 활용 여부'로 합의를 도출했습니다. 이를 통해 불필요한 시스템 비대화를 막고, 팀 전체가 의사결정 속도를 낼 수 있는 환경을 구축했습니다.
[컴포넌트 생성 의사결정 트리]
[분류] 탐색 시간을 줄이는 '기능 중심 인덱싱'
컴포넌트 수가 많아질수록 프로덕트 디자이너가 필요한 컴포넌트를 빠르게 찾기 어려워지고,
이로 인해 ‘컴포넌트 찾기’가 실무의 병목이 되는 경우가 많습니다.
따라서 이번 범위에서는 컴포넌트 인덱싱 기준을 ‘컴포넌트 기능’으로 정하는 것에 합의했고, 이를 명문화했습니다.
[As-Is: 기준 없는 나열]
[To-Be: 사용성 중심의 인덱싱]
[제작] 네가지의 제작 원칙
Step
4
리뷰 및 회고
배운점
1. 효율성(Efficiency): AI를 활용한 데이터 중심의 의사결정: 모든 컴포넌트를 수동으로 전수 조사하던 과거의 비효율에서 벗어나, AI 툴을 통해 객관적인 데이터를 추출하고 시스템의 범위를 정의하는 법을 배웠습니다.
2. 비즈니스 정렬(Alignment): '중요도'와 '공통성' 기반의 리소스 배분: 모든 작업을 한꺼번에 하려다 중도 포기하는 오류를 범하지 않기 위해, **'실무 활용 빈도'와 '도메인 간 공통 사용 여부'**라는 명확한 기준으로 우선순위를 매핑하는 전략을 체득했습니다.
3. 협업 아키텍처(Architecture): 디자인과 개발의 언어 통합: 단순한 스타일 가이드를 넘어 Naming, Anatomy, API 정합성 등 개발자가 즉시 사용 가능한 'Production-Ready' 상태의 규약을 명문화하는 과정이 협업 비용을 얼마나 낮추는지 확인했습니다.
What's Next
디자인 시스템 v2.0 구축을 통해 큰 폭의 효율 개선을 이뤄냈으나, 조직 구조 개편으로 인해 프로젝트가 예기치 않게 마무리되며 실제 운영 데이터까지 완전히 검증하지 못한 점이 큰 아쉬움으로 남습니다.
하지만 이 경험은 시스템의 지속 가능성에 대해 깊이 고민하는 계기가 되었으며, 제가 설계한 v3.0의 방향성은 다음과 같습니다
데이터 기반의 사용성 트래킹 (Adoption & Health Check): 시스템 도입 후 실제 컴포넌트 재사용률을 측정하고, 정성적 인터뷰를 병행하여 '수치로 증명되는 디자인 효율'을 확인하고자 했습니다. 또한 엣지케이스를 축적해서, 개선하고자 하였습니다.
전략적 범위 확장 (Scalability): 효율을 위해 v2.0 범위에서 제외했던 브랜드 모션, 인터랙션 가이드, UX 라이팅 원칙을 통합하여 브랜드 아이덴티티가 더욱 견고하게 반영된 시스템으로 발전시킬 계획이었습니다.
I 기술을 활용한 워크플로우 혁신 (AI-Powered Workflow): Figma MCP(Model Context Protocol) 등 최신 AI 기술을 활용하여 디자인-개발 핸드오프 과정을 자동화하고, 일부 주요 화면에 대해 시스템 준수 여부를 AI로 테스트하는 실험적인 시도를 앞두고 있었습니다..