언어 아이콘, 국기로 디자인 하면 왜 안될까?
언어 아이콘을 디자인할 때 알면 좋은 내용들
제가 일하는 XL8은 번역에 특화된 AI 모델을 만드는 테크 회사입니다. 전 세계 다양한 언어를 다루며, 번역 기술이 필요한 여러 분야에 API를 제공합니다. 미디어 콘텐츠 번역회사를 위한 B2B 제품도 개발하고 있으며, Zoom의 써드파티 앱에서는 실시간 번역 기능도 제공합니다.
따라서 우리 제품을 사용하는 사용자들은 많은 언어 목록 중에서 원하는 언어를 선택해야 하는 인터페이스를 자주 마주치게 됩니다.
이때, 별다른 디자인 방식을 택하지 않고 언어별 전체 이름을 보여주면 사용자에게 인지 부담이 생길 수 있습니다. 또한, UI를 구성하면서 각 언어 이름의 길이가 서로 다르기 때문에 Truncate와 같은 다양한 상황에서 대처하기가 어려울 수 있으며, 미적으로도 아름답지 않을 수 있습니다.
저는 이러한 문제들을 언어를 특정하는 아이콘을 만듬으로써 해결하고자 노력하였으며, 이 과정에서 알게 된 내용들을 글로 정리하였습니다.
본론
1. 언어 코드
국제 표준인 ISO 639-1의 언어 코드를 사용하여 아이콘을 제작하는 방법은 가장 기본적이면서도 제품 메이커 친화적인 방법입니다. 우리도 내부에서는 언어 코드를 사용하여 언어를 다루고 있습니다.
하지만 사용자들은 언어 코드만으로 해당 언어를 구분하기 어려워 불편함을 느낄 수 있습니다. 또한, 언어와 국가 코드가 함께 페어된 경우 (e.g. 미국 영어 en-US, 브라질 포르투갈어 pt-BR) 자릿수가 달라지게 되어 번거로움이 생길 수 있습니다. 그래서 이러한 이유로 언어 코드만으로는 충분하지 않아 처음부터 고려 대상으로 삼지 않았습니다.
ISO 639-1은 두 글자로 이루어진 언어 코드로 구성된 국제 표준화 기구(ISO)의 표준입니다. 이 표준은 전 세계에서 사용되는 주요 언어를 식별하기 위해 사용됩니다. ISO 639-1 코드는 주로 언어 정보를 제공하는 소프트웨어나 데이터베이스에서 사용됩니다.
2. 국기
국기를 사용하여 언어를 표현하는 방법은 Duolingo, Lokalise, Booking과 같이 많은 언어를 다루는 여러 곳에서 사용되는 널리 알려진 방식입니다.
개인적으로도 익숙하고 오픈 소스도 많아서 처음에는 별 생각 없이 이를 선택했었는데, 중간에 내부 시연하며 바꿔야만 하는 피드백을 얻게 되었습니다.
언어와 국가를 연결하는 것은 같은 언어를 사용하는 다른 국가 사용자들을 불쾌하게 만들 수 있습니다.
포르투갈어는 포르투갈, 브라질, 카보베르데, 기니비사우, 모잠비크, 앙골라, 상투메 프린시페, 동티모르, 적도 기니, 마카오의 공식 언어입니다. 또한, 인도, 스리랑카, 말레이시아, ABC 섬, 플로레스 섬 등에서 문화적 존재(전통 및 크리올 변형 모두)가 있습니다.
포르투갈은 이 언어의 원조이지만 브라질은 이 언어를 가장 많이 사용하는 국가입니다. 이 언어를 대표하는 국기는 어느 나라의 것일까요?
국가와 언어는 동일하지 않습니다.
한편, 캐나다는 프랑스어와 영어가 함께 사용되기 때문에 국기만으로는 어떤 언어를 나타내는지 알 수 없습니다.
인도는 언어 다양성에 대한 좋은 사례입니다. 힌디어와 영어가 공식 언어이지만, 424개의 다른 언어가 존재하며, 정규 교육에서도 26개의 원주민 언어가 사용됩니다.
Indiainpixels. Indian Census 2001따라서, 국기를 사용하면 예쁘고 인식하기 편해 보이지만, 해당 국가를 직접 나타내기 위한 것이 아니라면, 언어에 국기를 사용하는 것은 좋은 방법이 아닙니다.
3. 해당 언어의 문자
우리가 현재 사용 중인 이 방식은, 각 언어를 표현하기 위해 사용하는 문자(e.g. 한국어는 한글, 영어는 알파벳, 중국어는 한자)을 사용하여 아이콘을 디자인하는 것입니다.
에어비앤비는 아이콘을 사용하지 않지만, 해당 언어의 문자를 통해 그 언어를 표현하고 있습니다.
Airbnb의 언어 선택 UI또한, 애플도 과거에 사용하던 국기 아이콘을 macOS 12.4 Monterey(2022년 5월 16일) 에서 이 방식으로 변환한 적이 있습니다.
Mac 키보드 입력 소스의 현재(좌)와 과거(우)일부 사람들은 변경 후에 혼란을 겪었으며, 기존 국기가 가졌던 장점들이 있기 때문에 다시 돌아가길 원했습니다.
- Flag icon missing from keyboard input selection menu
- Bringing Back Keyboard Flags in macOS 12.4 Monterey
그럼에도 애플은 이 방식을 선택했습니다. 국기가 가진 장점을 포기하더라도, 변경할 만한 가치가 있다고 판단한 것 같습니다.
아직 사례나 자료가 많지 않아 디자인할 때 많은 연구와 노력이 필요한 방식이었지만, 안전하게 잘 사용하고 있습니다.
아래는 제가 이 아이콘들을 만들기 위해 각각의 문자들의 형태를 확인할 때 가장 도움이 되었던 위키 문서입니다.
- Wikipedia:Language recognition chart
결론
언어 코드 아이콘은 다양한 국가와 언어 사용자들에게 익숙한 언어로 콘텐츠를 인식하고 상호작용할 수 있도록 돕습니다. 따라서 디자이너는 이를 위해 사용자들의 기분을 상하지 않으면서도 사용성을 향상시키기 위해서 적절하게 노력할만한 가치가 있습니다.
저는 같은 글을 계속 업데이트 하기 위해 개인 노션에서 글을 쓰고 있습니다. 따라서 시간이 지나면 원문과 내용이 달라질 수 있는데 원문은 이곳에서 볼 수 있습니다. https://todddy.notion.site/7ed998d394b34121b617111f5cd10405)
