Webflow : 다국어 지원 설정 방법

Webflow 웹사이트를 제작할 때 Webflow 자유는 무한합니다.

또한 저희는많은 사용자에게 유연성을 Webflow 노코드 도구 Webflow 를 매우 사랑합니다. 심지어 웹 에이전시 핀스윗 ( Finsweet) 의 도움으로 저희 자체 다국어 Webflow 구축했는데, 여러분도 자유롭게 복제해 사용할 수 있습니다.

Webflow 매우 유연하고 사용자 친화적인 플랫폼일 뿐만 아니라, Webflow 자체 현지화 솔루션인 Webflow 출시했습니다. 이를 통해 신규 시장에 맞춰 다국어 웹사이트를 구축할 수 있습니다.

이 옵션은 소규모 웹사이트를 운영하며 확장 계획이 없는 분들에게 적합합니다. 하지만 웹사이트와 함께 성장할 수 있는 Webflow 솔루션을 찾고 계시다면, Weglot 더 나은 선택이 될 Weglot .

Webflow 다국어 사이트로 전환할 준비가 되셨다면, Webflow 또는 Weglot 사용해 단계별로 구현하는 방법을 안내해 드리겠습니다. 어떤 솔루션을 선택하시든, 글 마지막에 소개된 맞춤형 언어 전환기 라이브러리를 확인해 보세요. 지금 바로 여러분의 사이트에 복제해 적용할 수 있습니다!

Webflow 가능한가요? 옵션 설명

네, Webflow 다국어 지원이 Webflow . 다만 선택하는 방식은 구체적인 요구사항과 기술적 조건에 따라 달라집니다. Webflow 다국어로 만드는 주요 방법은 두 가지입니다:

Webflow 플랫폼의 기본 솔루션으로 Webflow Designer와 직접 통합됩니다. 기존 Webflow 내에서 번역을 관리하고 디자인 중심의 현지화 접근 방식을 선호하는 팀에게 이상적입니다.

제3자 솔루션인 Weglot 와 같은 타사 솔루션은 Webflow 스토어, 용어집을 포함한 광범위한 호환성, 별도의 번역 관리, 즉각적인 AI 번역을 통한 보다 자동화된 접근 방식을 제공합니다.

두 옵션 모두 완벽하게 작동하는 다국어 Webflow 구축할 수 있지만, 구현 방식, 가격 모델, 기능 세트 측면에서 상당한 차이가 있습니다. 각 옵션을 자세히 살펴보고 프로젝트에 적합한 선택을 할 수 있도록 도와드리겠습니다.

다국어 웹사이트를 위한 Webflow 활용

Webflow 최근 Webflow Webflow 웹사이트를 다국어로 제작할 수 있게 Webflow . 이를 통해 Webflow 직접 현지화된 사이트를 디자인하고 구축하며 맞춤 설정할 수 있습니다. 다음과 같은 작업이 가능합니다:

• 시각적으로 현지화된 사이트를 구축하세요.
• 로캘을 사용자 지정합니다.
• 콘텐츠를 자동으로 네이티브 번역합니다.
• 방문자가 선호하는 언어를 선택할 수 있도록 허용합니다.

이러한 기능을 통해 Webflow 다양한 언어 집단을 위한 웹사이트 맞춤화를 가능하게 Webflow , 다국어 SEO 기능을 다수 포함하여 검색 엔진 최적화를 보장합니다.  

Webflow 추가하려면 다음 단계를 따르세요:

설정 패널로 이동하여 현지화를 클릭하세요.

1. 각 드롭다운에서 기본 로캘을 선택하면 사이트에 추가할 로캘 또는 언어가 됩니다.
2. 로캘의 표시 이름, 하위 디렉터리 및 게시 상태를 구성합니다.
3. 변경 사항을 저장합니다.
4. 로캘을 더 추가하려면 새 로캘 추가를 클릭하고 2~4단계를 반복합니다.

