실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Application Course)
돕다 사이트 제작 Application Course로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. 무료 강의로 오픈한 돕다 사이트 Basic Course의 Layout과 Animation 위주의 단순한 구조의 코딩에서 Fixed header, Image Slider, Mobile navigation, Scroll Animation, 반응형 등을 추가하며 코딩 하나하나를 수정보완하며 완성해가는 웹페이지 제작 실전! 강의입니다. (본강의는 돕다-Basic Course를 들으시고 수강하셔야 학습 효과가 크다고 볼 수 있습니다.)
수강생 151명
난이도 초급
수강기한 무제한
J.영의 [Figma MCP × AI로 4시간 만에 완성하는 반응형 웹 포트폴리오] 신규강의 오픈
안녕하세요 😊
강사 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 드림




