워드프레스 언어 전환기 추가 방법

웹사이트에 워드프레스 언어 전환기를 추가할 계획이신가요? 그렇다면 계속 읽어보세요!

워드프레스 사이트에 언어 선택 기능을 추가하고 콘텐츠를 번역하여 방문자가 자신의 언어로 읽을 수 있게 하면, 새로운 시장에 진출하고, SEO 및 온라인 노출 기회를 확대하며, 새로운 이용자층과 신뢰를 쌓는 데 도움이 될 수 있습니다. 어떤 플러그인을 사용해야 할지 잘 모르시겠나요? 최고의 워드프레스 언어 선택 플러그인 비교 기사를 확인해 보세요.

Weglot 를 사용하면 코딩 없이도 WordPress 사이트나 WooCommerce 스토어에 여러 언어를 추가할 수 있으며, 번역 내용이 게시되기 전에 문맥에 맞춰 하나하나 검토할 수 있습니다.

이 글에서는 워드프레스 언어 전환기를 사이트에 추가하는 방법과 사이트 디자인에 맞게 커스터마이징하는 방법에 대한 상세한 단계별 가이드를 제공합니다.

튜토리얼: Weglot 사용한 WordPress 언어 전환기 추가하기

워드프레스 언어 선택기는 방문자가 선호하는 언어를 선택하고 사이트의 번역된 버전 간을 전환할 수 있게 해주는 탐색 요소입니다. 번역 플러그인을 설치하고, 사용할 언어를 선택한 다음, 숏코드를 통해 메뉴, 위젯 영역 또는 페이지에 언어 선택기를 배치하면 어떤 워드프레스 사이트에도 이를 추가할 수 있습니다.

Weglot 2.0은 여러분이 이미 잘 알고 계신 ‘ Weglot ’를 기반으로 합니다. 이 플러그인은 워드프레스용 AI 기반 번역 플러그인으로, 언어 선택기를 자동으로 추가하고, 브랜드에 맞춰 구축된 AI 번역 기능을 통해 코드 수정 없이 사이트를 번역하며, hreflang 태그와 번역된 메타데이터가 포함된 SEO 최적화 언어 하위 디렉터리를 생성합니다. 메뉴, 위젯, HTML 페이지의 소스 코드 등 다양한 위치에 워드프레스 언어 선택기를 추가할 수 있습니다. 

이 튜토리얼에서는 사이트의 내비게이션에 언어 선택기를 추가해 보겠습니다. 기본적으로 ‘ Weglot ’는 사이트의 오른쪽 하단에 언어 선택기를 추가합니다. 이어서 플러그인 설정을 통해, 또는 Weglot의 Visual Editor 페이지에서 언어 선택기를 이동하는 방법을 안내해 드리겠습니다. 이 페이지의 ‘Switcher Editor’를 이용하면 디자인을 변경할 수도 있습니다. 

1단계: Weglot 설치 및 활성화

워드프레스 사이트에 ‘Weglot ’ 플러그인을 설치하고 활성화하세요. 그런 다음 ‘ Weglot ’ 계정을 생성하세요. 설정 과정에서 사이트 URL을 입력하고, 원문 언어와 대상 언어를 선택한 뒤, 번역본이 귀사의 글쓰기 스타일과 일치하도록 ‘브랜드 목소리’와 ‘번역 가이드라인’을 설정하게 됩니다. ‘ Weglot ’ 대시보드에서 번역 내용을 관리 및 편집하고, 연동을 위해 고유한 API 키를 복사할 수 있습니다.

2단계: Weglot 연결 Weglot 언어 선택

워드프레스 대시보드에서 ‘ Weglot ’ 탭을 클릭한 다음, 설정를 열고 API 키를 붙여넣으세요. 기본 언어와 프로젝트 생성 시 선택한 언어가 그 아래에 표시됩니다(나중에 변경하려면 Weglot 대시보드로 이동하세요). ‘저장’을 클릭하세요. 

3단계: 사이트 및 언어 선택기 확인하기

이제 귀하의 워드프레스 웹사이트가 다국어 지원이 가능해졌습니다! Weglot 사이트의 콘텐츠를 자동으로 Weglot , AI를 활용해 번역한 후 언어별 하위 디렉토리에 표시했습니다.

사이트의 프론트엔드를 확인해 보시면, 오른쪽 하단에 새로운 워드프레스 언어 선택기가 표시된 것을 확인하실 수 있습니다.

클릭하면 사용 가능한 언어가 확장되어 표시되고 원하는 번역을 선택하여 표시할 수 있습니다.

이것은 Weglot 기본으로 제공되는 디자인이며, 이제 여러 가지 방법으로 WordPress 언어 전환기의 모양과 위치를 맞춤 설정할 수 있습니다.

워드프레스 언어 전환기 맞춤 설정하기

