Webflow로 만든 사이트를 저렴한 서버로 이전하는 방법

Webflow의 코드 출력

Webflow의 코드 출력이란 Webflow로 만든 사이트의 HTML·CSS·JS를 파일로 내보내는 기능입니다. 워크스페이스 “프리랜서 플랜 월 $16” 가입이 필요하며 출력 자체는 3클릭입니다.

안녕하세요, Webflow 전문가 마사토입니다. 다음 질문에 답합니다.

“Webflow로 만든 사이트를 싸게 유지하고 싶다. Webflow를 해지한 후에도 사이트와 도메인은 남기고 싶다. 출력한 코드는 어디를 편집하면 되는지 알고 싶다.”

✓이 글에서 배울 수 있는 것

• Webflow에서 자체 서버로의 이전 방법
• 싸고 시간을 아낄 수 있는 서버
• Webflow에서 출력한 코드의 사용법

이 글을 쓰는 저는 Webflow로 사업을 하며 실적·서포트 50개사 이상. 실제로 코드를 출력해 사이트를 공개한 경험이 있어 그 경험을 공유합니다. 전문 지식은 불필요합니다. 노코드밖에 못해도 이해할 수 있게 소개합니다.

Webflow에서 이전하기 위해 필요한 정보

• 코드 출력: 워크스페이스 “프리랜서 플랜 월 $16” 가입 필요
• 출력은 3클릭으로 종료
• CMS 글은 함께 출력되지 않음
• 폼이 작동하지 않게 됨→Google 폼으로 대체가 편함

코드 출력은 아래 이미지의 버튼 클릭→저장으로 완료입니다.

이번에는 CMS 없는 고정 페이지만 출력합니다. CMS를 포함하는 경우 WordPress로의 이관이 되므로 작업 내용이 달라집니다. 그쪽 내용은 커뮤니티에서 요청이 있으면 해설합니다.

Webflow 이전에 추천하는 서버

이번에 사용하는 것은 롤리팝(Lolipop) 서버(일본의 저가 렌털 서버)입니다. 고른 이유는 다음과 같습니다.

• 매우 저렴 “1년: 약 5,000엔, 3년: 약 7,000엔”
• 오래되고 유명하다

Webflow로 사이트를 공개하면 CMS 없는 경우 월 14달러(약 2,100엔)입니다. 유지비는 100엔이라도 줄이고 싶어 최저가 서버를 찾았습니다. 한국이라면 같은 원리로 저가 렌털 서버(호스팅)를 고르면 됩니다. 이왕이면 소개 링크도 붙여 둡니다. 10일간 무료 체험은 이쪽.

Webflow에서 자체 서버로 이전하는 방법

다음 순서로 진행합니다. 약 5분 정도의 작업입니다.

1. 서버 계약
2. 서버의 사용자 페이지에서 자체 도메인 등록
3. 공개(업로드) 폴더에 도메인과 같은 이름 입력
4. 서버의 FTP를 연다
5. Webflow에서 출력한 파일을 FTP에 업로드
6. 서브도메인으로 “www. 도메인”의 공개 폴더 설정
7. 도메인 설정 변경(네임서버 전환)
8. SSL 설정 클릭
9. 완료: 하루 정도 기다렸다가 공개 확인

서버 계약

서버는 싼 곳부터 계약하고 PV가 늘면 업그레이드하면 OK라고 생각합니다.

도메인 계약

도메인은 SEO와 무관하지만, 멋진 것은 짧고 알기 쉬운 도메인입니다. 예를 들어 개인 블로그라면 “mblog.com”, 기업이라면 “recruit.co.jp” 같은 식입니다. 짧으면 도메인만 봐도 사이트를 알 수 있어 사용자에게 친절합니다.

어미의 .com, .jp 등은 어느 정도 유행이 있습니다. 노코드 업계에서는 .io가 많습니다. 2023년 11월 무렵에는 .ing가 새로 나와 조금 화제가 되었습니다. code.ing, eat.ing처럼 유니크해서 인기입니다. 각지의 유행을 보고 사는 것도 재미있습니다.

참고로 제 블로그는 “non-haru.com”입니다. 키우던 고양이들의 이름을 나열했습니다. 조금 더 짧아도 좋았겠다 싶지만 애착이 있으면 OK.

도메인 설정에는 NG 항목이 있습니다.

