Claude 아티팩트를 웹사이트로 만드는 방법

소개

많은 사람이 Claude로 웹사이트를 만들고 있습니다. 요청하면 Claude는 사이트를 아티팩트, 즉 채팅에서 바로 미리보기를 할 수 있는 단일 파일로 반환합니다. 하지만 그 아티팩트를 얻고 나면 다음 단계가 명확하지 않습니다. 어딘가에 호스팅하고, 도메인을 연결하고, 모바일에서도 잘 작동하게 만들고, 이후에도 계속 편집할 방법을 찾아야 합니다.

Claude에는 아티팩트용 "Publish" 버튼이 있지만, 결과물은 Anthropic의 UI에 감싸진 claude.site URL에 존재합니다. 데모를 공유하기에는 괜찮지만, 비즈니스에 쓸 실제 웹사이트로는 적합하지 않습니다.

이 가이드에서는 Repaint라는 새로운 AI 도구를 사용해 Claude 아티팩트를 실제로 게시된 웹사이트로 만드는 방법을 보여드립니다. 아티팩트에서 시작해 사이트를 게시하고, AI와 대화하며 편집할 수 있습니다.

Claude 아티팩트를 게시하기 어려운 이유

Claude는 코드를 생성할 수 있지만, 완전한 웹사이트 빌더는 아닙니다. 자체 도메인에 게시하는 방법을 물어보면 다른 플랫폼을 안내해 줍니다. 보통 GitHub, Netlify, Vercel 같은 개발자 도구를 추천하거나, 전통적인 웹사이트 빌더로 다시 만들 것을 제안합니다. 둘 다 이상적이지 않습니다.

개발자 도구는 Claude가 생성한 코드를 직접 실행할 수 있어 좋습니다. 단점은 변경할 때마다 특정 코드 파일을 편집해야 한다는 점입니다. 코딩을 하지 않는 사람에게는 간단한 편집을 AI로 하기 위해 파일을 배포된 코드 안팎으로 끊임없이 옮겨야 한다는 의미입니다.

대부분의 사람은 WordPress, Wix, Webflow 같은 웹사이트 빌더를 사용해 코드 복잡성을 피합니다. 이런 플랫폼은 편집과 게시를 더 매끄럽게 해줍니다. 문제는 Claude 아티팩트를 실행할 수 없어 모든 것을 수동으로 다시 만들어야 한다는 것입니다. 그 이후에도 모든 것을 수작업으로 편집해야 합니다.

그래서 Repaint 같은 AI 웹사이트 빌더를 사용해야 합니다. 커스텀 코드를 실행하는 유연성과 한 곳에서 편집하고 게시하는 편리함을 모두 제공합니다.

Repaint란 무엇인가요?

Repaint는 웹사이트를 만드는 AI 플랫폼입니다. Claude를 유용하게 만드는 채팅 기반 워크플로와 동일한 방식을 중심으로 구축되었습니다. 평범한 언어로 변경 사항을 요청하고, 결과를 검토하고, 사이트가 원하는 모습이 될 때까지 계속 반복할 수 있습니다.

하지만 Repaint는 단순히 코드를 생성하는 곳이 아니라 완전한 웹사이트 플랫폼입니다. Claude의 아티팩트 게시가 처리하지 못하는, 실제 웹사이트를 운영하는 부분까지 모두 다룬다는 의미입니다.

• Anthropic의 UI에 감싸이지 않은, 일반 웹사이트로 사이트를 게시합니다.
• 커스텀 도메인을 연결할 수 있어 사이트가 실제 URL에서 운영될 수 있습니다.
• AI로 사이트를 계속 편집할 수 있어 나중에도 변경할 수 있습니다.
• 페이지 제목, 설명, 사이트 구조 같은 SEO 세부 사항을 관리하는 데 도움이 됩니다.
• 단일 아티팩트를 넘어 여러 페이지 사이트로 확장할 수 있습니다.

이것이 단순히 아티팩트를 공유하는 것과, 시간이 지나도 사이트를 관리할 수 있는 실제 공간을 갖는 것의 차이입니다.

1단계: Claude에서 코드 가져오기

Claude가 웹사이트를 만들 때는 모든 것을 채팅에서 미리볼 수 있는 단일 파일에 담습니다. 기본적으로 아티팩트는 HTML이지만, React/TSX로 요청할 수도 있습니다. 어느 쪽이든 아티팩트 패널 상단에 복사 버튼이 있습니다.

