다국어 상황을 고려한 UI 디자인 (번역)
전 세계 사람들을 위한 더 좋은 프로덕트 만들기
오랜만이네요..! 새로운 회사에 들어가 정신없이 몇 개월을 보내다 보니 번역 글을 연재한지도 꽤 오래되었네요. 앞으로는 더 정기적으로 업로드해볼 예정입니다. :0
Dropbox팀의 John Saito의 미디움 글 번역입니다. (원문)
*모든 글의 번역은 원 저작자의 허락을 받습니다. 과도한 의역 주의.
상상해보자. 당신은 지금 어떤 신상 앱을 설치했다. 그 앱은 이미 트위터에서 사람들에게 극찬받고 있다. ‘정말 탁월하고… 스마트하고… 러블리하고… 삶을 변화시킬 것만 같고…’
자, 이제 앱을 실행해보자 :
음… 조금 이상해 보인다. 위쪽에 비디오가 있고, 비디오 위의 캡션은.. 어느 나라 말인지도 모르겠다. 문법도 이상하고, 버튼의 텍스트는 튀어나가 있다. 어떻게 사람들이 이걸 보고 좋다고 하는 걸까..?
이 앱은 당신이 쓰는 언어로 만들어지지 않은 것으로 드러났다. 엘프어(Elvish)로 만들어졌고, 그다음 영어로 변환한 것이다. 대부분의 사람들은 엘프어 버전을 사용하기 때문에, 영어 버전은 어떻게 보일 것인지 모른다.
믿거나 말거나, 이 이야기는 비 영어권 사용자들에게는 꽤 익숙할 것이다. 대부분의 앱들이 영어로 먼저 만들어지기 때문이다. 다국어 상황을 따로 챙기지 않는다면, 영어가 아닌 다른 언어로 변환되었을 때의 디자인 디테일들을 놓치기 쉽다.
위의 상황들을 대비하기 위해 염두에 두고 작업해야 할 몇 가지 팁들을 소개한다.
1. 길어질 글줄에 대비하여 넉넉한 텍스트 공간을 마련하자.
가장 빈번한 다국어 변환 문제는, 늘어나는 글줄에 대비한 충분한 공간이 없다는 것이다.
“NEW!”라는 라벨을 예시로 들어보겠다. 영어로 느낌표까지 4자이다. 하지만 불어로는 “Nouveau !” 9자로, 영어의 두배가 넘는다. (불어 문법에서는 느낌표 앞에 띄어쓰기가 있어야 한다)
시안에 텍스트로 된 버튼이나 라벨이 있다면 글줄이 길어졌을 때를 대비해서 공간을 충분히 줘야 한다. 그렇지 않으면 텍스트가 겹쳐지거나 잘릴 수 있다.
뭔가 비좁은 느낌이 든다면 기분 탓일까 ..나는 번역시의 글줄 길이를 대략적으로 알기 위해 구글 스프레드 시트를 이용한다. GoogleTranslate 함수를 이용하면, 한 번에 여러 언어의 번역 결과를 얻을 수 있다. 단 몇 초만에, 각각의 언어로 번역했을 때의 길이를 대강 알 수 있는 것이다.
Google Translate로 번역시 글줄 길이를 대략적으로 추정할 수 있도록 만든 툴.IBM’s globalization site에서는 여러 가지 언어가 영어에 비해 얼만큼의 여유 길이가 필요한지 퍼센티지로 볼 수 있는 유용한 차트가 있다.
2. 좁은 단에 텍스트를 넣는 것은 피하자.
다단 레이아웃은 콘텐츠를 분류하는 좋은 방법 중 하나이다. 구조, 균형감, 리듬감을 주기 때문이다. 다단 레이아웃은 잘 만들어진 그리드 시스템 안에서 가장 효과적이다.
만약 글줄의 길이를 예측할 수 없는 상황에서는 어떻게 될까? 번역 중에 일어날 수 있는 상황이다. 한 줄이 두 줄이 되고, 세 줄이 되는 순간, 신중하게 맞춘 레이아웃의 균형이 급 박살 난다.
다국어 대응하는 날, 디자이너들이 우울한날...좁은 열에 텍스트를 넣게 되면, 번역을 거치면서 줄 수가 늘어나는 경우가 생긴다. 상황에 따라 좁은 열 대신 넓은 행을 사용하는 것이 안전할 수도 있다. 이렇게 하면 텍스트 길이에 구애받지 않고 레이아웃도 깨지 않을 수 있다.
3. 되도록이면 텍스트를 이미지 안에 박지 마라.
만약 이미지에 텍스트를 올려서 작업했다면 (개발로 텍스트를 올리는 것이 아니라 이미지 자체에 텍스트를 픽셀로 심었다면), 다국어 대응하는 그날이 바로 헬게이트가 열리는 날이 될 것이다. 번역자가 포토샵이나 스케치 형식의 작업 파일에서 텍스트 레이어를 일일이 수정할 수는 있겠지만, 이 과정은 꽤나 비효율적이다. 언어도 제각각 텍스트의 길이도 제각각이니 하나하나 레이아웃을 조정해주어야 하기 때문이다.
위 예시보다 효율적인 두 가지 방법이다.
텍스트 대신 시각적인 요소를 활용하라 : 꼭 실제 언어를 사용할 필요가 없는 경우도 있다. 아래 예시에서는 텍스트가 있어야 할 자리를 선 요소로 뭉뚱그려놓았지만, 선 요소가 일종의 텍스트 영역처럼 보인다.
CSS로 텍스트를 올려라 : 아래 예시에서 초록색 원 안에 있는 텍스트는 이미지 안에 박혀있는 것이 아니라, css를 사용하여 추가한 것이다.
4. UI 요소들로 문장을 완성하지 말자.
UI 요소들을 여기저기 배치해보고, 가장 적절한 레이아웃을 찾는 것은 디자이너들에게 일상적인 일이다. ‘입력 필드를 여기 오른쪽에 놓아볼까, 드롭다운 메뉴를 왼쪽으로 옮겨볼까…’
하지만 단어들을 다룰 때는 더 심혈을 기울여야 한다. 텍스트가 들어간 버튼, 박스, 드롭다운 메뉴 등등을 포함하여 문장을 완성하려고 하면 문제가 발생할 수 있기 때문이다.
이렇게 하면 다국어 지원시 문제가 생긴다.다국어 지원 시 문제가 생기는 몇 가지 이유이다.
언어별로 어순이 다름 : 각각의 언어는 어순이 다르다. 예를 들어 “셔츠 3개 구매”라는 문장을 영어로 바꾼다면, “구매”에 해당하는 영어 단어가 문장 맨 앞으로 위치가 바뀌게 된다. 텍스트를 포함한 디자인 요소의 순서가 고정된다면 모든 언어를 커버하지 못할 것이다.
복수화 : 영어에서는 대부분의 명사가 단수 형태 하나, 복수 형태 하나이다. (예 : “1 picture”와 “ ~pictures”) 하지만 러시아어에서는 앞의 숫자에 따라 무려 세 가지의 명사 형태가 올 수 있다. 그렇기 때문에 사용자가 문장 중간에 숫자를 넣는다면, 입력된 숫자에 따라 그 문장은 문법적으로 틀릴 가능성이 크다.
성별 : 일부 언어는 남성형/여성형 명사나 형용사를 사용한다. 프랑스어에서는 어떤 대상을 수식하느냐에 따라 “large”라는 단어가 “grand”, “grande”, “grands”, “grandes” 등으로 바뀔 수 있다. 만약 당신이 문장 중간에 드롭다운 메뉴를 넣는다면, 문장 안에 있는 단어에 따라 그 문장은 문법적으로 틀릴 가능성이 크다.
이러한 문제가 발생하지 않게 하려면 어떻게 하면 좋을까? UI 요소들을 문장 안이 아닌 밖으로 배치하는 것이다.
5. 메타포(비유)를 조심하자.
제품 디자인은 비유에 관한 것이다. 모든 아이콘과 버튼, 인터랙션은 현실 세계에 있는 무언가를 투영한 결과물이다. Dropbox 로고의 메타포는 보관함이다. 클릭 앤 드래그 인터랙션은 손으로 어떤 것을 집어서 옮기는 것과 같다.
그러나 어떤 메타포는 문화권에 따라 다른 의미를 가진다. 미국에서 부엉이는 현명함을 상징하지만, 핀란드나 인도에서는 멍청함을 상징한다.
사물의 생김새 역시 각각 다르다. 대부분의 미국인들은 아래 그림을 백이면 백 우편함으로 인식한다. 하지만 전 세계 사람 모두가 그렇지는 않다. 미국을 제외한 대부분의 나라는 우편함에 깃발이 달려있지 않다. 그렇기 때문에 이 메타포는 모두를 위한 것이라고 할 수는 없다.
이 우편함은 지구상에 있는 보통의 우편함들과는 거리가 멀다.6. 기능 이름은 설명이 포함된 것으로 짓는다.
마케팅적인 관점에서 ‘기능 이름을 재미있게 지으면 바이럴이 잘 되지 않을까?’라는 생각을 했다. 하지만 재미있는 이름은 느낌을 잘 살려 번역하기가 어려웠고, 다른 언어로 번역했을 때 의미가 아예 없어지기도 했다.
몇 년 전 드롭박스는 파일의 버전 히스토리를 무한으로 제공하는 기능을 소개했다. 처음에 우리는 이 기능을 “Packrat”이라고 불렀다. (산림 쥐 : 쥐같이 생긴 북미산의 작은 동물. 작은 막대기 같은 것들을 물어다 굴 안에 모아 놓는 습성이 있음. 영미권에서는 별로 필요 없는 것들을 모으는 사람이라는 의미가 있음)
Packrat 옵션에는 작은 쥐 아이콘이 그려져 있음.이와 같은 문제를 피하려면 기능 이름을 좀 설명적인 단어로 구성하는 편이 안전하다. 설명적인 단어는 조금 지루해 보이지만, 다국어 상황과 사용성 모두를 고려했을 때는 더 나은 선택지일 수도 있다.
7. 의역을 위한 다른 대안을 제공한다
일반적으로 번역을 염두에 둔 글을 작성할 때는 정확하고, 중립적이고, 둘러말하지 않는 것이 좋다. 그러나 브랜딩을 위해 약간의 재미 요소를 첨가해야 할 때도 있기 마련이다.
이와 같은 경우에는 영어 버전과 직역 혹은 의역을 위한 설명 버전, 총 두 가지를 준비하면 좋다.
번역하기 애매한 단어가 있을 때, 번역자를 위한 코멘트를 따로 달아서 의역에 대한 자유도를 주는 것이다. 예를 들어, 우리는 지금 드롭박스에서 사용되는 스티커들을 라벨링 하는 작업을 하고 있다. 그리고 아래 스티커를 “OMG 냥이”이라고 이름 붙이기로 결정했다.
이것은 OMG 냥이. 꼭 OMG 냥이 라고 이름을 붙이고 싶었다.번역자를 위해 OMG냥이와 함께 ‘놀란 고양이’라는 코멘트를 달았다. 번역자는 ‘놀란 고양이’라는 설명을 보고, 각 언어에 맞도록 자유롭게 의역을 할 수 있을 것이다. 물론 필요한 경우에는 직역을 할 수도 있겠다.
위의 팁들이 도움이 되었기를 바란다. 만약 이것 외에도 다른 팁이 있다면 서로 배울 수 있도록 언제든 아래에서 자유롭게 의견을 주길 바란다. 이 글이 전파되면서 우리가 전 세계 사람들을 위한 더 좋은 제품을 만들 수 있기를 바란다.
*추가
IBM의 디자이너 Tom Roach가 공유해준 구글 스프레드시트로 약 60개가 넘는 언어의 줄글 길이를 테스트해볼 수 있다. 매우 유용!
