웹사이트 언어 선택기: 팁, 모범 사례 및 예시

다국어 사이트를 운영한다면, 웹사이트에 언어 선택기(가끔 언어 전환기라고도 불려요)를 두는 게 좋을 거예요. 방문자들이 어떤 번역된 사이트 버전을 제공하는지 볼 수 있게 해줘서, 원하는 언어를 직접 고를 수 있거든요.

언어 선택기는 이 스크린샷처럼 생겼어요:

하지만 언어 선택기가 어디에 위치하는지(헤더, 푸터 등)나 국가 국기 아이콘이 표시되는지 등, 보여지는 방식은 꽤 다양해요.

좋은 소식은 언어 선택기를 추가하는 게 어렵지 않다는 거예요. 처음부터 나만의 언어 선택기 도구를 디자인하고 개발할 때 어떤 것들이 필요한지 함께 알아볼게요.

게다가 더 쉬운 방법도 있어요. 내장된 (그리고 원하는 대로 바꿀 수 있는) 언어 선택기가 포함된 번역 소프트웨어 또는 플러그인을 사용하는 거죠. 이건 웹사이트 현지화에도 아주 유용하답니다.

이 글에서는 다양한 종류의 언어 전환 버튼과, 언어 전환 버튼을 눈에 잘 띄고 편리하게 유지하는 몇 가지 팁, 그리고 다국어 웹사이트에 언어 선택 버튼을 쉽고 멋지게 추가하는 방법을 알아볼 거예요.

바로 해결책을 찾고 계신가요? Weglot의 14일 무료 체험을 이용해 보세요. 몇 분 만에 웹사이트에 언어 선택기를 추가할 수 있답니다!

웹사이트 언어 선택기 추가하기 (팁 & 모범 사례)

이미 다국어 사이트를 운영 중이고 언어 선택기만 추가하면 된다면, 디자이너가 만든 목업(시안)을 개발자가 구현할 수도 있을 거예요. 전반적인 사용자 경험을 좋게 만드는 데 도움이 될 몇 가지 팁을 알려드릴게요.

쉽게 찾을 수 있게 하세요

영어가 모국어가 아닌 사람이 여러분의 영어 웹사이트에 접속하면, 주로 탐색 영역(헤더, 푸터)을 살펴보면서 자기 언어로 된 사이트가 있는지 찾아볼 거예요.

그런데 언어 선택 옵션이 보이지 않으면, 사이트가 영어로만 되어 있다고 생각하고 바로 다른 곳으로 가버릴 거예요. 이건 여러분의 비즈니스에 손해를 줄 수 있어요.

그래서 가장 좋은 방법은 방문자들이 언어 선택기를 어디에서 찾을지 미리 파악하고 그곳에 두는 거예요. 내비게이션 메뉴가 있는 상단이든, 페이지 하단이든, 사이드바든, 아니면 팝업창이든 말이죠.

몇 개의 언어로 제공할지 고려하세요

예를 들어, 사이트를 다른 언어 하나로만 번역할 예정이라면 드롭다운 메뉴를 사용하지 않는 게 좋을 수도 있어요.

하지만 세 개, 네 개, 또는 그 이상의 다양한 언어로 번역할 계획이라면, 드롭다운 메뉴가 더 깔끔해 보이고 사용하기도 편리할 거예요.

디자인보다 기능을 우선하세요

물론 언어 선택기가 사이트 디자인과 잘 어울리면 좋겠죠. 하지만 이 디자인의 핵심은 기능이라는 점을 잊지 마세요.

방문자들을 헷갈리게 하고 싶지 않을 거예요. 사이트가 다른 언어로도 제공된다는 것을 아주 명확하게 보여주고 싶을 테니까요. 그리고 언어 전환도 최대한 쉽게 만들고 싶을 거고요.

다시 말하지만, 다국어 사이트를 운영하고 있고 번역 관리에 소프트웨어를 사용할 계획이 없다면, 직접 언어 버튼을 디자인하고 개발하는 것은 합리적이에요.

