Claude Code로 첫 웹사이트 만들기: 제품 설명서부터 자체 도메인 공개까지

제품 이름을 정했고 도메인도 구입했습니다. 이제 그 도메인에 들어온 사람이 제품을 보고, 용도를 이해하고, 다음 행동까지 할 수 있는 웹사이트를 만들 차례입니다.

이 글에서는 Claude Code를 사용해 공개 가능한 제품 웹사이트를 만듭니다. 예시는 아직 일반 가입을 열지 않은 고객 피드백 관리 도구입니다. 사이트의 역할은 분명합니다. 프리랜서에게 제품을 소개하고, 관심 있는 사람이 얼리 액세스를 신청할 수 있게 하는 것입니다.

전체 작업은 코딩 도구 안에서 진행합니다. 페이지 제작, 레이아웃 조정, 폼 연결, 결과 확인, 배포까지 다룹니다. 웹사이트 자체에 챗봇이나 다른 AI 기능을 추가할 필요는 없습니다.

먼저 개발 방식을 정하기

Claude Code는 프로젝트를 읽고, 파일을 수정하고, 명령을 실행할 수 있습니다. 하나의 웹사이트 프로젝트를 계속 개발하고 보완하는 작업에 적합합니다. 이 글에서는 로컬 터미널의 Claude Code를 사용합니다.

웹사이트 전용 디렉터리를 만들고 확정한 제품 이름, 문구, 사용 가능한 자료를 넣습니다. 기존 프로젝트가 있다면 현재 구조를 유지합니다. 새 프로젝트라면 먼저 단일 페이지 제품 사이트에 맞는 간단한 구현안을 제안해 달라고 요청할 수 있습니다.

이미 Claude Code를 정상적으로 사용하고 있다면 현재 연결 방식을 그대로 활용하면 됩니다. 사용량 기반 API 연결을 선택할 때 모델 서비스를 설정합니다.

BetterToken을 통해 Claude Code를 사용하려면 Claude Code 연결 가이드에 따라 API Key와 Base URL을 설정합니다. 이 값은 로컬 개발 환경에 보관하고 코딩 도구가 사용하도록 하며, 공개 웹사이트 코드에는 넣지 않습니다. 사용할 수 있는 모델과 연결 조건은 현재 계정 설정을 기준으로 합니다.

설정이 끝나면 Claude Code에 웹사이트 디렉터리를 확인하고 기존 파일, 기술 스택, 실행 방법을 정리해 달라고 요청합니다. 서드파티 게이트웨이의 호환 범위는 클라이언트와 기능에 따라 달라질 수 있으므로, 개발을 시작하기 전에 필요한 모델과 기능이 동작하는지 확인합니다.

1단계: 바로 제작에 사용할 수 있는 요구사항 전달하기

“고급스럽고 기술적인 웹사이트를 만들어 줘”라는 요청만으로는 대상 사용자가 누구인지, 메인 버튼이 무엇을 해야 하는지 알 수 없습니다.

확정한 이름과 자료를 전달한 뒤 다음과 같은 작업을 요청합니다.

목표: 프리랜서를 위한 고객 피드백 관리 도구의 첫 웹사이트를 만든다. 이 제품은 고객의 수정 요청을 한곳에서 확인하게 해 주어 채팅 기록에서 요구사항을 다시 찾는 수고를 줄인다. 아직 일반 가입은 열지 않았으며, 메인 버튼 문구는 “얼리 액세스 신청”으로 한다.

허용 범위: 이번 작업에서는 홈페이지 한 페이지만 만든다. 제품 소개, 데모라고 명확히 표시한 사용 사례 하나, 핵심 활용법 세 가지, 자주 묻는 질문, 얼리 액세스 신청 경로를 포함한다. 제품 이름과 자료는 내가 제공한 내용을 사용한다.

하지 않을 일: 로그인, 결제, 제품 대시보드를 추가하지 않는다. 고객 수, 고객 후기, 파트너 로고를 만들어 내지 않는다.

완료 조건: 먼저 브라우저에서 열 수 있고 데스크톱과 모바일에 모두 대응하는 페이지 미리보기를 제공한다. 얼리 액세스 경로가 아직 실제 서비스와 연결되지 않았다면 데모라고 명확히 표시한다.

검증 방법: 페이지 실행 여부, 모바일 레이아웃, 메인 버튼 동작을 확인하고 실제로 점검한 내용을 보고한다.

이 정도면 첫 버전의 범위를 정하기에 충분합니다. 세부 내용은 페이지를 본 뒤 추가하면 됩니다.

첫 검토에서는 제품을 정확히 설명하는지 확인합니다. 고객 피드백은 어디에서 들어오는가? 방문자가 이 제품을 사용해 볼 이유는 무엇인가? 버튼을 누르면 어떤 일이 일어나는가? 색상과 애니메이션은 나중에 조정할 수 있지만, 페이지는 먼저 이 질문들에 답해야 합니다.

2단계: 수정 요청을 페이지의 구체적인 위치와 연결하기

첫 버전이 나오면 “조금 더 세련되게”보다 이해나 사용을 방해하는 위치를 정확히 알려 주는 피드백이 훨씬 효과적입니다.

예를 들어 모바일 첫 화면을 큰 이미지가 가득 채워 제품 용도를 보려면 스크롤해야 한다면 다음과 같이 요청합니다.

