Claude 코딩의 장점은 짧은 한국어 명령만으로 동작하는 홈페이지가 만들어진다는 점입니다. HTML·CSS·JavaScript를 잘 모르더라도 Claude에게 “한 페이지짜리 랜딩 페이지 만들어 줘”라고 시키면 그대로 작동하는 코드가 나오고, 수정 요청도 한국어로 이어 갈 수 있습니다.
저는 개발 전공이 아닌데도 Claude Pro를 구독해서 간단한 홈페이지와 페이지 보강 작업을 직접 합니다. ChatGPT에서 같은 작업을 시키면 한 번에 안 돌아가는 코드가 종종 나오는데, Claude는 긴 컨텍스트를 끝까지 유지해서 첫 시도에 동작하는 비율이 분명 높습니다. 다만 Pro 구독료가 ChatGPT Plus보다 조금 비싸고, 5시간 단위 메시지 한계치는 작업 흐름에서 짧게 느껴집니다. 그래서 한 번에 끝낼 수 있는 단위로 작업을 쪼개는 운용이 따로 필요합니다.
이 글에서는 비개발자도 그대로 복사해 쓸 수 있는 Claude 코딩 프롬프트 8가지를 정리했습니다. 한 페이지 랜딩부터 폼·자바스크립트·SEO 메타·무료 배포까지 단계별로 따라가시면 홈페이지 한 개가 손에 들어옵니다.
1. HTML 기본 페이지 — Claude 코딩 첫 결과물 만들기
처음 만들 페이지로는 한 페이지짜리 랜딩이 적당합니다. 제목·소개·이미지·CTA 버튼 정도만 들어가는 단순한 구조라 한 시간 안에 끝낼 수 있는 분량입니다.
📋 PROMPT
다음 정보를 바탕으로 한 페이지짜리 HTML 랜딩 페이지를 만들어 주세요.
– 주제: [○○○]
– 핵심 메시지: [○○○]
– 섹션 구성: 헤더 + 히어로(제목·부제·CTA 버튼) + 소개 3가지 + 후기 + 푸터
– 디자인 톤: [미니멀 / 모던 / 따뜻한 느낌 중 택1]
– 기술 스택: HTML + CSS만 (JavaScript는 다음 단계에서 추가)
출력 조건:
1. 전체 코드를 단일 .html 파일에 담아 주세요 (CSS는 <style> 태그 안에)
2. 외부 라이브러리·CDN 사용 금지 (순수 HTML+CSS)
3. 한국어 본문, UTF-8 인코딩
4. 코드 주석에 어느 섹션이 무엇인지 한국어로 표시
작업이 끝나면 파일을 어떻게 저장·실행하는지(.html 더블클릭) 한 단락으로 안내해 주세요.
한 번에 완벽한 결과를 얻으려 하지 마시고 일단 받아서 브라우저로 열어 보세요. 마음에 안 드는 부분만 다음 메시지에 “히어로 섹션 배경색을 살짝 어둡게” 식으로 짧게 요청하면 그대로 수정해 줍니다. 큰 작업 한 번보다 작은 수정 여러 번이 결과 품질에서 훨씬 안정적입니다.
2. CSS 스타일링 프롬프트 — 디자인 직접 지정
기본 페이지를 받고 브라우저에서 열어 보면 디자인이 어딘가 밋밋합니다. 색·여백·폰트를 본인 취향대로 다듬는 단계입니다.
📋 PROMPT
위에서 만든 페이지의 CSS를 다음 가이드대로 다듬어 주세요.
– 메인 컬러: [○○○] (예: #2563eb 또는 “차분한 파랑”)
– 보조 컬러: [○○○]
– 폰트: 한국어 본문 Pretendard, 영문 Inter (둘 다 Google Fonts CDN 허용)
– 여백: 섹션 간 충분히 (스크롤할 때 답답하지 않게)
– 둥근 모서리: 카드와 버튼에 border-radius 8~12px
– 호버 효과: 버튼에 부드러운 transition
추가로 다크 모드 자동 전환(prefers-color-scheme: dark) CSS도 한 번에 포함해 주세요.
색상은 직접 hex 코드를 던지는 것보다 “차분한 파랑”, “따뜻한 베이지”처럼 분위기로 요청하면 Claude가 색을 골라 주고 그 hex 코드도 함께 보여 줍니다. 마음에 들면 그대로, 안 들면 다시 요청하는 흐름이 빠릅니다.
🔗 함께 보면 좋은 글
→ Claude vs ChatGPT 직접 써본 장점 및 단점 차이점 비교 — 같은 디자인 요청을 두 도구에 했을 때 결과 차이를 본 후기
3. 반응형 디자인 프롬프트 — 모바일·태블릿·데스크톱
데스크톱에서 멀쩡하던 페이지가 휴대폰에서는 글자가 잘리거나 버튼이 작아 손가락이 안 닿는 일이 자주 생깁니다. 반응형 미디어 쿼리로 잡아야 합니다.
📋 PROMPT
위 페이지를 반응형으로 다듬어 주세요. 다음 기준으로 미디어 쿼리를 추가해 주세요.
– 모바일: 최대 640px (한 줄에 콘텐츠 1개)
– 태블릿: 641px ~ 1024px (한 줄에 2개)
– 데스크톱: 1025px 이상 (한 줄에 3개)
추가 요청:
1. 모바일에서 폰트 크기는 본문 16px 이상 유지 (가독성)
2. 모바일에서 버튼은 손가락 터치하기 쉽게 최소 48px 높이
3. 이미지는 max-width: 100%로 자동 축소
4. 네비게이션 메뉴는 모바일에서 햄버거 아이콘으로 (순수 CSS만, JS는 다음 단계)
변경된 CSS만 분리해서 보여 주세요. 전체 코드 다시 출력은 필요 없습니다.
“변경된 부분만 분리해 달라”는 요청이 5시간 한계치 운용에 도움이 됩니다. 매번 전체 코드를 다시 받으면 토큰이 빠르게 소진되는데, 변경 부분만 받으면 같은 한계 안에서 훨씬 많은 수정을 끝낼 수 있습니다.
4. 연락처 폼 프롬프트 — 입력 검증까지 한 번에
방문자가 자주 클릭하는 요소 중 하나가 연락처 폼입니다. 입력 검증을 챙기지 않으면 빈 메시지나 잘못된 이메일이 잔뜩 쌓입니다.
📋 PROMPT
다음 항목이 들어가는 연락처 폼을 만들어 주세요.
입력 항목:
1. 이름 (필수, 2~20자)
2. 이메일 (필수, 형식 검증)
3. 연락 사유 카테고리 (필수, 드롭다운: 일반 문의 / 견적 / 기타)
4. 메시지 (필수, 10자 이상)
검증 조건:
– HTML5 기본 검증 + JavaScript 추가 검증
– 잘못 입력 시 빨간 테두리 + 한국어 에러 메시지
– 제출 버튼은 모든 항목 통과 전에는 비활성화
– 제출 성공 시 폼 위에 “메시지를 받았습니다” 안내
백엔드 처리는 다음 단계에서 추가하므로, 지금은 폼 제출 시 콘솔에 입력값을 출력하는 정도까지만 만들어 주세요.
실제 메시지 수신은 Formspree 같은 무료 서비스로 5분 안에 연결할 수 있습니다. Claude에 “Formspree로 메시지 받는 코드 추가해 줘”라고 이어 요청하면 폼 action 속성과 API 키 자리까지 안내해 줍니다.
5. JavaScript 동작 — Claude 코딩으로 슬라이드·모달·스크롤
햄버거 메뉴·라이트박스·위로 가기 버튼 같은 자잘한 동작이 페이지 인상을 좌우합니다. 외부 라이브러리 없이 순수 JS만으로 충분합니다.
📋 PROMPT
다음 동작을 순수 JavaScript로 추가해 주세요. jQuery 등 외부 라이브러리는 사용 금지.
1. 햄버거 메뉴 클릭 시 모바일 네비게이션 펼치기·접기
2. 페이지 스크롤이 200px 이상 내려가면 헤더 배경 어둡게 + 그림자 추가
3. “위로 가기” 버튼 — 스크롤 200px 이상 시 우하단에 나타남, 클릭 시 부드럽게 맨 위로
4. 이미지 클릭 시 라이트박스(모달)로 크게 보기 — esc 또는 바깥 클릭으로 닫기
모든 동작은 ES6+ 문법(const, let, arrow function)으로, 한국어 주석으로 어느 부분이 무엇을 하는지 표시해 주세요. 코드는 별도 .js 파일이 아니라 HTML 파일 하단 <script> 태그에 넣어 주세요.
한 번에 네 가지를 요청하지 말고 하나씩 추가하면서 동작 확인하시는 흐름을 권합니다. 한 번에 묶으면 어디서 안 돌아가는지 디버깅이 어려워지는데, 하나씩 추가하면 문제 위치가 명확해집니다.
6. 이미지 갤러리·슬라이드 프롬프트 — Tailwind 살짝 활용
저도 처음에는 갤러리 CSS를 직접 짜다가 두 시간을 날려 본 적이 있습니다. Tailwind 한 줄을 빌려 쓰면 5분 안에 끝납니다.
📋 PROMPT
다음 사양의 이미지 갤러리를 만들어 주세요.
– 사용 도구: Tailwind CSS (CDN 방식)
– 모바일: 한 줄에 1장 / 태블릿: 2장 / 데스크톱: 3장
– 이미지 hover 시 살짝 확대 + 어두운 오버레이 + 제목 표시
– 이미지 6장 자리(placeholder URL: https://picsum.photos/seed/1/600/400 부터 seed/6까지)
– 클릭 시 라이트박스로 크게 보기 (4번 라이트박스 코드 재활용)
Tailwind는 CDN 한 줄로만 가져오고, 별도 설정 파일은 만들지 마세요. 출력은 HTML 파일 전체 코드.
Tailwind 클래스명이 복잡해 보이지만 Claude가 다 짜 주니까 외울 필요 없습니다. picsum.photos 같은 placeholder 이미지를 본인 이미지로 교체할 때는 파일 경로(<img src="...">)만 바꾸면 됩니다.
🔗 함께 보면 좋은 글
→ Notion AI 활용법 가이드 — 홈페이지 콘텐츠를 Notion에서 정리한 뒤 Claude로 코드 변환하는 흐름
7. SEO 메타·OG 카드 프롬프트 — 검색 노출 준비
페이지를 만들었다고 자동으로 구글에 뜨지는 않습니다. 메타 태그를 챙겨야 검색 결과에 본인 페이지가 노출됩니다.
📋 PROMPT
위 페이지에 SEO 메타 태그를 추가해 주세요.
메타 정보:
– 사이트 이름: [○○○]
– 페이지 제목: [○○○] (60자 이내)
– 메타 설명: [○○○] (150~160자, 핵심 키워드 1회 + 행동 유도)
– 핵심 키워드: [○○○]
– 대표 이미지 URL: [○○○] (1200×630 OG 표준)
– 언어: ko-KR
추가할 항목:
1. <title>, <meta description>, <meta keywords>
2. Open Graph 태그 (og:title, og:description, og:image, og:url, og:type)
3. Twitter Card 태그 (summary_large_image)
4. 구조화 데이터 JSON-LD (WebSite + Organization schema)
5. canonical URL
6. favicon (이모지 SVG 한 줄로 임시 처리해 주세요)
변경된 <head> 안 코드만 분리해서 보여 주세요.
JSON-LD 구조화 데이터까지 한 번에 받아 두면 구글 리치 결과 테스트에 페이지 URL을 넣어 검증할 수 있습니다. 오류가 있으면 Claude에 그대로 다시 던지면 수정해 줍니다.
8. 무료 배포 — Claude 코딩 결과물을 GitHub Pages에
내 컴퓨터 안에만 있는 페이지는 다른 사람이 못 봅니다. GitHub Pages와 Vercel은 둘 다 무료라 비용 부담 없이 인터넷에 올릴 수 있습니다.
📋 PROMPT
위에서 만든 정적 페이지를 무료로 배포하고 싶습니다. 다음 조건에 맞춰 배포 가이드를 작성해 주세요.
– 운영체제: [Mac / Windows / Linux]
– GitHub 계정: 있음
– 원하는 도메인 형태: [github.io 서브도메인 / 본인 도메인 연결]
가이드 형식:
1. GitHub 저장소 생성부터 첫 푸시까지 단계별 (터미널 명령 포함, 각 명령이 무엇을 하는지 한국어 주석)
2. GitHub Pages 활성화 방법 (Settings 탭 어디를 누르는지)
3. 본인 도메인 연결할 경우 CNAME 설정 방법
4. Vercel을 쓰면 어떻게 다른지 (장단점 1~2줄씩)
5. 배포 후 페이지가 안 보일 때 흔한 원인 3가지 + 해결법
비개발자도 따라할 수 있도록 모든 명령에 “왜 이걸 하는지” 한 줄 설명을 붙여 주세요.
GitHub Pages는 처음 푸시 후 5~10분 정도 기다려야 페이지가 표시됩니다. 즉시 안 뜬다고 당황하지 마시고 차 한 잔 시간을 두세요. Vercel은 더 빠른데, 빠른 자동 배포가 필요하면 Vercel 쪽이 편합니다.
Claude 코딩, 알아두면 좋은 3가지
1. 5시간 한계치는 작업 단위 쪼개기로 운용
Pro 구독의 메시지 한계가 5시간 단위로 리셋됩니다. 큰 작업을 한 번에 던지지 말고 페이지 한 섹션 단위(헤더 → 히어로 → 갤러리 → 폼)로 쪼개 두시면 한계에 걸리지 않고 작업을 끝낼 수 있습니다. 한 세션 안에서 같은 페이지의 여러 부분을 동시에 다루기보다, 한 부분을 끝까지 마무리한 다음 넘어가시는 게 토큰 효율이 좋습니다.
2. Claude가 만든 코드는 그대로 발행하지 말고 검증
코드는 문법이 맞아 보여도 실제로 안 돌아가거나 보안 취약점이 있을 수 있습니다. 만든 코드는 본인 브라우저 + 모바일 + 다른 사람 기기에서 한 번씩 열어 보시고, 가능하면 W3C HTML 검증기에서 문법 오류도 점검하세요. 폼이나 사용자 입력 처리는 보안 검증이 필수입니다.
3. API 키·민감 정보는 코드에 직접 넣지 않기
Anthropic API 키, Formspree 키, 데이터베이스 비밀번호 같은 민감 정보를 HTML/JS 코드에 직접 적어 두면 안 됩니다. 누구나 페이지 소스 보기로 확인할 수 있어서 키가 노출되면 비용 폭탄으로 이어집니다. 환경 변수나 백엔드 함수를 거치는 방식으로 처리하시고, 잘 모르시겠으면 Claude에 “이 키를 안전하게 처리하는 방법”을 물어보시면 단계별로 안내해 줍니다.
Claude 코딩 자주 묻는 질문 (FAQ)
Q. 정말 비개발자도 가능한가요?
가능합니다. 코드를 한 번도 만져 본 적 없으시면 1번 항목(기본 HTML)부터 한 시간 정도 충분히 익숙해진 다음 진행하시기 권합니다. 명령 → 결과 → 수정 흐름이 처음엔 낯설지만 두세 번 해 보시면 자연스럽게 손에 붙습니다.
Q. Claude로 만들 수 있는 홈페이지의 한계는 어디까지인가요?
정적 페이지(소개·랜딩·블로그 형태)는 거의 제한 없이 만들 수 있습니다. 로그인이 필요한 회원제 사이트, 결제 시스템, 대용량 데이터베이스 같은 동적 기능은 백엔드 인프라가 필요해서 Claude만으로는 한계가 있습니다. 그 단계는 Vercel + Supabase 같은 서비스를 같이 쓰는 방식으로 확장 가능합니다.
Q. Claude Pro와 Claude Code 도구 차이가 뭔가요?
Claude Pro는 웹·앱에서 채팅으로 쓰는 일반 구독이고, Claude Code는 터미널에서 본인 코드베이스를 직접 읽고 수정하는 에이전트 도구입니다. 비개발자가 홈페이지 만드는 단계에서는 Pro로 충분하고, 본격적인 프로젝트 개발 단계에서 Claude Code를 추가로 도입하시면 됩니다.
Q. 한국어로 프롬프트 입력해도 코드 품질이 떨어지지 않나요?
거의 차이 없습니다. 오히려 한국어로 자연스럽게 요청하시는 게 영어로 어색하게 옮기는 것보다 결과가 더 정확한 경우도 많습니다. Claude는 한국어 처리 능력이 좋은 편이라 비개발자에게 유리합니다.
Q. 만든 페이지가 갑자기 깨졌을 때는 어떻게 하나요?
Claude에 “이 코드가 갑자기 안 돌아가는데 원인 찾아 줘”라고 코드 전체를 다시 던지고 에러 메시지(있으면)를 함께 보내세요. 변경 사항을 시간 순으로 적어 두시면 어디서 깨졌는지 추적이 빠릅니다. Git을 쓰시면 깨지기 전 시점으로 돌아가는 게 가장 안전한 보험입니다.
마치며
Claude 코딩은 한 번에 모든 걸 만들려고 하기보다 작은 단위로 쌓아 가는 게 안정적입니다. 1번 항목(HTML 기본 페이지)으로 시작해서 한 단계씩 추가하시면, 일주일 정도면 본인 홈페이지 하나가 손에 들어옵니다.
핵심은 두 가지입니다. 한 번의 큰 요청보다 여러 번의 작은 수정, 그리고 Claude가 만든 코드를 본인 손으로 한 번씩 검증하는 단계. 이 두 단계를 거치셔야 만든 페이지가 본인 작업의 일부로 자연스럽게 정착됩니다.
🔗 함께 보면 좋은 글
