Webflow 바에 언어 드롭다운 메뉴 추가하는 방법

다국어 웹사이트를 구축한다는 것은 해외 방문자들이 원하는 콘텐츠로 쉽게 이동할 수 있도록 길을 열어주는 것을 의미합니다. Webflow 바에 언어 선택 드롭다운 메뉴를 추가하면 바로 이러한 기능을 구현할 수 있습니다. 이번 글에서는 이를 구현하는 세 가지 방법, 즉 Webflow ‘Locales’ 리스트 요소, 직접 코딩한 JavaScript 토글, 그리고 Weglot를 활용한 자동 설정입니다. 각 방법에 대해 구체적인 클릭 경로, 서로 비교한 장단점, 그리고 여러분의 기존 작업 방식에 가장 적합한 방법을 알려드리겠습니다.

요약하자면

• Webflow기본 제공 ‘Locales’ 목록 요소는 활성화된 언어 설정에 따라 드롭다운 옵션을 자동으로 생성하므로, 언어별로 링크를 일일이 직접 만들 필요가 없습니다.
• 기본 제공 언어 전환 기능이 적합하지 않은 다중 프로젝트 또는 서브도메인 환경에서는, 사용자 정의 코드에 간단한 자바스크립트 토글을 추가하여 방문자를 각 언어 버전으로 안내할 수 있습니다.
• Weglot 같은 AI 번역 도구는 한 번의 설정만으로 드롭다운 메뉴, hreflang 태그, SEO에 최적화된 URL을 Weglot , Webflow 와도 호환됩니다( Webflow 그렇지 않습니다).
• 모바일 접근성은 중요합니다: 터치 영역을 최소 44x44 픽셀로 설정하고, 터치스크린에서는 호버 효과 대신 ‘클릭 시 열기’ 기능을 사용하세요.

Webflow에 언어 드롭다운 메뉴를 추가하는 세 가지 방법

방법을 선택하기 전에, 각 방법이 어떤 이점을 제공하는지 알아두면 도움이 됩니다.

Webflow‘Locales’ 목록은 이미 Webflow 사용하고 있으며 환경이 잘 갖춰진 팀에게 가장 적합합니다. 아직 설정하지 않았다면, 설정 난이도는 중간 정도입니다. 이 기능을 사용하려면 Localization이 활성화된 유료 Webflow 필요하며, Webflow 호환되지 않습니다.

맞춤 개발된 자바스크립트 토글 기능은 다중 프로젝트 또는 서브도메인 환경에 적합합니다. 설정 난이도는 낮거나 중간 정도입니다. 유연성이 뛰어나지만, 코드를 직접 관리해야 합니다.

Weglot 번거로움 없이 고품질의 번역, 언어 전환 기능, SEO 설정을 한 번에 해결하고자 하는 팀에게 가장 Weglot . 설정 과정이 간편하며, 모든 Webflow (이커머스 포함)와 호환되며 hreflang 태그를 자동으로 추가해 줍니다.

방법 1: Webflow로케일 목록을 사용하여 네이티브 로케일 전환기 구축하기

• 프로젝트에서 Webflow 이미 활성화한 경우 이 방법을 사용하세요.

1단계: 지역화 기능 활성화 및 언어 설정 추가

Webflow 설정 > 현지화로 이동한 다음 ‘현지화 활성화’를 클릭하세요. 기본 로케일을 선택한 후, 지원하려는 각 언어에 대해 ‘로케일 추가’를 클릭하세요.

새로운 로케일마다 표시 이름과 하위 디렉터리를 설정하고, ‘이 하위 디렉터리에 게시 활성화’ 옵션을 선택하세요. 게시 기능이 활성화되지 않은 로케일은 나중에 전환기에서 표시되지 않으므로, 이 단계를 건너뛰지 마세요.

2단계: 탐색 모음에 드롭다운 메뉴 추가하기

