언어 아이콘을 디자인할 때 알면 좋은 내용들

Last updated at April 9, 2023


서론

제가 일하는 XL8은 번역에 특화된 AI 모델을 만드는 테크 회사입니다. 전 세계 다양한 언어를 다루며, 번역 기술이 필요한 여러 분야에 API를 제공합니다. 미디어 콘텐츠 번역회사를 위한 B2B 제품도 개발하고 있으며, Zoom의 써드파티 앱에서는 실시간 번역 기능도 제공합니다.

따라서 우리 제품을 사용하는 사용자들은 많은 언어 목록 중에서 원하는 언어를 선택해야 하는 인터페이스를 자주 마주치게 됩니다.

이때, 별다른 디자인 방식을 택하지 않고 언어별 전체 이름을 보여주면 사용자에게 인지 부담이 생길 수 있습니다. 또한, UI를 구성하면서 각 언어 이름의 길이가 서로 다르기 때문에 Truncate와 같은 다양한 상황에서 대처하기가 어려울 수 있으며, 미적으로도 아름답지 않을 수 있습니다.

저는 이러한 문제들을 언어를 특정하는 아이콘을 만듬으로써 해결하고자 노력하였으며, 이 과정에서 알게 된 내용들을 글로 정리하였습니다.

본론

1. 언어 코드

Code.png

국제 표준인 ISO 639-1의 언어 코드를 사용하여 아이콘을 제작하는 방법은 가장 기본적이면서도 제품 메이커 친화적인 방법입니다. 우리도 내부에서는 언어 코드를 사용하여 언어를 다루고 있습니다.

하지만 사용자들은 언어 코드만으로 해당 언어를 구분하기 어려워 불편함을 느낄 수 있습니다. 또한, 언어와 국가 코드가 함께 페어된 경우 (e.g. 미국 영어 en-US, 브라질 포르투갈어 pt-BR) 자릿수가 달라지게 되어 번거로움이 생길 수 있습니다. 그래서 이러한 이유로 언어 코드만으로는 충분하지 않아 처음부터 고려 대상으로 삼지 않았습니다.