AI가 생성한 코드를 웹사이트로 만드는 방법

소개

많은 사람들이 AI를 사용해 웹사이트를 만들고 있습니다. ChatGPT, Claude, Gemini 같은 도구는 설명한 사이트의 미리보기와 함께 단일 코드 파일을 흔쾌히 생성해 줍니다. 하지만 그 코드를 손에 넣은 뒤의 다음 단계는 명확하지 않습니다. 어딘가에 호스팅하고, 도메인을 연결하고, 모바일에서도 작동하게 만들고, 나중에 계속 편집할 방법까지 마련해야 합니다.

GitHub나 Netlify 같은 전통적인 개발자 도구로 파일을 온라인에 호스팅할 수는 있지만, 수정할 때마다 코드 파일, 배포, 기술적 세부 사항을 관리해야 합니다. 대부분의 사람은 그런 일을 다루고 싶지 않습니다. 애초에 AI 덕분에 코드를 얻은 것이니까요.

이 가이드에서는 Repaint라는 새로운 AI 도구를 사용해 AI가 생성한 코드를 실제로 게시 가능한 웹사이트로 만드는 방법을 보여드리겠습니다. 코드에서 출발해 사이트를 게시하고, AI와 대화하며 편집할 수 있습니다.

AI가 생성한 코드를 게시하는 것이 왜 어려울까?

AI 덕분에 웹사이트용 코드 파일을 얻는 것은 그 어느 때보다 쉬워졌습니다. 문제는 ChatGPT, Claude, Gemini 같은 AI 챗봇이 그 코드를 실제 웹사이트로 호스팅하도록 만들어지지 않았다는 점입니다. 파일을 건네주고 나머지는 사용자에게 맡깁니다. 그 시점에서 앞으로 나아갈 유일한 길은 GitHub, Netlify, Vercel 같은 개발자 도구뿐입니다. 이런 도구는 작동하긴 하지만 개발자를 위한 것입니다.

개발자 도구는 AI가 생성한 코드를 직접 실행할 수 있다는 점에서 좋습니다. 단점은 모든 변경이 특정 코드 파일을 편집해야 한다는 점입니다. 개발자가 아닌 사람들에게 이는 간단한 편집을 AI로 하려고 배포된 코드와 파일을 끊임없이 주고받아야 한다는 의미입니다.

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

Repaint란 무엇인가요?

Repaint는 웹사이트를 만들기 위한 AI 플랫폼입니다. 모든 것이 채팅에서 이루어집니다. 원하는 것을 설명하고, 결과를 검토하고, 사이트가 원하는 모습이 될 때까지 반복합니다.

하지만 Repaint는 단순히 코드를 생성하는 곳이 아니라 완전한 웹사이트 플랫폼입니다. 즉, AI 챗봇이 하지 않는 웹사이트 운영의 다음과 같은 부분을 처리해 줍니다.

• 사람들이 실제로 온라인에서 방문할 수 있도록 사이트를 게시합니다.
• 커스텀 도메인을 연결할 수 있어 사이트가 실제 URL에서 운영됩니다.
• AI로 사이트를 계속 편집할 수 있어 나중에도 변경할 수 있습니다.
• 페이지 제목, 설명, 사이트 구조 같은 SEO 세부 사항을 관리해 줍니다.
• 사이트가 커져야 할 때 새 페이지를 만들 수 있습니다.

이것이 바로 코드 파일을 소유하는 것과, 시간이 지남에 따라 사이트를 관리할 수 있는 실제 공간을 갖는 것의 차이입니다.

1단계: 코드 가져오기

ChatGPT, Claude, Gemini 같은 챗봇이 웹사이트를 만들어 주면, 결과물은 보통 요청한 내용에 따라 HTML 또는 React 형식의 단일 코드 파일입니다. 이 챗봇들은 모두 UI에서 파일을 복사할 수 있게 해줍니다.

시작하려면 코드가 생성된 곳에서 코드를 복사하세요. 그런 다음 Repaint 코드 임포터로 이동해 붙여넣으세요. 이렇게 웹사이트 구축 과정이 시작됩니다. Repaint는 여러분의 코드를 사용해 게시하고 계속 편집할 수 있는 완전한 웹사이트를 만듭니다.

선택할 수 있다면 React를 요청하는 것을 추천합니다. Repaint가 사용하는 형식에 더 가까워서, 작은 디자인 디테일이 변환 과정에서 사라질 가능성이 적습니다. HTML도 작동하며, 문제가 있다면 나중에 Repaint와 대화해 수정할 수 있습니다.

특정 챗봇에서 코드를 받았다면, 그에 맞춘 가이드를 따를 수도 있습니다: ChatGPT, Claude, Gemini.

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

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

콘텐츠 계획하기