Webflow 서비스는 초기 출시 이후 확장되었습니다. 현재 다음과 같은 기능을 제공합니다:

• 인공지능 기반 기계 번역
• 로컬라이제이션 기능 애드온 무료 미리보기
• 아랍어, 페르시아어, 히브리어, 우르두어 및 이디시어 로케일을 위한 자동 RTL(오른쪽에서 왼쪽으로) 스크립트
• 자산 현지화 (고급 플랜)
• 자동 방문자 라우팅
• Smartling, Lokalise, Phrase와 같은 번역 관리 시스템 과의 통합.

Webflow 지원 제한 사항

그러나 주요 워크플로 제한 사항은 여전히 존재합니다. 사용자는 여전히 요소를 마우스 오른쪽 버튼으로 클릭하거나 페이지를 하나씩 선택하여 수동으로 번역을 시작해야 하며, 새 콘텐츠를 추가할 때도 이 과정을 반복해야 합니다. 또한 Webflow 기계 번역을 Webflow , 이러한 번역 결과물은 여전히 수정이 필요하거나 검토가 필요한 경우가 많으며, 이를 즉시 개선하거나 다듬을 수 있도록 도와주는 AI 기능은 제공되지 않습니다.

또한, Webflow 새로운 편집 모드(2025년 말 기존 에디터를 대체함)는 이제 현지화를 지원하지만, 번역 작업을 수행하는 모든 사용자는 여전히 워크스페이스 라이선스(1인당 월 $15~$39)가 필요합니다. 이를 고려하면 팀 접근 비용 측면에서 Webflow 상대적으로 비싼 옵션 중 하나가 될 수 있습니다. Webflow 플랫폼 외부에서 번역 작업을 가능하게 하는 TMS 통합 기능을 Webflow 하지만, Webflow 내에서 직접 번역을 관리하는 팀에게는 여전히 상당한 장벽으로 작용합니다.

마지막으로, Webflow 기능은 Webflow 호환되지 않아 온라인 스토어 운영자에게 기본적인 다국어 솔루션이 제공되지 않습니다.

따라서 보다 간소화된 워크플로를 원하는 팀을 위해 Weglot 대안적인 접근 방식을 Weglot .

참고로, 동일 조건 비교를 원하신다면 저희의 Webflow vs Weglot 페이지를 확인해 보실 수 있습니다.

또는 동영상을 선호한다면 비교 동영상을 확인하세요:

또는, 오늘 바로 Webflow 에서 Weglot 사용해 보시고 다국어 지원이 얼마나 쉬운지 확인해 보세요.

Weglot 사용하여 Webflow에서 다국어 지원 Weglot

Webflow현지화 솔루션은 웹사이트 번역에 디자인 중심 접근 방식을 자연스럽게 적용하여, 웹 디자인 단계에서 바로 다국어 웹사이트를 구축하고자 하는 사용자에게 매우 유용합니다.

하지만 앞서 언급했듯이 다국어를 더욱 편리하게 사용할 수 있는 몇 가지 기능이 아직 누락되어 있습니다.

바로 여기서 Weglot . 웨글롯은 Webflow 즉시 번역하도록 설계되어, 단 몇 단계만으로 Webflow 다국어로 전환할 수 있게 해줍니다.

Weglot 자동 콘텐츠 감지 및 번역, 별도의 인터페이스를 통해 처리되는 전체 번역 편집 제어, 다국어 SEO 설정 등을 포함하는 엔드투엔드 AI 웹사이트 번역 솔루션을 제공하여 웹사이트 번역의 복잡성을 제거합니다.

또한 AI 언어 모델을 설정하면 즉시 브랜드에 맞는 번역을 생성할 수 있습니다. 이 모델은 사용자 지정 지침, 용어집 및 과거 수동 편집 내용을 학습합니다.

Weglot유료 플랜은 명확한 가격 구조로 , 보이는 그대로를 제공합니다. 또한 Weglot 무료 플랜으로 사이트를 무료로 현지화할 수 있는 반면, Webflow 유료 플랜만 제공합니다.

