Claude 아티팩트를 실제 웹사이트로 게시하는 방법

Claude의 아티팩트(Artifacts) 기능은 완성된 웹사이트를 가장 빠르게 만드는 방법 중 하나예요. 필요한 것을 설명하면 Claude가 HTML과 CSS를 작성하고, 채팅창 안에서 바로 미리 볼 수 있어요. 결과물도 멋지죠.

그런데 벽에 부딪혀요. 이걸 실제로 인터넷에 어떻게 올리죠?

아티팩트는 Claude 안에 있어요. 미리 보고, 코드를 복사하고, 대화 링크를 공유할 수는 있지만 실제 웹사이트는 아니에요. 명함에 적을 수 있는 주소가 없고, Google에 나타나지도 않아요. 대화를 잃어버리면 함께 사라지고, 당연히 맞춤 도메인도 연결할 수 없어요.

이 가이드에서는 Claude 아티팩트를 나만의 주소, SSL 인증서, 작동하는 연락처 폼까지 갖춘 실제 웹사이트로 5분 안에 게시하는 방법을 알려 드려요.

Claude 아티팩트란 무엇일까요?

Claude에게 웹사이트, 차트, 인터랙티브 앱 같은 시각적인 결과물을 만들어 달라고 하면 코드를 생성하고 대화 옆 패널에 실시간 미리보기를 보여 줘요. Anthropic은 이것을 아티팩트라고 불러요. 브라우저에서 실행되는 독립형 HTML/CSS/JS 파일이에요.

웹사이트 생성에서 아티팩트는 정말 인상적이에요. 코드는 깔끔하고, 디자인은 현대적이며, 반응형 동작도 대개 별다른 설정 없이 잘 작동해요. 문제는 품질이 아니라 전달 방식이에요. 아티팩트는 미리보기이지 게시가 아니에요.

1단계: Claude에서 코드 꺼내기

먼저 아티팩트의 HTML 파일을 내 컴퓨터로 가져와야 해요. 두 가지 방법이 있어요.

방법 A: 코드 복사하기

1. Claude에서 아티팩트 패널을 클릭해 펼쳐요.
2. 코드 아이콘(또는 “소스 보기”)을 클릭해 HTML 원본을 확인해요.
3. 복사를 클릭해 코드 블록 전체를 복사해요.
4. 일반 텍스트 편집기를 열어요(Windows는 메모장, Mac은 텍스트 편집기. 반드시 일반 텍스트 모드로 하세요).
5. 코드를 붙여 넣고 바탕화면에 index.html로 저장해요.

방법 B: 아티팩트 다운로드하기

일부 Claude 요금제에서는 아티팩트를 HTML 파일로 바로 내려받을 수 있어요. 아티팩트 패널에 다운로드 버튼이 보이면 그걸 쓰는 게 더 빨라요. 다만 내려받은 파일 이름이 index.html인지 확인하세요(아니라면 이름을 바꾸세요).

2단계: SiteDrop에 끌어다 놓기

이제 컴퓨터에 index.html 파일이 있어요. 인터넷에 올리려면 이렇게 하세요.

1. SiteDrop에 접속해서 로그인하세요(무료로 시작할 수 있어요).
2. index.html 파일을 끌어다 SiteDrop 대시보드에 놓으세요. 그게 전부예요. 한 번만 끌어다 놓으면 돼요.
3. 5초도 안 돼서 SiteDrop이 사이트를 글로벌 CDN에 배포하고, 무료 SSL 인증서(HTTPS)로 보호하고, 게시된 링크를 알려 줘요.

이제 Claude 아티팩트가 전 세계 누구나 접속할 수 있는 실제 웹사이트가 됐어요.

3단계: 나만의 도메인 갖기

무료 SiteDrop 링크도 공유하기에는 충분하지만, www.yourbusiness.com 같은 전문적인 주소를 원한다면 SiteDrop 대시보드에서 바로 도메인을 가져올 수 있어요.

1. 대시보드에서 사이트 설정을 열어요.
2. 원하는 도메인 이름을 검색해요.
3. 도메인을 가져와요. DNS 설정은 SiteDrop이 모두 자동으로 처리해요. 도메인 등록 업체 대시보드도, 네임서버 레코드도, 48시간 대기도 필요 없어요.

4단계: 작동하는 연락처 폼 갖기(무료)

Claude 아티팩트에 연락처 폼이 들어 있다면(대부분의 비즈니스 웹사이트에는 필요해요), SiteDrop이 자동으로 연결해 줘요. 폼으로 접수된 메시지는 SiteDrop 기본 제공 받은편지함 으로 들어와요. 이메일 호스팅도, 외부 폼 도구도, 월 구독료도 필요 없어요.

