AI로 Webflow 웹사이트를 다시 만드는 방법

소개

Webflow는 훌륭한 웹사이트를 만들 수 있는 강력한 도구이지만, 사용하기가 매우 어렵기로도 유명합니다. 수천 개의 기업이 Webflow에 갇혀 있다고 느낍니다.

최근 AI 도구들 덕분에 AI와 대화하는 것만으로 그만큼 훌륭한 사이트를 만들 수 있게 되었습니다. 그리고 이미 Webflow 사이트가 있다면, 처음부터 다시 시작하지 않고도 자동으로 다시 만들 수 있습니다.

이 가이드에서는 Webflow 웹사이트를 Repaint라는 새로운 AI 도구로 이전하는 방법을 소개합니다.

Webflow 웹사이트를 왜 다시 만들어야 할까요?

AI 웹사이트 빌더는 Webflow보다 훨씬 사용하기 쉽습니다. 복잡한 비주얼 에디터를 배우는 대신, 원하는 것을 설명하면 바로 실행됩니다. 덕분에 모든 변경을 위험 부담으로 여기지 않고 사이트를 실제로 최신 상태로 유지할 수 있습니다.

대부분의 사람이 이전하지 못한 이유는 Webflow를 떠나려면 항상 처음부터 모든 걸 다시 만들어야 했기 때문입니다. AI 도구가 그 공식을 바꿨습니다. 이제 처음부터 시작하거나 수천 달러를 지불하지 않고도, 기존에 가진 것을 더 쉬운 곳으로 옮길 수 있습니다.

AI 웹사이트 이전은 어떻게 작동하나요?

AI 이전은 기존 사이트를 읽어 새 플랫폼에 다시 만드는 방식으로 작동합니다. 콘텐츠, 이미지, 레이아웃을 가져와 AI와 대화하며 편집할 수 있는 새 버전을 생성합니다. 만족스러우면 도메인을 이전하고 끝입니다.

원본을 그대로 복사하려 하면 80% 정도만 재현됩니다. AI는 변환 과정에서 세부 사항을 놓치는 경우가 있습니다. 특히 애니메이션은 이전하기가 어렵습니다. 하지만 콘텐츠를 이전하고 레이아웃을 재현하는 데는, 어떤 템플릿보다 훨씬 가깝게 만들어집니다. 이후 AI에게 변경을 요청해 세부 사항을 다듬으면 됩니다.

사이트가 5년이 넘어 낡은 느낌이 든다면, 디자인을 바꾸기에 좋은 시점이기도 합니다. Repaint는 기존 콘텐츠를 바탕으로 완전히 새로운 디자인을 만들어 줄 수 있습니다.

1단계: 콘텐츠 가져오기

시작하려면 Repaint를 방문하세요. 화면 상단에서 Webflow 웹사이트 링크를 입력하면 웹사이트 재구성 과정이 시작됩니다. Repaint는 사이트를 스캔하고, 이미지를 다운로드하며, 각 페이지의 스크린샷을 찍어 기존 사이트를 파악합니다.

이 기능은 공개된 웹사이트에만 작동합니다. Webflow 사이트가 xxxx-xxxx-xxxx.webflow.io와 같은 무료 Webflow 서브도메인에 있더라도 게시된 상태여야 합니다.

Repaint가 비즈니스를 충분히 파악하면, 새 사이트 계획을 위한 질문을 시작합니다. 안내에 따라 진행되므로 미리 준비할 것은 없습니다.

2단계: 새 웹사이트 계획하기

무언가를 만들기 전에 Repaint는 원하는 방향을 파악하기 위해 질문합니다. 보통 3~5개의 메시지 정도 걸립니다. 짧은 인터뷰라고 생각하세요. Repaint는 어떤 페이지를 유지할지, 구조를 재정리할지, 어떤 스타일을 사용할지 파악하려 합니다. 답변을 마치면 확인할 수 있는 계획서를 작성합니다.

무엇을 원하는지 잘 모르겠다면 괜찮습니다. Repaint가 계획을 제안하도록 할 수 있습니다. 마음에 들지 않으면 언제든지 다시 시도해 달라고 요청할 수 있습니다. 첫 번째 시도에 구애받을 필요가 없습니다.

콘텐츠 계획하기

가장 간단한 방법은 모든 것을 그대로 가져오는 것입니다. 같은 페이지, 같은 텍스트, 같은 이미지. 현재 사이트 구조가 잘 작동하고 관리할 더 좋은 도구만 원한다면 이 방법이 적합합니다.

하지만 사이트가 시간이 지나면서 복잡해졌다면, 이번이 정리할 기회입니다. 오래된 블로그 게시물, 지난 캠페인의 랜딩 페이지, 또는 의미 없는 섹션이 있을 수 있습니다. 어떤 페이지를 유지하고 어떤 것을 건너뛸지 Repaint에 알려주거나, 발견한 내용을 바탕으로 더 간단한 구조를 제안해 달라고 요청할 수 있습니다.

