🇺🇸 MIT 출신 뉴욕 현직 UX 디자이너 이지원 님의 QA(4/4) 현장 Review

인사이트 요약

이지원 님은 MIT 출신 뉴욕 현직 Senior AI Product Designer입니다. iF · Red Dot · A' Design Award 수상. 이번 QA에서는 AI 프로토타이핑 실무 워크플로우, 디자이너들이 겪고 있는 '이중 작업' 과도기, 그리고 AI 시대에 살아남는 디자이너의 핵심 역량을 꺼냈습니다.

이 글의 핵심 3가지:

• AI 프로토타이핑 실무 워크플로우 — Figma에서 GitHub까지, 이지원 님이 쓰는 도구 연결 흐름

• 지금 디자이너들이 겪는 과도기 — 일을 두 번 해야 하는 상황, 어떻게 헤쳐나가나

• AI 시대에 더 빛나는 디자이너의 능력 — 화면 설계보다 먼저 필요한 것

그날 무슨 일이 있었나

토요일 오전, 100명이 넘는 참여자들......

이지원 님은 뉴욕에서 Senior AI Product Designer로 일하고 있습니다. MIT 미디어랩 출신으로 Engineering & Management 석사를 수석 졸업했고, iF · Red Dot · A' Design Award를 받았습니다. 이지원 님의 'AI-UX 워크플로우' 그 뜨거웠던 세션 현장을 다시 리뷰했습니다.

① 디자이너들이 지금 겪고 있는 것

이지원 님이 QA 초반에 한 말이 인상적이었습니다.

"지금 저희가 환절기에 있는 것 같아요. 변화 시기에 있어서 디자이너들이 일을 두 번 하는 상황이에요."

무슨 뜻이냐면, AI 프로토타이핑 툴로 결과물을 만들면서도 동시에 Figma 디자인도 유지해야 하는 상황이 생겼다는 겁니다. 효율적일 수 있다는 기대감이 너무 크고, 실제로 효율성이 늘어나기도 했기 때문에 아예 버릴 수도 없는 것이죠.

"그래서 야근도 많이 하고, 휴가도 많이 내고, 또 야근하고, 또 휴가 내고 이러고 있어요."

많은 분들이 채팅창에서 "저도요..."를 쳤던 대목입니다.

시니어 디자이너들은 이 문제를 어떻게 해결하고 있나

이지원 님에 따르면, 시니어 디자이너들은 이 과도기를 단축하기 위해 루트 폴더(플러그인)를 만들고 있습니다. 새 프로젝트를 시작할 때마다 디자인 토큰과 파일을 수동으로 설정해야 하는 번거로움을 없애기 위해, 루트 폴더에 한 번 연결하면 바로 AI 프로토타이핑이 가능하도록 세팅하는 방식입니다.

② 이지원 님이 쓰는 AI 프로토타이핑 워크플로우

QA에서 가장 많은 질문이 몰린 부분이었습니다. 이지원 님이 직접 Figma 화면을 열고 보여줬습니다.

실무에서 쓰는 도구 연결 흐름:

Figma (전처리) → html.to.design 플러그인 → Cursor / Claude Code → GitHub → 엔지니어

Figma 전처리 단계에서 핵심은 레이어 이름입니다.

"피그마 디자인을 AI가 더 잘 이해할 수 있게끔 레이어 이름을 정리하는 게 첫 번째예요.
예를 들어 '눈'이라고 이름을 붙이면, AI가 이게 눈이라는 걸 인식하고 인터랙션을 어떻게 입혀야 하는지 스스로 파악해요."

html.to.design 플러그인은 Figma 디자인을 HTML 코드로 변환해서 가져오는 역할을 합니다.
이걸 Cursor나 Claude Code에 넣으면, AI가 그 구조를 이해하고 더 정확한 프로토타입을 만들어냅니다.

GitHub 연결은 디자이너 A, 디자이너 B가 각각 브랜치를 만들어 작업하고, 엔지니어가 Main 브랜치를 받아가는 협업 구조입니다.

Spline으로 3D 프로토타입까지

