다국어 웹사이트 디자인을 위한 9가지 팁

점점 더 연결되는 세상에서 다국어 웹사이트는 흔해지고 있어요. 그런데 디자인하는 건요? 특히 사이트에 적용해야 할 웹 디자인 변경 사항들을 고려하기 시작하면 생각보다 손이 많이 갈 수 있답니다.

기본은 간단해요. Weglot을 사용하면 5분도 안 돼서 사이트에 여러 언어를 추가할 수 있죠. 하지만 그 다음에는 언어 전환 버튼을 어디에 둘지, 사용자가 영어에서 RTL 언어(오른쪽에서 왼쪽으로 쓰는 언어)로 바꿀 때 레이아웃 변경을 어떻게 맞출지, 그리고 문화적으로 적절한 색상, 이미지, 아이콘을 사용하는 것까지 고려해야 해요.

이 가이드에서 저희는 최적의 다국어 웹사이트를 계획하는 데 도움이 되도록 가장 중요한 디자인 고려 사항들 중 일부를 살펴볼게요.

1. 일관된 브랜딩을 위해 글로벌 템플릿을 사용하세요.

누군가 여러분의 다국어 사이트에 방문했을 때, 어떤 언어 버전으로 접속하든 일관된 사용자 경험을 제공하고 싶을 거예요. 다시 말해, 영어 사이트에 방문한 인도 방문객들은 힌디어 버전과 동일한 브랜딩과 디자인을 봐야 한다는 거죠.

이중 언어 또는 다국어 방문객들이 여러분의 다국어 사이트의 다른 버전을 보는 것을 막을 수는 없지만, 기본 언어에서 전환할 때 동일한 브랜딩, 레이아웃, 웹 디자인 요소를 볼 수 있도록 할 수는 있어요.

WordPress 같은 콘텐츠 관리 시스템을 Weglot과 함께 사용하면, 일관성 있는 다국어 웹사이트를 쉽게 만들 수 있어요. Weglot은 웹사이트 빌더의 테마와 매끄럽게 연동되어 콘텐츠를 자동으로 번역해 줄 거예요. 또한, 이커머스 플러그인처럼 사이트 기능의 다른 중요한 부분들과도 잘 통합될 거예요. 즉, 다국어 웹사이트에 추가하는 여러 언어마다 다른 테마나 디자인을 사용할 필요가 없다는 뜻이죠.

예를 들어, 호주 같은 나라에서 에어비앤비 홈페이지에 접속하면…

… 그리고 일본어로 전환해도 디자인과 브랜딩이 두 언어 모두에서 일관되게 유지돼요.

즉각적으로 알아볼 수 있는 디자인은 브랜드 인지도 강화에 도움이 될 뿐만 아니라, 다국어 웹사이트의 향후 업데이트를 용이하게 하고 다양한 언어로 인해 UI 또는 UX 변경이 필요할 때 발생하는 문제를 줄여줍니다.

2. 언어 전환 버튼을 정말 찾기 쉽게 만드세요

언어 전환 드롭다운을 홈페이지와 사이트의 다른 모든 페이지에서 눈에 잘 띄는 곳에 배치하세요. 다국어 웹사이트를 보면 페이지의 헤더나 푸터에 언어 전환 버튼이 있는 것을 알 수 있을 거예요.

다국어 사이트에 어떤 옵션을 선택하든, 정말 쉽게 찾을 수 있도록 하세요.

언어 전환 옵션이 아주 명확한지 확인하는 것도 중요해요. 새로운 언어를 해당 언어의 원어로 표시하는 것이 가장 좋아요. 예를 들어, "German" 대신 "Deutsch"를, "Japanese" 대신 "日本語"를 사용하는 식이죠.

예를 들어 Asana는 사용 가능한 여러 언어 이름이 있는 드롭다운 메뉴를 사용해요.

어떤 언어를 사용하든, 다국어 웹사이트 방문자들이 환영받는다고 느끼게 해주고 싶을 거예요. 언어 전환 버튼을 찾기 쉬운 곳에 두면 그렇게 하는 데 도움이 될 거예요.

3. 방문자가 선호하는 언어를 선택하게 하세요