Webflow 사이트가 블로그, 사례 연구, 포트폴리오 같은 CMS 컬렉션을 사용한다면 함께 가져올 수 있습니다. CMS 페이지는 반복되는 템플릿을 따르므로, 레이아웃이 올바른지 확인하기 위해 하나 또는 두 개만 먼저 시작하세요. 또한 사이트에 페이지가 20개 이상이면, 한 번에 모두 가져오면 무료 사용량 한도를 모두 소진할 가능성이 높습니다. 계속하려면 업그레이드 안내가 표시될 것입니다. 대규모 사이트의 경우 일부 샘플로 시작해 초기 사이트를 확인한 후 나머지를 가져오는 것이 좋습니다.

스타일 계획하기

새 사이트의 디자인 방향에는 몇 가지 선택지가 있습니다.

• 기존 디자인 재현
• 다른 웹사이트 스타일 참고
• Repaint의 스타일 라이브러리에서 선택
• 직접 커스텀 스타일 요청
• Repaint가 결정하도록 맡기기

어떤 방식을 선택하든 결과물을 커스터마이즈할 수 있습니다. Repaint는 어떤 스타일에도 브랜드 색상과 폰트를 적용할 수 있으므로, 처음 선택한 것에만 국한되지 않습니다.

계획 검토하기

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

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

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

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

내부적으로 Repaint는 콘텐츠와 스타일을 바탕으로 새 사이트의 코드를 작성합니다. 완료되면 결과를 보여주기 전에 명확한 문제를 잡기 위해 만든 것의 스크린샷을 찍습니다.

첫 번째 버전에서 몇 가지 거친 부분이 보일 수 있습니다. 읽기 어려운 텍스트가 있는 버튼, 너무 작은 로고, 어색해 보이는 간격 같은 것들입니다. 이는 정상이며, Repaint와 대화해 이런 세부 사항을 수정할 수 있습니다.

매끄럽게 이전되지 않을 수 있는 한 가지는 애니메이션입니다. Webflow는 강력한 애니메이션 시스템을 갖추고 있으며, AI는 스크린샷만으로 애니메이션이 어떻게 작동하는지 파악하는 데 어려움을 겪는 경우가 많습니다. 원하는 내용을 설명해 누락된 스크롤 효과, 호버 애니메이션, 페이지 전환을 다시 만들어야 합니다. Repaint는 동일한 애니메이션을 만들 수 있습니다. 다만 항상 자동으로 이전되지는 않습니다.

4단계: 세부 조정하기

사이트를 생성한 후 Repaint와 대화해 변경 사항을 적용할 수 있습니다.

먼저 색상, 폰트, 레이아웃 같은 전반적인 시각적 스타일을 평가하세요. 모든 것이 그 위에 만들어지는 기반입니다. 나중에 변경하기로 결정하면 사이트 전체를 재구성할 수 있으며, 이전에 다듬은 세부 작업들이 효과적으로 취소될 수 있습니다.

전반적인 스타일이 마음에 들면 세부 사항을 점검할 수 있습니다. 텍스트가 정확한지, 이미지가 올바른 위치에 있는지, 링크가 작동하는지, 모든 페이지에서 간격이 올바르게 보이는지 확인하세요.

SEO 검토하기

Webflow 사이트가 검색 트래픽을 받고 있었다면, 이전 중에 SEO에 주의를 기울일 가치가 있습니다. Google은 웹사이트 전체가 아닌 개별 페이지를 순위에 반영합니다. 사이트의 각 페이지는 시간이 지남에 따라 자체적인 순위를 쌓아왔으며, 그 순위는 특정 URL과 연결되어 있습니다. 새 플랫폼으로 이동할 때 URL이 변경되거나 사라지면 Google은 해당 페이지를 기록이 없는 새 페이지로 취급하고, 그 트래픽을 잃게 됩니다.

Repaint에게 기존 사이트와 새 사이트를 비교하고, Webflow에서의 URL과 동일한 URL로 모든 페이지가 존재하는지 확인해 달라고 요청하세요. URL이 변경된 경우 Google이 경로를 따를 수 있도록 이전 URL에서 새 URL로 리디렉션을 설정해야 합니다. Repaint가 이 작업도 도와드릴 수 있습니다.

사이트가 잘 보이고 콘텐츠가 올바르면, 게시할 준비가 된 것입니다.

5단계: 게시하기

준비가 되면 오른쪽 상단의 게시 버튼을 누르세요. Webflow에서 게시하는 것과 동일한 방식입니다. 사이트가 누구에게나 공유할 수 있는 Repaint URL에서 라이브 상태가 됩니다. 다음과 같은 형태입니다: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

이제 인터넷에 있는 실제 웹사이트가 됩니다. 휴대폰에서 열거나, 친구에게 보내거나, 소셜 미디어에 게시할 수 있습니다.

이 시점에서는 두 개의 웹사이트가 라이브 상태입니다. 하나는 Repaint에, 하나는 Webflow에 있습니다. 도메인은 여전히 Webflow 사이트를 가리키므로, 방문자에게는 아직 아무것도 변경되지 않았습니다. 전환할 준비가 되면 도메인을 새 사이트로 이전할 수 있습니다.

