목차
Webflow 현지화: 다국어 웹사이트 구축 가이드
Webflow는 네이티브 현지화 지원을 도입하여 디자이너와 마케터가 Webflow Designer 내에서 직접 다국어 웹사이트를 구축할 수 있게 되었습니다. 이 기능은 각 언어별로 서드파티 번역 플러그인을 사용하거나 프로젝트 전체를 복제해야 할 필요성을 없애줍니다.
이 가이드에서는 Webflow 현지화의 작동 방식, 기능과 한계, SEO 처리 방법, 그리고 더 넓은 현지화 워크플로우에서의 활용법을 다룹니다.
Webflow 현지화 작동 방식
Webflow의 현지화 기능은 로케일 기반 시스템을 사용합니다. 기본 로케일(소스 언어)을 정의하고 추가 언어별로 보조 로케일을 추가하는 방식입니다.
주요 개념
- 기본 로케일 — 기본 언어입니다. 모든 콘텐츠는 기본 로케일에서 먼저 생성됩니다.
- 보조 로케일 — 추가 언어입니다. 각 보조 로케일은 기본 로케일의 텍스트, 이미지, 요소 가시성을 재정의할 수 있습니다.
- 로케일 서브폴더 — Webflow는 로케일 접두사가 포함된 URL을 생성합니다:
example.com/fr/about,example.com/de/about. - 로케일 전환기 — 방문자가 언어 간 전환할 수 있는 내장 컴포넌트입니다.
로케일 설정하기
- Webflow 프로젝트 설정 열기
- Locales 탭으로 이동
- 언어와 지역을 선택하여 보조 로케일 추가
- 각 로케일의 표시 이름과 URL 접두사 설정
Webflow는 BCP 47 표준을 따르는 다양한 언어-지역 조합을 지원합니다 (예: en-US, fr-FR, pt-BR).
콘텐츠 번역하기
정적 콘텐츠
정적 페이지 콘텐츠(제목, 단락, 버튼)의 경우, Webflow는 인컨텍스트 편집 경험을 제공합니다:
- Designer의 로케일 전환기를 사용하여 보조 로케일로 전환
- 텍스트 요소 클릭 — 기본 로케일 텍스트가 참조로 표시됨
- Designer에서 직접 번역된 텍스트 입력
- 시각적 서식과 스타일은 로케일 전반에 걸쳐 일관되게 유지됨
이 인라인 방식은 디자이너와 번역가가 번역된 텍스트가 최종 레이아웃에 어떻게 표시될지 정확히 확인할 수 있어, 오버플로우나 레이아웃 문제를 즉시 발견할 수 있습니다.
CMS 콘텐츠
Webflow CMS 컬렉션은 로케일별 콘텐츠를 지원합니다:
- 각 CMS 필드는 로케일별 값을 가질 수 있습니다
- 컬렉션 페이지는 로케일 접두사 URL을 자동으로 생성합니다
- 서식 있는 텍스트 필드, 이미지, 기타 필드 유형 모두 현지화 가능합니다
- 참조 및 다중 참조 필드는 로케일에 적합한 관련 콘텐츠를 가리키도록 현지화할 수 있습니다
예를 들어, 블로그 포스트 컬렉션은 각 로케일마다 다른 제목, 본문 콘텐츠, 대표 이미지를 가질 수 있으며, 동일한 슬러그 구조를 공유합니다.
현지화 가능한 요소
- 텍스트 콘텐츠 — 모든 텍스트 요소 (제목, 단락, 링크, 버튼)
- 이미지 및 대체 텍스트 — 로케일별 이미지 교체 (현지화된 UI가 포함된 스크린샷에 유용)
- 요소 가시성 — 로케일별 특정 요소 표시 또는 숨기기
- 링크 URL — 로케일별 링크 대상 변경 (예: 로케일별 문서)
- 폼 필드 — 플레이스홀더 텍스트 및 레이블 현지화
- CMS 콘텐츠 — 모든 CMS 필드 유형에서 로케일별 값 지원
공유되는 요소
- 레이아웃 및 구조 — 페이지 레이아웃은 모든 로케일에서 공유됩니다
- 스타일 및 클래스 — CSS 스타일링은 전역적입니다
- 인터랙션 및 애니메이션 — 트리거와 애니메이션은 모든 로케일에 적용됩니다
- 커스텀 코드 — 임베드된 스크립트는 공유됩니다 (언어 감지는 직접 처리해야 합니다)
SEO 및 다국어 처리
Webflow의 현지화 기능은 여러 SEO 요구사항을 자동으로 처리합니다.
hreflang 태그
Webflow는 각 페이지의 <head>에 hreflang 태그를 자동으로 생성합니다:
<link rel="alternate" hreflang="en" href="https://example.com/about" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/about" /> <link rel="alternate" hreflang="de" href="https://example.com/de/about" /> <link rel="alternate" hreflang="x-default" href="https://example.com/about" />
이 태그는 검색 엔진에 각 지역의 사용자에게 어떤 언어 버전을 표시해야 하는지 알려줍니다.
Sitemap
생성된 sitemap.xml에는 각 페이지의 모든 로케일 변형이 포함되어, 검색 엔진이 모든 언어 버전을 발견하고 색인화하는 데 도움이 됩니다.
로케일별 메타 태그
다음 항목에 로케일별 값을 설정할 수 있습니다:
- 페이지 제목 (
<title>) - 메타 설명
- Open Graph 제목 및 설명
- Open Graph 이미지
이를 통해 각 로케일이 검색 엔진과 소셜 공유에 최적화된 메타데이터를 갖출 수 있습니다.
한계점
기계 번역 미지원
Webflow에는 내장된 기계 번역 기능이 없습니다. 모든 번역은 Designer를 통해 수동으로 입력하거나 Webflow API를 통해 가져와야 합니다. 이는 품질을 우선시하는 의도적인 설계 선택이지만, 초기 번역 작업이 전적으로 사용자에게 달려 있음을 의미합니다.
레이아웃 제약
모든 로케일이 동일한 레이아웃을 공유하기 때문에, 특정 언어에서 텍스트가 현저히 길거나 짧으면 레이아웃 문제가 발생할 수 있습니다. 독일어 텍스트는 영어보다 30-40% 더 길 때가 많으며, 중국어와 일본어 텍스트는 더 간결할 수 있습니다. 가장 긴 대상 언어로 레이아웃을 테스트하여 컨테이너가 오버플로우를 올바르게 처리하는지 확인하시기 바랍니다.
복수형 또는 변수 미지원
Webflow의 현지화는 ICU MessageFormat, 복수형 규칙, 변수 보간을 지원하지 않습니다. 모든 텍스트 변형은 별도의 완전한 문자열이어야 합니다. 개수나 사용자 데이터에 따라 달라지는 동적 콘텐츠의 경우 커스텀 JavaScript가 필요합니다.
API 전용 대량 작업
Webflow Designer에는 번역을 위한 내장 일괄 가져오기/내보내기 기능이 없습니다. 수백 개의 페이지가 있는 대형 사이트의 경우, 비주얼 에디터를 통해 수동으로 번역하는 것은 시간이 많이 소요됩니다. Webflow API는 프로그래밍 방식의 콘텐츠 관리를 지원하여 외부 번역 도구와의 통합을 가능하게 합니다.
외부 TMS와의 통합
대규모로 번역을 관리하는 팀의 경우, API를 통해 Webflow를 번역 관리 시스템(TMS)과 통합하면 다음이 가능합니다:
- 내보내기 — Webflow CMS API를 통해 소스 언어 콘텐츠 추출
- 번역 — 전문 번역가가 번역 메모리, 용어집, 컨텍스트를 갖춘 TMS에서 작업
- 가져오기 — API를 통해 완료된 번역을 Webflow로 다시 업로드
이 워크플로우는 특히 다음과 같은 경우에 유용합니다:
- 50개 이상의 페이지 또는 CMS 항목이 있는 사이트
- 전문 번역가 또는 에이전시와 협력하는 팀
- 일관성 유지를 위해 번역 메모리가 필요한 조직
- Webflow 및 기타 플랫폼에 걸쳐 용어 관리가 필요한 프로젝트
모범 사례
가장 긴 언어를 기준으로 디자인하기
레이아웃 생성 시 텍스트 확장을 고려하시기 바랍니다. 영어 "Sign Up"이 들어가는 컨테이너는 독일어 "Registrieren"이나 프랑스어 "Inscription"을 수용할 수 있어야 합니다. 고정 치수 대신 유연한 컨테이너(flexbox, auto-height)를 사용하시기 바랍니다.
반복 콘텐츠에는 CMS 사용하기
동일한 번역된 텍스트가 여러 페이지에 나타나는 경우(추천사, 기능 설명, FAQ 항목), CMS 컬렉션에 저장하시기 바랍니다. 이렇게 하면 한 번 번역하면 모든 곳에서 업데이트되어, 매 페이지마다 동일한 텍스트를 번역할 필요가 없습니다.
로케일 구조를 초기에 계획하기
기존 Webflow 사이트에 현지화를 추가하는 것도 가능하지만, 처음부터 계획하는 것이 더 쉽습니다. 구축 전에 URL 구조, 로케일 전환기 위치, 폴백 동작을 고려하시기 바랍니다.
텍스트가 포함된 이미지 현지화하기
이미지에 텍스트가 포함된 경우(히어로 배너, 인포그래픽, 소셜 증명), 로케일별 버전을 만드시기 바랍니다. Webflow의 로케일별 이미지 교체 기능으로 이를 간편하게 처리할 수 있습니다.
자주 묻는 질문
Webflow 현지화 비용은 얼마인가요?
Webflow 현지화는 특정 Workspace 플랜에서 사용 가능합니다. 포함되는 로케일 수는 플랜 등급에 따라 다릅니다. 최신 정보는 Webflow의 현재 요금제 페이지를 확인하시기 바랍니다.
서브폴더 대신 서브도메인을 사용할 수 있나요?
Webflow의 네이티브 현지화는 서브폴더 기반 URL(/fr/, /de/)을 사용합니다. 서브도메인 기반 현지화(fr.example.com)는 별도의 Webflow 프로젝트 또는 커스텀 호스팅을 사용하는 다른 설정이 필요합니다.
Webflow 현지화가 Webflow Ecommerce와 함께 작동하나요?
2025년 기준으로, Webflow의 현지화 기능은 Ecommerce에 대한 지원이 제한적입니다. 제품 콘텐츠는 현지화할 수 있지만, 가격 책정, 결제, 거래 이메일에는 제약이 있습니다. Ecommerce 현지화의 현재 상태는 Webflow 문서를 확인하시기 바랍니다.
오른쪽에서 왼쪽(RTL) 언어는 어떻게 처리하나요?
Webflow는 로케일 설정을 통해 RTL 텍스트 방향을 지원합니다. 사용자가 RTL 로케일을 볼 때 텍스트 정렬과 읽기 방향이 조정됩니다. 그러나 전체 레이아웃 미러링(flexbox 방향, 마진 위치)에는 커스텀 CSS 재정의가 필요할 수 있습니다.