시작하려면 Claude 아티팩트를 열고 코드를 복사하세요. 그런 다음 Repaint 코드 임포터로 가서 붙여넣으세요. 이렇게 하면 웹사이트 제작 과정이 시작됩니다. Repaint는 코드를 사용해 게시하고 계속 편집할 수 있는 완전한 웹사이트를 만듭니다.

아직 Claude에서 아티팩트를 만들지 않았다면 React로 요청하는 것을 권장합니다. Repaint가 사용하는 형식에 더 가까워, 작은 디자인 세부 사항이 변환 과정에서 사라질 가능성이 적습니다. HTML도 작동하지만, 문제가 생기면 나중에 Repaint와 대화해 수정할 수 있습니다.

2단계: Repaint가 만들 내용 계획하기

코드를 붙여넣은 후, Repaint는 웹사이트를 만들기 전에 몇 가지 질문을 합니다. 이를 통해 Claude 버전을 그대로 사용할지, 느슨한 영감으로만 활용할지, 아니면 더 많은 페이지가 있는 큰 사이트로 만들지 결정할 기회를 가질 수 있습니다.

콘텐츠 계획하기

Claude 아티팩트는 항상 단일 파일이라, 보통 링크가 새 페이지를 여는 대신 섹션으로 스크롤되는 한 페이지짜리 사이트가 됩니다. 하지만 대부분의 비즈니스는 한 페이지 이상이 필요합니다. 따라서 아티팩트가 한 페이지짜리라면 Repaint가 여러 페이지로 만들도록 고려해 보세요.

이 시점을 활용해 콘텐츠를 더 추가할 수도 있습니다. Claude 아티팩트는 보통 블로그 게시물처럼 큰 페이지 묶음을 포함하지 않습니다. 아티팩트를 Repaint로 가져올 때 원하는 모든 것을 포함하도록 범위를 넓힐 수 있습니다.

새 페이지는 이미 가지고 있는 스타일에 맞춰집니다.

스타일 계획하기

기본적으로 Repaint는 원본의 스타일을 그대로 가져옵니다. 색상, 레이아웃, 타이포그래피, 간격까지 동일한 모습을 유지한다는 뜻입니다.

하지만 그 스타일을 꼭 유지할 필요는 없습니다. 마음에 들지 않으면 Repaint에 웹사이트를 다시 디자인해 달라고 요청할 수 있습니다. Repaint는 다음을 할 수 있습니다.

• 원본을 가능한 한 비슷하게 재현
• 마음에 드는 다른 웹사이트 스타일에 맞추기
• 콘텐츠에 맞는 커스텀 스타일 만들기
• Repaint 스타일 라이브러리에서 스타일 선택
• Repaint가 대신 선택하도록 맡기기

너무 부담 갖지 마세요. 결과가 마음에 들지 않으면 나중에 새 버전을 만들어 달라고 요청할 수 있습니다.

계획 검토하기

무언가를 생성하기 전에, Repaint는 어떤 페이지를, 어떤 콘텐츠로, 어떤 스타일로 만들지 정확히 작성합니다. 검토하고 마지막 변경 사항을 반영하세요. 계획을 수정하는 것이 사이트 전체를 다시 생성하는 것보다 훨씬 빠릅니다.

확인하면 Repaint가 새 웹사이트를 만들기 시작합니다!

3단계: 웹사이트 생성하기

계획을 확인하면 Repaint가 사이트 구축을 시작합니다. 각 페이지를 처리하는 동안 진행 상황 메시지가 표시됩니다. 간단한 홈페이지는 1~2분 정도 걸릴 수 있습니다. 페이지가 더 많은 큰 웹사이트는 더 오래 걸릴 수 있습니다.

Repaint는 단순히 붙여넣은 코드를 호스팅하는 것이 아닙니다. Claude 아티팩트를 원본 자료로 사용해 계획에서 설명한 사이트를 만듭니다. 정확한 재현을 요청했다면 원본과 가깝게 맞추려 합니다. 더 많은 페이지나 다른 스타일을 요청했다면 아티팩트를 출발점으로 활용합니다.

생성 중에 세부 사항이 변환 과정에서 사라지는 경우가 있습니다. 아티팩트가 HTML이면 더 자주 발생하는데, React가 Repaint가 사용하는 것에 더 가깝기 때문입니다. 중요한 세부 사항이 사라졌다면 다음 단계에서 수정할 수 있습니다.

4단계: AI로 웹사이트 편집하기

