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

소개

많은 사람들이 Gemini를 사용해 웹사이트를 만들고 있습니다. Canvas 도구를 켜면 Gemini가 미리보기를 옆에 두고 단일 HTML 또는 React 파일을 만들어 줍니다. 하지만 코드를 얻은 다음 단계는 명확하지 않습니다. 어딘가에 호스팅하고, 도메인을 연결하고, 모바일에서 작동하게 하고, 이후에도 계속 편집할 방법을 찾아야 합니다.

GitHub나 Netlify 같은 전통적인 개발자 도구로 파일을 온라인에 올릴 수는 있지만, 그러면 모든 수정 작업마다 코드 파일과 배포, 기술적인 세부 사항을 직접 관리해야 합니다. 대부분의 사람은 그런 일을 하고 싶어 하지 않습니다.

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

Gemini에서 게시가 어려운 이유

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

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

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

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

Repaint란 무엇인가요?

Repaint는 웹사이트를 만들기 위한 AI 플랫폼입니다. Gemini를 유용하게 만드는 채팅 기반 워크플로와 같은 방식으로 만들어졌습니다. 평범한 영어로 변경 사항을 요청하고, 결과를 검토하고, 사이트가 원하는 모습이 될 때까지 계속 반복할 수 있습니다.

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

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

이것이 코드 파일을 생성하는 것과, 시간이 지나도 사이트를 관리할 수 있는 진짜 공간을 갖는 것의 차이입니다.

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

Gemini가 웹사이트를 만들 때, Canvas 패널에 코드와 라이브 미리보기를 보여줍니다. 기본적으로 출력은 HTML이지만 React로 요청할 수도 있습니다. 알아두면 좋은 한 가지 특이점은, 웹사이트를 요청해도 Gemini가 자동으로 Canvas를 열어주지는 않는다는 점입니다. 메시지 박스 옆 드롭다운에서 Canvas 도구를 켠 다음 다시 요청해야 합니다.

코드를 가져오려면 Canvas 상단의 Share 버튼을 클릭한 다음 Copy contents를 클릭하세요. Repaint 코드 가져오기로 이동해 붙여넣으세요. 이렇게 하면 웹사이트 구축 프로세스가 시작됩니다. Repaint는 코드를 사용해 게시하고 계속 편집할 수 있는 완전한 웹사이트를 만듭니다.

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

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

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

콘텐츠 계획하기

Gemini는 종종 링크가 새 페이지로 이동하지 않고 섹션으로 스크롤되는 단일 페이지 사이트를 만듭니다. 하지만 대부분의 비즈니스는 한 페이지 이상이 필요합니다. 그래서 한 페이지 사이트라면, Repaint가 여러 페이지로 만들도록 하는 것을 고려해 보세요.

또한 이 시점을 활용해 더 많은 콘텐츠를 추가할 수 있습니다. Gemini는 보통 블로그 게시물 같은 큰 페이지 묶음을 만들지 않습니다. 사이트를 Repaint로 가져올 때 원하는 모든 것을 포함하도록 범위를 확장할 수 있습니다.

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

스타일 계획하기

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

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

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

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

계획 검토하기

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

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

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

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

Repaint는 단순히 붙여넣은 코드를 호스팅하는 것이 아닙니다. Gemini 버전을 원자재로 사용하고, 계획서에 설명된 사이트를 구축합니다. 그대로 재현하도록 요청했다면 원본과 최대한 비슷하게 맞추려고 합니다. 더 많은 페이지나 다른 스타일을 요청했다면 Gemini 버전을 출발점으로 사용합니다.

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

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

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

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

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

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

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

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

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

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

6단계: 도메인 연결하기

자체 URL을 사용할 준비가 되면 Website Settings > Domains로 이동해 Connect a Custom Domain을 클릭하세요. 이 기능은 유료 플랜이 필요합니다. 가격 세부 정보는 여기에서 확인할 수 있습니다.

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

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

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

마무리

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

자주 묻는 질문

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

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

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

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

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

쓸 수 있습니다. 특히 코드를 관리하는 데 익숙하다면요. 이런 도구들은 파일을 온라인에 올리는 데 능숙합니다. 하지만 의미 있는 변경 사항은 항상 다시 코드로 돌아가게 만들고, 그 결과 Gemini, 에디터, 호스팅 도구 사이에서 파일을 복사하는 일에 묶이게 됩니다.

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

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

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

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

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

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

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

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

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

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

Gemini는 종종 Unsplash 같은 소스에서 이미지를 가져와 코드 내부에 저장하지 않고 URL로 링크합니다. 코드를 가져올 때 Repaint는 그 이미지의 사본을 가져와 저장해 새 사이트에서 영구적으로 사용할 수 있게 합니다. 추가해야 할 이미지가 있다면 Repaint가 이미지를 생성할 수도 있습니다.

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

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

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

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