단일 코드 파일로 만든 사이트는 보통 새 페이지를 여는 대신 링크가 섹션으로 스크롤되는 원페이지 사이트입니다. 하지만 대부분의 비즈니스는 한 페이지만으로는 부족합니다. 원페이지 사이트라면 Repaint가 여러 페이지로 구축하도록 하는 것을 고려해 보세요.

이 기회에 더 많은 콘텐츠를 추가할 수도 있습니다. 단일 코드 파일은 블로그 게시물 같은 것을 포함한 완전한 웹사이트를 다루는 경우가 거의 없습니다. 코드를 Repaint에 가져올 때 원하는 모든 것을 포함하도록 범위를 늘릴 수 있습니다.

새 페이지는 이미 가진 스타일과 어울리게 만들어집니다.

스타일 계획하기

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

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

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

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

계획 검토하기

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

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

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

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

Repaint는 붙여넣은 코드를 그대로 호스팅하는 것이 아닙니다. 원본을 소스 자료로 사용한 다음, 계획에 설명된 사이트를 구축합니다. 원본을 정확히 재현해 달라고 요청했다면 원본과 비슷하게 맞추려고 시도합니다. 더 많은 페이지나 다른 스타일을 요청했다면 원본을 출발점으로 삼습니다.

생성 과정에서 세부 사항이 변환 중 사라질 수 있습니다. 원본 파일이 HTML이면 더 자주 발생합니다. React가 Repaint가 사용하는 것에 더 가깝기 때문입니다. 중요한 세부 사항이 누락되면 다음 단계에서 수정할 수 있습니다.

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

Repaint가 첫 번째 버전을 생성하면 화면 오른쪽에서 확인할 수 있습니다. 이제 챗봇에서 하는 것과 동일한 방식으로 변경할 수 있습니다. 변경하고 싶은 내용을 입력하면 Repaint가 사이트를 업데이트하고, 그 결과를 검토할 수 있습니다.

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

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

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

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

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

이 시점에서 여러분의 작업물이 인터넷의 실제 웹사이트가 됩니다. 휴대폰에서 열거나, 누군가에게 보내거나, 실제 브라우저에서 테스트할 수 있습니다.

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

6단계: 도메인 연결하기

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

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

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

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

마무리

AI 덕분에 웹사이트의 첫 번째 버전을 생성하기는 쉬워졌지만, 그 코드를 온라인에 올리고 유지 관리하는 일은 여전히 어렵습니다. Repaint는 그 코드를 실제 웹사이트로 만들어 게시하고, 도메인을 연결하고, AI로 계속 편집할 수 있는 방법을 제공합니다. Repaint를 사용하면 AI가 생성한 코드를 게시된 사이트로 만드는 일이 그 어느 때보다 쉬워집니다.

자주 묻는 질문

코드를 생성하는 데 어떤 AI 도구를 썼는지가 중요한가요?

크게 중요하지 않습니다. 코드 파일만 있으면 Repaint가 사용할 수 있습니다. 사람들이 가장 자주 가져오는 도구는 ChatGPT, Claude, Gemini입니다. 그중 하나를 사용했다면 맞춤 가이드가 있습니다: ChatGPT, Claude, Gemini.

코드가 HTML인지 React인지 중요한가요?

아니요, 하지만 React가 약간 더 잘 변환되는 경향이 있습니다. Repaint는 둘 다 처리할 수 있습니다. 코드를 생성할 때 선택할 수 있다면 React를 요청하세요. 이미 HTML 파일이 있어도 괜찮으며, 임포트 후 Repaint와 대화해 작은 문제들을 수정할 수 있습니다.

Repaint로 AI가 생성한 코드를 웹사이트로 만드는 데 얼마나 걸리나요?

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

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

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

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

쓸 수 있습니다. 특히 코드 관리에 익숙하다면 더욱 그렇습니다. 그런 도구들은 파일을 온라인에 올리는 데 능숙합니다. 하지만 의미 있는 모든 변경은 결국 코드로 돌아가게 만들고, 결국 코드를 받은 곳, 에디터, 호스팅 도구 사이에서 파일을 복사하는 일에 갇히게 됩니다.

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

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

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

사이트가 원본과 똑같이 보일까요?

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

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

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

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

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

Repaint가 내 코드의 이미지, 아이콘, 기타 자산을 처리할 수 있나요?

AI가 생성한 코드는 보통 이미지 파일을 내부에 저장하지 않습니다. 대신 Unsplash 같은 다른 곳에 호스팅된 이미지를 링크하는 경우가 많습니다. 코드를 가져올 때 Repaint가 이러한 이미지를 가져와 사본을 저장해 새 사이트에서 영구적으로 사용할 수 있게 합니다. 추가로 필요한 이미지가 있다면 Repaint가 생성할 수도 있습니다.

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

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

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

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