‍

예시 비용 시나리오

50,000단어 규모의 웹사이트를 3개 언어로 번역하는 작업으로, 3명의 번역가로 구성된 팀이 관리합니다:

‍

‍

Weglot 또한 상당한 다국어 SEO 혜택도 제공하므로 전 세계 고객에게 도달할 수 있습니다. 하위 디렉토리 또는 하위 도메인 중에서 선택하고, 자동으로 hreflang 태그를 추가하고, 해외 검색 엔진에 사이트를 표시할 수 있으며, 이러한 기능은 모든 요금제에서 무료로 사용할 수 있습니다.

팀들이 Weglot 선택하는 이유:

• 자동 콘텐츠 감지: Weglot 콘텐츠를 자동으로 Weglot 번역합니다. 새 콘텐츠를 추가할 때도 페이지별로 수동으로 번역을 실행할 필요가 없습니다.
• AI 언어 모델: Weglot AI 언어 모델은 사용자의 맞춤 지침, 용어집 및 과거 수동 편집 내용을 학습하여 시간이 지남에 따라 더욱 정확하고 브랜드 정체성에 부합하는 번역을 생성합니다.
• 다국어 SEO 최적화:Weglot 다국어 웹사이트를 위한 Google의 모범 사례를Weglot . 여기에는 사이트의 각 번역 버전에 hreflang 태그를 자동으로 추가하고, 메타데이터를 번역하며, 번역된 URL을 선택한 하위 도메인 또는 하위 디렉터리 아래에 호스팅하는 것이 포함됩니다. 이 모든 것이 귀하의 웹사이트가 국제 검색 엔진에 노출되도록 보장합니다.
• 추가 작업 공간 좌석 불필요: 번역가에게 Webflow 접근 권한을 부여하거나 추가 좌석 비용을 지불하지 않고도 Weglot 별도 대시보드에서 번역을 관리하세요.
• Webflow 와 호환: Webflow 달리 Weglot Webflow 스토어와 완벽하게 Weglot .
• 에이전시용 중앙 집중식 대시보드: 단일 Weglot 다국어 클라이언트 웹사이트를 모두 관리하세요. 여러 프로젝트를 처리하는 에이전시에 이상적입니다.
• 10년간의 현지화 전문성: Weglot 웹사이트 번역을 위해 특별히 Weglot , 11만 개 이상의 브랜드가 글로벌 시장에 진출하도록 지원해 온 10년 동안 다듬어진 기능을 갖추고 있습니다.

어떤 Webflow 솔루션을 선택해야 할까요?

다국어 Webflow Weglot Webflow 과 Weglot 사이의 선택은 특정 요구 사항에 따라 달라집니다:

다음과 같은 경우 Webflow 선택하세요:

• 콘텐츠가 제한적이고 크게 확장되지 않는 소규모 웹사이트를 보유하고 있습니다.
• 귀하의 팀은 Webflow 인터페이스 내에서 작업하는 것을 선호합니다.
• 각 페이지와 요소에 대한 수동 번역 워크플로우를 신경 쓰지 않으시겠습니까?
• 당신은 전자상거래 매장을 운영하고 있지 않습니다
• 작업 공간 좌석 비용을 고려할 때 예산은 주요 고려 사항이 아닙니다.

Weglot 선택하세요:

• 수동 트리거 없이 자동 콘텐츠 감지 및 번역을 원합니다
• 여러 개의 다국어 웹사이트를 하나의 대시보드에서 관리해야 합니다.
• 당신은 Webflow 스토어를 운영하고 있습니다
• 추가적인 사용자당 비용 없이 포함된 팀 액세스를 원합니다
• 모든 요금제에서 고급 다국어 SEO 기능이 필요합니다
• 지속적인 콘텐츠 업데이트를 위해 더 간소화되고 자동화된 워크플로를 선호합니다.

