6개국 언어로 웹사이트 디자인하기
초보 디자이너의 다국어 디자인 극복기
해당 글은 외국인을 대상으로 한국어 온라인 교육 서비스를 제공하는 스타트업에서 다국어 웹사이트 디자인의 문제점을 극복한 방법 및 경험들을 정리한 글입니다. 다국어 디자인을 위한 기초적인 내용을 중심으로 다루고 있으니 참고해주시길 바랍니다.
6개국 언어로 웹사이트를 디자인하게 되었다.
한국어, 영어, 중국어(간체), 중국어(번체), 베트남어, 일본어, 인도네시아어까지 총 6개국의 언어를 반영한 반응형 웹사이트를 디자인하게 되었고, 처음 도전하는 다국어 디자인이었기 때문에 정말 많은 시행착오를 겪게 되었습니다. 다국어 디자인을 진행하면서 어려웠던 점은 다음과 같습니다.
첫째, 다양한 언어들이 어울리는 통합적 디자인을 설계해야 합니다.
둘째, 해당 국가의 문화, 언어, 생활에 대한 기본적인 이해가 필요합니다.
즉, 각 나라의 문화적 사회적 특성을 고려하면서 모든 나라에서 공통된 디자인 경험을 제공하는 '상반됨'을 고려해야 하는 것입니다. 이 2가지 어려움을 바탕으로, 언어에 관계없이 모든 방문자들이 똑같이 원활하고 직관적인 UX를 경험할 수 있도록 고민한 과정과 방법에 대해 말씀드리겠습니다.
다양한 언어들이 어울리는 통합적 디자인
다양한 언어들이 어울리는 통합적인 디자인이란, 언어 및 지역에 상관없이 모든 방문자가 공통된 서비스 경험을 누리고, 일관된 브랜드 이미지를 전달할 수 있도록 디자인하는 것을 의미합니다. 이처럼 통합적 디자인을 위해서는 기본적으로 3가지 요소들을 고려해야 한다고 생각합니다.
첫째, 텍스트 박스 크기의 중요성
한 가지 문장이 여러 언어로 번역되기 때문에 단순히 한국어만을 기반으로 디자인을 진행하게 되면 나중에 번역이 되었을 때 UI가 어그러지는 문제가 발생하였습니다. 예를 들어, 언어가 긴 경우엔 웹사이트가 여백 없이 빽빽하게 글로만 채워질 수도 있습니다. 해당 문제를 해결하기 위해 저는 2가지 원칙을 가지고 텍스트 박스 사이즈를 설정하였습니다.
가장 긴 언어의 텍스트 박스를 기준으로 디자인합니다.
2줄 이상의 문장은 의미를 고려하여 '엔터'가 들어가는 부분을 정하고 텍스트 박스 크기를 설정합니다.
첫째, 가장 긴 언어의 텍스트 박스를 기준으로 디자인하면 번역으로 인해 UI가 무너지는 문제를 최소한으로 줄일 수 있습니다. 다만, 그만큼 짧은 언어는 여백이 더 생긴다는 문제가 생기기 때문에 '완벽하게' 문제를 해결하는 방법은 아닙니다. 그러나 가장 쉽고 빠르게 UI를 설계해야 하는 상황에서는 사용해볼 법한 방법이라고 생각합니다. 둘째, 2줄 이상의 문장은 의미를 고려하여 '엔터(다음 줄로 넘어갈 부분)'가 들어가는 부분을 정하고 텍스트 박스를 구성하는 게 좋습니다. 이를 고려하지 않을 경우, 언어에 따라 이상한 구간에서 다음 줄로 넘어가는 경우가 있기 때문에 이 부분을 주의해야 합니다.
둘째, 이미지와 아이콘은 공통된 의미를 전달할 수 있도록
이모티콘 출처 : emojipedia (https://emojipedia.org/goblin/)다국어 디자인에서 사용되는 이미지와 아이콘은 국가에 상관없이 '보편적'으로 의미를 이해할 수 있는 것으로 사용해야 합니다. 위의 이미지처럼 일본의 텐구라는 괴물을 표현한 이모티콘을 보고 다른 국가의 사용자들은 온전히 텐구라고 이해하기보다는 괴물, 고블린, 도깨비라고 이해할 가능성이 높습니다. 물론 해당 이모티콘의 경우 영향력이 비교적 작지만, 만약 다국어 디자인에 중요한 이미지나 아이콘이 특정 문화나 정보에 대한 이해가 뒷받침되어야만 이해할 수 있는 요소라면 다양한 국가의 사용자에게 일관된 UX를 제공할 수 없을 것입니다.
셋째, 보편적인 의미를 추구하는 UX Writing
영화 포스터 출처 : Naver 영화 <기생충> 포스터 이미지기생충의 번역가가 영화에 등장하는 짜파구리를 Ram-don으로 번역해 짜파구리를 모르는 외국인이 이해할 수 있도록 노력했다는 일화는 영화의 재미있는 비하인드 스토리로 유명합니다. 다국어 디자인의 UX Writing에서도 번역은 매우 중요한 요소입니다. 사용자에게 전달하고 싶은 메시지를 정확히 전달할 수 있는 번역을 해야 하기 때문입니다.
물론 훌륭한 번역가와 함께라면 톡톡 튀는 재미있는 문구들을 고려해볼 법 하지만 모든 상황에서 번역이 원활하게 진행되는 것은 아니기 때문에 다국어 디자인의 UX Writing에서는 관용 표현 등을 줄인 '보편적인' 문구 사용을 권장드리고 싶습니다. 어설프게 번역된 관용표현 등을 이해하기 위해 헤매는 사용자들이 없도록 하는 게 중요하다고 생각하기 때문입니다.
각 나라의 특성을 고려한 디자인
각 나라의 특성을 고려한 디자인이란, 말 그대로 각 나라의 특성을 고려한 맞춤 디자인을 의미합니다. 이처럼 각 나라의 특성을 고려한 디자인을 위해서는 기본적으로 3가지 요소들을 고민해야 한다고 생각합니다.
첫째, 언어별 폰트 정하기
이미지 출처 : 구글 폰트 (https://fonts.google.com/)저는 공통된 사용자 경험을 제공하기 위해 최대한 같은 폰트 사용을 지향하는 편입니다. 폰트는 웹사이트의 분위기와 느낌을 정하는 중요한 디자인 요소이기 때문에 공통된 사용자 경험을 위해선 최대한 비슷한 폰트로 통일시킬 필요성이 있다고 생각하기 때문입니다. 그러나, 언어별 다른 느낌의 폰트를 사용하길 원하거나 혹은 이미 특정 폰트가 정해져 있어 비슷한 디자인 폰트를 찾으신다면 구글 폰트에서 제공하는 다채로운 폰트들 중에서 찾아보시는 것도 한 가지 좋은 방법이라고 생각합니다.
저의 경우엔 프로젝트 특성상, 모든 언어의 웹페이지에서 비슷한 폰트를 사용해야 하며 저작권에 위배되지 않는 무료 폰트를 사용해야 했기 때문에 구글 폰트에서 제공하는 폰트인 Noto sans체를 사용하였습니다.
둘째, 언어별 특성(어순, 길이 등)을 고려한 컴포넌트 사용
위의 이미지 예시처럼 만약 특정 컴포넌트가 문구 사이에 섞여 있다면 언어별로 특성(어순, 길이 등)이 바뀌어 전체적인 UI가 들쑥날쑥해질 수 있습니다. 때문에 저는 최대한 컴포넌트들을 '독립적'으로 배치하기 위해 노력하였고, 만약 불가피하게 언어별로 사이즈가 달라져야 하는 컴포넌트를 사용할 땐 개발자와 상의하여 최대한 사이즈, 마진(Margin), 패딩 등의 값이 변동이 적도록 디자인하였습니다.
이처럼 언어별 특성을 고려한 컴포넌트 사용은 다국어 디자인의 가장 기본적인 고려사항이지만, 의외로 다국어 디자인을 처음 해보시는 분들은 다른 요소들에 집중해 놓칠 수 있는 부분이기 때문에 더욱 주의를 해야 합니다. 예를 들어, 한국어에 익숙해 웹사이트를 왼쪽 → 오른쪽으로 읽도록 UI를 설계하다 보면 오른쪽 → 왼쪽으로 읽는 아랍어 웹사이트를 디자인할 때도 같은 UI를 적용하는 실수를 하게 될지도 모릅니다.
셋째, 나에게 익숙한 인터랙션이 누군가에게는 어려울 수 있다.
인터랙션은 웹사이트를 사용하는 사람들에게 다양한 메시지를 전달합니다. 사용자는 인터랙션을 통해 자신의 행동에 대해 웹사이트가 어떻게 인식을 했는지 파악하거나 추가적인 웹사이트 정보들을 이해하기도 합니다. 사용자가 '다음'이라고 쓰인 버튼을 마우스 커서로 선택했더니 버튼의 색상이 눌린 것처럼 어두운 색상으로 바뀌었다면, 사용자는 해당 인터랙션을 보고 '내가 버튼을 눌렀구나'라고 인식하는 것처럼 말입니다.
그러나 모든 인터랙션이 모든 국가에 보편적으로 활용된다는 편견은 위험합니다. 실제로 제가 1차로 웹사이트를 디자인했을 당시, 위의 이미지처럼 여러 이미지를 좌우로 스크롤할 수 있는 인터랙션을 추가했었는데, 이후 구글 애널리틱스로 사용자의 행태를 살펴보니 많은 사용자들이 이미지들을 좌우로 넘기는지 이해하지 못하고 넘기는 상황이 발생하였습니다. 그들에게 [이미지 4]는 그냥 오류로 인해 잘린 이미지로 이해된 것입니다. 해당 문제를 해결하기 위해 저는 2차 웹사이트 디자인 개편에서 'Scroll sideways'라는 문구를 추가해야만 했습니다. 이처럼 나에게는 설명이 필요 없을 정도로 당연한 인터랙션이 누군가에게는 어려울 수 있다는 고민을 놓치지 않아야 합니다.
6개국 언어의 번역가들과 협업하기
첫째, 한국어와 영어로 번역할 문장 전달하기
제가 협업한 번역가 분들은 크게 2가지 유형으로 구분됩니다. 첫째는 외국인이 한국어를 배워서 번역하는 경우이고, 둘째는 한국인이 외국어를 배워서 번역하는 경우였습니다. 협업하는 과정은 총 3단계로 구분됩니다.
1단계 | 디자이너가 한국어로 웹사이트를 디자인한다.
2단계 | 번역이 필요한 한국어 문구들을 엑셀 파일로 정리하여 번역가에게 넘긴다.
3단계 | 번역가분들이 번역한 내용을 바탕으로 다른 언어의 웹사이트 디자인에 적용시킨다.
그러나 협업을 진행하면서 한국어를 공부한 외국인 분들이 한국어에 대해 아직 모르는 부분들이 있어 제대로 번역하기 어려워한다는 문제점이 발생하였습니다. 이를 해결하기 위해 한국어 문구를 작성한 엑셀 파일에 '영어 문구를 추가'하여 제공하였습니다. 영어로 추가 설명을 하니 외국인 번역가분들도 이해하기 수월하였으며 디자인팀 역시 여러 번 반복적으로 한국어 문구를 설명할 필요가 없다는 이점이 있었습니다.
둘째, 글자 수 줄이기
번역가분들에게 번역본을 받으면 가장 먼저 해야 하는 일은 번역의 길이를 살펴보는 것입니다. 너무 긴 문구들은 번역가 분들에게 다시 보내서 글자 수를 줄여달라고 부탁합니다. 일반적인 줄글 번역이라면 이러한 과정이 불필요하겠지만, 웹사이트에 들어갈 문구가 너무 길면 디자인에 어려움이 발생하기 때문에 최대한 글자 수를 줄여서 번역된 문구를 사용하고자 노력하였습니다.
이 과정에서 글자 수 줄이기 때문에 문구의 의미가 퇴색되는 문제가 발생할 경우엔, 한국어 문구부터 다시 재구성하여 다시 번역하는 과정을 거쳐 최대한 모든 언어에서 사용자들이 같은 의미를 전달받을 수 있도록 고려하였습니다.
▶︎ 추가로 제가 다국어 디자인을 하면서 참고했던 글들을 링크로 첨부합니다. :)
