Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오
Figma디자인 + AI활용코딩 + 배포까지 풀스택 코스!! [피그마 + 바이브코딩 (HTML/CSS/Tailwind/React) + Git + vercel 배포] 내 디자인 그대로!! 1픽셀도 오차없이 바이브코딩으로 완성! AI활용으로 실무 생산성을 5배 높이는 풀스택 공략집! 디자인도 코딩도 모두 가능한 풀스택 디자이너, 당신도 될 수 있습니다. ✅ 내 디자인의 의도까지 한 픽셀의 오차 없이 구현 ✅ AI가 이해하는 디자인 설계 ✅ AI를 정확하게 통제하는 프롬프트 제작능력 ✅ AI가 맘대로 작성한 코드 척척 수정능력 디자인부터 코딩 배포까지 1/5로 단축되는 놀라운 경험을 느립니다.
수강생 261명
난이도 초급
수강기한 무제한
안녕하세요. J.영입니다.
본 강의를 오픈한 지 벌써 2개월이 되었습니다.
그동안 정말 많은 관심과 성원 보내주셔서 진심으로 감사드립니다.처음 강의를 기획할 당시에는
현재의 1차 강의 커리큘럼만으로 완결되는 형태로 제작하려고 했습니다.즉,
[Figma MCP × AI로 완성하는 웹 포트폴리오 제작] 커리큘럼 하나로 마무리할 계획이었지만,
최근 AI의 발전 속도를 직접 체감하면서 생각이 많이 바뀌게 되었습니다.하루가 다르게 새로운 AI와 기능들이 등장하고 있고,
실제로 작업 방식 자체가 빠르게 변하고 있는 만큼
단순히 한 번 완성된 강의로 끝내기보다는
실무에서 바로 활용 가능한 최신 방식들을 계속 업데이트해야겠다고 판단하게 되었습니다.그래서 이번에 2차 업데이트 강의를 준비하게 되었습니다.
이번 업데이트에서는
무료 AI 툴인 Antigravity와 Claude.ai를 활용하여 Fandom App 기반 모바일 웹페이지를 제작하면서
“내 디자인을 얼마나 빠르고 정확하게 구현할 수 있는가”를 중심으로 다루게 됩니다.특히 이번 강의에서는 단계별로 다음 내용을 함께 진행해보려고 합니다.
캡쳐 이미지를 기반으로 Antigravity를 활용한 구현
Antigravity와 Figma MCP를 연결한 구현 방식
Claude.ai와 Figma MCP를 연결하여 더욱 빠르고 정교하게 구현하는 방식
최근 AI들의 발전 속도를 테스트하면서 느끼는 점은, 예전보다 훨씬 더 빠르고 강력하게 구현이 가능해지고 있다는 점입니다.
특히 Claude는 사용할수록 정말 놀라울 정도로 디테일한 결과를 보여주고 있고, Antigravity 역시 무료임에도 불구하고 상당히 뛰어난 성능을 보여주고 있습니다.
물론 각각 장단점은 존재합니다.
먼저 Antigravity와 Figma MCP를 연결하여 PRD 문서 및 구조를 빠르게 정리하고,
그 결과물을 다시 Claude에게 전달하여 더 디테일하게 보완하는 방식으로 진행해보려고 합니다.
실제로 여러 방식들을 테스트해보면서 현재 가장 현실적이고 효율적인 작업 흐름이라고 판단한 방법들만 정리해서 담았습니다.
AI는 앞으로 더 빠르게 발전할 것이고,
결국 중요한 것은 “AI를 얼마나 잘 활용할 수 있는 디자이너인가”라고 생각합니다.항상 믿고 수강해주셔서 감사합니다.
더 좋은 강의로 계속 업데이트해 나가겠습니다.
J.영드림안녕하세요?
실무 + 강의 25년차 강사 J.영입니다.
요즘 다들 AI 잘 활용하고 계신가요?디자인은 되는데... 코딩 때문에 늘 막히셨던 분들,
혹은 AI를 써보긴 했지만 “이게 맞나?” 싶으셨던 분들께
정말 도움될 강의를 소개드리려고 합니다.────────────────────
🎯Figma MCP x AI로 4시간 만에 완성하는 반응형 웹포트폴리오
────────────────────이 강의는 단순한 툴 강의가 아니라
👉디자인 → 개발 → 배포까지 한 번에 완성하는 실무 워크플로우를 다룹니다.💎이 강의에서 배우는 핵심
✔ AI가 이해하는 Figma 설계 방법
✔ 내 디자인을 그대로 구현하는 Vibe Coding
✔ React 기반 인터랙티브 웹 제작
✔ Git, GitHub, Vercel까지 실제 배포 경험👉 결과물이 아니라
“AI와 함께 일하는 방법” 자체를 배우게 됩니다.🚀수강 후 변화
✔ 디자인만 하던 단계 → 개발까지 가능한 인재로 성장
✔ 작업 속도 → 3~5배 이상 향상
✔ 취업/이직에 바로 쓸 수 있는 고퀄리티 포트폴리오 완성🎯이런 분들께 추천드립니다
코딩 때문에 웹 제작을 포기했던 디자이너
AI를 제대로 활용해보고 싶은 분
빠르게 포트폴리오를 완성하고 싶은 분
디자인 + 개발 역량을 모두 갖추고 싶은 분
🔥지금이 가장 좋은 타이밍입니다
👉현재 30% 할인 진행 중!
📅기간: 2026년 3월 17일 ~ 3월 26일이 기간이 지나면 정상가로 돌아가니
관심 있으셨다면 지금이 가장 좋은 기회입니다.이 강의는
단순히 하나의 결과물을 만드는 것이 아니라,👉 앞으로 계속 써먹을 수 있는
“AI 기반 제작 방식”을 몸에 익히는 과정”입니다.한 번 익혀두면
앞으로 작업 속도와 퀄리티가 완전히 달라집니다.편하게 한 번 살펴보시고,
풀스택 디자이너로 실무역량 + 생산성 업시키시길 응원드려요^^감사합니다!
아래 주소로 접속하시면 강의를 만나실 수 있습니다.
https://inf.run/QLDGi안녕하세요 😊
강사 J.Young입니다.드디어 새로운 강의로 인사드립니다.
🚀 [Figma MCP × AI로 4시간 만에 완성하는 반응형 웹 포트폴리오]
이번 강의는 단순한 “코딩 강의”가 아닙니다.
AI가 이해하는 디자인 설계부터,
AI를 활용한 바이브 코딩,
그리고 실제 배포까지 이어지는 풀스택 완성 과정입니다.🎯 이 강의에서 배우는 핵심
✔Figma AutoLayout을 활용한 체계적인 설계
✔반응형 구조 설계 방법
✔Variable 등록 → 토큰화 → AI가 이해하는 디자인 구조 만들기
✔Figma MCP 서버 연동을 통한 AI Vibe Coding
✔내 디자인을 1픽셀 오차 없이 구현하는 방법
✔배포까지 이어지는 실전 프로세스단순히 “AI가 코드를 대신 짜준다”가 아닙니다.
AI의 실수까지 스스로 찾아내고 구조를 이해하고,
최적화된 반응형 웹으로 리팩토링하는 능력까지 함께 훈련합니다.👩💻 이런 분들께 추천합니다
🎨 내 디자인을 그대로 Vibe Coding으로 구현하고 싶은 분
🧠 디자인부터 개발·배포까지 가능한 풀스택 디자이너가 되고 싶은 분
🔥 Figma 고급 기능까지 제대로 배우고 싶은 분
💻 HTML / CSS / JavaScript / Tailwind / React까지 알고 싶은 프론트엔드 입문자
✨ 인터랙티브하고 완성도 높은 반응형 웹 포트폴리오를 만들고 싶은 분
⚡ AI를 활용해 업무 생산성을 5배 이상 향상시키고 싶은 분
📘 학습 방식
모든 과정은 노션으로 체계적으로 정리되어 있습니다.
설계 → 구현 → 수정 → 배포까지
여러분이 스스로 복습하고 반복 학습할 수 있도록 구성했습니다.AI 시대,
이제는 “코딩을 잘하는 사람”이 아니라
AI와 함께 가장 빠르게 결과를 만들어내는 사람이 경쟁력입니다.4시간 안에,
여러분의 포트폴리오를 한 단계 끌어올려보세요.강의에서 만나겠습니다.
감사합니다.
강사 J.Young 드림