‘추가’ 패널을 열고 ‘고급’ 섹션으로 스크롤합니다. 드롭다운 요소를 내비게이션 바 안으로 드래그합니다. ‘내비게이터’를 열고 드롭다운을 확장하여 하위 요소를 표시한 다음, 세 개의 자리 표시자 링크(Link 1, Link 2, Link 3)를 삭제합니다. 다음 단계에서 설정을 완료하면 이곳에 언어별 항목이 표시될 것입니다.

3단계: 로케일 목록 추가

‘패널 추가’ > ‘고급’에서 ‘로케일 목록’ 요소를 드롭다운의 ‘탐색’ 요소로 드래그합니다. ‘로케일 목록’은 ‘컬렉션 목록’과 같은 방식으로 작동합니다. 게시된 로케일마다 항목이 자동으로 생성되므로, 각 언어에 대해 별도의 링크를 만들 필요가 없습니다.

4단계: 드롭다운 메뉴에 표시할 항목 선택하기

로케일 항목 내의 ‘링크’ 요소를 클릭한 다음, 요소 설정 패널을 열고 ‘텍스트’ 필드 옆에 있는 보라색 점 아이콘을 클릭하세요. ‘로케일 목록 항목’에서 각 옵션의 표시 이름을 ‘로케일(en-US)’, ‘언어(en)’, ‘국가(US)’ 또는 ‘표시 이름(영어(미국))’ 중 하나로 선택하세요.

드롭다운 토글에 활성화된 로케일이 표시되도록 하려면, 드롭다운 토글 내부의 텍스트 블록을 선택하고 ‘텍스트’ 옆의 보라색 점을 클릭한 다음, ‘현재 로케일’에서 동일한 레이블 형식을 선택하세요.

5단계: 모바일용 배너 및 마무리 작업

각 로케일에 대한 표시 이미지를 업로드했다면, Locale 요소 안에 Image 요소를 추가하고, Image 옆의 보라색 점을 클릭한 다음, ‘Locales List Item’에서 ‘Locale Image’를 선택하세요. Dropdown Toggle 내부에서도 ‘Current Locale > Locale Image’를 사용하여 활성화된 로케일에 국기를 표시하도록 설정하세요.

모바일 환경에서는 드롭다운을 선택한 후 메뉴 > ‘클릭 시 열기’를 설정하세요(터치스크린에서는 호버 기능이 작동하지 않으므로 ‘호버 시’가 아닌 ‘클릭 시’를 선택해야 합니다). 스위처를 편안하게 탭할 수 있도록 터치 영역이 최소 44x44 픽셀 이상인지 확인하세요.

방법 2: 사용자 정의 자바스크립트 토글

이 방법은 언어 버전이 별도의 Webflow 서로 다른 서브도메인(예: example.com 및 es.example.com)에 위치해 있어 기본 제공되는 로케일 목록으로는 해결할 수 없는 경우에 사용하세요. 이 작업을 수행하려면 기본적인 코딩 지식이 필요하거나, 팀 내에 이를 대신 처리해 줄 개발자가 있어야 합니다.

Add a button or link to your navbar and give it a class like language-toggle. Then paste a short script into Page Settings > Custom Code > Before </body> tag that redirects the visitor to the equivalent page on your alternate domain, preserving the path so they don’t land on the homepage of the other language.

언어가 3개 이상인 경우, 각 버튼에 데이터 속성(예: data-language=”fr”)을 추가하고, 각 코드를 해당 도메인에 매핑하는 조회 객체를 사용하여 이 방식을 확장하십시오.

방법 3: Weglot 활용한 자동 전환기

코딩을 직접 다루고 싶지 않고, 언어 선택기, 번역, hreflang 태그, SEO 친화적인 URL을 한 번의 설정으로 처리하고 싶다면 이 방법을 사용하세요. 특히 Webflow 지원하지 않는 Webflow 스토어에서 유용합니다.