기본적인 사용자 지정을 시작하려면 다음으로 이동하세요. Weglot > 설정 로 이동하세요. 언어 전환기 섹션에서 메뉴, 위젯, 숏코드, 또는 페이지 소스 코드 내 등 원하는 위치에 배치할 수 있습니다(아래에서 자세히 설명하겠습니다):

언어 전환기의 디자인은 ‘스위처 편집기(Switcher Editor)’에서 설정할 수 있으며, 이 편집기는 사이트의 언어 전환기를 클릭하면 Weglot의 Visual Editor 페이지에서 열립니다. 편집기에서는 다음을 선택할 수 있습니다:

• 드롭다운 메뉴 사용 여부
• 스위처 내에서 플래그를 사용할지 여부 및 유형
• 언어 이름을 표시하는 경우
• 언어 코드만 표시하려면 다음과 같이 하세요.

또한 사용자 정의 CSS 입력란이 있어 사용자 정의 선택자를 입력할 수 있는데, 이에 대해서는 잠시 후에 다루겠습니다. 지금은 깃발 아이콘 없이 언어 이름만 표시하되 드롭다운 메뉴는 그대로 유지하도록 언어 선택기를 맞춤 설정해 보겠습니다.

이를 위해 ‘국기 표시’를 끄고 ‘전체 언어 이름’을 켠 다음, 저장를 클릭한 후, 사이트를 확인해 보세요:

‍

고급 사용자 지정도 수행할 수 있습니다. 예를 들어, 탐색 메뉴나 사이드바에 언어 전환기를 표시해 보겠습니다.

언어 전환기 배치 옵션

Weglot 선택기를 다음 다섯 곳에서 표시할 수 있습니다:

• 메뉴: ‘외관’ > ‘메뉴’로 이동하여 해당 메뉴를 선택한 뒤, Weglot 에 체크한 후, 원하는 위치로 드래그하세요.
• 위젯: ‘외관 ’ > ‘위젯 ’으로 이동하여 Weglot 를 위젯 영역(헤더, 사이드바 또는 푸터) 중 하나에 추가하세요.
• 숏코드: 스위처를 표시하고자 하는 페이지, 게시물 또는 템플릿에 [weglot]를 붙여넣으세요.
• HTML / 소스: 배치 위치를 자유롭게 제어하려면 페이지의 HTML에 스위처를 직접 추가하세요.
• 플로팅 버튼: 사용자가 스크롤을 해도 항상 보이는 고정된 모서리에 스위처를 배치합니다(Weglot기본 설정).

Weglot 스위처는 FSE 및 블록 테마를 포함한 모든 워드프레스 테마와 호환됩니다.

언어 선택기가 표시될 위치를 설정하려면 언어 전환기 섹션의 Weglot > 설정 (위 그림 참조)의언어 전환기섹션으로 돌아가서, 원하는 위치에 해당하는 카드의 링크를 따라가세요. 이 예시에서는 ‘모양 > 메뉴’로 이동하여 전환기를 드래그 앤 드롭하여 메뉴 항목의 순서를 변경해 보겠습니다. 

준비가 완료되고 변경 사항을 저장했으면 프런트엔드를 다시 한 번 살펴보세요:

언어 선택 버튼이 헤더 내에 위치해 있지만, 제대로 표시되지 않고 있습니다. 드롭다운 메뉴 대신 인라인 언어 코드를 사용할 수도 있습니다.

고급 언어 전환기 스타일링

이 단계에서 CSS를 사용합니다. 스위처 편집기(자세한 내용은 아래 참조)에서 드롭다운 레이아웃을 비활성화하고, 전체 이름 대신 언어 코드를 표시하며, 사이트 디자인에 맞게 스위처를 조정할 수 있도록 글꼴, 색상, 텍스트 굵기에 대한 선택자를 몇 가지 추가하세요. 프론트엔드에서 표시되는 결과는 다음과 같습니다:

적절한 위치 설정과 몇 줄의 CSS만으로, 복잡한 템플릿 편집이나 HTML, PHP 코딩 기술 없이도 Weglot언어 전환기를 사이트에 맞게 빠르고 쉽게 스타일링할 수 있습니다. 

사용자 정의 CSS 수정은 전적으로 선택 사항이라는 점에 유의하시기 바랍니다. 스위처 에디터에 제공된 기본 옵션을 통해 디자인을 이동하거나 변경할 수 있습니다. 

이 기능을 사용하려면 Weglot의 Visual Editor 로 이동한 후, 사이트에서 언어 전환기를 클릭하세요. 실시간 미리보기 옆에 ‘전환기 편집기’가 표시되므로, 변경 사항을 적용하는 즉시 그 결과를 확인할 수 있으며, 사용자 정의 CSS 패널(클릭 사용자 정의 CSS 편집을 클릭하여 필드를 표시)에는 이전 단계에서 선택한 선택자가 입력됩니다: 를 클릭하여 필드를 표시)에는 이전 단계에서 생성한 선택자가 입력됩니다: 

