디자인시스템 팀은 디자인시스템만 잘 만들면 될까

AI 도구(Lovable, Bolt, v0)가 프롬프트 하나로 화면 초안을 생성하는 시대, 당근 프론트엔드 엔지니어가 디자인시스템 팀의 역할을 다시 정의한다. "컴포넌트와 토큰 제공"을 넘어, 경험에 대한 판단 기준을 쌓고 구조화하는 팀이어야 한다는 주장이다. AI가 80%의 화면을 빠르게 만들어주지만, 99% 수준의 제품 경험으로 끌어올리는 건 여전히 맥락(Context)과 판단의 문제다.

핵심 포인트

AI가 UI 하한선을 끌어올려 화면 초안 생성은 쉬워졌지만, 사용자 흐름·브랜드 톤·접근성·기존 패턴과의 조화를 갖춘 99% 경험은 여전히 맥락의 문제다.
AI가 선택지 생성 비용을 낮추지만 결정 피로(Decision Fatigue)는 줄어들지 않는다 — 디자인시스템이 "선택지를 좁혀주는" 역할로 전환해야 한다.
v0(컴포넌트 registry), Google Stitch(DESIGN.md 규칙 파일), Figma MCP(외부 자료 참조), Code Connect(Figma-코드 연결) 등 AI 도구들이 외부 컨텍스트를 참조한다.
컴포넌트 제공에서 UX 패턴 문서화로 전환 — 검색·필터·빈 상태·에러 상태 같은 반복 문제를 패턴으로 정리하는 것이 핵심이다.
"더 많은 컴포넌트"가 아닌 "더 많은 결정의 기록"이 AI 시대 디자인시스템의 가치다.

상세 정리

배경: Lovable·Bolt·v0 같은 AI 도구가 프롬프트만으로 그럴듯한 UI 초안을 생성 — 디자인시스템 없이도 80% 수준의 화면이 나온다.
핵심 문제: 80%는 빨라졌지만 99%는 맥락의 문제 — 사용자 흐름, 브랜드 톤, 접근성, 기존 패턴과의 조화는 AI가 아직 판단하지 못한다.
결정 피로: AI가 카드 vs 리스트, 펼침 vs 노출, 토스트 vs 상태 변화 등 선택지와 장단점을 제시하지만, 제품 맥락에 맞는 최적 선택은 인간의 판단 영역으로 남는다.
디자인시스템의 전환점: 사용자는 버튼을 경험하지 않고 "예약 완료 흐름"을 경험한다 — 컴포넌트 단위를 넘어 흐름·맥락 단위로 사고해야 한다.
AI 도구 대응: v0는 컴포넌트 registry 방식, Google Stitch는 DESIGN.md 텍스트 파일로 규칙 공유, Figma MCP는 AI가 외부 자료에 접근, Code Connect는 Figma와 실제 코드를 연결한다.
구조화 필요성: 토큰의 의미와 UX 패턴을 기계가 읽을 수 있는 형태로 정리해야 AI 도구가 올바른 판단 재료를 가질 수 있다.
패턴 레벨 질문들: "검색과 필터는 어떻게 구성할까", "빈 상태에서 어떤 행동을 제안할까", "에러 상태에서 무엇까지 설명할까", "권한 요청은 언제 어떻게 할까" — 이런 반복 문제들을 패턴으로 문서화한다.
6가지 역할 제안: UX 패턴 정리(반복 문제의 패턴화), 의사결정 기록(왜 지금 방식인가), 구조화된 컨텍스트(AI가 읽는 규칙 정의), 비교 사례("하지 마세요" 함께 제시), 경험 범위 확장(모션·햅틱·사운드·카피 톤), 검수 체크리스트(AI 결과물 검증 기준).
결론: "결정을 자동화하지 않고 좋은 기준을 제공한다" — 디자인시스템 팀이 경험 판단의 기준을 구조화해 공유하는 팀으로 진화해야 한다.

왜 읽나디자인시스템 팀을 운영하거나 AI 코드 생성 도구를 설계 프로세스에 도입하려는 프론트엔드 엔지니어와 디자이너에게, AI 시대 디자인시스템의 역할 재정의와 실행 가능한 6가지 전략을 제시한다.

당근 테크블로그 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

디자인시스템 팀은 디자인시스템만 잘 만들면 될까

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다