하지만 번역 소프트웨어를 사용하고 있다면 그럴 필요가 없어요. 대부분의 웹사이트 번역 소프트웨어는 언어 선택기를 추가할 수 있게 해주거든요. (저희는 사이트 번역과 번역 업데이트를 위해 번역 소프트웨어를 사용하는 것을 추천해요.)

Inbenta처럼 멋진 언어 전환 버튼을 원하시나요? 지금 바로 Weglot을 사이트에서 무료로 사용해보고 언어 선택 버튼을 디자인할 수 있는 다양한 가능성을 탐색해 보세요.

언어는 현지어로 표기하세요

자신도 모르게 웹사이트에 언어를 여러분의 모국어로 표기했을 수도 있어요. 만약 사이트가 영어라면, 언어 선택기에 독일어, 중국어, 스페인어 등을 영어로 적었을 거라는 뜻이죠.

하지만 이건 방문자들에게는 직관적이지 않아요. 언어의 현지 이름은 영어 이름과 완전히 다를 수 있거든요!

예를 들어, 저희 언어 전환 버튼은 프랑스어(Français), 독일어(Deutsch), 스페인어(Español), 이탈리아어(Italiano), 일본어(日本語), 네덜란드어(Nederlands) 옵션을 제공해요. 이렇게 하면 해당 언어를 사용하는 사람들이 원하는 사이트 언어를 쉽게 찾을 수 있죠.

깃발 아이콘 사용이 최선이 아닐 수도 있어요

깃발이 언어를 시각적으로 잘 나타낸다고 생각하기 쉽지만, 그게 전부는 아니에요.

이게 무슨 말이냐면, 미국에서는 영어를 미국 국기와 연관 짓지, 영국 국기(유니언 잭)와 연관 짓지 않아요.

브라질 사람들은 포르투갈어를 브라질 국기와 연관 짓지, 포르투갈 국기와 연관 짓지 않아요. 스페인의 스페인어 사용자들도 마찬가지예요. 그들은 자기 언어를 스페인 국기와 연관 짓지, 멕시코 국기와 연관 짓지 않아요.

물론 깃발을 사용할 수도 있어요. 깃발은 시각적으로 눈에 잘 띄어서 찾기 쉽고, 사용자 경험(UX) 디자인 측면에서도 보기 좋으며, 여러분의 상황에 맞을 수도 있거든요. 하지만 누구를 주요 고객으로 삼느냐에 따라 달라져요. 자칫하면 일부 고객에게 소외감을 줄 수도 있거든요.

리디렉션은 신중하게 사용하세요

웹사이트 언어 선택을 하는 한 가지 방법은 사용자의 위치(IP 주소 활용)나 브라우저 언어에 따라 자동으로 리디렉션하는 거예요.

이 방식은 웹사이트가 사용자 브라우저 언어를 감지해서 해당 언어 버전으로 바로 연결해 주는 거예요.

편리하긴 하지만, 항상 자동으로 연결해 주는 게 좋은 건 아니에요. 사용자의 위치가 꼭 사용하는 언어와 같지는 않거든요.

스페인으로 한 달 휴가 온 중국인 관광객을 생각해 보세요. 보고 싶은 웹사이트가 바로 스페인어로 뜨면 분명 당황할 거예요!

또, 브라우저 언어가 덴마크어로 설정되어 있다고 해서 꼭 덴마크 주소로 물건을 배송받고 싶다는 뜻은 아니죠.

요약하자면, 사용자의 의도를 짐작하기보다는 직접 선호도를 물어보는 게 가장 좋아요. 사용자가 자기 위치, 기본 언어, 통화를 직접 선택할 수 있어야 하죠. Airbnb가 좋은 예시인데요, 사용자가 있는 나라의 언어를 쓴다고 짐작하지 않아요. 지구본 아이콘을 누르면 언어, 위치를 선택할 수 있고, 다음 탭에서는 통화도 고를 수 있답니다:

‍