6단계: 도메인 이전하기

라이브로 전환할 준비가 되면 도메인이 Repaint를 가리키도록 설정해야 합니다. 웹사이트 설정 > 도메인으로 이동해 커스텀 도메인 연결을 클릭하세요. 이 기능은 유료 플랜이 필요합니다. 가격 세부 정보는 여기에서 확인할 수 있습니다.

도메인은 Webflow와 별개입니다. GoDaddy, Namecheap, Cloudflare 같은 도메인 공급업체에 등록되어 있습니다. 도메인을 이전할 필요는 없습니다. 도메인 공급업체의 설정만 업데이트해 도메인이 Webflow 대신 Repaint를 가리키도록 하면 됩니다. 다른 사람이 웹사이트를 설정했다면, 이 단계를 시작하기 전에 도메인 공급업체의 로그인 계정을 확보하세요.

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

변경 사항이 적용되는 데 몇 시간이 걸릴 수 있습니다. Repaint에서 도메인이 확인됨으로 표시되면 라이브 상태가 된 것입니다. 준비가 되면 언제든지 Webflow 플랜을 해지할 수 있습니다.

마무리

몇 년 동안 Webflow에서 이전한다는 것은 처음부터 다시 만들거나 돈을 내고 누군가에게 맡기는 것을 의미했습니다. 이제는 더 이상 그렇지 않습니다. Repaint에 콘텐츠를 가져오고, 몇 분 안에 작동하는 사이트를 얻고, 복잡한 도구를 배우지 않고도 직접 관리할 수 있습니다. 너무 많은 작업처럼 느껴져 재구성을 미뤄왔다면, 지금이 시도해볼 좋은 시점입니다.

자주 묻는 질문

Webflow 이전은 얼마나 걸리나요?

사이트 계획, 콘텐츠 가져오기, 새 웹사이트 생성까지 보통 3~15분이 걸립니다. 이후 게시까지 걸리는 시간은 필요한 조정 횟수와 추가 콘텐츠 가져오기 여부에 따라 다릅니다. 대부분의 사이트는 길어도 몇 시간 안에 이전할 수 있습니다.

모바일에서도 동일하게 보이나요?

Repaint는 자동으로 다양한 화면 크기에 맞게 사이트를 구축합니다. 대부분의 경우 신경 쓸 필요가 없습니다. 하지만 어색한 부분이 있다면 특정 기기 크기에 맞게 변경해 달라고 Repaint에 요청할 수 있습니다.

이전 후에도 폼이 계속 작동하나요?

네. Repaint는 받은 편지함으로 이메일을 보내는 문의 폼을 만들 수 있습니다. Typeform이나 Google Forms 같은 커스텀 임베드를 사용한다면 Repaint가 연결을 시도하지만, 임베드 코드를 Repaint에 공유해야 할 수도 있습니다.

이전 중 Webflow 사이트는 어떻게 되나요?

이전하는 동안 Webflow 사이트에는 아무것도 일어나지 않습니다. 완전히 별개입니다. Repaint에서 새 사이트를 만드는 것뿐입니다. 새 사이트에 만족하면 도메인을 이전해 새 사이트를 가리키도록 할 수 있습니다. Webflow 사이트를 유지하기로 결정했다면 아무것도 할 필요가 없습니다.

e커머스가 있는 Webflow 사이트도 이전할 수 있나요?

부분적으로 가능합니다. Repaint는 e커머스용 웹사이트를 만들 수 있지만, 결제 프로세스를 구축하거나 결제를 처리하지는 않습니다. 상품을 판매해야 한다면 Shopify나 Stripe 같은 서드파티 서비스에 연결해야 합니다. 스토어에 임베드 가능한 위젯이 있다면 임베드 코드를 Repaint에 공유하면 통합해 드립니다.

한 페이지만 이전해 볼 수 있나요?

네. 한 페이지만 가져와 시험해 볼 수 있습니다. Repaint가 비즈니스에 적합한지 확인하는 좋은 방법입니다. 결과에 만족하면 나머지 사이트를 구축해 달라고 Repaint에 요청하면 됩니다.

Webflow에서 Repaint로 이전하는 데 비용이 얼마나 드나요?

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

AI가 실수를 하면 어떻게 되나요? 개별 변경 사항을 되돌릴 수 있나요?

업데이트할 때마다 Repaint는 사이트의 모든 버전을 저장합니다. Repaint에게 되돌려 달라고 요청하면 이전 버전으로 복원됩니다. 또는 특정 시점으로 돌아가고 싶다면 이전 버전을 수동으로 복원할 수 있습니다.

Repaint는 Webflow의 커스텀 코드나 서드파티 임베드를 어떻게 처리하나요?

Repaint는 Webflow 사이트의 커스텀 코드나 임베드를 실행할 수 있습니다. 첫 번째 단계에서 모든 것을 자동으로 이전하려 하지만, 종종 무언가를 놓치는 경우가 있습니다. 그런 경우 채팅에 임베드 코드를 붙여넣으면 Repaint가 처리합니다.