패널에서 위치와 레이아웃을 설정한 다음, “저장”을 클릭하여 변경 사항을 워드프레스 사이트에 적용하세요. 

워드프레스 언어 전환기 표시 모범 사례

언어를 자주 바꾸는 사람들은 대개 다음 네 가지 유형 중 하나에 속하는 경향이 있습니다:

• 존재하지 않습니다. 즉, 웹사이트는 번역을 전혀 제공하지 않습니다.
• 찾기가 어렵습니다. 언어 선택 버튼이 탐색 메뉴나 다른 곳에 숨겨져 있을 수 있어, 사용자가 마치 숨바꼭질을 하듯 찾아다녀야만 하며, 이는 끔찍한 사용자 경험을 초래합니다.
• 찾기 쉽습니다. 반면, 워드프레스 언어 전환기는 헤더나 푸터처럼 명확하고 관련성 있는 위치에서 찾을 수 있습니다.
• 찾기 매우 쉽습니다. 워드프레스 언어 전환기가 헤더처럼 눈에 잘 띄는 화면 영역에 위치해 있다면 운이 좋은 셈입니다 . 이렇게 하면 올바른 언어를 빠르게 선택할 수 있습니다.

따라서 사이트 방문자가 선호하는 언어를 쉽게 선택할 수 있도록 하고 해외 사이트 방문자에게 사용자 친화적인 환경을 제공하는 것이 중요합니다. 이상적인 세계에서는 추가 기능 없이도 이 작업을 수행할 수 있어야 합니다. 이를 염두에 두고 다음 사항을 고려하세요:

1. 언어 옵션을 신중하게 선택하세요. 모든 언어를 활성화할 수 있다고 해서 반드시 활성화해야 하는 것은 아니며, 필요한 언어만 활성화해야 합니다. 
2. 언어 전환기를 쉽게 찾을 수 있도록 배치하세요. 페이지 상단 또는 하단에 언어 전환기를 두는 것이 좋습니다. 두 위치 모두 훌륭한 선택입니다. 모바일 기기의 경우, 언어 전환기가 메인 네비게이션의 메뉴 항목으로 포함되는 경우가 많습니다.
3. 워드프레스 언어 전환기를 디자인에 맞게 스타일링하세요. 기본 제공되는 일반적인 언어 전환기를 그대로 사용하는 것도 유혹적일 수 있지만 , 사이트의 디자인과 분위기에 맞춰 커스터마이징하는 것이 좋습니다.
4. 선택한 언어의 깃발 또는 이름을 선택합니다. 깃발은 다채롭고 상징적이며 공간 효율적이라는 여러 가지 이유로 디자이너들이 사용하기를 원하지만, 깃발은 언어를 묘사하기 위해 고안된 것이 아닙니다. 이로 인해 여러 가지 문제가 발생합니다.

잘 설계된 워드프레스 언어 전환기 구현하기

적절한 플러그인을 사용하면 사이트에 워드프레스 언어 전환기를 쉽게 추가할 수 있습니다. ‘ Weglot ’를 사용하면 언어 전환기가 자동으로 추가되고, 출시 첫날부터 완전한 AI 번역 기능과 이미지 내 텍스트를 번역하는 ‘이미지 번역’ 기능을 이용할 수 있으며, 개발자 도움 없이도 모든 편집을 자유롭게 제어할 수 있습니다. 이 플러그인은 백그라운드에서 작동하여 콘텐츠가 변경될 때마다 브랜드 정체성에 부합하는 번역 내용을 최신 상태로 유지해 줍니다. 또한 를 통해 Weglot 대시보드에서자동 리디렉션을 활성화할 수 있습니다. 이 기능은 방문자의 브라우저 언어를 감지하여 사이트의 올바른 언어 버전을 자동으로 제공합니다.

Weglot 또한 다국어 SEO를 고려하여 구축되었습니다. 사이트의 각 번역 버전에 대한 언어별 하위 디렉터리를 자동으로 생성하고, hreflang 태그를 추가하며, 메타데이터를 번역하므로, 검색 엔진과 AI 기반 검색 기능이 첫날부터 모든 언어 버전을 찾아 색인화할 수 있습니다.

다국어 SEO를 염두에 두고 개발된 워드프레스 번역 플러그인을 선택하세요. 자동으로 생성되는 언어별 하위 디렉터리, 번역된 메타데이터, hreflang 태그 구현 덕분에 ‘ Weglot ’는 다국어 사이트의 기술적 측면, SEO, 번역 측면을 모두 처리해 줍니다.

사이트에 워드프레스 언어 전환기를 추가할 준비가 되셨나요? Weglot무료 요금제를 이용해 보세요. 신용카드 등록이 필요 없습니다.