그렇다고 리디렉션이 절대 좋지 않다는 건 아니에요. 예를 들어, 프랑스에 있는 프랑스 사용자가 실수로 웹사이트의 미국 버전에 접속했을 때는 리디렉션이 유용할 수 있죠.

하지만 자동 언어 선택을 제대로 구현한 웹사이트들도 있어요. 예를 들어, Zara는 영국 사이트에 머무르거나 프랑스 웹사이트로 이동할 수 있는 옵션을 제공하죠:

이건 여러 검색 의도에 유용하게 쓰일 수 있어요. 예를 들어, 여행할 지역의 이커머스 사이트에서 제품 재고나 상세 정보를 확인할 때 말이죠.

가능하다면 자동 완성 기능을 사용하세요

드롭다운 메뉴에 자동 완성 기능을 넣는 건 항상 좋은 생각이에요. 몇 글자만 입력해도 웹사이트가 찾으려는 언어를 추천해 주는 식이죠.

자동 완성 기능은 특히 제공하는 언어가 많아서 사용자가 자기 언어를 찾으려면 스크롤해야 할 때 아주 유용해요. 그렇게 하면 몇 초 만에 원하는 언어를 선택할 수 있거든요.

웹사이트 언어 선택기 디자인하기

웹사이트 언어 선택기를 디자인하는 방법은 아주 다양해요. 많은 사람이 간단한 버튼을 선택하지만, 어떤 사람들은 우리처럼 브랜딩을 더해서 개성을 살리기도 하죠!

드롭다운 또는 선택 메뉴

이건 웹사이트에서 제공하는 언어 버전을 보여주는 가장 흔한 방법 중 하나예요.

드롭다운, 즉 선택 메뉴는 옵션 목록이 펼쳐지면서 선택할 수 있는 모든 언어 설정을 보여주는 방식이에요.

지구본 아이콘, 언어 이름, 국기, 또는 언어 약어 등 어떤 방식으로든 명확하게 표시되어 있죠.

빠르고 쉬운 언어 선택기를 찾고 있다면, 이걸 가장 추천해요. 디자인할 수 있는 방법이 아주 다양하거든요. 눈에 잘 띄도록 만들어져서 보통 페이지 상단에서 볼 수 있어요. 여기처럼요:

어떤 웹사이트는 좀 더 독특한 방식을 택하기도 해요. Green Gifts의 웹사이트 선택기처럼 드롭업 메뉴를 사용하는 식이죠:

MINI 웹사이트는 언어 선택기에 마우스를 올리면 현재 언어 왼쪽에 다른 언어들을 보여줘요. Green Gifts처럼 각 언어를 국가 코드로 표시하고 있죠:

이런 효과를 내기 위해 특별한 코드를 사용했답니다:

버튼

언어 버튼은 특정 시장을 겨냥하고 있다는 것을 빠르고 확실하게 보여주는 방법이에요. 웹사이트에서 제공하는 언어가 몇 개 안 될 때 가장 효과적이죠. 왜냐하면 공간을 꽤 많이 차지하거든요.

Gardette Industries는 웹사이트를 프랑스어와 영어로만 제공하기 때문에, 여기에 언어 버튼을 두는 것이 합리적이에요.

언어 버튼과 웹사이트 배경의 대비 덕분에 버튼이 훨씬 더 눈에 잘 띄고, 사용자의 시선을 자연스럽게 끌어당겨요.

하지만 이 버튼들을 어디에 놓을지 신중하게 생각해야 해요. 중요한 콘텐츠를 가려서는 안 되고, 웹사이트에서 가장 주목받는 부분이 되어서도 안 되죠. 목표는 사용자가 원하는 것(선호하는 언어로 번역된 웹사이트)을 최대한 적은 클릭으로 얻게 하는 것이니까요.

텍스트 링크

