채팅 한 줄로
만드는 홈페이지
Claude 채팅, Claude Design, Claude Code까지 — 난이도별 3가지 방법으로 홈페이지 만들고 배포하기
어떤 도구로 만들지 먼저 정하자
홈페이지를 만들고 싶다는 생각이 들 때, 막상 시작하려면 막막한 경우가 많다. 디자이너를 고용하기엔 비용이 부담스럽고, 직접 코딩을 배우기엔 시간이 오래 걸린다. 그런데 Claude를 활용하면 이 두 가지 장벽을 모두 건너뛸 수 있다. 다만 "Claude로 홈페이지 만들기"라는 말 안에도 사실 세 가지 다른 방법이 숨어 있다.
일반 채팅창에 요청해서 HTML 페이지를 바로 받는 가장 기본적인 방법. 별도 가입이나 설정 없이 누구나 바로 시작할 수 있다.
2026년 4월 새로 출시된 디자인 전용 도구. 슬라이더로 여백·색감을 조정하고, 인라인 댓글로 디테일을 다듬는 등 디자인 완성도에 강점이 있다.
여러 페이지, 폼 제출, 데이터베이스 연동처럼 실제로 동작하는 기능이 필요한 홈페이지를 만들 때 적합한 방법. 코드 전체를 직접 다룰 수 있다.
빠르게 한 페이지면 채팅, 디자인 완성도가 중요하면 Claude Design, 실제 기능이 필요하면 Claude Code.
방법 1 — Claude 채팅으로 빠르게 만들기
가장 간단한 포트폴리오, 소개 페이지, 간단한 랜딩페이지라면 Claude.ai 채팅창만으로도 충분하다. 요청을 입력하면 Claude가 코드를 작성해 화면 오른쪽에 바로 미리보기를 띄워주는 '아티팩트' 기능을 활용한다.
1인 베이커리 카페 소개 홈페이지를 만들어줘.
- 히어로 섹션(가게 이름, 슬로건, 대표 이미지 영역)
- 메뉴 소개 카드 6개
- 영업시간, 위치 안내
- 인스타그램 링크 버튼
- 전체적으로 따뜻한 베이지·브라운 톤으로
- 모바일에서도 깨지지 않게 반응형으로 만들어줘결과물이 마음에 들지 않으면 "히어로 섹션을 더 크게 키워줘", "버튼 색을 초록색으로 바꿔줘"처럼 자연어로 계속 요청하며 다듬을 수 있다. 완성되면 다운로드해서 바로 배포 단계로 넘어갈 수 있다.
방법 2 — Claude Design으로 디자인 완성도 높이기
2026년 4월 17일 Anthropic이 새로 공개한 Claude Design은 시각 작업물 제작에 특화된 전용 인터페이스다. 출시 당일 디자인 툴 업계가 크게 반응할 정도로 주목받았으며, claude.ai/design에서 Pro·Max·Team·Enterprise 플랜 구독자라면 연구 미리보기 단계로 바로 사용할 수 있다.
일반 채팅과 다른 점은 화면 왼쪽이 대화창, 오른쪽이 작업 캔버스로 분리되어 있고, 결과물 위에서 슬라이더로 여백이나 색감을 즉석에서 조정하거나, 특정 요소를 클릭해 인라인 댓글로 세부 수정을 요청할 수 있다는 점이다. 마치 디자이너에게 피그마 댓글로 피드백을 주는 것과 비슷한 흐름이다.
사용 흐름
히어로 섹션, 서비스 소개 카드, 가격 정보, 고객 후기,
문의하기 폼을 포함한 1인 디자인 스튜디오용
원페이지 홈페이지를 만들어줘. 모던하고 차분한
느낌으로, 타겟은 소규모 사업자 고객.방법 3 — Claude Code로 실제 동작하는 홈페이지 만들기
문의 폼 제출, 여러 페이지 간 이동, 데이터베이스 연동, 예약 시스템처럼 실제로 '작동'해야 하는 기능이 필요하다면 Claude Code가 적합하다. 로컬 컴퓨터의 파일과 터미널에 직접 접근해 실제 코드를 작성하고 실행할 수 있기 때문이다.
시작하기
# Claude Code 설치 (이미 설치했다면 생략)
curl -fsSL https://claude.ai/install.sh | bash
# 프로젝트 폴더 생성 후 진입
mkdir my-homepage && cd my-homepage
# Claude Code 실행
claude소규모 인테리어 디자인 회사 홈페이지를 만들어줘.
- 메인 페이지, 포트폴리오 페이지, 문의하기 페이지로
구성된 3페이지 구조
- 문의하기 페이지에는 이름/연락처/문의내용을 입력하면
이메일로 전송되는 폼 기능 포함
- Next.js로 만들고, 반응형 디자인으로 작업해줘Claude Code는 코드베이스를 직접 읽고 파일을 생성·수정하면서 작업하기 때문에, 폼 제출 같은 기능에 필요한 백엔드 로직(이메일 전송 API 연동 등)까지 함께 구현해준다. 작업 폴더에 CLAUDE.md 파일을 만들어 프로젝트의 톤, 기술 스택, 규칙을 미리 적어두면 매번 같은 설명을 반복하지 않아도 된다.
완성된 홈페이지 배포하기
어떤 방법으로 만들었든, 완성된 파일을 인터넷에 올려야 다른 사람이 접속할 수 있다. 가장 쉬운 방법은 회원가입이나 복잡한 설정 없이 폴더를 끌어다 놓기만 하면 되는 드래그 앤 드롭 배포다.
https://내사이트.vercel.app 형태의 임시 주소 생성실전 꿀팁 모음
한 번에 모든 디테일을 요구하기보다, 핵심 레이아웃과 콘텐츠를 먼저 만들고 인터랙션이나 디테일을 점진적으로 추가하는 방식이 결과물 품질을 높인다. Claude는 단계적인 요청에 특히 잘 반응한다.
"이게 좀 안 맞는 것 같아" 같은 모호한 피드백보다, "폼 필드 사이 간격을 8px로 줄여줘"처럼 구체적으로 전달하면 훨씬 정확한 결과를 받을 수 있다.
"이런 느낌으로 만들어줘"라는 요청은 글로 설명하기보다 참고할 스크린샷이나 캡처 이미지를 함께 첨부하는 것이 훨씬 정확하게 의도를 전달한다. Claude Design은 이런 참고 자료 첨부 기능을 적극적으로 지원한다.
컴퓨터 화면에서는 멋있어 보이던 디자인이 모바일에서는 버튼이 너무 작거나 글자가 깨지는 경우가 흔하다. 배포 직후 실제 스마트폰으로 접속해 확인하는 습관이 중요하다.
디자인 완성도는 챙기고 싶지만 폼 제출 같은 실제 기능도 필요하다면, Claude Design에서 디자인을 먼저 완성한 뒤 'Claude Code 핸드오프 번들'로 내보내 기능 구현을 이어가는 흐름이 효율적이다.
Claude Code 작업 중 오류가 발생하면 터미널이나 브라우저에 뜨는 오류 메시지를 그대로 복사해 전달하면, 추측보다 훨씬 정확하고 빠르게 원인을 찾아 해결해준다.
방법별 비교 & 선택 가이드
| 항목 | Claude 채팅 | Claude Design | Claude Code |
|---|---|---|---|
| 난이도 | ★☆☆ | ★★☆ | ★★★ |
| 비용 | 무료~소액 | Pro 플랜 이상 | API 사용료 (소액) |
| 디자인 완성도 | 보통 | 높음 (슬라이더·인라인 댓글) | 코딩 역량에 따라 다름 |
| 실제 기능 구현 | 제한적 | 제한적 (정적 위주) | 완전 지원 (폼, DB 연동 등) |
| 내보내기 형식 | HTML | HTML, PDF, PPTX, Canva | 전체 코드베이스 |
| 추천 대상 | 간단한 한 페이지가 필요한 분 | 디자인 완성도가 중요한 분 | 실제 기능이 필요한 분 |
단순 소개 페이지라면 채팅으로 충분하고, 비즈니스용으로 보여줄 만한 디자인이 필요하다면 Claude Design이 적합하다. 문의 폼이나 예약 시스템처럼 실제 동작이 필요한 단계가 되면 Claude Code로 넘어가는 흐름이 자연스럽다.
자주 묻는 질문
완벽한 도구보다 맞는 도구를 고르자
홈페이지 제작 방법은 점점 다양해지고 있지만, 결국 중요한 것은 본인의 목적에 맞는 도구를 고르는 일이다. 거창한 기능부터 욕심내기보다, 가장 간단한 채팅 방식으로 한 번 만들어보며 감을 잡는 것이 가장 빠른 출발점이다.
'알짜 정보 > IT-테크' 카테고리의 다른 글
| 블로그 키워드 조사 완전정리 — 황금키워드 찾는 법부터 도구까지 (0) | 2026.06.25 |
|---|---|
| 무료 블로그 뭐가 다를까 — 블로그스팟·티스토리·워드프레스 비교 가이드 (1) | 2026.06.24 |
| AI로 블로그 자동화 글쓰기 완전정리 — 난이도별 4가지 방법 (0) | 2026.06.21 |
| 직장인도 가능한 AI 부업 — 초기비용 0원으로 시작하는 방법 8가지 (1) | 2026.06.19 |
| 클로드로 내 손으로 앱 만들어서 폰에 설치하기 — 난이도별 3가지 방법 (0) | 2026.06.18 |
댓글