Repaint가 첫 번째 버전을 생성하면 화면 오른쪽에 표시됩니다. 이제 Claude에서 하던 것과 같은 방식으로 변경할 수 있습니다. 변경하고 싶은 내용을 입력하면 Repaint가 사이트를 업데이트하고, 결과를 검토하면 됩니다.

예를 들어 Repaint에 다음과 같이 요청할 수 있습니다.

• 새 페이지 추가
• 색상이나 폰트 변경
• 문의 폼 추가
• 이미지 생성
• 텍스트 다시 작성

사이트가 게시할 준비가 되었다고 느낄 때까지 변경을 계속할 수 있습니다.

5단계: 웹사이트 게시하기

사이트가 준비되면 게시 버튼을 클릭하세요. Repaint가 사이트를 온라인에 올리고 누구에게나 공유할 수 있는 라이브 URL을 제공합니다. 다음과 같은 형태입니다: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

이 시점에서 작업물이 인터넷에 있는 실제 웹사이트가 됩니다. 휴대폰에서 열거나, 누군가에게 보내거나, 실제 브라우저에서 테스트할 수 있습니다. 또한 게시된 아티팩트처럼 Anthropic UI에 감싸이지도 않습니다.

코드를 내보내거나 파일을 다른 곳에 배포할 필요도 없습니다. 이제부터는 Repaint가 사이트를 편집하고 게시하는 곳입니다. 나중에 변경하고 싶다면 Repaint에 웹사이트를 업데이트해 달라고 요청한 다음, 같은 버튼으로 새 버전을 게시하면 됩니다.

6단계: 도메인 연결하기

자체 URL을 사용할 준비가 되면 웹사이트 설정 > 도메인으로 이동해 커스텀 도메인 연결을 클릭하세요. 이 기능은 유료 플랜이 필요합니다. 가격 세부 정보는 여기에서 확인할 수 있습니다.

도메인은 Claude와 Repaint 외부의 플랫폼에서 관리됩니다. GoDaddy, Namecheap, Cloudflare 같은 도메인 공급업체에 등록되어 있습니다. 어디로 옮길 필요는 없습니다. 도메인 공급업체의 설정만 업데이트해 도메인이 Repaint 사이트를 가리키도록 하면 됩니다.

처음 해보는 경우 걱정하지 마세요. Repaint에게 단계별로 안내해 달라고 요청하세요. 정확히 무엇을 해야 할지 하나씩 알려드립니다.

변경 사항이 적용되는 데 몇 시간이 걸릴 수 있습니다. Repaint에서 도메인이 확인됨으로 표시되면 자체 도메인에서 웹사이트가 라이브 상태가 됩니다.

마무리

Claude는 아티팩트 안에 웹사이트의 첫 번째 버전을 쉽게 만들어 주지만, 그것을 실제 웹사이트로 온라인에 올리고 유지하는 일은 여전히 어렵습니다. Repaint는 그 아티팩트를 게시하고, 도메인에 연결하고, AI로 계속 편집할 수 있는 실제 웹사이트로 만들 수 있는 방법을 제공합니다. Repaint 덕분에 Claude 아티팩트를 게시된 사이트로 바꾸는 일이 그 어느 때보다 쉬워졌습니다.

자주 묻는 질문

Claude에 내장된 아티팩트 게시 기능을 그대로 쓰면 안 되나요?

가능합니다. 하지만 결과물은 Anthropic의 UI에 감싸진 Claude 호스팅 샌드박스에 있게 되며, 자체 도메인에 올릴 수 없습니다. 데모를 공유하기에는 괜찮지만, 대부분의 비즈니스가 실제 웹사이트로 원하는 모습은 아닙니다. Repaint는 자체 도메인, 자체 브랜딩에 Anthropic UI 없이 일반 웹사이트를 제공합니다.

Repaint로 Claude 아티팩트를 웹사이트로 만드는 데 얼마나 걸리나요?

아티팩트가 이미 완성되어 있다면 몇 분이면 됩니다. 코드를 공유하고, 사이트를 계획하고, 웹사이트를 생성하는 데 보통 2~5분이 걸립니다. 그 이후 게시까지 걸리는 시간은 얼마나 많이 조정하느냐에 따라 다릅니다.

Repaint로 게시하는 데 비용이 얼마나 드나요?