눈에 덜 띄는 언어 선택기를 선호한다면 텍스트 링크를 고려해 볼 수 있어요. 보통 웹사이트 페이지 하단에서 찾을 수 있죠. 게다가, 전체 드롭다운이나 선택 메뉴를 만들기엔 언어 수가 너무 적고, 그렇다고 각 언어마다 버튼을 두기엔 너무 많을 때 딱 좋은 중간 지점이라고 할 수 있어요.

좋은 예시가 여기 있어요. W3C 웹사이트에서는 일본어와 중국어 간체를 텍스트 링크로 직접 나열해 두었죠.

Facebook은 텍스트 링크와 선택 메뉴를 섞어서 사용해요. 사용 가능한 언어들을 페이지 맨 아래에 두었는데, 로그인 페이지에 접속하면 아래로 스크롤해야 볼 수 있을 거예요.

+ 버튼을 클릭하면 수많은 언어가 있는 아주 큰 선택 메뉴가 나타날 거예요.

모달 창

모달은 무언가를 클릭했을 때 나타나는 작은 창이에요. 메인 페이지의 기능을 잠시 가리지만, 배경에는 계속 보이게 하죠. 이건 모달과 상호작용한 후에 다시 원래 페이지로 돌아갈 거라는 뜻이에요.

웹사이트 언어 선택기를 디자인할 때, 모달은 보통 눈길을 끌고 세련된 느낌을 주기 때문에 좋은 선택지가 될 수 있어요. 어떻게 설정하느냐에 따라 사용자가 선호하는 지역과 언어를 더 쉽게 선택할 수 있게 될 거예요.

Calvin Klein 웹사이트를 예시로 한번 볼까요?

웹사이트 언어 선택기는 "로그인/회원가입" 옆에 있는 오른쪽 상단의 지구본 아이콘을 클릭하면 나타나요. 이걸 클릭하면 선호하는 국가와 언어를 선택하는 모달이 뜰 거예요.

또 다른 예시는 Nestlé예요. 페이지 오른쪽 상단에 현재 어떤 웹사이트 버전을 보고 있는지 알려주죠.

그걸 클릭하면 페이지 전체를 차지하는 모달이 나타나는데, 꽤 큰 X 버튼이 있어서 쉽게 닫을 수 있어요.

모달이 확실히 눈에 잘 띄긴 하지만, 팝업처럼 사용자에게 방해가 될 수 있다는 점을 알아두는 게 중요해요. 사용자의 웹사이트 이용 경험을 방해하고 즉각적인 주의를 요구하거든요.

개인 정보 설정, 데이터 사용량, 경고 같은 중요한 내용을 사용자에게 알려야 할 때 유용하게 쓰일 수 있어요.

웹사이트 번역 소프트웨어로 웹사이트 언어 선택기 맞춤 설정하기

다국어 사이트를 만들고 있거나 이미 운영 중이더라도, Weglot을 사용해서 콘텐츠 번역 방식과 전체 번역 과정을 개선할 수 있어요. 게다가 쉽게 사용자 지정할 수 있는 언어 선택기까지 얻을 수 있다는 장점도 있죠.

먼저, Weglot에 대한 몇 가지 기본 사항을 알려드릴게요.

• Weglot은 어떤 CMS에도 쉽게 추가할 수 있어요 (WordPress, Squarespace, Wix, Shopify는 물론, 직접 만든 플랫폼에도요).

• Weglot은 Google 번역부터 DeepL까지 최고의 번역 엔진을 사용해서 웹사이트의 모든 콘텐츠를 빠르고 효율적으로 번역해 드려요.

• 콘텐츠를 110개 이상의 다양한 언어로 번역할 수 있어요. 여기에는 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 쓰는 언어도 포함되죠.

• Weglot은 각 번역본마다 고유한 URL을 만들어줘요. 예를 들어, weglot.com은 영어 사이트이고, weglot.com/fr은 프랑스어 사이트인 식이죠.

• 사이트의 모든 번역본은 콘텐츠 변경 사항에 따라 항상 최신 상태로 유지돼요. Weglot은 자동 콘텐츠 감지 기능을 사용해서 원본 사이트의 콘텐츠 변경 사항을 파악하고, 그에 맞춰 모든 번역본을 업데이트해 준답니다.

