코딩 몰라도 클로드 코드로 홈페이지 만들기 | 디자인부터 배포까지

코딩을 몰라도 Claude Code(클로드 코드)와 대화만으로 홈페이지를 디자인하고, 고치고, Vercel로 인터넷에 공개하는 과정을 처음부터 끝까지 보여드립니다. 📋 영상에서 보낸 프롬프트 6개 · 준비물 · 단계별 요약 https://www.viberick.com/youtube-guid... frontend-design 스킬과 디자인 레퍼런스로 방향을 잡고, 미리보기에서 말과 캡처로 수정한 뒤 모바일 화면까지 확인합니다. 예시는 가상의 카페 ‘여백’이며, 내 가게·회사·포트폴리오 자료로 바꿔 따라 하시면 됩니다. 🎨 웹 디자인 레퍼런스 & reference-led-design 스킬 (제가 정리한 공개 자료) https://github.com/jays0606/awesome-w... ⏱️ 챕터 00:00 오늘 만들 홈페이지와 소개 01:52 Claude 시작 환경과 자료 준비 05:05 디자인 스킬 준비 07:47 디자인 레퍼런스 찾기 09:47 홈페이지 디자인 설계하기 12:55 홈페이지 만들고 수정하기 · 모바일 확인 20:10 Vercel 배포 · 설치부터 공개까지 24:26 정리와 다음 단계 💬 어떤 홈페이지를 만들어 보고 싶으세요? 업종과 함께 댓글로 남겨주세요. 다른 영상 가이드: https://www.viberick.com/youtube-guides VibeRick | AI·AX 컨설팅 & AI 서비스 제작: https://www.viberick.com 안내 Vercel 무료 Hobby 플랜은 개인·비상업용입니다. 실제 영업용 사이트라면 용도에 맞는 플랜을 확인하세요. 도구 화면과 요금제는 바뀔 수 있습니다. #ClaudeCode #바이브코딩 #홈페이지만들기