• 타사의 회사명을 넣는다
• SNS에서 BAN되는 이름(금지어 계열)

사용자 페이지에서 자체 도메인 등록

• 설정할 자체 도메인: 계약한 도메인 기재
• 공개(업로드) 폴더: 도메인명과 같은 이름 기재
• 가속 기능 설정: ON(어느 쪽이든 OK)

공개(업로드) 폴더에 도메인과 같은 이름 입력

저는 이 항목에서 헤맸으므로 제 이미지를 공유합니다.

• PC 파일＞A 서버(업로드)＞B 서버(로딩)＞사용자 표시

여기서 설정하는 “공개(업로드) 폴더”는 공개할 HTML이 저장된 폴더를 선택하는 것입니다. 먼저 “A 서버”에 올리는 작업을 합니다.

FTP에 파일 업로드

FTP에는 공개 폴더에서 기재한 이름의 폴더가 자동 생성되어 있습니다. 그 폴더에 Webflow에서 출력된 코드를 넣으면 공개할 수 있습니다.

Webflow에서 출력한 ZIP을 풀어 내용물을 전부 올립니다. HTML은 그대로, CSS 등 폴더로 된 것은 FTP 안에 폴더를 만들어 그 계층대로 넣습니다. 기본적으로 Webflow 출력 내용과 같은 구조로 만들면 잘됩니다.

“www. 도메인”의 공개 폴더 설정

Webflow 호스팅 시 www. 도메인으로도 공개했을 것이므로 서버에서도 www 설정을 합시다. 방금 만든 공개 폴더와 같은 이름을 기재하면 완료입니다.

도메인 설정 변경

도메인을 서버의 네임서버로 향하게 합니다. 롤리팝이라면 프라이머리 uns01.lolipop.jp, 세컨더리 uns02.lolipop.jp입니다. 호스팅마다 값이 다르니 사용하는 서비스의 안내를 확인하세요.

도메인 등록 업체에 접속해 Webflow 때 설정한 DNS를 삭제하고 서버의 네임서버로 전환합니다.

• 기본 네임서버 삭제
• 커스텀 네임서버를 열고 “설정 전환” 클릭
• 서버가 지정하는 네임서버(프라이머리/세컨더리)를 입력

SSL 설정 클릭

첫 화면으로 돌아가 SSL 항목에서 무료 SSL을 클릭합니다. 끝입니다.

완료: 하루 정도 기다렸다가 공개 확인

모든 작업이 끝나면 URL을 클릭해 확인합시다. 기본적으로 즉시 반영되지만 SSL과 www 쪽은 시간이 걸릴 수 있습니다. 작업이 끝나면 하루 정도 시간을 두고 확인해 봅시다. 실제로 저는 바로 확인하고 “에러가 나네” 하고 잤더니 해결되어 있었습니다.

Webflow의 코드 출력 파일을 편집한다

구체적으로는 이미지 파일명부터 메타태그, HTML·CSS·JS 이름 등 많은 변경 포인트가 있습니다. 변경하지 않아도 사이트 운영에는 문제없습니다.

클라이언트에 코드를 납품하는 경우 Webflow 사용을 알리는 것이 좋습니다. 잘 설명하면 일반 코더보다 높게 평가받고, Webflow 관리도 제안할 수 있어 일석이조입니다.

그래도 변경하고 싶은 분은 다음 순서로 진행하세요.

1. 클래스명 변경: Webflow는 특정 명명 규칙으로 클래스를 생성합니다. Webflow라는 클래스가 꽤 있습니다. 이 클래스명들을 바꿔 Webflow가 생성한 것과 달라 보이게 하는 것이 중요합니다.
2. 불필요한 메타태그 삭제: name=“generator” 같은 Webflow를 나타내는 메타태그를 HTML에서 삭제
3. 스타일시트 통합: 복수의 CSS 파일을 하나로 합치고 “webflow.css” 같은 파일명 변경
4. 스크립트 통합: 스크립트를 통합·최소화
5. Webflow 브랜드 요소 삭제
6. 코드 최적화: 잉여 코드 삭제와 파일 구조 커스터마이즈
7. 이미지 파일명 변경
8. Google 태그 매니저 사용: 트래킹 스크립트를 태그 매니저로 관리
9. 폼 변경: 폼은 Google 폼으로 대체했습니다