학습 목표
∙ Figma 파일을 Figma MAKE로 연동하여 반응형 UI를 구현합니다
AI 시대, 누구나 1시간만에 제작하는 UI 프로토타이핑 가이드 (w. figma MAKE, Cursor)
AI 시대, 누구나 1시간만에 제작하는 UI 프로토타이핑 가이드 (w. figma MAKE, Cursor)
INTRODUCTION
AI계 Top-tier 기업들이 말하는
2026년 미래 직무 범위 변화
바이브코딩 시대에 예전과 같은 프로토타이핑 제작 방식을 고수하지 마세요!
AI를 활용해 비개발자 혼자서도
서비스를 빠르게 검증하고 개선할 수 있는 프로세스를 알려드립니다.
AI 시대에 뒤처지고 싶지 않다면
누구나 1시간 안에 만드는 ‘노코드’ 프로토타이핑 가이드
지금 이 강의로 시작하세요!
핵심 01
기획, 개발 지식 전혀 없이
프로토타입 만들기 가능
AI를 활용해 서비스를 빠르게 검증하고 개선할 수 있는 프로토타이핑을 프로젝트를 따라가며 직접 내손으로 만들어보세요. 프로토타입 만들기 가능
핵심 02
속도는 빠르게, 디자인 의도는 정확하게
반영하는 UI 프로토타이핑 제작법
디자인을 더 잘 제어하기 위한반영하는 UI 프로토타이핑 제작법
Figma Make 활용 UI 프로토타이핑
핵심 03
서비스를 빠르게 검증하고
개선하기 위한 AI 활용 전략
MVP 제작 후 사용자 지표 기반으로개선하기 위한 AI 활용 전략
AB테스트를 통한 검증 및 개선 + 확장하는 법은 패캠에서만 만날 수 있어요!
핵심 04
현 이커머스 대기업에서
실무에 바이브코딩을 도입하고 있는 강사님
대기업 PM 강사님의 실전 서비스 기획 및 실무에 바이브코딩을 도입하고 있는 강사님
UX 설계 노하우를 담은 바이브 코딩 노하우를 확인하세요.
01
Figma, Cursor, Claude를 활용해 개발자 없이
노코드로 1시간 만에 완성하는 프로토타이핑 프로젝트
Figma, Cursor, Claude를 활용해
개발자 없이
노코드로 1시간 만에 완성하는
프로토타이핑 프로젝트
개발 지식이 없으신 분들도 Figma, Claude, Cursor를 활용해서
내 아이디어를 ‘작동하는 서비스’로 만들어 보세요.
Figma(+ Figma MAKE)
앱이나 웹의 화면을 그리는 툴로, 버튼·텍스트·아이콘 등 UI 요소로 시각적인 디자인을 만든 후, 디자인된 화면에 클릭·이동 같은 동작을 붙여 실제 앱처럼 움직이는 프로토타입을 만들어 볼 수 있습니다.
Cursor AI
AI가 코드를 이해하고 함께 작성해주는 개발 환경으로, 내가 만들고 싶은 기능을 가진 프로토타입을 효율적으로 다듬고 배포할 수 있습니다.
Claude
IT 대기업에서 쓰는 것처럼 구조적이고 꼼꼼한 요구사항 문서(PRD, BRD)를 AI가 함께 작성해주는 도우미입니다.
학습 Point 1
Figma로 30분만에 만든 화면을 실제 클릭 가능한 UI로 변환
AI에게 어떻게 명확하게 기획 의도를 전달하기만 하면 나머지는 AI가 알아서 뚝딱!
HTML? CSS? 코드 한 줄 몰라도 바이브코딩으로 웹앱 UI 프로토타이핑을 완성하세요!
01 | 웹 프로토타이핑 구현하기
게임 사전예약 페이지를 Figma Make를 활용하여 웹 프로토타이핑으로 구현합니다.
02 | 앱 프로토타이핑 구현하기
인테리어 상품 추천 앱을 Figma Make를 활용하여 앱 프로토타이핑으로 구현합니다.
학습 Point 2
Claude로 10분만에 IT 대기업 수준의 탄탄한 요구사항 문서 제작
노코드 프로토타이핑, 요구사항을 잘 작성한 기획서를 준비할수록 결과물이 좋아요.
기획 의도를 정확히 반영할 수 있도록 AI와 프롬프트를 활용하여 자세하고 탄탄한 기획 문서를 작성하세요.
학습 Point 3
Cursor로 1시간 안에 배포
배포는 비개발자 혼자 못한다구요?
비개발자 출신 강사님과 함께 Replit과 Cursor로 바로 공유 가능한 링크까지 확보해보세요.
배포 실행을 한눈에 보기 위해
Replit으로 원클릭으로 배포를 실행하고 간단히 기록을 저장합니다.
Replit으로 원클릭으로 배포를 실행하고 간단히 기록을 저장합니다.
실제 앱처럼 배포하기 위해서는 조금 더 복잡한 수행이 필요합니다. Cursor로 실제 앱처럼 배포를 실행하며 앱 배포의 복잡성을 경험합니다.
AI를 활용해 혼자서도 서비스를 만들고 개선할 수 있도록!
코드 한 줄 몰라도 기획부터 런칭까지 2시간 만에 완주해보세요!
AI를 활용해 혼자서도 서비스를 만들고
개선할 수 있도록!
코드 한 줄 몰라도 기획부터 런칭까지
2시간 만에 완주해보세요!
AI 시대, 누구나 1시간만에 제작하는 UI 프로토타이핑 가이드 (w. figma MAKE, Cursor)
추천 수강생
개발 지식 한줄 없어도, 디자인을 할 줄 몰라도 OK
상상을 현실로 옮기고 싶은 사람이라면 누구나!
02
속도는 100배 빠르게, 디자인 의도는 정확하게 반영하는
Figma Make 기반 UI 프로토타이핑 제작법
속도는 100배 빠르게,
디자인 의도는 정확하게 반영하는
Figma Make 기반
UI 프로토타이핑 제작법
Figma Make 등 AI 툴을 활용하면 훨씬 더 효율적이고 효과적인 디자인을 고민할 수 있어요.
Figma 파일을 그/대/로/ 바이브코딩으로 만드는 방법을 소개합니다.
Figma Make 등 AI 툴을 활용하면 훨씬 더 효율적이고
효과적인 디자인을 고민할 수 있어요.
Figma 파일을 그/대/로/
바이브코딩으로 만드는 방법을 소개합니다.
[실습] Figma Make를 활용하여 동작하는 프로토타이핑 구현하기
학습 포인트
∙ 개발 아무것도 몰라도 Figma MAKE에게 텍스트 기반으로 코딩을 시켜 동작하는 프로토타이핑 구현이 가능합니다.
∙ Claude를 활용하여 Figma 프로토타입의 핵심 화면(로그인, 메인)을 구현하기 위한 프론트엔드 코드를 바이브코딩으로 작성합니다.
∙ Claude를 활용하여 Figma 프로토타입의 핵심 화면(로그인, 메인)을 구현하기 위한 프론트엔드 코드를 바이브코딩으로 작성합니다.
Figma MAKE를 활용하여 단 10분만에 UI 프로토타이핑을 제작하세요.
따라하기만 하면 더 효율적으로 UI 프로토타이핑을 완성할 수 있습니다!
Figma MAKE를 활용하여
단 10분만에
UI 프로토타이핑을 제작하세요.
따라하기만 하면 더 효율적으로
UI 프로토타이핑을 완성할 수 있습니다!
★ FC ONLY ★ 03
IT 대기업 실무자가 알려주는,
빠른 프로토타이핑 개선과 확장을 위한 A/B테스트와 데이터 분석
AB테스트와 데이터분석을 토대로 프로토타입을 개선하고,
제품을 프로덕션 수준으로 확장하는 경험을 당신의 포트폴리오에 채우세요!
구현 내용
∙ 출시 전, UX 개선점을 찾는 AB 테스트를 진행하기 위해 타겟층의 페르소나를 담은 가상의 타겟 데이터를 ChatGPT를 활용하여 제작합니다.
핵심 포인트
∙ 타겟 고객층의 페르소나를 ChatGPT에 학습시켜 실제 데이터가 없이도
타겟층의 페인포인트와 니즈를 반영한 데이터 분석이 가능합니다.
타겟층의 페인포인트와 니즈를 반영한 데이터 분석이 가능합니다.
구현 내용
∙ 출시 후, 특정 기간 동안 활성화된 유저 혹은 고객의 수 등의 사용자 지표를 분석하는 대시보드를 Replit을 활용하여 제작합니다.
핵심 포인트
∙ 개발자 없이도 내가 원하는 데이터 중심으로 대시보드를 제작할 수 있으며,
더미 데이터를 기반으로 세그먼트별 사용자 행동 패턴 분석이 가능합니다.
더미 데이터를 기반으로 세그먼트별 사용자 행동 패턴 분석이 가능합니다.
•UI 요소의 종류
•타겟 고객층의 분류
•트래픽 분할의 비율
•일일 방문자 수
•직관성 (Intuitiveness)
•일관성 (Consistency)
•효율성 (Efficiency)
•접근성 (Accessibility)
•제품 개발 문서 생성기
•Claude 프롬프트 최적화
•A/B 테스트 표본 계산기
A/B테스트 결과를 토대로 UI 개선하기
∙ 강사님이 직접 만드신 AB 테스트 검증기를 활용하여 예상되는 사용자 피드백을 도출합니다.
∙ 가상으로 만든 사용자 피드백을 바탕으로 UI 개선점을 정리합니다.
∙ 정리한 개선점을 바탕으로 즉각 Figma 프로토타입을 개선하고 프론트엔드 코드를 바이브코딩으로 개선합니다.
∙ 가상으로 만든 사용자 피드백을 바탕으로 UI 개선점을 정리합니다.
∙ 정리한 개선점을 바탕으로 즉각 Figma 프로토타입을 개선하고 프론트엔드 코드를 바이브코딩으로 개선합니다.
SQL 코드 한 줄 못 써도 데이터 분석 가능하고,
Github jSON 아무것도 몰라도 서비스 배포할 수 있어요.
SQL 코드 한 줄 못 써도 데이터 분석 가능하고,
Github jSON 아무것도 몰라도
서비스 배포할 수 있어요.
빠르게 나의 프로토타이핑 개선 방법을 찾고
개선해보는 경험을 프로젝트로 쌓아보세요.
빠르게 나의 프로토타이핑 개선 방법을 찾고
개선해보는 경험을
프로젝트로 쌓아보세요.
나는 프로토타이핑만 하고
개선점은 알아서 찾아주면 좋겠다구요?
인터넷에서 떠도는 간단한 수준의 PRD가 아닌
IT 대기업에서 만드는 탄탄한 기획 문서 수준의 PRD/BRD/TRD 생성기
내 프로토타이핑의 개선점을 바로 찾아주는
AB 테스트 시나리오 생성기
완성도 높은 프로토타이핑을 빠르게 만들 수 있는 SaaS 부록 kit를 모두 드립니다!
손도 안 대고 IT 대기업 PM의 PRD 생성 노하우와 AB 테스트 노하우를 가져가세요!
완성도 높은 프로토타이핑을 빠르게 만들 수 있는
SaaS 부록 kit를 모두 드립니다!
손도 안 대고
IT 대기업 PM의 PRD 생성 노하우와
AB 테스트 노하우를 가져가세요!
04
이커머스 대기업의 서비스 기획 전문가에게 배우는,
바이브 코딩 시대 최소한의 역량
안녕하세요,
이번 강의를 진행하게 된 제이미 (Jamie) 입니다.
이번 강의를 진행하게 된 제이미 (Jamie) 입니다.
게임과 이커머스 등 빠르게 성장하는 도메인에서 10년간 문제를 해결하는 PM으로 일했습니다.
우리 강의는 바이브 코딩에 호기심이 있지만 컴퓨터와 친하지 않고 개발은 처음 접하는 분들에게 IT 프로젝트의 전체 여정을 차근차근 경험해보는 시간이에요.
문제정의 → 가설 → MVP → 실험 → 론칭까지, 진짜 현업에서 하는 그 모든 과정을 함께 걸으며,
바이브 코딩을 통해 실제 프론트엔드와 백엔드가 어떻게 만들어지는지 눈으로 확인하면서 여러분의 아이디어가 화면으로 변환되는 순간을 경험하게 될 거예요.
코딩을 몰라도 빠르게 프로토타입을 만들고, 필요 없는 UI/UX는 스스로 검증해가며 과감히 덜어내는 연습을 할 거예요.
여러분의 아이디어가 화면으로 생성되는 경험을 통해, "아, 나도 할 수 있구나!" 하는 새로운 가능성을 발견해 가시길 바라요.
강의에서 만나뵙겠습니다! 🌿
우리 강의는 바이브 코딩에 호기심이 있지만 컴퓨터와 친하지 않고 개발은 처음 접하는 분들에게 IT 프로젝트의 전체 여정을 차근차근 경험해보는 시간이에요.
문제정의 → 가설 → MVP → 실험 → 론칭까지, 진짜 현업에서 하는 그 모든 과정을 함께 걸으며,
바이브 코딩을 통해 실제 프론트엔드와 백엔드가 어떻게 만들어지는지 눈으로 확인하면서 여러분의 아이디어가 화면으로 변환되는 순간을 경험하게 될 거예요.
코딩을 몰라도 빠르게 프로토타입을 만들고, 필요 없는 UI/UX는 스스로 검증해가며 과감히 덜어내는 연습을 할 거예요.
여러분의 아이디어가 화면으로 생성되는 경험을 통해, "아, 나도 할 수 있구나!" 하는 새로운 가능성을 발견해 가시길 바라요.
강의에서 만나뵙겠습니다! 🌿
제이미 (Jamie)
(전) 게임 대기업 11년 팀장/개발PM
(현) IT이커머스 대기업 PMO
(전) 게임 대기업 11년 팀장/개발PM
(현) IT이커머스 대기업 PMO
경력
• 팀스파르타 PM과정 : 가설을 수립하고 데이터를 바탕으로 의사결정하는 프로덕트 매니지먼트 역량 교육
• 사내 PM 교육 : 바이브 코딩 시대, PM들을 위한 역량 강화 교육 커리큘럼 구성 및 실 교육 진행
• 팀스파르타 PM과정 : 가설을 수립하고 데이터를 바탕으로 의사결정하는 프로덕트 매니지먼트 역량 교육
• 사내 PM 교육 : 바이브 코딩 시대, PM들을 위한 역량 강화 교육 커리큘럼 구성 및 실 교육 진행
| 제이미 강사님의 수강생 후기
05
저 찐 비개발자예요 ㅠ → 걱정 마세요!
AI 프로토타이핑에 대한 호기심만 있어도 따라올 수 있도록 준비했어요!
| 프로토타이핑 1도 모르는 왕초보를 위한 3가지 부록 강의
최소한의 CS 지식
비개발자도 최소한의 CS 지식을 쌓을 수 있는 부록 영상을 드려요.
*1차 오픈일에 영상으로 공개됩니다.
*1차 오픈일에 영상으로 공개됩니다.
최소한의 Github 활용법
내가 만든 웹/앱을 남들과 공유하기 위한 간단한 github 활용법을 담은 부록 영상을 드려요.
*1차 오픈일에 영상으로 공개됩니다.
*1차 오픈일에 영상으로 공개됩니다.
실습을 바로 따라할 수 있는 Figma 파일 + Code 파일
강사님이 직접 만드신 Figma 파일과 Cursor 코드 파일을 활용해서 실습을 따라가 보세요.
*오픈일에 따라 순차적으로 공개됩니다.
*오픈일에 따라 순차적으로 공개됩니다.
| 강사님께 직접 질문할 수 있는 패스트캠퍼스 내부 커뮤니티
강사님이 직접 답변해주시는 게시판에서
AI 프로토타이핑에 대한 모든 궁금증 해소!
AI 프로토타이핑에 대한 모든 궁금증 해소!
실습 중 궁금한 사항은? 강사님에게 직접 질의응답 하세요.
* 질의응답 게시판을 25년 10월 20일부터 27년 9월 14일까지 운영됩니다.
* 질의응답 게시판을 25년 10월 20일부터 27년 9월 14일까지 운영됩니다.
해당 강의에서 사용되는
유료 TOOL을 안내드립니다.
(2025.09 기준)
유료 TOOL을 안내드립니다.
(2025.09 기준)
Cursor 유료 구독 (월 20$, 2주 무료체험 가능)
Replit (부분 유료)
- 무료 플랜: 하루 최대 10개의 앱 제작, 5번의 체크포인트
- 스타터 플랜 (월 $25): 커스텀 도메인, 프라이빗 프로젝트
Claude (부분 유료) - 무료 플랜: 사용량 한도 제한적 - 유료 플랜 (Pro 기분 월 $20): 사용량 한도 없음 Vercel (부분 유료)
- 프로 플랜 (2주 무료체험 후 월 $20)
그 외 유료 툴은 모두 무료 한도 내에서만 사용합니다.
프로그램은 제공해드리지 않습니다.
Replit (부분 유료)
- 무료 플랜: 하루 최대 10개의 앱 제작, 5번의 체크포인트
- 스타터 플랜 (월 $25): 커스텀 도메인, 프라이빗 프로젝트
Claude (부분 유료) - 무료 플랜: 사용량 한도 제한적 - 유료 플랜 (Pro 기분 월 $20): 사용량 한도 없음 Vercel (부분 유료)
- 프로 플랜 (2주 무료체험 후 월 $20)
그 외 유료 툴은 모두 무료 한도 내에서만 사용합니다.
프로그램은 제공해드리지 않습니다.