다른 호스팅 방법에 비해 가장 큰 장점 중 하나예요. 사이트를 올리는 순간부터 연락처 폼이 실제로 작동해요.

더 좋은 Claude 아티팩트를 만드는 팁

웹사이트의 품질은 프롬프트의 품질에 달려 있어요. Claude에게서 더 좋은 아티팩트를 얻는 팁을 알려 드릴게요.

비즈니스를 구체적으로 설명하세요

“맨체스터에 있는 Paws & Shine이라는 출장 반려견 미용 가게의 한 페이지짜리 웹사이트를 만들어 줘. 문구가 들어간 히어로 섹션, 서비스 4가지와 가격이 있는 서비스 섹션, 고객 후기, 연락처 폼을 넣어 줘. 따뜻한 청록색과 크림색 조합에 둥글둥글한 현대적인 디자인 요소를 사용해 줘.”

구체적일수록 결과물이 더 다듬어져요. 실제 가게 이름, 실제 서비스, 실제 가격, 원하는 색상을 넣으세요.

모든 것을 한 파일에 담아 달라고 하세요

프롬프트에 “모든 CSS를 HTML 파일 안에 인라인으로 넣어 줘” 또는 “하나로 완결된 index.html로 만들어 줘”를 추가하세요. 그러면 SiteDrop에 올리는 과정이 매끄러워져요. 파일 하나, 끌어다 놓기 한 번, 끝이에요.

모바일 반응형을 요청하세요

프롬프트에 “모바일, 태블릿, 데스크톱 모두에서 완전히 반응하도록 만들어 줘”를 추가하세요. Claude는 대체로 잘하지만, 분명히 적어 두면 어떤 중단점도 빠뜨리지 않아요.

SiteDrop 프롬프트 생성기를 사용하세요

좋은 프롬프트를 어떻게 써야 할지 모르겠나요? SiteDrop 프롬프트 생성기가 비즈니스에 대해 몇 가지를 물어보고, Claude에 붙여 넣기만 하면 되는 완벽한 프롬프트를 만들어 줘요. 기술적인 세부 사항은 모두 알아서 처리해요.

그냥 Claude 대화 링크를 공유하면 안 될까요?

Claude에서는 대화 링크를 공유할 수 있고, 받는 사람은 아티팩트를 볼 수 있어요. 그런데 왜 SiteDrop을 써야 할까요? 공유된 대화 링크는 이런 한계가 있어요.

• 실제 주소가 아니에요 — Claude 대화 링크를 명함이나 Google 비즈니스 정보에 넣을 수는 없어요.
• 도메인이 없어요 — 웹사이트가 내 비즈니스 이름이 아니라 claude.ai/share/...에 있어요.
• 검색 엔진이 수집할 수 없어요 — 검색 엔진과 AI 답변 엔진이 찾거나 인용할 수 없어요.
• 연락처 폼이 없어요 — 방문자가 나에게 연락할 방법이 없어요.
• 사라질 수 있어요 — Anthropic이 공유 정책을 바꾸거나 대화를 잃어버리면 링크가 끊겨요.
• Claude 브랜딩이 보여요 — 내 비즈니스 브랜딩이 아니에요.

SiteDrop에 게시한 사이트는 내 것이에요. 내 도메인, 내 브랜딩, 내 연락처 폼, 내 방문 통계가 있어요. 다른 회사 제품 안의 미리보기가 아니라 진짜 웹사이트예요.

게시한 뒤에는 무엇을 할 수 있나요?

• 시각적으로 콘텐츠 편집 — SiteDrop의 시각 편집기 로 페이지에서 바로 텍스트, 이미지, 콘텐츠를 바꿔요.
• 내 이미지 추가 — 자리표시자 이미지를 실제 비즈니스 사진으로 바꿔요.
• 언제든 업데이트 — Claude에서 변경 사항을 반영해 아티팩트를 다시 만들고 SiteDrop에 다시 올리면 게시된 사이트가 즉시 업데이트돼요.
• 방문자 확인 — SiteDrop 대시보드에서 사이트를 찾은 사람 수를 확인해요.

전체 과정을 단계별로 정리하면

1. Claude를 열고 웹사이트를 설명해요(또는 프롬프트 생성기를 사용해요).
2. Claude가 아티팩트를 만들어요. 미리 보고 마음에 드는지 확인해요.
3. 코드를 복사하거나 HTML 파일을 내려받아요.
4. 파일을 SiteDrop에 끌어다 놓아요.
5. 웹사이트가 게시돼요. 원한다면 맞춤 도메인을 가져와요.

총 소요 시간은 5분 이내예요. 비용은 무료로 시작할 수 있어요.