클로드로 홈페이지 만들기: 생성부터 배포까지 전 과정

클로드로 홈페이지를 만드는 방법은 크게 세 가지로 나뉩니다. Claude 채팅으로 HTML 코드를 받아 5분 안에 간단한 페이지를 만들거나, Claude Design으로 디자인 완성도를 높이거나, Claude Code로 실제 작동하는 동적 사이트를 구축할 수 있어요. 각 방법은 난이도와 결과물 수준이 다르며, 배포까지 포함하면 전체 과정은 30분에서 2시간 정도 걸립니다. xAI와 오픈AI가 코딩 에이전트 시장에 진입하면서 앤트로픽의 클로드 코드와 경쟁이 본격화되고 있다고 보도됐어요(디지털데일리, 2026).

코딩 경험이 전혀 없어도 채팅 한 줄로 회사 소개 페이지나 제품 소개 사이트를 만들 수 있습니다. 이 글에서는 준비물부터 실제 배포, 구글 검색 노출까지 실전에서 바로 쓸 수 있는 전 과정을 단계별로 정리했어요.

어떤 클로드 도구로 만들지 먼저 정하세요

클로드는 용도에 따라 Claude 채팅, Claude Design, Claude Code 세 가지 도구를 제공하며, 각각 만들 수 있는 페이지 수준과 필요한 시간이 다릅니다. Claude 채팅은 프롬프트 한 번에 HTML/CSS 코드를 받아 정적 페이지를 만들고(5~10분), Claude Design은 시각 편집으로 레이아웃과 색상을 직접 조정하며(20~30분), Claude Code는 사용자 입력·데이터베이스 연결 같은 동적 기능까지 구현합니다(1~2시간).

예산과 목적에 따라 선택하세요. 단순 정보 전달이면 채팅으로 충분하고, 시각적 완성도가 중요하면 Design을, 고객 데이터를 받아야 하면 Code를 씁니다.

준비물과 사전 체크리스트는 무엇인가요?

클로드로 홈페이지를 만들기 전에 네 가지를 준비하면 작업 시간을 절반으로 줄일 수 있습니다. Claude 유료 구독(Pro 또는 Team), 텍스트 편집기(VS Code 또는 메모장), 배포 플랫폼 계정(Netlify Drop 또는 Google Stitch 무료 계정), 그리고 페이지에 들어갈 실제 콘텐츠(텍스트·이미지·로고)입니다.

필수 준비 항목

1. Claude 계정: 무료 계정도 쓸 수 있지만, 유료 구독이면 디자인·코드 에이전트 사용 제한이 풀립니다
2. 콘텐츠 자료: 회사명, 서비스 설명(300자), 연락처, 로고 이미지(PNG/SVG)
3. 도메인(선택): 처음엔 무료 서브도메인(예: yourname.netlify.app)으로 시작 가능
4. 배포 플랫폼 계정: Netlify 또는 Vercel 무료 가입(이메일 인증만)

콘텐츠가 명확할수록 프롬프트 수정 횟수가 줄어듭니다. "우리 회사 소개 페이지"보다 "○○ 마케팅 에이전시, 주력 서비스 3가지(SEO·광고·콘텐츠), 연락처 포함" 같은 구체적 요청이 한 번에 원하는 결과를 만듭니다.

방법 1단계: Claude 채팅으로 HTML 코드 받기

Claude 채팅창에 "회사 소개 홈페이지 HTML 코드 만들어줘. 회사명 ○○, 주요 서비스 3가지(A·B·C), 연락처 포함, 반응형 디자인"이라고 입력하면 30초 안에 완성된 HTML/CSS 코드가 나옵니다. 이 단계는 코딩 지식 없이도 누구나 할 수 있으며, 프롬프트에 색상·레이아웃 선호를 추가하면 첫 결과물의 만족도가 크게 올라갑니다.

세부 단계(5단계)

1. Claude.ai 접속 후 새 대화 시작
2. 프롬프트 입력: "다음 내용으로 원페이지 홈페이지 HTML 만들어줘. [회사명], [서비스 설명], [연락처]. 네이비 블루 계열, 모바일 반응형, 폰트는 Pretendard"
3. 생성된 코드 전체를 복사(코드 블록 우측 상단 복사 버튼)
4. 메모장 또는 VS Code에 붙여넣고 index.html로 저장
5. 파일을 더블클릭해 브라우저에서 미리보기