사용자가 선호하는 언어를 선택하게 하는 건 당연하다고 생각할 거예요. 하지만 많은 다국어 사이트들이 언어 선택을 정말 어렵게 만들어요. 대신, 사용자에게 지역을 바꾸도록 강요하죠.

대기업 브랜드들이 특히 심해요. 기본 언어만 바꾸고 싶은데도 다국어 사이트의 지역을 바꾸도록 강요하는 경우가 많아요. (예를 들어, www.adobe.com에서 www.adobe.com/us/로 바꾸는 식이죠.)

힌디어를 쓴다고 해서 기업의 다국어 웹사이트에서 해당 지역으로 전환하고 싶어 하는 건 아니에요. 뉴욕에 살면서 미국 사이트에서 구매하고 싶은데, 사이트는 힌디어로 읽고 싶다면 어떨까요? 다국어 웹사이트에서 구매하는 데 방해하지 마세요. 그들이 선호하는 언어로 콘텐츠에 접근할 수 있도록 도와주세요.

방문자가 선호하는 언어를 직접 선택하게 하는 기업의 예시가 있어요. 바로 Uber인데요, 언어 전환 옵션을 푸터에 표시하고 있어요.

"English"를 클릭하면 모달 창이 나타나서 영어와 프랑스어 중에서 선호하는 언어를 선택할 수 있게 해줘요.

Uber의 언어 전환 디자인이 좋은 점은 방문자가 지역을 바꾸도록 강요하지 않고 선호하는 언어를 선택할 수 있게 해준다는 거예요.

방문자의 사용자 경험을 더 개선하고 싶다면, 기본 언어를 "기억"하는 것을 고려해 보세요. 그러면 다음번에 다국어 웹사이트를 방문할 때 자동으로 모국어로 로드될 거예요.

언어 자동 감지

많은 다국어 웹사이트들이 웹 브라우저의 모국어를 감지해서 사용자에게 기본 언어를 자동으로 설정해 줘요.

이게 사용자 시간을 절약해 주긴 하지만, 언어 감지를 통한 자동 번역 제공은 완벽하지 않아요. 다국어 웹사이트의 "잘못된" 버전에 접속할 수도 있는 사용자들을 염두에 두는 것이 중요해요.

방문자가 스페인에 물리적으로 위치해 있고 다국어 웹사이트가 이를 자동 감지해서 스페인어를 표시할 수 있어요. 하지만 그 방문자는 스페인어를 읽지 못하는 영어 원어민일 수도 있죠.

그러니 위치를 자동으로 감지할 계획이라면, 방문자들이 다른 언어를 선택할 수 있도록 언어 전환 버튼도 함께 제공하세요.

Weglot은 방문자의 브라우저 언어에 따라 자동으로 리디렉션하는 옵션을 제공해요. 14일 무료 체험으로 당신의 웹사이트에서 Weglot이 어떻게 작동하는지 직접 확인해 보세요.

국기 vs 언어 이름

국기는 종종 언어를 나타내는 데 사용되지만, 몇 가지 고려해야 할 문제점이 있어요.

• 국기는 언어가 아니라 국가를 나타내요.
• 한 국가에 둘 이상의 공식 언어가 있을 수 있어요.
• 한 언어가 둘 이상의 국가에서 사용될 수 있어요.
• 방문자가 국기를 알아보지 못하거나 (아이콘 크기 때문에) 비슷한 국기 때문에 혼란스러워할 수도 있어요.

결국, 어떤 언어로든 이해하기 쉬운 언어 전환 옵션을 제공하고 싶을 거예요.

4. 텍스트 확장 고려하기

Google 번역처럼 텍스트가 한 언어에서 다른 언어로 번역될 때, 원문과 번역문의 길이가 달라져요. 이는 디자인 레이아웃을 잡을 때 어려움이 될 수 있죠.

어떤 문어체 언어는 다른 언어보다 간결해요. 일본어나 중국어 같은 언어는 한두 글자로 정보를 전달하지만, 다른 언어에서는 여러 단어가 필요할 수 있어요.

스페인어나 영어 같은 언어는 말이 많아서, 다른 언어보다 최대 30% 더 많은 공간이 필요할 때도 있어요.

