2화: AI에게 디자인 시스템을 학습시키기
2달 안에 AI 프로토타이핑 마스터하기
AI 프로토타이핑을 시작할 때 디자이너들에게 생소한 개념이 많이 등장합니다. JSON, JavaScript, XML, React.. 등등 이걸 다 이해해야한다고 생각해서 부담감이 심해지고 부담감을 AI 프로토타이핑에 대한 거부감도 생기는 경우를 봤습니다.
하지만 현업에서 더 중요한 것은 이해가 아니라 결과입니다. 실제로 평가받는 기준은 이것입니다.
AI 프로토타이핑으로 결과물 혹은 임팩트를 만들었는가?
실제로 보여줄 수 있는 MVP가 있는가?
자잘한 개념을 이해하려고 노력하기보다는, 사용되는 AI 툴이 바뀌어도 유연하게 대처할 수 있도록 AI 프로토타이핑의 큰 원리를 이해하는 것이 중요합니다. AI 툴은 바뀌어도, 소프트웨어 제품을 설계할 때 디자인 시스템이라는 개념은 바뀌지 않습니다. 회사에서 AI 프로토타이핑 툴을 실무에 적용하려고 할 때, 가장 높은 진입장벽 중에 하나로 여기는 것은 AI 프로토타이핑의 결과물과 디자인 시스템과의 호환입니다.
제가 AI 프로토타이핑으로 MVP를 처음 만들었을 때 상사가 특히 좋아했던 포인트는 다음과 같습니다.
결과물에 우리 디자인 시스템을 엄청 정확하게 반영했네! 실무에 드디어 AI 결과물을 활용할 수 있겠어.
회사 휴게실에서 찍은 뉴욕 사진. 요즘 AI의 발전 때문에 더 바빠져서 창문 밖의 풍경을 쳐다볼 시간이 거의 안 납니다.AI 프로토타이핑할 때 불편한 점은, 보통 AI 프로토타이핑 결과물이 회사의 디자인 시스템을 반영 잘 못한다는 점입니다. 현업에서 AI 프로토타이핑 결과물을 발전시킬 때 가장 먼저 보는 요소 중에 하나가 디자인 시스템과의 정합성입니다.
버튼이 기존 토큰을 따르는가
Spacing이 4px, 8px 그리드 기준에 맞는가
타이포그래피 scale이 일관적인가
상태(state)가 알맞게 정의되어 있는가
이게 정리되어 있지 않으면, AI 프로토타이핑은 오히려 더 느려집니다.
문제는 여기입니다. 디자인 시스템은 보통 Figma 안에 있습니다. 하지만 AI는 Figma 화면을 시각적으로 이해하지 않습니다. AI는 구조화된 데이터를 이해합니다. 그래서 디자인 시스템을 AI의 언어로 번역해야 합니다. 그 언어가 바로 JSON입니다.
JSON은 간단히 말하면, 이름과 값으로 데이터를 정리한 구조입니다.
예를 들어 “Primary 버튼은 파란색입니다”라고 말하는 대신 AI는 이렇게 이해합니다:
버튼 Component의 JSON 예시여기서 중요한 점 2가지:
1. 띄어쓰기 대신 camelCase 사용
❌ Text Color
✅ textColor
2. 계층 구조 사용
❌ Primary Blue
✅ color.brand.primary
AI는 구조를 좋아합니다.
모호한 이름보다 카테고리 → 세부 속성 순서를 훨씬 잘 이해합니다.
포도라는 스타트업에서 디자인 매니저의 지시가 내려왔습니다.
AI 프로토타이핑할 때 전반적인 디자인 시스템이 일관되게 우리 디자인 시스템을 AI한테 학습 시켜봐.
실제로 세팅하는 과정을 간단히 정리해보겠습니다.
디자인 시스템을 AI 툴에게 학습하는 과정Step 1. Figma에서 디자인 시스템 열기
Figma Community에서 Simple Design System 파일 복사
❗️현업에서는 회사의 디자인 시스템을 사용하지만, 예제를 위해서는 Figma에서 만든 디자인 시스템 파일을 사용합니다.
Figma Community의 Simple Design System 파일Step 2. Design Tokens 플러그인 실행
Figma Plugin → Design Tokens → Run
design-tokens.tokens.json 파일 생성
Design Tokens Figma 플러그인을 디자인 시스템 Figma 파일에서 열었을 때 모습Step 3. 파일 정리
파일 이름을 etg.design.tokens.json으로 변경
데스크탑에 ETG폴더 생성
JSON 파일을 ETG 폴더 안으로 이동
etg.design.tokens.json 파일 스크린샷. 구글 드라이브 예제 폴더에 올려놨습니다.Step 4. 아이콘 정리
아이콘을 .svg로 다운로드
assets 폴더 생성
아이콘 파일을 ETG 폴더 안에 함께 정리
Figma Dev Mode에서 선택한 영역의 아이콘을 한번에 다운로드 받을 수 있습니다.이제 AI 프로토타이핑 툴에서 ETG 폴더 안에서 작업하면
AI는 다음을 이해한 상태가 됩니다:
color 토큰
spacing 구조
radius 기준
typography scale
아이콘 자산
쉽게 말하면
AI 머릿속에 디자인 시스템을 “설치”한 상태입니다.
뉴욕 테크 실무에서 실제로 적용하며 배운 점입니다.
1. 아이콘은 따로 다운로드해서 정리해야 합니다
Design Tokens 플러그인은 아이콘을 포함하지 않습니다. 반드시 .svg로 따로 정리해야 합니다.
2. 아이콘 네이밍에 크기를 포함하세요
예:
ic-search-16.svg
ic-close-24.svg
크기 정보가 포함되어 있어야 AI가 버튼 안에서 적절한 아이콘을 정확히 선택합니다.
3. JSON을 너무 거대하게 만들지 마세요
디자인 시스템이 큰 경우:
design.tokens.json
panel.component.json
modal.component.json
처럼 분리하는 것이 안정적입니다.
주요 Compnent는 Cursor나 Claude에 Figma MCP를 연결해 화면 단위로 추출하는 방식이 훨씬 정확합니다.
4. 초기 세팅은 보통 1시간 이상
하지만 이후 반복 작업 시간은 최소 50% 이상 감소하고, AI 프로타이핑에 시간을 투자하면 할수록 복잡한 인터랙션 디자인을 디자인하는데 걸리는 시간이 줄어듭니다.
복잡한 AI 기능의 디자인을 여러 개 맡고 있는데, Figma로 프로토타입을 하는 것보다 AI를 통해 하는 것이 빠를 때도 있습니다.
모든 기능을 AI 프로토타이핑할 필요는 없습니다. Figma에서는 1분이면 수정될 버튼 레이아웃이 AI 프로토타이핑을 할 때는 오류가 떠서 1시간 이상 걸리기도 합니다.
다음 글에서는 Figma MCP의 연결에 대해서 다룰 예정입니다.
MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.
예제 파일은 이메일로 무료 공유합니다.
이번 화 예제 파일을 원하시면 댓글에 이메일을 남겨주세요. 주 1회 확인 후 보내드립니다.