튜토리얼: Webflow 여러 언어를 추가하는 방법

Weglot 사용하면 Webflow 언어를 추가하는 데 단 5분밖에 걸리지 않습니다. 동영상을 확인하거나 아래의 단계별 안내를 따라하세요.

1.Weglot 생성 : 여기에서 별도의 대시보드를 통해 모든 번역을 관리하게 됩니다. 즉, Webflow 디자인 편집기에 사람들을 초대할 필요가 없습니다.

2. 도메인 이름 추가: 사이트의 기본 언어와 추가하려는 언어 (참고: 임시 Webflow 이름을 사용하는 경우, 이 통합 기능을 사용하거나 맞춤 도메인을 구매할 때까지 기다린 후 계속하세요).

3. DNS 레코드를 구성합니다: 하위 디렉터리 또는 하위 도메인을 만들려면 이렇게 하세요( Weglot 두 가지 옵션 중에서 선택할 수 있습니다). 도메인 네임 공급업체 계정과 DNS 레코드 탭으로 이동합니다. 새 항목 만들기 - CNAME을 선택합니다. '이름'에 추가하려는 언어의 언어 코드를 추가하고 '데이터'에 Weglot 대시보드에 제공된 값을 추가합니다. 그런 다음 'DNS 확인'을 클릭합니다.

4. 설정 구성: 마지막 단계로 Webflow 영역의 '설정' → '사용자 정의 코드'로 이동합니다. '헤드 코드'로 이동한 후 '헤드 태그 끝에 코드 추가'를 선택합니다. Weglot JavaScript HTML snippet 복사하여 붙여넣으세요.

‍

5. 마무리: 변경 사항을 저장하고 사이트를 게시합니다.

자, 이제 끝입니다! 이제 공식적으로 다국어 웹사이트를 갖춘 Webflow 보유하게 되어, 해외 고객들의 사용자 경험을 향상시킬 수 있습니다!

Weglot Webflow 즉시 감지, 번역 및 표시하는 방식으로 Weglot . 선도적인 번역 서비스인 DeepL, Google Translate, Microsoft( 월간 요금제에 포함)를 활용한 AI 번역을 기본으로 제공하며, 사이트 번역을 원하는 대로 편집할 수 있는 완전한 편집 권한을 부여합니다. 번역을 그대로 유지하거나, AI 언어 모델을 사용하거나, 프로젝트에 번역 팀을 추가하거나, Weglot 내에서 직접 전문 번역을 주문하는 등 선택의 폭을 제공합니다.

이 기능은 Webflow 달리 각 페이지마다 모든 언어에 대해 수동으로 번역을 활성화할 필요가 없다는 점에서 두드러집니다. 또한 새 페이지를 추가하거나 업데이트할 때마다 이 단계를 반복해야 한다는 점을 고려해야 합니다.

여기서 추가로 중요한 점은 번역 작업을 Webflow 외부에서 처리함으로써 팀원이나 번역가에게 디자인 에디터 접근 권한을 부여할 필요가 없다는 것입니다(따라서 월 19달러의 추가 사용자 라이선스를 구매할 필요가 없습니다).

Webflow 전환기 맞춤 설정: 코딩 없이

언어 전환 기능에 대해서도 이야기해 보겠습니다. Webflow Weglot 모두 기본 Weglot 언어 전환 기능을 커스터마이징할 수 있습니다. 이를 통해 웹사이트 방문자들은 사이트의 다양한 언어 버전 간에 전환할 수 있습니다.

Webflow Weglot 추가하면, 웹사이트 오른쪽 하단에 언어 전환기가 자동으로 추가됩니다.

이 기능을 편집하는 첫 번째 방법은 당사의 간편한 언어 전환기 visual editor 사용하는 것입니다. 이를 통해 드롭다운 전환기를 웹사이트 디자인 내 다른 위치로 손쉽게 드래그 앤 드롭할 수 있습니다.

