종료피그마에서 만든 디자인을 코드 기반 프로토타입으로 바꾸고, Cursor나 Claude Code와 함께 수정하고, 개발자에게 더 구체적으로 전달하는 방식이 빠르게 확산되고 있습니다.
이번 다시보기에서는 AI 프로토타이핑이 무엇인지 개념만 설명하지 않습니다.
디자인 토큰, 피그마 파일, 프로젝트 폴더, 로컬 서버, Cursor, Claude Code, Spline, 개발자 핸드오프까지 실제 업무 흐름에서 디자이너가 알아야 할 구조를 하나씩 살펴봅니다.
개발자가 되기 위한 시간이 아니라, 디자이너가 더 빠르게 실험하고 더 정확하게 소통하기 위한 AI 프로토타이핑 입문 세션을 다시보기로 확인해보세요.
이번 다시보기는 미국 뉴욕의 글로벌 테크 기업에서 시니어 AI 프로덕트 디자이너로 일하고 있는 이지원 님의 실무 경험을 바탕으로 진행됩니다.
이지원 님은 현재 AI 기반 제품을 디자인하며, 복잡한 엔터프라이즈 워크플로우와 디자인 시스템, 글로벌 팀 협업을 중심으로 커리어를 쌓아가고 있습니다. 이전에는 국내 대기업과 다양한 스타트업에서 UX 디자이너로 일하며, 서비스 기획부터 제품 경험 설계까지 폭넓은 실무를 경험했습니다.
MIT Media Lab에서 전액장학금으로 Engineering & Management 석사 과정을 수학했고, 수석 조기 졸업했습니다. 또한 iF Design Award, Red Dot Design Award, A’ Design Award 등 세계적인 디자인 어워드에서 수상하며 디자인 역량을 인정받았습니다.
이번 세션에서는 단순히 “AI가 디자인을 대신한다”는 이야기가 아니라, 실제 글로벌 프로덕트 조직에서 디자이너가 AI 프로토타이핑을 어떻게 업무에 적용하고 있는지 공유합니다. 피그마 디자인을 코드 기반 프로토타입으로 바꾸고, Cursor·Claude Code·디자인 토큰·Spline 등을 활용해 개발자와 더 정확하게 소통하는 과정을 실무자의 관점에서 풀어갑니다.
AI 프로토타이핑은 이제 일부 개발자나 기술 친화적인 디자이너만의 실험이 아닙니다.
디자이너가 만든 화면을 코드 기반 프로토타입으로 빠르게 구현하고, 실제 인터랙션을 확인하고, 엔지니어에게 더 구체적인 형태로 전달하는 방식이 점점 중요해지고 있습니다.
하지만 많은 디자이너에게는 프로젝트 폴더, 터미널, 로컬 서버, GitHub, 디자인 토큰 같은 개념이 낯설고 어렵게 느껴집니다.
이번 다시보기는 AI 프로토타이핑을 “개발자의 일”로만 두지 않고, 디자이너가 자신의 업무 안에서 어디까지 활용할 수 있는지 현실적인 기준을 잡는 데 도움이 됩니다.
AI 프로토타이핑이 궁금하지만 개발 지식이 없어 시작을 망설이고 있는 디자이너
피그마 디자인을 더 빠르게 구현 가능한 프로토타입으로 바꿔보고 싶은 UX/UI 디자이너
Cursor, Claude Code, MCP, 디자인 토큰, 로컬 서버 같은 개념을 실무 맥락에서 이해하고 싶은 분
개발자에게 디자인을 더 정확하게 전달하고, 인터랙션이나 엣지 케이스를 더 구체적으로 보여주고 싶은 분
AI 시대에 디자이너가 어떤 역량을 더 키워야 하는지 고민하는 분
단순히 AI 툴 이름만 알고 싶은 분보다는, 실제 디자인 업무 흐름 안에서 AI 프로토타이핑을 어떻게 활용할 수 있는지 알고 싶은 분께 더 적합합니다.
이번 다시보기는 AI 프로토타이핑을 처음 접하는 디자이너도 전체 흐름을 이해할 수 있도록, 실무 사례와 데모 중심으로 구성되어 있습니다.
개발 용어를 단순히 설명하는 것이 아니라, 피그마 작업 방식과 연결해 “디자이너가 실제로 어디까지 알고 활용하면 되는지”를 기준으로 정리합니다.
피그마에서 만든 디자인을 AI를 활용해 코드 기반 프로토타입으로 바꾸는 흐름을 살펴봅니다.
AI 프로토타이핑이 기존 피그마 프로토타입과 어떻게 다른지, 디자이너가 왜 코드 기반 프로토타입을 이해해야 하는지 설명합니다.
디자인 토큰, 컬러 스타일, 컴포넌트 이름, 아이콘 추출 방식 등을 다룹니다.
AI가 디자인을 더 정확하게 이해하도록 하려면 왜 프레임과 레이어 이름을 정리해야 하는지, 아이콘은 왜 SVG로 별도 추출해야 하는지 살펴봅니다.
AI가 만든 코드가 어디에 저장되고, 그 결과물을 어떻게 화면으로 확인하는지 설명합니다.
프로젝트 폴더, 터미널, npm run dev, localhost 같은 개념을 디자이너가 이해할 수 있는 방식으로 풀어봅니다.
피그마 링크나 디자인 정보를 AI에게 전달하고, 원하는 개발 언어와 컴포넌트 라이브러리를 기준으로 프로토타입을 만드는 과정을 살펴봅니다.
Cursor를 통해 Claude 모델을 활용하는 방식, Claude Code를 직접 사용하는 방식의 차이도 함께 설명합니다.
AI가 만든 화면에서 수정하고 싶은 영역을 찾고, 해당 컴포넌트 이름이나 구조를 기준으로 수정 요청하는 방법을 다룹니다.
간격, 레이아웃, 배경색, hero content 영역 등 실제 화면 요소를 어떻게 지시하고 개선하는지 예시로 확인합니다.
디자인 토큰을 JSON 파일로 추출하고, 프로젝트 폴더에 넣어 AI가 디자인 시스템을 참고하게 만드는 방법을 설명합니다.
Code Connect, GitHub, Storybook, 기존 소스 코드 연결을 통해 이미 검증된 컴포넌트를 재사용하는 방식도 소개합니다.
Spline에서 만든 3D 요소를 코드로 가져오고, Cursor나 Claude Code에 전달해 프로토타입에 삽입하는 흐름을 살펴봅니다.
단순 정적 화면을 넘어, 인터랙션과 모션을 가진 프로토타입으로 확장하는 방법을 설명합니다.
AI 프로토타입을 개발자에게 어떻게 전달할지 다룹니다.
소스 코드, 로컬 서버 시연, Zoom 녹화, 피그마 추가 문서화 등 실제 협업에서 활용할 수 있는 핸드오프 방식을 소개합니다.
AI 프로토타이핑이 디자이너의 역할을 어떻게 바꾸는지 이야기합니다.
문제 정의, 이해관계자 설득, 빠른 실험, 피드백 반영, PM·엔지니어와의 협업 능력이 왜 더 중요해지는지 정리합니다.
AI 프로토타이핑이 실제 디자인 업무에서 어떻게 쓰이는지 이해할 수 있습니다.
피그마 디자인을 AI가 더 정확히 이해하도록 준비하는 방법을 알 수 있습니다.
디자인 토큰, SVG 아이콘, 프로젝트 폴더, 로컬 서버, Cursor, Claude Code 같은 핵심 개념을 디자이너 관점에서 정리할 수 있습니다.
AI가 만든 프로토타입을 수정하고 반복 개선하는 기본 흐름을 배울 수 있습니다.
개발자에게 프로토타입을 더 구체적으로 전달하는 핸드오프 방식을 이해할 수 있습니다.
AI 시대에 디자이너가 집중해야 할 문제 정의와 협업 역량을 다시 생각해볼 수 있습니다.
본 다시보기는 개발자를 위한 코딩 강의가 아니라, 디자이너를 위한 AI 프로토타이핑 입문 세션입니다.
개발 경험이 없어도 시청할 수 있으며, 낯선 용어는 피그마 작업 방식에 비유해 쉽게 설명합니다.
시청 전 본인이 자주 사용하는 디자인 시스템, 피그마 컴포넌트, 프로토타입 핸드오프 방식에서 불편했던 지점을 떠올려보시면 내용을 더 잘 이해할 수 있습니다.
세션에서는 AI 프로토타이핑을 시작할 때 디자이너가 자주 헷갈리는 개념과 시행착오를 정리해드립니다.
A. 네. 개발 경험이 없어도 시청할 수 있습니다. 프로젝트 폴더, 터미널, 로컬 서버 같은 개념은 디자이너가 이해할 수 있는 방식으로 쉽게 설명합니다.
A. 아닙니다. 코딩 문법을 배우기보다는, 디자이너가 AI 프로토타이핑을 업무에 활용하기 위해 알아야 할 흐름과 개념을 다룹니다.
A. 다시보기 시청만으로는 설치가 필요하지 않습니다. 다만 내용을 실제로 따라 해보고 싶다면 Cursor, Claude Code, Figma 파일, 프로젝트 폴더 세팅이 필요할 수 있습니다.
A. 항상 그렇지는 않습니다. 디자인 토큰, 아이콘, 레이어 이름, 컴포넌트 구조가 정리되어 있을수록 AI가 더 정확하게 이해합니다. 세션에서는 이 준비 과정에서 자주 생기는 시행착오도 함께 다룹니다.
A. 현재는 대부분 참고용 또는 프로토타입용으로 활용되는 경우가 많습니다. 다만 디자인 의도, 인터랙션, 엣지 케이스를 더 구체적으로 전달하는 데 큰 도움이 될 수 있습니다.
A. 피그마 프로토타입은 화면 흐름을 보여주는 데 강점이 있고, AI 프로토타입은 실제 코드 기반으로 인터랙션과 다양한 상태를 더 구체적으로 실험할 수 있다는 장점이 있습니다.
A. 네. Spline에서 만든 3D 요소를 코드로 가져와 AI 프로토타입에 연결하는 기본 흐름을 소개합니다. 깊은 3D 제작 강의라기보다는, AI 프로토타입에 3D·모션 요소를 연결하는 방법을 이해하는 데 초점을 둡니다.
이벤트 신청 후 아래 경로에서 영상을 확인하실 수 있어요.
마이페이지 > 신청한 이벤트 > ‘시청하기’ 버튼 클릭
⚠️ 링크는 이벤트 신청일로부터 7일간만 제공됩니다. 기간 내에 꼭 확인해주세요.
※ 청약철회 가능 기간은 다시보기 공개일과 신청일 중 늦은 날을 기준으로 계산됩니다.
커뮤니티 소개