코딩 0줄로 홈페이지 만들기 | 클로드 코드로 27분 만에 완성

코딩을 한 줄도 모르셔도 됩니다. 프롬프트만으로 내 홈페이지를 만드는 과정을 처음부터 끝까지 그대로 담았습니다. 이번 영상에서는 홍대 미용실 홈페이지를 예로 들어, 무엇을 만들지 정리하는 기획 단계부터 클로드 코드 설치, 프롬프트 입력, 모바일 대응과 디자인 수정, 브라우저에서 열어보는 것까지 함께 해봅니다. 결과물은 HTML 파일 한 장이라 더블클릭만 하면 바로 열립니다. 제가 쓰는 팁도 다섯 개 넣어뒀습니다. 「HTML로 만들어줘」라고 지정하는 이유, 작업 폴더를 따로 두는 이유, 아이폰 기준으로 반응형을 요청하는 이유, 수정 요청을 하나씩 나눠서 하는 이유, 섹션을 지정해 토큰을 아끼는 방법입니다. ── 타임스탬프 ────────────────────────────── 00:00 오늘 만들 것 00:32 이 영상에서 다루는 네 가지 01:06 왜 클로드 코드로 하나 01:33 바이브 코딩이 뭔가요 02:44 어떤 페이지를 만들 수 있나 03:32 ① 내 페이지 기획하기 05:04 실습 전에 꼭 하실 일 05:43 팁 1 —「HTML로 만들어줘」라고 지정하기 07:01 ② 클로드 데스크톱 설치 08:34 모델 고르기 (Sonnet 5) 09:06 작업 폴더 만들기 — 영문, 띄어쓰기 없이 10:05 Git 설치 창이 뜬다면 10:21 ③ 프롬프트 입력 — 홍대 미용실 예제 12:12 팁 2 — 폴더를 따로 두는 이유 12:57 결과물 확인 15:07 모바일에서 깨지는 부분 찾기 15:48 ④ AI 느낌 빼고 반응형으로 고치기 16:34 팁 3 — 아이폰 기준으로 요청하기 19:48 수정 결과 확인 21:25 팁 4 — 요청은 한 번에 하나씩 21:54 운영시간 바꿔보기 22:21 팁 5 — 섹션을 지정해 토큰 아끼기 24:06 브라우저에서 열어보기 25:23 오늘의 숙제 26:08 마무리 ── 영상에서 실제로 쓴 프롬프트 ────────────── 1) 처음 만들 때 너는 홍대에 위치한 미용실 원장이야. html로 된 미용실 홈페이지를 만들어줘. 주소는 서울시 마포구 서교동 홍대입구역 9번 출구 앞 홍대미용실이야. 디자이너는 4명, 최신 트렌드 헤어스타일을 소화할 수 있고 방송 지원도 많이 하고 있는 미용실이야. 또한 MZ세대에게 인기가 많아. 2) 모바일 대응 + 디자인 손보기 반응형 홈페이지로서 스마트폰 화면에서도 잘 보이도록 각 영역을 개선해줘. 아이폰 화면에서도 잘 보여야 해. 그리고 전체적인 디자인 느낌이 너무 AI스러워. 과한 아이콘이나 그라데이션 제거해서 AI가 아닌 사람이 한 디자인처럼 만들고 밝은 톤의 홈페이지로 디자인을 변경해줘. 3) 내용 고치기 오시는 길 섹션에 있는 운영시간을 매일 오전 10시부터 오후 9시 30분으로 변경하고 매주 월요일 휴무로 변경해. 굵은 부분(상호·주소·업종·인원)만 본인 것으로 바꿔 쓰시면 됩니다. ── 준비물 ────────────────────────────────── · 클로드 데스크톱 앱 (claude.ai 하단 Download → Desktop) · 클로드 계정 · 작업용 빈 폴더 하나 (폴더 이름은 영문, 띄어쓰기 없이) · 처음 설치라면 Git 설치 창이 뜰 수 있습니다 (10:05) ── 미리 알아두실 점 ──────────────────────── · 이 영상에서 만드는 건 정보를 보여주는 홈페이지입니다. 결제나 쇼핑몰 같은 시스템은 다루지 않습니다. · 영상에 나오는 미용실 이름·가격·후기는 실제가 아니라 AI가 만든 예시입니다. 본인 정보로 바꿔서 쓰셔야 합니다. · 만든 파일을 인터넷 주소(도메인)에 연결하는 것은 이번 영상에 없습니다. 다음 영상에서 다룹니다. · AI가 한 번에 완성해 주지는 않습니다. 영상에서도 모바일 깨짐과 디자인을 두 차례 고쳤습니다. 고쳐 가는 과정까지 그대로 담았습니다. · 2026년 8월 29일에 촬영했습니다. 클로드 화면과 모델 이름은 시점에 따라 달라질 수 있습니다. 영상에서는 Sonnet 5로 진행했습니다. ── 오늘의 숙제 ───────────────────────────── 영상을 따라 본인 내용으로 페이지를 한 장 만들고, 마음에 안 드는 곳을 한 군데만 고쳐 보세요. 막히는 부분은 댓글로 남겨주시면 답변드리겠습니다. 다음 영상에서는 만든 파일에 도메인을 붙여서 다른 사람도 접속할 수 있게 하는 방법을 준비하겠습니다. 도움이 되셨다면 좋아요와 구독, 알림 설정 부탁드립니다. 르빌더였습니다. #바이브코딩 #클로드코드 #ClaudeCode #홈페이지만들기 #AI홈페이지 #코딩없이 #노코드 #자영업홍보 #포트폴리오 #웹페이지제작