이 방법으로 만든 페이지는 즉시 쓸 수 있지만, 레이아웃 세부 조정은 제한적입니다. 색상이나 글꼴만 바꾸고 싶다면 "위 코드에서 파란색을 초록색으로, 폰트를 Noto Sans로 바꿔줘"라고 추가 요청하세요.

방법 2단계: Claude Design으로 디자인 완성도 높이기

Claude Design은 2026년 출시된 시각 편집 에이전트로, 채팅으로 만든 결과물보다 디자인 완성도가 2배 이상 높습니다. 텍스트 프롬프트로 초안을 만든 뒤 캔버스 화면에서 요소를 드래그하고 색상·간격을 실시간으로 조정할 수 있으며, 나모 사이트빌더처럼 비전문가도 직접 페이지를 만들 수 있게 설계됐어요.

세부 단계(6단계)

1. Claude 화면 우측 상단 'Design' 탭 클릭
2. 프롬프트 입력: "○○ 회사 소개 페이지. 상단 헤더(로고·메뉴), 히어로 섹션(배경 이미지·캐치프레이즈), 서비스 3단 카드, 연락처 푸터"
3. 10초 후 생성된 초안 미리보기에서 색상 팔레트 선택(우측 사이드바)
4. 레이아웃 조정: 섹션을 드래그해 순서 변경, 카드 크기 조절
5. 폰트·간격 미세 조정(CSS 수정 없이 슬라이더로)
6. 'Export HTML' 버튼으로 코드 다운로드

Design 모드는 코드를 직접 보지 않아도 되므로 디자이너나 마케터가 단독으로 작업하기 좋습니다. 단 동적 기능(폼 전송·데이터베이스)은 지원하지 않으므로, 문의 양식이 필요하면 다음 방법을 써야 합니다.

방법 3단계: Claude Code로 동적 사이트 만들기

Claude Code는 사용자 입력을 받고 서버에 데이터를 저장하는 실제 작동하는 사이트를 만듭니다. "문의 양식 포함 홈페이지"라고 요청하면 프론트엔드(HTML/CSS/JavaScript)와 백엔드(Node.js 또는 Python Flask) 코드를 모두 생성하며, 로컬 환경에서 테스트 서버까지 자동으로 띄워줍니다.

세부 단계(8단계)

1. Claude 화면에서 'Code' 에이전트 선택
2. 프롬프트: "문의 양식(이름·이메일·메시지) 포함 회사 홈페이지. 제출하면 이메일로 알림"
3. 생성된 프로젝트 구조 확인(index.html, app.js, package.json 등)
4. 'Run in Terminal' 버튼 클릭해 로컬 서버 시작
5. 브라우저에서 localhost:3000 접속해 실시간 테스트
6. 문의 양식에 테스트 데이터 입력 후 제출 작동 확인
7. 이메일 알림 설정: SendGrid 또는 Gmail SMTP 정보 입력(Claude가 단계별 안내)
8. 수정 필요 시 "제출 버튼 색상 빨간색으로" 같은 자연어로 추가 요청

Claude Code는 코딩 경험이 조금 있는 사용자에게 적합합니다. 완전 초보라면 방법 1·2로 만든 뒤 문의 양식만 Tally 같은 외부 폼 서비스로 연결하는 것이 더 빠릅니다.

완성된 홈페이지를 배포하는 3가지 경로

코드가 완성되면 Netlify Drop, Google Stitch, Vercel 중 하나로 배포해 실제 URL을 만들어야 합니다. Netlify Drop은 파일을 드래그만 해도 배포되므로 가장 쉽고(1분), Google Stitch는 구글 계정만으로 무료 도메인까지 제공하며(3분), Vercel은 GitHub 연동으로 코드 수정 시 자동 재배포됩니다(5분 초기 설정 후 자동).

Netlify Drop 배포 단계(4단계)