목표: 현재 홈페이지의 모바일 첫 화면을 조정해 방문자가 제품 용도와 “얼리 액세스 신청” 버튼을 먼저 보게 한다.

허용 범위: 홈페이지 첫 화면의 레이아웃과 스타일만 수정한다.

구체적인 변경: 모바일에서는 데모 이미지를 버튼 아래로 옮기고 현재 문구는 유지한다. 데스크톱에서는 기존 좌우 배치를 유지한다.

완료 조건: 모바일에서 가로 스크롤이 생기지 않고, 이미지가 제목이나 버튼을 가리지 않으며, 데스크톱 레이아웃은 바뀌지 않는다.

검증 방법: 모바일 너비 하나와 데스크톱 너비 하나에서 확인한다. 이번 변경으로 생긴 문제만 수정한다.

수정할 때마다 페이지를 다시 열어 실제 결과가 요청과 일치하는지 확인합니다. 브라우저 도구를 사용할 수 있다면 AI가 직접 미리보기를 점검하게 합니다. 그렇지 않다면 직접 페이지를 열고 스크린샷과 재현 가능한 문제를 전달합니다.

만족스러운 버전이 나오면 다음 수정에 들어가기 전에 복원 가능한 상태를 남겨 둡니다. 이후 방향이 맞지 않아도 안정적인 버전으로 빠르게 돌아갈 수 있습니다.

3단계: 얼리 액세스 신청이 실제로 도착하게 만들기

이 웹사이트에서 가장 중요한 기능은 복잡한 상호작용이 아니라 신청을 실제로 받는 것입니다.

첫 버전에서는 이미 설정된 외부 폼을 버튼으로 열어도 됩니다. 이메일을 받기 위해 별도의 계정 시스템부터 만들 필요는 없습니다. 폼에는 이메일과 선택 질문인 “현재 고객 피드백을 어떻게 관리하고 있나요?”를 넣을 수 있습니다. 입력 정보가 얼리 액세스 연락과 제품 조사에 사용된다는 내용도 표시합니다.

실제 폼 URL을 Claude Code에 전달해 데모 경로를 교체하게 합니다. 그다음 웹사이트에서 직접 테스트 신청을 보내고, 수신 시스템에 기록이 나타나는지 확인합니다.

사이트 내부 폼을 사용할 경우 실제 전송 서비스를 연결하고 전송 중, 성공, 실패 상태를 구현합니다. 수신 측에서 데이터 저장이 확인된 뒤에만 성공 메시지를 표시합니다.

화면의 피드백은 실제로 완료된 동작과 일치해야 합니다. 전시용 섹션을 더 추가하는 것보다 중요한 부분입니다.

4단계: 자체 도메인을 연결하기 전에 공개 미리보기 확인하기

로컬 미리보기를 확인한 뒤 현재 기술 스택을 지원하는 호스팅 플랫폼에 배포합니다. 먼저 공개 테스트 URL을 만들고 다른 기기에서 이미지, 링크, 폼을 확인합니다.

예를 들어 Vercel에서는 구입한 도메인을 프로젝트에 추가한 다음, 해당 프로젝트에 표시된 값으로 DNS를 설정합니다. 현재 프로젝트에서 제공하는 DNS 레코드를 사용합니다. 도메인을 이메일에도 사용한다면 기존 MX 등 메일 관련 레코드를 유지합니다. 자세한 과정은 Vercel 사용자 지정 도메인 문서에서 확인할 수 있습니다.

도메인 연결이 끝나면 자체 도메인으로 접속해 신청 완료까지 전체 흐름을 다시 확인합니다. 방문자가 페이지를 열고, 제품을 이해하고, 신청을 완료할 수 있는지 점검합니다.

이와 같은 고정형 소개 페이지는 방문할 때마다 모델을 호출하지 않습니다. 모델은 개발 단계에서만 참여하며, 배포된 사이트는 일반 웹 프로젝트처럼 동작합니다. 나중에 방문자용 콘텐츠 생성, 분석, 대화 기능을 추가한다면 런타임 모델 연결을 별도 기능으로 설계합니다.

5단계: 실제로 사용할 수 있는 웹사이트와 함께 공개하기

사이트를 소개할 때는 실제 페이지 스크린샷, 명확한 제품 설명, 동작하는 경로를 사용합니다. 아직 테스트 사용자를 모집 중이라면 페이지와 공개 자료 모두에 “얼리 액세스 신청”이라고 적습니다.

웹사이트가 준비되면 NewName.ai의 스타트업 디렉터리에서 비슷한 제품이 용도를 어떻게 설명하는지 살펴보고, 자신의 제품도 제출할 수 있습니다. 실제 기능, 현재 페이지 스크린샷, 접속 가능한 URL을 중심으로 소개합니다.

그다음 방문과 신청 과정에서 얻은 구체적인 피드백을 웹사이트 프로젝트에 반영합니다. 사람들이 일반 채팅 앱과의 차이를 이해하지 못한다면 설명을 고칩니다. 버튼은 누르지만 신청을 끝내지 못한다면 폼과 흐름을 점검합니다. 한 번에 하나의 명확한 문제를 해결하며 사이트를 계속 개선합니다.

이름은 프로젝트에 정체성을 주고, 도메인은 주소를 줍니다. AI를 활용한 웹사이트 제작의 실제 결과는 제품 아이디어를 사람들이 방문하고, 이해하고, 다음 행동을 할 수 있는 사이트로 바꾸는 것입니다.