꼭 필요한 ‘입코딩’으로 고퀄 디자인에 데이터 저장까지 되는 웹앱 만드는 법

디자인하는AI

チャンネル登録者数 7.43万人

2.7万回視聴・ 1044いいね・ 2025/05/17

꼭 필요한 ‘입코딩’으로 고퀄 디자인에 데이터 저장까지 되는 웹앱 만드는 법 | 요즘 핫한 바이브 코딩? 이렇게 시작해 보세요.

#ai #replit #vibecoding #design #coding #ui #ux #디자인 #backend #frontend #gpt #figma

이 영상에서는 Replit의 AI 에이전트 기능을 활용해, 코드 한 줄 없이 ‘바이브 코딩’ 방식으로 MVP 검증용 랜딩페이지를 디자인하고, 개발하고, 배포하는 전 과정을 자세히 보여드립니다. 또한, 개발이 처음이신 분들도 쉽게 따라오실 수 있도록 프론트엔드와 백엔드, API 등 디지털 제품 제작에 꼭 필요한 기초 개발 개념도 함께 알기 쉽게 설명해 드립니다.

💻 Replit 공식사이트 - replit.com/

👉🏻 MCP 클로드 데스크탑 설치 - modelcontextprotocol.io/quickstart/user
👉🏻 Figam-Context-MCP 설치 - github.com/GLips/Figma-Context-MCP

🌈 평범한 이미지를 영화처럼 극적으로 - 미드저니 시네마토그래피 가이드: litt.ly/designingi

00:00 인트로
03:38 개발 전 꼭 해야하는 이것
07:08 스펙은 어떻게 정할까?
09:53 AI로 UI 디자인하는 꿀팁
12:47 Frontend 개발
27:44 Backend 개발
36:19 결과물 배포

Music by Bensound.com
License code: 0WUFDQJS5U