W3C의 번역 텍스트 크기 가이드는 정말 유용한 조언을 많이 담고 있어요. 이 가이드를 꼭 전부 읽어보시길 강력히 추천해요.

W3C는 기계 번역 도구가 버튼, 입력 필드, 설명 텍스트와 같은 적응형 UI 요소를 갖는 것이 중요하다고 강조해요.

예를 들어, Flickr를 여러 언어로 번역할 때 디자이너들은 사진 아래에 표시되는 조회수 텍스트를 고려해야 했어요.

아래 표는 여러 언어에서 'view'라는 단어의 상대적인 길이를 원래 영어 단어와 비교한 비율로 보여줍니다:

영어에서 이탈리아어로 번역했을 때 300%나 늘어난 거예요!

여기서 기억해야 할 건, 텍스트는 보통 너비가 늘어나거나 줄어든다는 거예요. 그러니 다국어 웹사이트를 만들 때 이 점을 꼭 고려해야 해요. 그리고 원문 텍스트가 짧을수록 번역문은 더 길어질 가능성이 높다는 것도 알아두세요. 만약 공간이 부족하다면, 좀 더 자유로운 번역을 시도하거나 새로운 언어에 맞춰 글자 크기를 조절해 보세요.

글자 크기와 줄 간격도 또 다른 고려 사항이에요. 라틴어가 아닌 텍스트는 라틴어보다 글자가 훨씬 더 큰 경우가 많아요. 아랍어 같은 문자는 라틴어보다 줄 사이에 더 많은 세로 공간이 필요할 거예요.

5. 웹 폰트 호환성과 인코딩을 고려하세요

W3C에서는 웹 페이지의 인코딩을 항상 지정해야 한다고 말해요. 어떤 언어든 특수 문자가 제대로 표시되도록 UTF-8을 사용하는 것을 권장합니다.

페이지 헤더에 UTF 선언을 하는 방법은 다음과 같아요:

사용하는 모든 웹 폰트는 영어 외의 모든 언어와 호환되어야 해요. 특히 WordPress 다국어 사이트에서 지원하는 언어들, 특히 라틴어 기반이 아닌 언어들을 위해서요. 즉, 사용하는 폰트에 필요한 모든 글자와 기호가 포함되어 있어야 한다는 뜻이죠.

어떤 폰트는 라틴어 스크립트는 지원하지만 RTL(오른쪽에서 왼쪽으로 쓰는 언어)이나 키릴 문자는 지원하지 않을 수도 있어요. 그러니 폰트를 사용하기 전에 필요한 비영어권 언어가 포함되어 있는지 꼭 확인해 보세요.

예를 들어, Google Fonts에서는 폰트 패키지를 다운로드하기 전에 언어를 선택할 수 있어요:

한 가지 언어만 해도 수백 개의 글자로 이루어질 수 있어서 폰트 파일 크기가 엄청나게 커질 수 있어요. 다국어 웹사이트용 폰트를 고를 때 기억해야 할 또 다른 점이죠.

6. 오른쪽에서 왼쪽으로 쓰는 언어를 위한 디자인

오른쪽에서 왼쪽으로 쓰는 언어를 위한 페이지를 디자인하는 건 쉽지 않은 일이에요. SteelKiwi 개발자 로버트 도디스(Robert Dodis)가 Smashing Magazine에 쓴 글처럼, RTL을 위한 디자인은 "인터페이스를 뒤집는 것"을 의미해요.

예를 들어, Facebook의 왼쪽에서 오른쪽으로 쓰는 디자인은 이렇게 생겼어요:

그리고 아랍어에서 Facebook의 오른쪽에서 왼쪽으로 쓰는 디자인은 이렇게 생겼죠:

스크롤 바 위치까지 바뀌는 걸 보세요!

LTR(왼쪽에서 오른쪽으로 쓰는 언어)과 RTL(오른쪽에서 왼쪽으로 쓰는 언어) 모두를 위해 디자인한다면, 디자인을 좌우 대칭으로 만드는 건 고려해야 할 부분이에요.

