디자인 시스템 만들기 — 스타트업이 피하는 3가지 실수

스타트업에서 디자인 시스템 구축을 시작하면 대기업 수준의 완성도를 목표로 삼는 실수를 흔히 한다. Airbnb나 Google의 디자인 시스템 아티클을 읽고 영감을 받은 뒤, 3개월째 컬러 토큰 네이밍 컨벤션을 논의하고 있다면 — 이 글이 필요한 때다.

실수 1

완성 후 사용하려는 생각

실수 2

너무 많은 변형을 미리 만들기

실수 3

개발자 없이 디자이너만 만들기

이 세 실수가 반복되는 이유는 대체로 하나다. 대기업의 디자인 시스템 사례를 그대로 벤치마킹하면서, 그 시스템이 수십 명의 전담 팀과 수년의 시간으로 만들어졌다는 사실을 놓치는 것이다. 무인양품이 강조해온 절제의 철학처럼, 처음에는 꼭 필요한 요소만 최소한으로 갖추고 실제로 써보면서 필요한 만큼만 더해가는 방식이 스타트업에는 훨씬 현실적이다.

1. 완성 후 사용하려는 생각

디자인 시스템 구축에서 가장 흔한 실수는 “다 만들고 나서 쓰겠다”는 접근이다. 디자인 시스템은 완성되는 것이 아니라, 계속 사용하면서 발전하는 것이다. 버튼 컴포넌트 하나라도 만들었으면 지금 당장 쓰기 시작해야 한다. 사용하지 않으면 실제 프로덕트와 시스템이 괴리된다.

해결책: “Phase 1 작동 버전”을 먼저 정의한다. 버튼, 텍스트 스타일, 색상 변수 이 세 가지만 있어도 첫 번째 작동하는 시스템이다. 이것을 실제 화면에 먼저 쓰고, 나머지를 추가해가는 방식이 현실적이다.

2. 너무 많은 변형을 미리 만들기

버튼 하나에 Primary, Secondary, Tertiary, Danger, Ghost, Link, Large, Medium, Small, Icon-only, Loading, Disabled — 24가지 조합을 처음부터 만드는 팀이 있다. 문제는 실제 프로덕트에서 그 중 절반을 쓰지 않는다는 것이다.

24

처음부터 만들려던 버튼 변형 조합 수

50%+

그중 실제 프로덕트에서 쓰이지 않는 비율

해결책: 실제 화면에서 쓰이는 버튼만 먼저 만든다. 새로운 디자인을 할 때 기존 컴포넌트로 해결 안 되면 그때 새로운 변형을 추가한다. “필요할 것 같은”이 아니라 “지금 필요한”이 기준이다. 디자인 툴 카테고리의 Figma 관련 글도 함께 참고하자.

3. 개발자 없이 디자이너만 만들기

Figma에서 완성된 컴포넌트가 코드로 실제 구현될 때 차이가 생긴다. 그 차이는 초반에 개발자가 함께 만들면 대부분 예방할 수 있다.

디자이너

8px 그리드 기반으로 컴포넌트를 설계한다

개발 프레임워크

기준이 4px라면, 여기서 곧바로 마찰이 생긴다

해결책: 컴포넌트 하나를 만들 때마다 개발자가 그것을 실제 코드로 만들어보는 사이클을 거친다. 불일치가 발견될 때마다 시스템을 업데이트한다. Figma 디자인 시스템 공식 가이드에 더 자세한 내용이 있다.

자주 하는 오해

디자인 시스템을 도입하면 디자이너 혼자서도 유지보수할 수 있다고 생각하는 경우가 많다. 실제로는 컴포넌트가 늘어날수록 누가 새 변형을 승인하고, 누가 오래된 컴포넌트를 정리할지 오너십을 정해두지 않으면 시스템이 금방 누더기가 된다. 처음부터 담당자를 정해두는 것만으로도 많은 문제를 예방할 수 있다.

4. 대기업 방식 vs 스타트업 방식

같은 목표를 향해도 규모에 따라 접근이 완전히 달라야 한다.

대기업 방식

전담 팀이 수개월에 걸쳐 토큰 체계와 문서를 먼저 완성한다

스타트업 방식

실제 화면에서 바로 쓰이는 최소 컴포넌트부터 만들고 점차 넓힌다

중요한 것은 스타트업 방식이 대기업 방식보다 열등한 게 아니라는 점이다. 오히려 팀 규모에 맞지 않는 무거운 프로세스를 억지로 따라 하는 것이 진짜 실수다. 팀과 프로덕트가 커지면서 컴포넌트 수가 늘어나고 담당자가 여러 명으로 늘어나는 시점이 오면, 그때 문서화와 거버넌스를 단계적으로 강화하면 된다. 순서를 거꾸로 하지 않는 것이 핵심이다.

5. 지금 팀에 적용하는 법

디자인 시스템을 이제 막 시작한다면 이 순서를 추천한다.

최소 세트 정의 — 버튼, 텍스트 스타일, 색상 변수만 먼저 정한다

담당자 지정 — 시스템을 검토하고 유지보수할 사람을 한 명 정한다

개발자 동반 — 컴포넌트 하나마다 개발자와 함께 코드로 확인한다

실제 사용 확인 — 새 화면을 만들 때마다 시스템을 실제로 써보고 부족한 부분만 추가한다

6. 마무리

디자인 시스템 스타트업에 대한 이해는 실천에서 온다. 오늘 이 글에서 한 가지만 골라 지금 진행 중인 작업에 바로 적용해보자. 그 작은 실험이 진짜 이해의 시작이다.