뉴욕 현직자 사수와 배우는 AI로 하는 UX 커뮤니티 이벤트

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

"이런 경험 있으신가요?" → AI 툴은 많은데 뭘 써야 할지 모르겠다 → Figma 작업물을 코드로 연결하지 못하고 있다 → AI 결과물이 내 디자인 시스템이랑 안 맞는다 → 3D 모션을 프로토타입에 넣고 싶은데 진입장벽이 너무 높다 "이 세션에서 해결해요!" ✅ Figma → AI → 코드까지 이어지는 AI UX 프로토타이핑 전체 워크플로우 ✅ AI가 이해할 수 있도록 Figma를 구조화하는 전처리 방법 ✅ 실제로 동작하는 프로토타입을 AI로 생성하는 방법 Session 1 - 4월 24일 오후 9시 AI 툴키트 소개 및 AI툴로 디자인 생성 강의 (40분) AI 툴키트 소개 및 AI UX 프로토타이핑 워크플로우 AI를 위한 Figma 디자인 전처리 AI툴로 디자인 생성 효율성을 높이는 팁 Q&A (20분) 과제 Figma 디자인을 기반으로 AI 툴로 AI 프로토타입 코드 생성 Session 2 - 5월 1일 오후 9시 AI 툴로 디자인 생성 및 새 기능 추가 강의 (40분) Design Token 개념 AI 툴로 디자인 수정 Design Token을 기반으로 한 새 기능 추가 Q&A (20분) 과제 만든 AI 프로토타입에 디자인 토큰을 기반으로 새 기능 1개 추가 Session 3 - 5월 8일 오후 9시 3D AI UX 배우고 적용하기 강의 (40분) 3D AI툴 배우기 3D 디자인을 만드는 방법 3D 디자인을 AI 프로토타입에 적용하는 방법 Q&A (20분) 과제 AI 프로토타입에 3D 디자인을 적용하기 Session 4 - 5월 15일 오후 9시 GitHub 업로드 및 최종 프로젝트 발표 강의 (20분) GitHub repo 생성 GitHub 연결 코드 push 프로젝트 발표 (40분) 각 참가자 AI 프로토타입 및 배운 점 공유 🙋🏻‍♀️🙋🏻 이런 분께 추천해요! AI를 UX 디자인에 적용하고 싶은 디자이너 AI 기능을 제품에 넣고 싶은 PM 또는 기획자 코딩 없이 프로토타입을 만들고 싶은 실무자 3D 모션 디자인을 배우고 싶은 실무자 👉🏻 이 세션에서 확실히 얻어가는 3가지! 1️⃣ 포트폴리오에 넣을 수 있는 완성된 AI 프로토타입 1개 2️⃣ 실무에서 바로 적용 가능한 AI 기반 디자인 프로세스 3️⃣ 작업 시간을 3~5배 줄일 수 있는 효율적인 작업 방식 참가비 환불 규정 안내 환불 규정 상세 안내 1. 취소 및 환불 신청 방법 참여자는 이벤트 시작 전, 마이페이지 → 참여 이벤트 → 취소 요청을 통해 직접 환불을 신청할 수 있습니다. 취소 요청 즉시 환불 가능 여부와 예상 환불 금액이 자동으로 계산되어 화면에 표시되며, 최종 확인을 누르면 정책에 따라 자동으로 환불이 진행됩니다. 별도의 리더 승인 절차는 없습니다. 2. 환불 수단 및 처리 기간 환불 금액은 원 결제 수단으로 자동 반환되며, 카드사 사정에 따라 영업일 기준 3~7일이 소요될 수 있습니다. 3. 예외 환불 안내 아래의 경우, 운영팀 검토 후 별도 환불이 진행될 수 있습니다. 리더 사정으로 이벤트가 취소된 경우 (전액 환불) 플랫폼 오류로 인한 중복 결제 천재지변 및 불가항력 사유 4. 유의사항 노쇼(No-show)의 경우 사유에 관계없이 환불되지 않습니다. 환불 정책은 이벤트 등록 시점에 고지된 기준이 적용됩니다. 일부 특별 이벤트(얼리버드, 특가 등)는 별도 환불 정책이 적용될 수 있으며, 이벤트 상세 페이지에서 확인하실 수 있습니다.

안녕하세요, 저는 원래 다른 일을 하다가 UX 디자이너로 커리어를 전향했고, 국내 기업에서 UX 디자이너로 일을 했습니다. 이후 MIT에서 석사를 전액 장학금으로 졸업했습니다. 지금은 뉴욕에 있는 글로벌 테크 회사 에서 시니어 프로덕트 디자이너 로 일하면서 AI 기능을 디자인하고 있습니다. 팀에서는 AI 프로토타이핑 TF 도 맡아서 디자인 워크플로우를 만들고 멘토링도 하고 있습니다. Cursor를 비롯한 다양한 AI 툴을 만드는 회사들과 미팅을 하거나 다른 디자이너들과 협업하면서 AI 프로토타이핑을 업무에 적극적으로 활용하고 있습니다. 프로토타입을 몇 분 만에 만들 수 있는 도구들이 계속 등장하고 있지만, 실제 실무에서는 어떤 방식으로 AI를 디자인 과정에 활용해야 하는지 막막하게 느껴질 때도 많다는 것을 압니다. 그래서 미국 테크 회사에서 실제로 활용하고 있는 AI UX 프로토타이핑 워크플로우와 실무 팁 을 공유하는 시간을 준비했습니다. 툴 소개보다는 실제 제품을 만들 때 AI를 어떻게 활용하는지, 어떤 방식이 실무에서 효과적인지 중심으로 이야기해보려고 합니다. 🗓️ 이벤트 형식 (총 1시간 30분) 1️⃣ 강연 (45분) 뉴욕 테크 회사에서 실제로 사용하는 AI 기반 UX 프로토타이핑 워크플로우 실무에서 자주 사용하는 AI 툴들 및 활용 방법 3D 모션 그래픽 인터랙션을 AI 프로토타이핑에 적용하는 방법 등을 공유할 예정입니다. 2️⃣ Q&A 세션 (45분) 강연 이후에는 자유롭게 질문을 받고 이야기 나누는 시간을 가질 예정입니다. 궁금했던 점이나 실무 고민을 편하게 질문하셔도 좋고, 그냥 듣기만 하셔도 괜찮습니다. 미국 취업, 최근 포트폴리오 트렌드, 미국 석사 입학 등에 대해서도 질문 주셔도 괜찮습니다. 🧠 AI 시대에 디자이너가 어떻게 일하고 있는지, 실무에서 겪는 시행착오와 워크플로우를 함께 이야기해보는 시간이 되었으면 합니다. 🎯 이런 분들께 추천합니다 UX 디자인에 AI를 활용해보고 싶은 디자이너 AI 프로토타이핑 툴을 써보고 있지만 실무 적용이 고민인 분 실제 글로벌 테크 회사에서 사용하는 UX 워크플로우가 궁금한 분