다국어 서비스 디자인 적용 시 고려 사항 - 1편
다년간 글로벌 시장에 성공적으로 서비스 출시한 디자이너가 알려주는 노하우
글로벌 사용자를 대상으로 하는 국내 서비스를 시장에 성공적으로 출시한 경험이 여러번 있다. 지금은 노하우가 생겨 어떠한 형태로 서비스를 설계하고 디자인 해야할지 감이 잘 오지만, 처음 아무것도 모를 때는 생각 보다 고려해야 할 사항이 많다는 것을 시행착오를 몇 번 겪고 난 뒤에 알 게 되었다. 실무 하면서 제일 중요하다고 생각했던 부분들 중심으로 다국어 서비스를 디자인해야 하는 분들께 정보 공유를 하려고 한다.
좋은 로컬라이제이션 = 좋은 UX
로컬라이제이션이란 과연 뭘까?
로컬라이제이션은 어떤 서비스/제품을 특정 지역이나 문화에 맞게 수정하여, 해당 지역의 사용자들이 최적화된 형태로 이용할 수 있도록 돕는 것이다.
이게 중요한 이유는 크게 2가지가 있다.
(1) 글로벌 시장에서 서비스/제품을 성공시키기 위한 전략 중 하나이며, 얼마나 로컬라이제이션이 잘 이루어지느냐에 따라 시장에서의 경쟁력을 강화할 수 있다.
(2) 효과적인 로컬라이제이션은 사용자 경험을 향상시키는데 기여하므로, 좋은 로컬라이제이션은 좋은 UX를 제공할 수 있다.
타겟 고객에 맞춘 서비스 전략의 중요성
로컬라이제이션은 다양한 범위를 포함하고 있는데, 앱이나 웹 서비스는 크게 2가지로 세분화 할 수 있다.
(1) 해당 지역/마켓에 맞게 기능을 최적화하고 디자인 대응
(2) 기존 화면에 언어 번역만 대응
글로벌 고객을 대상으로 해외로 국내 서비스가 확장 할때, 원래 있던 서비스를 언어만 바꿔서 새로운 앱을 출시하는것 보다는 우리 서비스가 목표로 하는 시장에 맞춰 전략을 세워 해당 시장에 적합한 서비스를 제공하는것이 중요하다. 각 국가는 고유한 문화적 특성과 사용자 선호도를 갖고 있기 때문에, 시장 조사를 통해 우리 서비스를 해당 마켓에 어떻게 포지셔닝 할지 전략적으로 일단 접근을 해야 한다. 만약에 어떻게 실행할지 불확실 하다면, 처음부터 모든 기능을 포함한 형태로 구현하는것 보다 빠르게 시장 반응을 확인하면서 전략을 만들어 가는 것을 추천한다.
국내 서비스 중에서 타겟 국가에 맞춰 차별화된 전략을 가져간 사례를 고민하다가 '네이버 밴드'가 생각 났다.
해외에서 네이버는 다른 빅테크에 비해 인지도가 낮아 그들만의 전략을 구체적으로 짰는데, 원래 제공하던 기본 기능 + 현지 사용자 맞춤형 기능들을 빠르게 만들어서 그들이 이 서비스를 써야 할 명분을 만들어 주었다.
https://zdnet.co.kr/view/?no=20231110183941여기서 인상 깊게 봤던 건 한국과 다르게 미국과 일본 시장에서 '학교/방과 후 활동'에 맞춰 포지셔닝을 가져갔다는 것이다. 해당 국가들은 초/중/고 학생들이 방과 후 액티비티를 많이 하는 문화를 갖고 있다. 특히 미국 같은 경우 초대받는 RSVP 문화가 일반적이라, 해당 문화를 고려해서 기존에 제공하는 캘린더 기능을 현지에 맞춰 옵션을 다양화해서 서비스를 사용해야할 명분을 지속적으로 만들어 주었다. (기사 원문)
글로벌 테크 기업들도 자세히 보면 각 국가/지역에 맞춰 서비스를 다르게 제공을 한다.
예를 들어 Uber는 지역별로 제공하는 우버 앱이 다르다. 해당 국가의 로컬 교통 수단과 통합을 강화하여 현지 이용자가 쓰기 편한 맞춤형 서비스를 제공하고 있다. Facebook 같은 경우 지역 맞춤형 광고 캠페인을 제공하고 로컬 콘텐츠를 강화 한다. Amazon도 보면 지불방법, 배송옵션, 상품 추천을 각 지역별로 맞춤형으로 최적화시킨 쇼핑 경험을 제공한다.
UX 설계 시 고려 사항
글로벌 마인드로 접근하자
시장에 맞춰 별도의 서비스를 출시하는 것이 아니라, 기존의 국내 서비스를 글로벌로 확장할 계획이 있을 경우, 한국 고객은 소수 고객으로 여기고 화면 설계 및 의사 결정을 하는 것이 중요하다. 한국 고객은 전체 고객의 일부에 불과하므로, 다양한 국적과 문화를 고려해야 한다.
한국에서 서비스를 개발하고 글로벌로 확장할 때 가장 많이 하는 실수 중 하나는, 메이커들이 한국인이다보니 서비스를 만들때도 너무 한국적인 관점으로 접근한다는 것이다. 한국 특유의 특성을 서비스에 반영하거나, 국내 서비스를 기준으로 디자인하는 것은 주의가 필요하다. 외국 고객들은 익숙하지 않는 사용자 경험과 서비스를 사용하고 싶어 하지 않는다.
예시로, 이전에 커뮤니티 서비스를 만들면서 '게시판' VS '포럼' 형태에 대해 분석한 적이 있었다.
한국에서는 '게시판' 형태가 일반적이지만, 영미권에서는 '포럼' 형태로 서비스가 설계되는 경우가 많았다. 한국은 인터넷 초기에 간단하게 글을 올리고 댓글을 달거나 의견을 나누는 형태로 시작을 했지만, 영미권은 인터넷 초기부터 토론이 활발하게 이루어지는 형태로 발전해왔다. 따라서 각 지역별 문화적, 역사적 측면을 먼저 분석한 후, 서비스 설계를 고민하는 것을 추천한다.
각 마켓에 최적화된 화면 설계를 하자
로컬라이제이션은 단순 한국어로 만든 화면을 그대로 유지하고 언어 번역만 하는 것이 아니라, 각 나라의 특성에 맞게 화면 설계를 최적화하는 것이 매우 중요하다.
지금 생각하면 말도 안되는 일이지만, 과거에 주문 화면을 지역/국가 상관하지 않고 단순 언어 번역만으로 처리하려고 시도한 적이 있었다. 그 후 "주문 화면에서 주문하기가 어렵다"는 VOC들이 들어오기 시작했고, 국가별로 다른 주소 체계를 고려해야 함을 뒤늦게 깨닫는 실수를 했었다. 회사 리소스 부족으로 모든 국가를 대응하기가 어려워 거래가 많이 일어나는 국가들을 중심으로 배송지 입력 필드를 최적화하여 결국 개선을 하게 되었다.
나이키 공홈을 레퍼런스로 후에 삼았다배송지 입력뿐만 아니라 결제 수단도 초기에는 제공하는 수단이 적어 전체 국가에 일괄 노출했었는데, 이로 인해 사용자 경험이 좋지 않았다. 이후에는 통화 설정에 따라 노출되는 결제 수단을 분기처리하여 각 지역의 특성에 맞게 대응함으로써 더 나은 사용자 경험을 제공했다.
UX도 중요하지만, UI 화면 디자인 할 때 유독 신경 써야 할게 생각보다 많은 편이다. UI 화면 디자인시 아래 내용들을 고려할 경우 사용자 경험도 덩달아 상승하는 효과를 얻을 수 있다.
UI화면 디자인 시 고려 사항
레이아웃이 깨질 만한 상황을 만들지 말자 = Flexible Design
버튼을 양 옆으로 두거나 한 줄 안에 1개 이상의 기능이 있을 경우, 번역을 적용할 때 디자인이 깨질 가능성이 높다. 디자인을 그대로 유지해야 한다면 글자수를 고려하여 번역을 요청하는 방법도 있지만, 다국어로 대응할 경우 확장성 있는 형태의 디자인을 고려하는게 좋다.
또한, 언어마다 텍스트 길이가 다르기 때문에 디자인할 때는 고정 영역과 가변 영역을 항상 고려해야 한다. 텍스트가 길어질 경우 레이아웃이 깨지거나 내용이 잘릴 수 있기 때문에 유동적으로 대응할 수 있는 디자인을 고려하는 것도 중요하다.
언어마다 고유한 높이와 형태가 있어 화면에서 어떤 언어는 높아 보이고, 어떤 언어는 상대적으로 낮아 보일 수 있다. 이러한 차이를 고려하지 않으면 텍스트가 잘리거나 레이아웃이 깨질 수 있으므로, 가로뿐만 아니라 세로로도 가변 영역을 고려하는 것이 중요하다.
https://m2.material.io/design/typography/language-support.html#language-considerations가장 긴 언어로 디자인을 하자
다국어 서비스를 지원할 경우, 서비스가 지원하는 언어 중 가장 긴 언어를 기준으로 디자인하는 것이 좋다. 특히, 서비스의 메인 타겟 국가에 맞춰 디자인하면 주요 케이스를 고려할 수 있어 나중에 번역 적용 시 레이아웃이 틀어질 확률 또한 줄일 수 있다. 예를 들어, 한국어와 영어만 지원한다면 영어를 기준으로 디자인하는 것이 좋다.
주로 짧은 언어: 한국어, 중국어
주로 긴 언어: 태국어, 독일어, 러시아어
https://m2.material.io/design/typography/language-support.html#language-considerations언어별 자간과 행간에 대한 가독성 테스트를 하자
언어마다 자간과 행간의 가독성이 다르기 때문에, 구글 검색을 통해 각 언어별 타이포그래피에 대한 기본 정보를 공부하고 참고하여 디자인하는 것을 추천한다.
한 화면에서 여러 언어를 다국어로 지원해야 할 경우, 각 언어에 맞게 자간과 행간을 커스터마이징하는 것이 쉽지 않기 때문에, 언어들을 모두 수용할 수 있는 적절한 공통 행간과 자간을 찾기 위한 시각 테스트가 필요하다. 참고로, 이는 아예 불가능한 것은 아니며, 조직 내 여유가 있다면 타이포그래피별로 디자인 시스템을 만들때 디자인 토큰을 사용하여 언어별로 최적화된 형태로 제공할 수 있다. 참고할 만한 예시로 라인 디자인 시스템이 있다.
줄바꿈이 필요할 때 전문가의 조언을 받자
언어에 따라 띄어쓰기가 없는 경우가 있는데, 디자인할 때 줄바꿈이 필요한 경우가 있다. 띄어쓰기가 없는 언어에서 무작위로 줄바꿈을 하면 현지인 입장에서 호흡의 흐름이 어색해질 수 있다. 특히 중국어나 태국어와 같이 띄어쓰기가 없는 언어의 경우, 해당 언어를 모국어로 하는 사람에게 어디서 줄바꿈을 하는 것이 자연스러운지 물어보는 것을 추천한다.
따옴표, 물음표, 느낌표로 인해 의미 전달이 잘못되지 않도록 하자
각 언어는 문장 부호를 사용하는 규칙이 다를 뿐만 아니라 부호의 모양과 위치, 표현이 언어마다 다르기 때문에 이에 대해 신중히 고려해야 한다.
(1) 마침표 사용: 태국어는 마침표가 없다.
(2) 따옴표 사용: 영어는 주로 "큰 따옴표"를 사용하는 반면, 프랑스어나 독일어는 '작은 따옴표'를 일반적으로 사용한다.
(3) 물음표와 느낌표 사용: 스페인어나 프랑스어는 물음표나 느낌표가 앞에 역물음표(¿, ¡)를 사용해서 부호의 위치가 영어와 다르다.
모든 언어에 일괄 적용 가능한 강조 문구 표기 방식을 고민하자
Font Weight의 경우, 영어는 이탤릭체가 있지만 한국어에는 없다. 다국어를 지원할 때 강조 문구로 이탤릭체를 사용하고 싶다면 모든 언어가 공통으로 갖고 있는 볼드체나 다른 색상으로 구분하는 방법을 추천한다.
번역에 따라 UI 위치가 달라지는 디자인은 사용하지 말자
언어마다 어순과 문장 구성이 다르므로 UI 디자인을 할 때 문장 사이에 UI 요소를 넣지 않는 것이 좋다. 어떤 언어가 나중에 추가될지 모르기 때문에 문장형보다는 내용과 UI 요소를 분리하는 형태로 디자인 하는 것이 좋다.
다국어 지원이 되는 폰트로 디자인 하자
다국어 지원 서비스를 디자인할 때는 모든 언어가 지원되는 시스템 폰트를 사용하는 것이 좋다.
실무에서 많이 사용하는 시스템 폰트는 다음과 같다
[iOS] Apple SD Gothic Neo, San Francisco
[Android] Noto Sans, Roboto
아시아권 대응시 쓸 수 있는 폰트: Spoqa Han Sans, Pretendard
안드로이드의 경우, 폰 시스템 설정을 통해 사용자가 설정한 폰트를 따르기 때문에 서비스 자체에서 폰트를 강제로 지정하지 않을 경우 시스템 설정 폰트를 따르게 된다.
특정 마켓 전용 서비스의 경우, 해당 마켓에서 자주 사용하는 폰트를 선택해서 사용하는 방법도 있다.
미국 마켓에서 자주 사용하는 시스템 폰트는 다음과 같다
[iOS] San Francisco, Avenir, Proxima Nova, Circular, Lato, Helvetica Neue, Inter
[Android] Roboto, Noto Sans, Open Sans, Lato, Montserrat, Droid Sans, Source Sans Pro
시스템 폰트 대신 별도 지정 폰트를 사용하고 싶다면 일단 다음 조건을 모두 충족하는 폰트를 찾아야 한다.
(1) 모든 언어를 대응할 수 있어야 한다
(2) 다른 시스템 폰트들이 갖고 있는 Font Weight와 매칭이 될 수 있어야 한다
(3) 저작권에 위배되지 않아야 한다.
방식은 크게 2가지가 있는데 하나는 브랜드 아이덴티티가 담긴 폰트를 직접 제작하는 방법으로 우버의 ubermove 폰트 같은 것을 예시로 들 수 있고, 두번째는 구글 폰트에서 찾아서 사용하는 방법이 있다.
하지만 다국어 지원시 개인적으로 별도 지정 폰트를 추천하지 않는데 이유는 다음과 같다.
(1) 일관성과 통일성 부족
애플과 구글이 제공하는 폰트는 언어별로 신중한 테스트를 거쳐 일관성과 통일성, 각 언어의 가독성을 모두 고려하기 때문에 안 쓸 이유가 없다.
(2) 확장성 부족
다국어 지원을 안하는 폰트들이 많다.
(3) 폰트 업데이트 및 호환성 문제
OS 업데이트 시 시스템 폰트는 자동으로 업데이트되지만 별도 지정 폰트는 호환이 잘 안될 수 있다.
(4) 앱 용량 문제
별도 폰트를 추가하면 앱 용량이 증가하여 불안정할 수 있고 앱이 빈번하게 죽을 수 있다.
(5) 저작권 문제
유료로 구매한다고 해도 상업적 사용시 혹시 모를 법적인 문제가 발생할 수 있어 위험부담을 줄이는게 좋다.
1편을 마무리 하며,
이번 편에서는 다국어 서비스 디자인 시 고려해야 할 기본 요소들을 중심으로 다뤘다.
로컬라이제이션의 중요성과 이 과정에서 디자이너가 반드시 고려해야 할 사항들이 도움이 됬길 바란다.
다음 2편에서는 번역 프로세스 과정에서 디자이너가 어떠한 중요한 역할을 하며, 어떤 부분들을 특히 신경 써야 하는지에 대해 더 자세히 다룰 예정이다.
--
글이 도움이 됬다면 좋아요와 구독 부탁드려요 :)