코드를 Repaint로 가져오고, 사이트를 생성하고, 편집하고, 게시하는 것은 무료입니다. 무료 플랜의 주요 제한 사항은 사용량 제한, 커스텀 도메인 없음, 사이트에 Repaint 배지가 표시된다는 점입니다. 유료 플랜은 연간 결제 시 월 $20부터, 월간 결제 시 월 $25부터 시작합니다. 여기에는 확장된 사용량, 커스텀 도메인 지원이 포함되며 Repaint 배지가 제거됩니다.

GitHub Pages, Netlify, Vercel을 그대로 쓰면 안 되나요?

가능합니다. 특히 코드 관리에 익숙하다면요. 이런 도구들은 파일을 온라인에 올리는 데 능숙합니다. 하지만 의미 있는 변경을 할 때마다 다시 코드로 돌아가야 하므로, Claude, 에디터, 호스팅 도구 사이에서 파일을 복사하는 데 묶이게 됩니다.

Repaint는 단순히 파일을 제공하는 곳이 아니라 완전한 웹사이트 플랫폼이라는 점에서 다릅니다. AI로 계속 편집하고, 같은 곳에서 변경 사항을 게시하고, 페이지를 관리하고, SEO 설정을 업데이트하고, 이미지를 최적화하고, 폼을 연결하고, 커스텀 도메인을 사용할 수 있다는 의미입니다. 첫 배포뿐만 아니라 장기적인 웹사이트 관리를 위해 만들어졌습니다.

문제를 해결하려면 코드를 알아야 하나요?

아니요. Repaint는 코딩을 하지 않는 사람을 위해 만들어졌습니다. Claude에서 코드를 가져온 후에는 다시는 코드를 관리할 필요가 없습니다. 무언가 잘못 보이면 AI와 대화해 수정할 수 있습니다. 매우 구체적으로 지시하고 싶다면 코드를 아는 것이 도움이 될 수 있지만, 필수는 아닙니다.

사이트가 Claude 아티팩트와 똑같이 보일까요?

Repaint에 원본을 재현해 달라고 하면 거의 똑같이 보일 것입니다. 가끔 Repaint가 코드를 자체 웹사이트 형식으로 변환하기 때문에 일부 세부 사항이 사라지는 경우가 있습니다. 변환 문제는 아티팩트가 HTML일 때 더 자주 발생합니다. 그런 경우에도 몇 번의 프롬프트로 모든 것을 수정할 수 있을 것입니다.

AI가 실수하면 어떻게 되나요?

업데이트할 때마다 Repaint는 사이트의 모든 버전을 저장합니다. Repaint에게 되돌려 달라고 요청하면 이전 버전으로 복원됩니다. 또는 특정 시점으로 돌아가고 싶다면 이전 버전을 수동으로 복원할 수 있습니다. 그래서 사이트를 망칠 위험 없이 자유롭게 변경할 수 있습니다.

가져온 후에도 폼과 버튼이 작동하나요?

네. 원본 Claude 아티팩트에서는 문의 폼이 작동하지 않았을 가능성이 큽니다. 하지만 사이트를 Repaint로 옮기면, 폼을 제출이 들어올 때 이메일 알림을 보내는 실제 문의 폼으로 만들 수 있습니다. 버튼은 실제 페이지나 섹션으로 연결되어 있다면 작동해야 합니다. 버튼이 아무 곳도 가리키지 않으면 Repaint에 연결해 달라고 요청할 수 있습니다.

Repaint가 Claude 아티팩트의 이미지, 아이콘, 기타 자산을 처리할 수 있나요?

Claude 아티팩트는 보통 이미지 파일을 내부에 저장하지 않습니다. 보통 다른 곳에 호스팅된 이미지를 링크합니다. 코드를 가져오면 Repaint가 해당 이미지의 사본을 가져와 저장할 수 있어, 새 사이트에 영구적으로 사용할 수 있습니다. 이미지를 추가로 만들어야 한다면 Repaint가 생성할 수도 있습니다.

SEO 설정, 분석, 메타데이터를 추가할 수 있나요?

네. Repaint에 요청하기만 하면 커스텀 코드, 분석, 메타데이터를 추가할 수 있습니다. 기술적인 SEO를 설정해 주고, 다른 플랫폼의 스크립트와 임베드를 추가할 수 있습니다. Google Analytics를 추가하려면 GA ID만 공유하면 됩니다.

Repaint가 호스팅을 대체하나요, 아니면 별도의 호스트가 필요한가요?

Repaint는 호스팅 플랫폼입니다. 웹사이트를 실행합니다. GitHub Pages, Netlify, Vercel, 또는 다른 웹사이트 빌더 같은 별도의 호스팅 플랫폼은 필요하지 않습니다.