이날 가장 "오..." 반응이 나온 순간은 3D 프로토타입 시연이었습니다.
이지원 님은 Spline이라는 3D 툴로 눈이 달린 구체를 만들고, 마우스 커서를 따라 눈이 움직이는 인터랙션을 라이브로 만들어 보여줬습니다.
걸린 시간은 2분 남짓.

"음성 인터랙션이나 3D가 왜 중요하냐면, 앞으로 AI가 고도화되면서 음성 프롬프트만으로 원하는 걸 얻게 될 텐데,
그때 사용자 인게이지먼트를 높이는 게 3D 로딩이나 시각적 경험이 될 거거든요."

③ 바이브 코딩 결과물이 너무 평범할 때

실제로 많은 분들이 겪는 문제였습니다.

"AI 툴로 바이브 코딩한 디자인이 너무 보편적이고 생각하는 것과 다르게 나와요. 어떻게 해야 하나요?"

이지원 님의 답은 명확했습니다.

"두 개를 왔다갔다 해야 돼요. 베
이스를 AI로 가져온 다음, 마음에 안 드는 부분은 Figma로 다듬고, 다시 AI에 넣어서 개발하는 방식으로요."

AI 프로토타이핑과 Figma 디자인은 '하나를 선택'하는 문제가 아니라 두 개를 유기적으로 연결하는 게 현실적인 방법이라는 뜻입니다.

④ AI 시대에 디자이너가 키워야 할 능력

QA 마지막 즈음, 누군가 이런 질문을 했습니다.

"AI 툴을 많이 사용하면서 디자이너가 집중해야 할 능력 개발은 무엇인가요?"

"문제를 정의하는 능력이요. AI가 도와줄 수는 있지만,
어떤 비즈니스 임팩트를 내기 위해 어떤 문제를 정의해야 하는지는 AI가 정의할 수 없거든요."

문제 정의를 잘 하려면 협업이 필요하고, 협업을 잘 하려면 설득하는 능력이 필요합니다.

"엉성하더라도, 두렵더라도 일단 해보는 것. 저도 굉장히 두려웠어요.
근데 티를 안 내고 그냥 했어요. 그게 지금 되게 중요한 것 같아요."

⑤ 엔지니어 핸드오프, 지금 업계의 솔직한 현실

"현실적으로 AI로 만든 코드를 엔지니어가 100% 그대로 쓰는 건 아직 저희 업무 범위가 아니에요. 지금은 참고용으로 쓰는 거예요."

이지원 님은 이상적인 핸드오프는 유연성이라고 했습니다. 개발자마다 선호하는 방식이 다르기 때문에,

직접 물어보고 각자에게 맞는 방식으로 핸드오프하는 게 지금 이 과도기에서 가장 현실적인 방법이라고요.

핵심은 줌 화면 녹화로 인터랙션의 키포인트를 설명하는 것. 픽셀 단위 정확성보다 복잡한 인터랙션을 보여주는 것이 AI 프로토타입이 Figma보다 우월한 지점이고, 그 장점을 핸드오프에 활용하면 된다는 얘기입니다.

그날 못다 한 이야기가 있습니다

이 날 질문이 끝나지 않았습니다.

이지원 님이 그 이야기를 이어가는 자리를 만들었습니다.
4주 동안, 매주 토요일, 실제로 AI 프로토타이핑을 직접 구현해보는 프로젝트입니다. F
igma 레이어 이름 정리부터 html.to.design, Cursor, GitHub 연결까지 — QA에서 보여준 그 워크플로우를 직접 손으로 만들어보는 과정입니다.
이 글은 2026년 4월 4일 플렉스웍에서 진행된 이지원 님의 LIVE Q&A 세션을 바탕으로 작성되었습니다.

👉 이지원 님의 AI로 하는 UX 워크플로우 멘토링 프로젝트 참여하기

4주 완성 · 매주 토요일 오전 10시 (KST)
4/25(토) 시작 · 얼리버드 39만9천원 (정가 80만원)

얼리버드 마감: 4월 19일(일) · 선착순 10명