또한 다음과 같은 여러 가지 간단한 디자인 변경 사항을 선택할 수도 있습니다:

• 언어 이름 표시
• 플래그 추가
• 언어 코드 표시
• 크기 변경

이 유용한 기능을 사용하면 모바일 디바이스에서도 스위처를 확인할 수 있습니다. 이렇게 하면 화면 크기에 관계없이 사용자 환경이 변경되지 않도록 사용자 지정 편집을 할 수 있습니다.

복제 가능한 Webflow 전환기

다음은 직접 복제할 수 있는 언어 전환기 옵션입니다. 디자인 작업은 전혀 신경 쓸 필요가 없습니다.

Weglot Webflow 열렬한 팬으로서, 저희는 두 Webflow 선도적인 Webflow 협력하여 맞춤 코드 없이도 다국어 사이트에 추가할 수 있는 언어 전환기를 만들었습니다.

2020년에는 핀스윗과 함께 16가지 언어 스위처를 UI 키트로 개발했고, 2024년 초에는 디지돕과 함께 5가지 새로운 디자인을 추가로 디자인했습니다.

사실, Finsweet과의 언어 전환기 협업은 매우 인기가 높아 8,000회 이상 복제되었으며, 이로 인해 저희는 다시 한번 팀과 협력하여 2024년 업데이트인 Weglot Kit 2.0을 선보이게 되었습니다! 기존 Webflow 전환기 프로젝트의 업데이트 버전과 함께 새롭게 추가된 전환기를 포함해 총 20종의 전환기를 제공하여 어떤 웹사이트 디자인에도 맞출 수 있도록 했습니다.

Finsweet의 Webflow 맞춤형 언어 전환기 추가 방법을 확인해 보세요.

‍

디지돕으로 만든 언어 전환기에 대한 자세한 내용은 디지돕 드롭 👉여기 (튜토리얼 포함)를 참조하세요.

‍

이제 25가지 다양한 디자인과 템플릿 중에서 선택할 수 있으며, Webflow 통해 간편하게 추가할 수 있습니다.

Webflow Weglot 언어 전환기 영감

이론은 잠시 접어두고 웹사이트에 여러 언어를 추가하고 언어 스위처를 사용자 지정하는 데 Weglot 사용한 기업의 성공 사례를 살펴볼 수 있습니다.

1. Weglot

우선, 저희 Webflow Weglot 언급하지 않는다면 저희가 잘못한 것이겠죠 Weglot . Webflow 팬이라고 말했을 때 거짓말한 게 아니며, 글로벌 입지를 보여주기 위해 웹플로우를 선택한 저희의 결정이 이를 증명합니다.

새로운 브랜딩에 맞춰 언어 전환기를 맞춤 제작했습니다. 웹사이트 현지화의 선두주자로서, 영어, 프랑스어, 독일어, 이탈리아어, 스페인어, 일본어, 네덜란드어 웹사이트 방문자에게 명확한 사용자 경험을 제공하기 위해 현지 언어 명칭을 선택했습니다.  

2. i-Mesh

다음 예시는 텍스타일 제작자 i-Mesh의 것으로, 좀 더 맞춤화된 접근을 취합니다 ( Webflow 사용한다면 당연한 선택이죠). 

그들은 왼쪽 고정 사이드바에 언어 전환기를 추가하여 사이트를 스크롤하는 모든 방문자가 볼 수 있도록 했습니다. 또한 언어 코드나 전체 이름을 사용하기보다는 단어의 절반만 사용해 사이트의 현대적이고 간결한 스타일을 보완했습니다. 

언어 전환기가 복잡할 필요는 없으며, i-Mesh가 그 명확한 예입니다.  

3. Napta

프랑스의 리소스 관리 소프트웨어 Napta는 자동화 기능 덕분에 유럽에서 확장을 시작하기 위해 Weglot 선택했습니다.