RTL 디자인에 대한 자세한 내용은 Robert의 Smashing Magazine 기사를 꼭 읽어보시길 강력히 추천해요. 여기서 바퀴를 재발명하고 싶지는 않으니, 그의 튜토리얼을 읽어보세요. 저희는 Weglot이 RTL 언어를 어떻게 지원하고 다국어 웹사이트의 번역 과정을 얼마나 쉽게 만들 수 있는지 보여드리고 싶어요.

Weglot의 번역 서비스는 RTL 언어를 지원하며, CSS 규칙을 사용해서 다국어 사이트의 레이아웃을 RTL 언어에 맞게 조정할 수 있어요. 사용 가능한 RTL 언어는 다음과 같아요.

• 아랍어 (ar)
• 히브리어 (he)
• 페르시아어 (fa)
• 우르두어 (ur)

Weglot으로 다국어 사이트에 RTL 언어를 추가한 후에는 CSS 규칙을 레이아웃에 적용해서 표시 방식을 사용자 지정할 수 있어요. WordPress 관리자 페이지에서 Weglot > 언어 버튼 디자인 (선택 사항) 으로 이동한 다음, CSS 재정의까지 아래로 스크롤하세요. 텍스트 영역에 원하는 CSS 규칙을 추가하면 돼요. 기본 언어의 글꼴, 크기, 줄 간격 등을 변경해서 디자인에 맞게 스타일을 지정할 수 있을 거예요.

Weglot으로 RTL 언어를 추가하고 스타일을 지정하는 방법은 이게 전부예요! Weglot이 RTL 언어를 어떻게 지원하는지에 대한 더 자세한 내용은 문서에서 확인할 수 있어요.

7. 문화적으로 적절한 이미지와 아이콘을 사용하세요

이미지, 아이콘, 기타 그래픽은 모든 웹 페이지의 필수 요소예요. 하지만 시각적인 요소는 본질적으로 주관적이라서 다른 문화권에서는 다르게 해석될 수 있어요.

예를 들어, 클라란스(Clarins) 프랑스어 홈페이지에는 백인 여성이 등장해요:

하지만 회사 일본 홈페이지에 방문하면 일본인 여성 이미지가 있어요:

시각적인 요소도 불쾌감을 줄 수 있어요. 서양 문화권에서는 아무렇지 않은 이미지라도 다른 나라에서는 금기시될 수 있거든요. 예를 들어, 동성애가 불법이고 여성의 권리가 아직 충분히 인정되지 않는 나라에서는 동성 커플이나 성 평등을 묘사한 이미지가 받아들여지지 않을 거예요.

아이콘 같은 작은 요소들도 신경 써야 해요. 다국어 웹사이트를 방문하는 특정 지역 사람들에게 어떤 의미로 다가갈지 생각해봐야 하죠. 예를 들어, 영어를 쓰는 호주 사용자에게는 지구본 아이콘이 아프리카 사용자에게는 아주 다르게 보일 수 있어요:

위에 있는 세 번째 아이콘은 지구본을 나타내지만 특정 국가나 지역을 보여주지 않아서 다국어 웹사이트에 사용하기에 더 적합해요.

이미지나 다른 그래픽 요소들을 검토할 때는 지역적, 문화적 민감성을 고려해야 해요.

텍스트가 포함된 이미지나 다른 그래픽은 사용하지 마세요. Weglot 같은 도구로는 포함된 텍스트를 번역할 수 없으니, 아예 사용하지 않는 것이 좋아요.

8. 문화적으로 적절한 색상 사용하기

다양한 문화권에서 색상을 보고 해석하는 방식은 전 세계적으로 아주 많이 달라요.

예를 들어, 서양 문화권에서 빨간색은 사랑, 에너지, 열정, 위험을 상징해요. 아시아 문화권에서는 행운, 번영, 축하, 장수를 상징하는 아주 중요한 색이죠. 반대로 일부 아프리카 국가에서는 빨간색이 죽음과 공격성을 연상시키기도 해요.

파란색은 긍정적인 의미가 많아서 디자인에 사용하기에 가장 안전하고 전 세계적으로도 가장 잘 받아들여지는 색상으로 여겨져요. 슬픔이나 우울함과도 연관되지만, 차분하고 평화로운 느낌을 주는 색이죠. 또한, 신뢰와 권위를 상징하기 때문에 은행 로고에 가장 많이 사용되는 색이기도 해요.