• 번역 내용을 완전히 자유롭게 관리할 수 있어요. 필요하다면 직접 수정할 수 있죠. Visual Editor로 사이트에서 번역 내용을 실시간으로 확인하고, 번역된 콘텐츠가 사이트 디자인과 레이아웃에 잘 맞도록 바로 수정할 수도 있어요.

시각적인 학습자이신가요? Weglot이 어떻게 작동하고 다국어 사이트를 관리할 때 얼마나 편리하게 해주는지 설명하는 짧은 영상이 있어요:

가장 중요한 건, Weglot으로 언어 선택 기능을 마음대로 바꿀 수 있다는 거예요. Weglot으로 번역된 모든 웹사이트에는 언어 선택 버튼이 생겨서, 방문자들이 번역된 콘텐츠를 제공한다는 걸 알 수 있죠.

다시 여기로 돌아와서:

하지만 Weglot을 사용하면 하나의 디자인에 갇힐 필요가 없어요. 대시보드에서 언어 전환 버튼이 어떻게 보일지 마음대로 꾸밀 수 있답니다.

다음 중에서 선택할 수 있어요:

• 언어 이름 전체를 표시할지, 아니면 약어/언어 코드(예: 영어는 EN, 스페인어는 ES, 프랑스어는 FR 등)만 표시할지 선택할 수 있어요.

• 깃발 아이콘을 표시할 수 있어요.

• 언어 선택기를 드롭다운 상자 형태로 표시할 수 있어요.

어떤 스타일의 국기(반짝이는 것, 무광택 등)를 사용할지 고를 수도 있고, 추가 CSS 코드를 넣을 공간도 있어서 언어 선택기를 브랜드에 더 잘 맞게 수정할 수도 있어요.

Weglot을 사용하면 언어 선택 버튼이 기본적으로 웹사이트 오른쪽 아래에 나타나지만, 원한다면 위치를 바꿀 수 있어요 (오른쪽 위, 왼쪽 아래 등).

사용하는 CMS에 따라 과정이 조금 다를 수 있지만, 이해를 돕기 위해 두 가지 영상 튜토리얼을 준비했어요.

WordPress를 사용할 때 언어 선택기 위치 바꾸기:

Shopify를 사용할 때 언어 선택기 위치 바꾸기:

만약 코드를 사용해서 Weglot을 사이트에 추가했다면, 이 지침을 따라 언어 선택 버튼의 위치를 바꿀 수 있어요.

간단 요약: 웹사이트 언어 선택기 사용자 지정 방법

웹사이트에 언어 선택기를 추가하는 방법은 크게 두 가지가 있어요.

1. 직접 디자인하고 개발하기. 이건 아주 큰 프로젝트는 아니지만, 다국어 사이트를 관리하기 위해 번역 소프트웨어를 사용하고 있지 않을 때만 필요해요. 언어 선택기를 디자인할 때는 다음 사항을 기억하세요: (1) 찾기 쉬워야 하고, (2) 어떤 언어를 제공하는지 명확해야 하며, (3) 웹사이트 디자인과 잘 어울려야 해요.

2. 웹사이트 번역 소프트웨어를 사용해 보세요. 제대로 된 웹사이트 번역 소프트웨어라면 언어 선택 버튼을 마음대로 꾸밀 수 있는 기능을 제공할 거예요. 위에서 Weglot 번역 소프트웨어를 사용할 때 언어 선택 버튼을 어떻게 꾸밀 수 있는지 살펴봤죠. 깃발을 추가하고, 전체 언어 이름을 표시하고, 사이트 어디에 버튼을 놓을지 선택하는 것까지요.

Weglot이 번역 작업을 간단하게 만들어주고 전 세계 사용자들에게 더 빨리 다가갈 수 있도록 도와줄 준비가 되셨다면, 지금 바로 14일 무료 체험을 시작해 보세요. 아무런 부담 없이요!