덕분에 번역 플러그인을 찾기 전에는 전적으로 수작업으로 진행되던 팀의 내부 번역 관리 워크플로우가 크게 단축되었습니다.

"다국어 웹사이트를 보유하고 기술적인 역량 없이도 이를 관리할 수 있고, 이미 번역된 것을 수동으로 최적화하는 시간을 절약할 수 있게 되어 다국어 SEO 성과에 획기적인 변화를 가져왔습니다."
에스텔 바르테스, Napta의 커뮤니케이션 및 콘텐츠 책임자

그리고 그 언어 전환기? 네비게이션 바에 배치되어(흔히 볼 수 있는 디자인인 듯!), 사이트의 나머지 부분과 완벽하게 어울립니다.

그리고 언어 코드를 선택함으로써 사이트에 다국어 기능이 있음을 분명히 했습니다.

‍

4. 드롭컨택

Weglot 마찬가지로 드롭컨택트 역시 파리 출신으로, Webflow 기반 웹사이트를 통해 그 역량을 선보입니다. 그들의 사이트는 단순히 미적 요소에 그치지 않고, 매력적인 스크롤 애니메이션과 차분하면서도 통일감 있는 분위기를 자아내는 부드러운 투톤 컬러 팔레트를 특징으로 합니다.

Dropcontact의 진정한 차별점은 메인 네비게이션 바 내에 전략적으로 배치된 원활하게 통합된 언어 전환기입니다. 이 기능은 사이트의 미적 매력을 높일 뿐만 아니라 접근성과 포용성에 대한 Dropcontact의 헌신을 강조합니다.

5. 빅 블루

이 물류 업체는 언어 전환기의 위치와 디자인 모두에서 약간 다른 방식을 채택했습니다. 하단 영역에 배치되었으며, 드롭다운 메뉴에서 각 언어 옆에 해당 국기가 표시됩니다.

국기가 모든 사람의 취향은 아닐 수 있지만, 특히 국기를 사용하는 국가에서 비즈니스를 하는 경우 국기는 그 나름의 역할을 합니다. 

(참고로 좋지 않은 경우: 예를 들어 스페인어권 국가와 비즈니스를 하고 스페인 국기를 사용하려는 경우 라틴 아메리카 국가를 소외시키는 결과를 초래할 수 있습니다). 

처음에는 언어 코드의 미묘함을 활용했습니다. 그러나 이후에는 언어 전체 이름과 함께 드롭다운 메뉴에 국기 아이콘을 추가하여, 언어 전환기를 미묘하면서도 동시에 눈에 띄게 만들었습니다.

6. 갑옷 지갑

마지막으로 아머 월렛이라는 AI 기반 웹3 지갑이 있습니다. Napta와 동일한 테마에 따라 전체 언어 이름 대신 언어 코드가 포함된 드롭다운 방식을 채택했습니다.

또한, 저희는 Weglot 언어 전환기 디자인이 그대로 그들의 사이트에 복제된 것을 발견했습니다! 일본어와 중국어 간체로 사이트를 운영하면서도, 각 언어의 문자 길이 차이와 상관없이 전체 디자인은 동일하게 유지되었습니다.

즉시 생성되는 다국어 Webflow

여러분께 Webflow Weglot 모두 살펴보며 다국어 Webflow 만드는 방법을 안내해 드렸습니다. 이제 여러분의 Webflow 다국어로 만드는 완벽한 해결책을 찾으셨기를 바랍니다.

또한 맞춤 설정을 원하는 분들을 위해 Finsweet과 협력하여 지금 바로 사이트에 추가할 수 있는 14가지 언어 전환기를 만들어 여러분의 수고를 조금 덜어드렸습니다!

Weglot 요금제는 월 15유로부터 시작하며, 14일 무료 체험판을 통해 바로 테스트를 시작할 수 있습니다. 엔터프라이즈급까지 무료 요금제를 이용할 수 있으므로 필요에 가장 적합한 요금제를 찾을 수 있습니다.