7화: 실제 소스 코드를 통해 AI 프로토타이핑하기

2달 안에 AI 프로토타이핑 마스터하기

엔터프라이즈 제품에서 디자인 시스템은 기능을 구성하는 가장 기본적인 단위입니다. 그리고 대부분의 디자인 시스템 컴포넌트는 이미 코드로 구현되어 있습니다.

Figma에서는 이미 짜여진 디자인 시스템 소스 코드를 AI 프로토타이핑할 때 재사용할 수 있도록 Code Connect라는 기능을 제공합니다. Code Connect는 간단하게 말하면 Figma 컴포넌트와 실제 프로덕션 코드 컴포넌트를 연결하는 기능입니다.

예를 들어서, Figma에 Button 컴포넌트가 있고 회사 코드베이스에도 동일한 Button 컴포넌트가 있다면 이 둘을 연결할 수 있습니다.

Code Connect를 사용하면 크게 세 가지 장점이 있습니다.

AI가 컴포넌트를 새로 생성하지 않기 때문에 토큰 사용량이 줄어듭니다

엔지니어가 그대로 재사용할 수 있어 개발 시간이 단축됩니다 (개발 시간을 단축시킨 것은 레쥬메에 포함시키기 좋은 포인트입니다)

실제 프로덕트의 컴포넌트와 동일한 디자인 및 인터랙션을 유지할 수 있습니다

실무에서는 이 단계가 굉장히 중요합니다. AI 프로토타이핑이 “데모”에서 끝나지 않고 이제 제품으로 연결되는 구조를 만들기 때문입니다. 그리고 컴포넌트 코드가 Github 어디에 있는지 아는 것은 보통 엔지니어이기 때문에, 가능하다면 Code Connect는 엔지니어와 함께 작업하는 것이 좋습니다.

또 알아두면 좋은 플랫폼은 Storybook입니다. 많은 미국 테크 회사에서는 Storybook이라는 플랫폼을 사용하는데, 개념을 쉽게 설명하자면 다음과 같습니다:

Storybook → 디자인 + 코드가 함께 보이는 공간

Github → 실제 코드 저장소

이 두 가지를 같이 활용하면 Figma와 코드 연결이 훨씬 쉬워집니다.

---

회사에서 무제한 휴가를 낼 수 있지만, 무제한 휴가와는 별개로 1년에 3일을 멘토링에 할애할 수 있게 해주는 제도가 있습니다. 한국 시간으로 4월 4일에 플렉스웍을 통해서 AI 관련해서 Q&A 세션을 진행할 예정입니다. 시간 되시면 편하게 신청해주세요. 최대한 도움이 되는 멘토링 세션이 되기 위해 원하시는 분들이 있다면 미국 대학원 진학이나, 포트폴리오, 취업 관련해서도 질문을 받을 예정입니다. 4,900원의 참가비는 노쇼 방지 차원을 위해 플랫폼에서 부과한 금액입니다.

이번 Q&A 세션을 위해서 멘토링 데이를 사용하지는 않지만, 미국 테크 회사 복지가 무엇이 있는지에 대한 질문을 종종 받아왔어서 회사 복지를 설명하기 위해서 포함했습니다.

Q&A 세션 신청하는 링크

플렉스웍 이벤트 이미지

포도라는 스타트업에서 디자인 매니저가 말합니다.

엔지니어들이 우리가 만든 코드를 최대한 재사용할 수 있게 하자! AI 툴 토큰을 아낄 수 있으면 더 좋고.

다음은 Code Connect를 하는 방법을 보여주는 워크플로우입니다.

AI 프로토타이핑을 위한 Code Connect 워크플로우

Step 1. Github와 AI 툴 연결하기

디자인 시스템 코드가 있는 Github 계정을 Claude 또는 Cursor에 연결합니다.

Step 2. Storybook을 통해 컴포넌트 코드 확인하기

Storybook에서 컴포넌트의 UI와 코드 구조를 확인하고, 해당 컴포넌트의 Github 링크를 준비합니다.

Storybook 캡쳐 화면. View source을 클릭하면 Github 내의 소스 코드 링크로 이동할 수 있습니다.

Step 3. Figma에서 Code Connect 설정하기

Figma 디자인 시스템 파일을 열고 Dev Mode로 이동합니다.

Code Connect를 설정할 컴포넌트를 선택한 뒤, Code Connect 모달에 Github 코드 링크를 붙여넣습니다.

Step 4. 컴포넌트 정보 정리하기

컴포넌트 이름 설정 (Figma / Storybook / Github에서 동일한 컴포넌트 이름을 사용하는 것을 추천)

필요하면 MCP용 instruction 추가

Figma 내에서 Code Connect을 하는 모달 화면

Step 5. AI 프로토타이핑으로 검증하기

Code Connect가 연결된 컴포넌트를 사용해 Figma 디자인을 만든 뒤, Figma MCP로 AI 툴에 전달합니다. Prompt에 다음 내용을 포함시키면 좋습니다.

Use the code that is provided through Figma Code Connect whenever possible

AI가 생성한 코드가 실제 Github 또는 Storybook의 코드와 동일한지 확인합니다.

정상적으로 동작하면 나머지 컴포넌트에도 Code Connect를 합니다.

Code Connect를 성공하면 Dev Mode 상태에서의 오른쪽 패널에서 Connected라는 태그가 뜹니다

뉴욕 테크 실무에서 실제로 적용하며 배운 팁입니다.

1. 소스 코드의 위치 파악은 엔지니어 혹은 AI 툴을 통해 하기

컴포넌트 코드가 Github 어디에 있는지 찾는 데 생각보다 시간이 많이 걸립니다. 엔지니어는 이미 구조를 알고 있기 때문에 같이 작업하면 시간을 크게 줄일 수 있습니다.

혼자 해야 하는 경우에는, AI 툴을 사용하면 되는데, 다음 스텝을 따라하면 됩니다.

Figma에 컴포넌트를 모아서 정리한 뒤

Github repo를 AI에 함께 제공하고

컴포넌트 경로를 찾아달라고 요청

2. 컴포넌트 이름과 규칙을 통일하는 것을 추천

Code Connect에서 가장 중요한 것은 일관성입니다.

Figma

Storybook

Github

이 세 곳에서 컴포넌트 이름이 다르면 Code Connect를 해도 AI는 다른 컴포넌트로 인식하고 에러가 생길 수 있습니다.

또한 MCP instruction을 활용해서 언제 사용하는 컴포넌트인지, 그리고 어떤 조건에서 사용하는지를 명확하게 정의해두면 아웃풋 정확도가 올라갑니다.

3. 하나의 컴포넌트를 먼저 검증하고 나머지 컴포넌트 연결을 시작하기

처음부터 전체 디자인 시스템을 연결하려고 하면 오류가 발생했을 때 원인을 찾기 어렵습니다.

먼저 1개의 컴포넌트를 Code Connect하기

AI 프로토타이핑에서 소스 코드를 재사용하는지 확인

인터랙션의 정상 작동 확인 후 나머지 컴포넌트 연결하기

이 순서로 진행하는 것을 추천합니다.

---

다음 글에서는 AI 프로토타이핑 결과물을 엔지니어에게 전달하고 실제 개발로 연결하는 handoff 방법을 다루겠습니다.

---

MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.