ChatGPT로 만든 웹사이트를 게시하는 방법

소개

많은 사람들이 ChatGPT로 웹사이트를 만듭니다. 기본적으로 단일 React 또는 HTML 파일을 제공합니다. 하지만 코드를 받은 후의 다음 단계는 분명하지 않습니다. 어딘가에 호스팅하고, 도메인을 연결하고, 모바일에서도 작동하도록 만들고, 이후에 계속 편집할 방법까지 마련해야 합니다.

GitHub와 Netlify 같은 전통적인 개발자 도구는 HTML 파일을 온라인에 호스팅할 수 있지만, 이후 모든 편집마다 코드 파일, 배포, 기술적 세부 사항을 관리해야 합니다. 대부분의 사람들은 그런 일을 다루고 싶어 하지 않습니다.

이 가이드에서는 Repaint라는 새로운 AI 도구를 사용해 ChatGPT로 만든 웹사이트를 실제로 게시된 웹사이트로 바꾸는 방법을 보여드리겠습니다. 코드에서 시작해 사이트를 게시하고, AI와 대화하며 편집할 수 있게 해줍니다.

ChatGPT에서 게시하기가 어려운 이유

ChatGPT는 코드 미리보기를 생성할 수 있지만, 완전한 웹사이트 빌더는 아닙니다. 사이트를 게시하려고 하면 다른 플랫폼을 사용하라고 안내합니다. GitHub, Netlify, Vercel 같은 개발자 도구를 추천하거나 전통적인 웹사이트 빌더로 다시 만들 것을 제안합니다. 둘 다 이상적이지 않습니다.

개발자 도구의 장점은 ChatGPT가 생성한 코드를 직접 실행할 수 있다는 점입니다. 단점은 모든 변경마다 특정 코드 파일을 수정해야 한다는 것입니다. 코더가 아닌 사람에게 이는 단순한 편집을 AI로 하기 위해 배포된 코드와 파일을 끊임없이 주고받아야 한다는 뜻입니다.

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

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

Repaint란?

Repaint는 웹사이트를 만들기 위한 AI 플랫폼입니다. ChatGPT를 유용하게 만드는 것과 동일한 채팅 기반 워크플로를 중심으로 구축되었습니다. 평범한 한국어로 변경을 요청하고, 결과를 검토하며, 사이트가 만족스러울 때까지 반복할 수 있습니다.

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

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

이것이 웹사이트 미리보기를 생성하는 것과 시간이 지나도 관리할 수 있는 실제 공간을 갖는 것의 차이입니다.

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

ChatGPT가 웹사이트를 만들 때 단일 코드 파일을 만들고 캔버스에 표시합니다. 보통 React이지만 HTML일 수도 있습니다. 어느 쪽이든 캔버스 상단의 버튼을 사용해 코드를 복사하거나 파일을 다운로드할 수 있습니다.

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

아직 ChatGPT에서 웹사이트를 만들지 않았다면 React로 요청하는 것을 추천합니다. Repaint가 사용하는 형식에 더 가깝기 때문에 변환 과정에서 작은 디자인 세부 사항을 잃을 가능성이 줄어듭니다. HTML도 작동하지만, 문제가 발생하면 나중에 Repaint와 대화해 수정할 수 있습니다.

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

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

콘텐츠 계획하기

ChatGPT는 종종 새 페이지를 여는 대신 섹션으로 스크롤하는 링크가 있는 한 페이지 사이트를 만듭니다. 하지만 대부분의 비즈니스는 단일 페이지 이상이 필요합니다. 그래서 한 페이지 사이트가 있다면 Repaint가 여러 페이지로 만들어 주는 것을 고려해야 합니다.

이때 콘텐츠를 더 추가할 수도 있습니다. ChatGPT는 보통 블로그 게시물처럼 많은 페이지를 만들지 않습니다. Repaint로 사이트를 가져올 때 원하는 모든 것을 포함하도록 범위를 늘릴 수 있습니다.

새 페이지는 이미 가지고 있는 스타일과 일치합니다.

스타일 계획하기

기본적으로 Repaint는 ChatGPT 사이트의 스타일을 복사합니다. 즉, 같은 모습을 유지합니다. 색상, 레이아웃, 타이포그래피, 간격까지요.

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

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

너무 스트레스 받지 마세요. 만들어진 것이 마음에 들지 않으면 나중에 새 버전을 만들어 달라고 요청할 수 있습니다.

계획 검토하기

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

확인하면 Repaint가 새 웹사이트를 만듭니다!

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

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

Repaint는 단순히 붙여넣은 코드를 호스팅하는 것이 아닙니다. ChatGPT 버전을 원본 자료로 사용한 다음, 계획에 설명된 사이트를 구축합니다. 정확한 재현을 요청했다면 원본에 가깝게 맞추려고 합니다. 더 많은 페이지나 다른 스타일을 요청했다면 ChatGPT 버전을 출발점으로 사용합니다.

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

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

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

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

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

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

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

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

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

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

6단계: 도메인 연결하기

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

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

이전에 해본 적이 없어도 걱정하지 마세요. Repaint에게 단계별로 안내해 달라고 요청하세요. 정확히 무엇을 해야 할지 하나씩 알려드립니다.

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

마무리

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

자주 묻는 질문

Repaint로 ChatGPT 웹사이트를 게시하는 데 얼마나 걸리나요?

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

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

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

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

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

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

문제를 해결하기 위해 코드를 알아야 하나요?

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

사이트가 ChatGPT 버전과 똑같이 보일까요?

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

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

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

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

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

Repaint가 ChatGPT 사이트의 이미지, 아이콘, 기타 에셋을 처리할 수 있나요?

ChatGPT에서 만든 사이트는 보통 이미지 파일을 내부에 저장하지 않습니다. 보통 다른 곳에 호스팅된 이미지에 링크합니다. 코드를 가져올 때 Repaint는 그 이미지의 사본을 가져와 저장해 새 사이트에서 영구적으로 사용할 수 있도록 합니다. Repaint는 아직 추가해야 할 이미지가 있다면 이미지를 생성할 수도 있습니다.

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

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

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

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