1. Netlify.com 접속 후 무료 가입
2. 'Sites' 메뉴에서 드래그 박스 확인
3. 만들어둔 index.html 파일을 박스에 드래그
4. 10초 후 생성된 URL(예: random-name-123.netlify.app) 클릭해 확인

배포 후 도메인을 연결하려면 Netlify 설정에서 'Custom domain' 클릭, 본인 소유 도메인의 DNS를 Netlify 네임서버로 변경하면 됩니다(도메인은 가비아·후이즈 등에서 구입).

초보자가 자주 막히는 지점과 해결 방법

가장 흔한 문제는 로컬에서는 보이던 이미지가 배포 후 깨지는 경우입니다. 이미지 경로를 절대경로(/images/logo.png)가 아닌 상대경로(./images/logo.png)로 쓰거나, 이미지 파일을 HTML과 같은 폴더에 함께 업로드하지 않아서 생깁니다. 배포 전 브라우저 개발자도구(F12)로 이미지 URL을 확인하고, 깨진 경로는 Claude에게 "이미지 경로 상대경로로 수정"을 요청하세요.

자주 발생하는 5가지 에러

1. 이미지 안 보임: 이미지 파일을 HTML과 같은 폴더에 넣고, 경로를 <img src="./logo.png">로 수정
2. 모바일에서 레이아웃 깨짐: HTML <head>에 <meta name="viewport" content="width=device-width">가 있는지 확인
3. 폼 제출이 작동 안 함: Claude Code로 만든 경우 백엔드 서버도 함께 배포해야 함(Netlify Functions 또는 Vercel Serverless 사용)
4. 한글 깨짐: HTML <head>에 <meta charset="UTF-8"> 추가
5. 구글 검색 안 됨: Google Search Console에 사이트 등록 후 sitemap.xml 제출(Claude에게 "sitemap.xml 만들어줘" 요청)

Claude가 생성한 코드에서 에러가 나면 에러 메시지 전체를 복사해 다시 Claude에게 붙여넣고 "이 에러 고쳐줘"라고 요청하면 수정된 코드를 즉시 받을 수 있습니다.

배포 후 실제 성과를 높이는 3가지 조치

홈페이지를 배포했다고 끝이 아닙니다. 구글 검색 노출, 페이지 속도, 전환율을 높이는 후속 작업이 필요하며, 이 단계를 건너뛰면 방문자가 오지 않습니다. Google Search Console에 사이트맵을 제출하고(검색 노출), 이미지를 WebP로 변환하고(로딩 속도), 문의 버튼을 눈에 띄는 색상으로 바꾸면(전환율) 실제 성과가 2~3배 달라집니다.

성과 개선 체크리스트

• Google Search Console 등록 및 sitemap.xml 제출(검색 노출 시작까지 3~7일)
• 이미지 최적화: PNG/JPG를 WebP로 변환(Squoosh 무료 도구 사용)
• 모바일 테스트: Google Mobile-Friendly Test 통과 확인
• CTA(Call To Action) 명확화: "문의하기" 버튼을 상단·중단·하단 3곳에 배치
• 구글 애널리틱스 연결: 방문자 수·이탈률 추적(무료)

실제 사례로, 한 사용자가 클로드로 만든 홈페이지에 구글 검색 최적화를 적용한 뒤 월 매출이 전월 대비 170만 원 증가했다고 보도됐습니다(네이버 프리미엄콘텐츠, 2026). 제작보다 배포 후 최적화가 더 중요합니다.

설정이 복잡하게 느껴진다면

여기까지 읽고 '도메인 연결, 배포 설정, 폰트 로딩까지 챙길 게 너무 많다'고 느껴진다면, 서버·호스팅 셋팅 없이 채팅으로 페이지를 만들고 발행 버튼 하나로 공개하는 나모 사이트빌더 같은 서비스도 선택지입니다. 쓰던 도메인 주소를 그대로 연결할 수 있고, 수정도 코드 대신 채팅으로 하므로 코드와 배포 설정을 직접 관리하기 부담스러운 담당자에게 맞습니다. 클로드로 직접 만드는 방법은 자유도가 높고, 나모 사이트빌더는 운영이 간단한 쪽이니 팀의 상황에 맞춰 고르면 됩니다.