다국어 웹사이트 디자인에 사용할 색상을 고를 때는 사용하려는 색상과 관련된 상징들을 구글에서 꼭 검색해보세요.

9. 날짜 및 기타 형식

모든 나라가 같은 날짜 형식을 사용하는 건 아니에요. 심지어 영어권 국가들 사이에서도 다르죠. 예를 들어, 영국과 유럽에서는 일-월-년 순으로 날짜를 표기하는 게 일반적이지만, 미국에서는 월-일-년 순으로 표기해요.

타겟 고객에 따라 측정 단위를 번역해야 할 수도 있는데, 이건 SEO에도 도움이 돼요. 전 세계의 90%가 미터법을 사용하지만, 미국, 라이베리아, 미얀마는 여전히 야드파운드법을 쓰고 있거든요.

내 디자인에 딱 맞는 WordPress 번역 플러그인 선택하기

WordPress 번역 플러그인은 종류도 다양하고, 특정 디자인과 작동하는 방식도 제각각이에요. 하지만 당신의 다국어 웹사이트와 매끄럽게 통합되는 것이 확실한 솔루션은 바로 Weglot이에요.

Weglot의 Visual Editor를 사용하면 사이트의 프런트엔드와 서브도메인 전체에서 콘텐츠를 번역할 수 있어서, Google 번역처럼 사이트 디자인과 레이아웃 안에서 어떻게 보이는지 직접 확인할 수 있어요.

Weglot을 사용하면 언어 전환 버튼의 디자인과 위치를 100% 맞춤 설정할 수 있어요. 기본 버튼은 어떤 사이트에도 잘 어울리도록 디자인되었지만, 사용자 지정 CSS를 통해 원하는 어떤 형식으로든 스타일을 지정할 수도 있답니다.

게다가 Weglot은 이 글에서 설명한 디자인 원칙들을 지원해요. 예를 들면 다음과 같아요.

• 일관된 브랜딩을 위한 글로벌 템플릿 사용
• 찾기 쉬운 언어 전환 옵션 제공
• 방문자가 원하는 언어를 선택할 수 있도록 하기
• 자동 UTF 인코딩
• RTL 언어 지원

Weglot이 제공하는 가장 중요한 디자인 관련 기능인 언어 전환 버튼 꾸미기를 살펴볼까요?

Weglot으로 사이트의 언어 전환 옵션 사용자 지정하기

WordPress 다국어 웹사이트에 Weglot 플러그인을 설치하고 설정한 후에는 API 키, 기본 언어, 그리고 Google 번역처럼 콘텐츠를 번역하고 싶은 언어를 입력하라는 메시지가 나타날 거예요.

Weglot 계정이 아직 없다면, API 키를 받으려면 계정을 만들어야 해요.

변경 사항을 저장한 후, 새로운 다국어 웹사이트의 프런트엔드를 새로고침하면 오른쪽 하단 모서리에 새로운 언어 전환 버튼이 보일 거예요. 이 버튼을 클릭하면 사용 가능한 언어들이 펼쳐지면서 원하는 번역을 표시할 수 있게 된답니다.

기본적인 꾸미기를 시작하려면 Weglot > 언어 버튼 디자인 (선택 사항)으로 가세요. 이 화면에서 다음을 선택할 수 있어요:

• 드롭다운 메뉴를 사용할지 여부
• 국기 이미지를 사용할지 여부
• 국기 이미지 종류
• 언어 이름 표시하기
• 언어 코드만 표시하기

CSS 재정의 섹션은 다국어 웹사이트에서 언어 전환 버튼이 어떻게 보일지 스타일을 지정하기 위해 CSS 규칙을 적용할 수 있는 곳이에요. 예를 들어, 다음과 같이 할 수 있죠:

• 버튼의 화살표 제거하기
• 배경색을 바꿔보세요.
• 스크롤 바를 넣어보세요.
• 테두리를 없애세요.
• 패딩을 넣어보세요.

Weglot은 이 글에서 언어 버튼 디자인을 꾸미는 방법에 대한 몇 가지 예시를 제공하고 있어요.

Weglot 설정 화면을 아래로 내리면, 언어 전환 버튼을 어디에 둘지 안내를 찾을 수 있을 거예요.

