AI한테 우리 디자인 시스템을 '설치'하는 법 — JSON 하나로 버튼 토큰부터 아이콘까지

AI 프로토타이핑을 시작하려는데 JSON, JavaScript, XML, React... 이런 단어들이 쏟아지면 부담감이 확 밀려와요. 이거 다 이해해야 하나 싶어서 거부감까지 생기는 사람들도 봤고요.

근데 현업에서 진짜 중요한 건 이해가 아니라 결과예요. 실제로 평가받는 기준은 딱 두 가지뿐이거든요. AI 프로토타이핑으로 임팩트를 만들었는가? 보여줄 수 있는 MVP가 있는가?

자잘한 개념을 외우려고 에너지 쓰기보다, AI 프로토타이핑의 큰 원리를 이해하는 게 훨씬 낫습니다. AI 툴은 바뀌어도 디자인 시스템이라는 개념 자체는 안 바뀌니까요.

AI 프로토타이핑의 가장 높은 벽 — 디자인 시스템과의 호환

회사에서 AI 프로토타이핑 툴을 실무에 적용하려고 할 때, 가장 높은 진입장벽이 뭔지 아세요? AI 프로토타이핑 결과물과 디자인 시스템과의 호환이에요. 결과물이 우리 디자인 시스템을 반영 못 하면, 오히려 더 느려져요.

실무에서 AI 프로토타이핑 결과물을 발전시킬 때 가장 먼저 보는 게 디자인 시스템과의 정합성이거든요. 버튼이 기존 토큰을 따르는가, Spacing이 4px·8px 그리드에 맞는가, 타이포그래피 scale이 일관적인가, 상태(state)가 알맞게 정의되어 있는가. 이게 정리 안 돼 있으면 AI 프로토타이핑이 오히려 발목을 잡아요.

MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너가 처음 AI 프로토타이핑으로 MVP를 만들었을 때, 상사가 특히 좋아한 포인트가 있었대요.

"결과물에 우리 디자인 시스템을 엄청 정확하게 반영했네! 실무에 드디어 AI 결과물을 활용할 수 있겠어."

핵심은 여기 있어요. 디자인 시스템은 보통 Figma 안에 있잖아요. 근데 AI는 Figma 화면을 시각적으로 이해하지 않아요. AI가 이해하는 건 구조화된 데이터예요. 그래서 디자인 시스템을 AI의 언어로 번역해야 하는데, 그 언어가 바로 JSON이에요.

JSON으로 디자인 시스템을 번역하기 — 두 가지 규칙

JSON은 간단히 말하면 이름과 값으로 데이터를 정리한 구조예요. "Primary 버튼은 파란색입니다"라고 말하는 대신, AI는 이렇게 이해하죠.

중요한 규칙이 두 가지 있어요.

첫째, 띄어쓰기 대신 camelCase를 써야 해요. ❌ `Text Color` → ✅ `textColor`. 둘째, 계층 구조를 사용해야 해요. ❌ `Primary Blue` → ✅ `color.brand.primary`. AI는 모호한 이름보다 카테고리 → 세부 속성 순서를 훨씬 잘 이해하거든요.

실제 세팅 과정 — Figma에서 JSON 추출까지 4단계

실제로 세팅하는 과정을 정리해볼게요. (여담이지만, 처음에는 이것도 복잡해 보이는데 한 번 해보면 별거 아니에요.)

Step 1. Figma에서 디자인 시스템 열기. Figma Community에서 Simple Design System 파일을 복사해요. 현업에서는 회사 디자인 시스템을 쓰겠지만, 예제니까요.

Step 2. Design Tokens 플러그인 실행. Figma Plugin에서 Design Tokens를 찾아서 Run. `design-tokens.tokens.json` 파일이 생성돼요.

Step 3. 파일 정리. 파일 이름을 `etg.design.tokens.json`으로 변경하고, 데스크탑에 ETG 폴더를 만들어서 JSON 파일을 넣어요.

Step 4. 아이콘 정리. 아이콘을 .svg로 다운로드하고, assets 폴더를 만들어서 ETG 폴더 안에 함께 정리해요.

이제 AI 프로토타이핑 툴에서 ETG 폴더 안에서 작업하면, AI가 color 토큰, spacing 구조, radius 기준, typography scale, 아이콘 자산을 전부 이해한 상태가 돼요. 쉽게 말하면 AI 머릿속에 디자인 시스템을 "설치"한 셈이죠.

뉴욕 테크 실무에서 배운 네 가지

실제로 적용하면서 배운 점들이에요.

아이콘은 따로 다운로드해서 정리해야 해요. Design Tokens 플러그인은 아이콘을 포함하지 않거든요. 반드시 .svg로 따로 정리해야 합니다.

아이콘 네이밍에 크기를 포함하세요. `ic-search-16.svg`, `ic-close-24.svg` 이런 식으로요. 크기 정보가 포함돼 있어야 AI가 버튼 안에서 적절한 아이콘을 정확히 선택해요.

JSON을 너무 거대하게 만들지 마세요. 디자인 시스템이 큰 경우에는 `design.tokens.json`, `panel.component.json`, `modal.component.json`처럼 분리하는 게 안정적이에요. 주요 컴포넌트는 Cursor나 Claude에 Figma MCP를 연결해서 화면 단위로 추출하는 방식이 훨씬 정확하고요.

초기 세팅은 보통 1시간 이상 걸려요. 근데 이후 반복 작업 시간은 최소 50% 이상 감소하더라고요. AI 프로토타이핑에 시간을 투자하면 할수록 복잡한 인터랙션 디자인을 만드는 데 걸리는 시간이 줄어들어요. 복잡한 AI 기능 디자인을 여러 개 맡고 있는데, Figma로 프로토타입하는 것보다 AI를 통하는 게 빠를 때도 있거든요.

한 가지 솔직한 고백. 모든 기능을 AI 프로토타이핑할 필요는 없어요. Figma에서 1분이면 수정될 버튼 레이아웃이 AI 프로토타이핑으로 하면 오류 때문에 1시간 이상 걸리기도 해요. 만능이 아니에요. 적재적소가 핵심이죠.