먼저 Weglot 생성하고 Webflow 도메인을 추가하세요.

원문 언어와 대상 언어를 선택한 다음, Weglot snippet 복사하여 Webflow 설정( Webflow Settings)’ > ‘사용자 정의 코드(Custom Code)’ > ‘헤드 코드(Head Code)’에 붙여넣으세요. 사이트를 게시하면 언어 선택기가 자동으로 표시되며, 이것으로 모든 과정이 완료됩니다! 콘텐츠는 SEO에 최적화된 하위 디렉터리나 하위 도메인 아래에 번역되어 표시되며, hreflang 태그와 번역된 메타데이터도 자동으로 처리됩니다.

Weglot 스위처를 시각적으로 편집할 수 있습니다. 페이지 내 원하는 위치로 드래그하거나, 국기를 표시/숨김으로 전환하고, 언어 이름, 언어 코드 또는 국가 코드를 표시할지 여부를 선택할 수 있습니다.

Webflow 디자인을 위해, Weglot 키트에는 디자이너에 바로 적용할 수 있는 20개 이상의 복제 가능한 언어 선택기가 포함되어 있습니다.

Webflow 팀들이 Weglot 선택하는 Weglot 몇 가지 이유가 Weglot . 자동 콘텐츠 감지 기능 덕분에 새로운 페이지가 생성되면 별도의 수동 작업 없이도 자동으로 번역됩니다. 번역 내용은 별도의 대시보드에 저장되므로, 번역가는 Webflow 라이선스가 필요하지 않습니다. 또한 Webflow 달리 Webflow 호환됩니다. 아울러 모든 요금제에 다국어 SEO 기능이 기본으로 포함되어 있습니다.

Webflow Weglot, 직접 비교

가장 흔한 두 가지 진로를 고민하고 계신다면, 가장 중요한 몇 가지 측면에서 두 진로가 어떻게 다른지 다음과 같습니다:

• 언어 선택기 설정: Webflow 자체 기능은 수동으로 Webflow (드롭다운 메뉴 드래그, 지역 목록 드래그, 텍스트 바인딩, 스타일 지정). Weglot 설치 시 언어 선택기를 자동으로 Weglot .
• 지역 간 콘텐츠 동기화: Webflow 콘텐츠를 업데이트할 때마다 페이지별로 수동으로 트리거를 Webflow . 반면 Weglot 새로운 콘텐츠를 Weglot 자동으로 번역합니다.
• Webflow : Webflow 기본 Webflow 기능은 Webflow 스토어와 호환되지 않습니다. Weglot .
• Hreflang 및 SEO URL: Localization의 하위 디렉터리 설정을 사용하면 Webflow 이를 자동으로 Webflow 주지만, 지역별 표시 이름과 게시 설정은 여전히 직접 구성해야 합니다. Weglot hreflang 태그와 SEO에 최적화된 URL을 자동으로 Weglot .
• 팀 액세스: Webflow 사용하려면 디자이너에서 번역을 편집하는 모든 사용자에게 유료 Workspace 라이선스가 필요합니다. Weglot 모든 요금제에 포함된 별도의 대시보드에서 번역을 Weglot .

Webflow 전 세계에서 이용할 수 있도록 만들기

언어 선택 드롭다운은 네비게이션 바의 작은 구성 요소일 뿐이지만, 사이트가 다양한 사용자를 위해 제작되었음을 가장 명확하게 보여주는 지표입니다. Webflow‘Locales’ 목록을 활용하든, 직접 스크립트를 작성하든, 아니면 Weglot 통해 자동화하든, 목표는 동일합니다. 바로 방문자가 번거로움 없이 신속하게 적합한 언어로 전환할 수 있도록 하는 것입니다.

Webflow 전환 기능, 번역, 다국어 SEO를 한 번의 설정으로 모두 처리하고 싶다면( Webflow 포함), Webflow 에서 Weglot 14일간 Weglot 체험해 보세요.