• 메뉴에 추가하기. 외모 -> 메뉴로 이동해서 Weglot 번역 사용자 지정 링크를 원하는 곳에 끌어다 놓으세요.
• 위젯으로 추가하기. 외모 -> 위젯으로 이동해서 Weglot 번역 위젯을 원하는 곳에 끌어다 놓으세요.
• 쇼트코드를 사용해서요. Weglot 쇼트코드 [ weglot_switcher ] (띄어쓰기 없이)를 사용해서 원하는 곳에 언어 전환 버튼을 놓을 수 있어요.
• 소스 코드에 직접 넣어보세요. HTML 페이지 소스 코드에서 원하는 곳에 다음 코드를 추가할 수 있어요.

<div id=”weglot_here”></div>

여러 언어를 지원하는 웹사이트에서 언어 전환 버튼을 어떻게 꾸밀 수 있는지 보여주기 위해 (WordPress든, Shopify든, 어떤 종류의 웹사이트든 상관없이), 아래에서 Patyka가 페이지 왼쪽 상단에 언어 전환 버튼을 어떻게 보여주는지 확인할 수 있어요.

언어는 이름으로 표시되고, 스위치를 클릭해서 언어를 선택하면 페이지 내용이 선택한 언어로 번역되어 업데이트돼요.

성공 사례: Maestrooo가 Weglot을 사용하는 방법

2013년에 설립된 Maestrooo는 프랑스에 기반을 둔 웹 개발 에이전시로, From Future와 Patyka를 고객으로 두고 있어요. Maestrooo는 현재 프랑스 Shopify Plus 고객 대부분을 담당하고 있어요.

Maestrooo는 고객의 요구 사항에 쉽게 맞출 수 있는 튼튼하고 믿을 수 있는 다국어 웹사이트 솔루션을 찾고 있었어요. 여러 솔루션을 테스트해 본 결과, SEO나 hreflang 관리에서 문제가 있다는 것을 알게 되었고, 결국 Weglot을 발견하게 되었죠.

Weglot은 Maestrooo 고객 사이트의 모든 콘텐츠를 번역해 줘요. 동적 콘텐츠든, 다른 앱으로 생성된 콘텐츠든, 심지어 결제 과정까지도요. 다국어 웹사이트의 레이아웃에는 전혀 영향을 주지 않으면서 말이죠.

Maestrooo는 고객을 위한 맞춤형 웹사이트를 디자인하는 것 외에도, Shopify 테마 스토어의 공식 테마도 개발하고 있어요. 다른 다국어 웹사이트 솔루션들은 Maestrooo 테마의 서식을 망가뜨리는 경우가 많지만, Weglot은 항상 잘 작동하는 번역 솔루션을 제공하죠.

Maestrooo는 매년 8,000명에서 12,000명의 고객이 Weglot을 사용해 다국어 웹사이트로 Shopify를 시작할 수 있도록 돕고 있어요.

현지화된 디자인으로 완벽한 문화 최적화를 해보세요.

이 글에서 살펴본 각 디자인 원칙들은 멋진 모습과 즐거운 사용자 경험을 제공하는 다국어 웹사이트를 만드는 데 큰 도움이 될 거예요.

사이트 방문자와 고객에게 모국어로 최고의 경험을 제공하려면, 다국어 웹사이트 외에도 다른 부분들을 신경 쓰는 게 좋아요. 마케팅 자료와 고객 지원도 번역하는 걸 고려해 보세요.

그리고 다국어 웹사이트의 속도와 성능도 고려해 보세요. 인터넷 속도가 빠르지 않은 일부 국가에서는 큰 언어 팩을 다운로드하는 것이 방문자들이 콘텐츠에 접근하기 더 어렵게 만들 수 있어요.

적합한 다국어 웹사이트 번역 플러그인과 사용하기 쉬운 번역 옵션을 제공하는 사이트 디자인만 있다면, 고객들이 선호하는 언어로 시각적으로 매력적인 UI와 UX를 경험할 수 있도록 도울 수 있을 거예요. 14일 무료 체험으로 Weglot을 부담 없이 사용해 보거나, 가입 없이 제품 둘러보기를 해보세요!