다국어 앱 UI, 어떻게 관리하시나요?

by

우리 회사는 다국어앱과 웹사이트를 지원하는 회사다.

다국어를 사용하는 회사긴 하지만 서로 결국은 영어로 소통을 하지만… 한가지 언어로도 소통이 안되는데 다국어라니;;

처음에는 한국어 혹은 영어 하나로만 구성했던 UI가
점차 중국어, 일본어, 독일어, 프랑스어, 아랍어처럼 다양한 언어로 확장되기 시작하면서
디자이너는 텍스트 길이, 폰트 차이, 레이아웃 깨짐 등의 문제를 한꺼번에 감당해야 합니다.

이럴 때마다 매번 화면을 복사해서 각 언어 버전을 따로 만들다 보면
관리도 어렵고, 수정 시 누락되는 일이 빈번해집니다.
Figma는 기본적으로 다국어 전용 기능은 없지만,
시스템처럼 정리하고 반복 가능하게 만드는 방법은 분명 존재합니다.
이번 글에서는 실제로 다국어 UI를 Figma에서 체계적으로 관리하는 방법을 단계별로 정리해보겠습니다.

1. 다국어를 고려한 레이아웃 기본 설계

처음부터 다국어를 염두에 두고 레이아웃을 짜는 것이 가장 중요합니다.
영어로 딱 맞았던 버튼 텍스트가 독일어나 프랑스어로 바뀌었을 때
두 줄로 밀리거나, 아이콘과 겹치는 경우가 생각보다 자주 발생하죠.

실무 팁

  • 버튼은 최소 20~30% 여유 공간 확보
  • 레이블 영역은 최대 언어 기준으로 텍스트 폭 예측
  • Auto Layout으로 Hug 콘텐츠 대신 Fill container 사용
  • 다국어 가능성이 있는 컴포넌트는 미리 Variants로 준비

2. 언어별 텍스트 관리 방식

Figma 자체는 텍스트 문자열 관리 기능이 없기 때문에
외부 데이터를 가져와 연동하거나,
정리된 텍스트를 수동 관리하는 구조를 세워야 합니다.

가장 많이 쓰는 방법 3가지

  1. Google Sheets 연동 (플러그인 활용)
    • 언어별 텍스트를 시트에 정리하고,
      Figma에서 플러그인(Google Sheets Sync 등)으로 불러오는 방식
    • 유지보수에 유리하고, 다국어 교정도 편리함
  2. Variants 기반 다국어 컴포넌트 제작
    • 각 언어 버전을 Variant로 정리
    • 하나의 버튼, 타이틀 컴포넌트 안에 영어/한국어/중국어 등 포함
    • 변경 시 빠르게 전환 가능
  3. 페이지 또는 프레임별 언어 분리
    • 한국어 / 영어 / 일본어 등 언어별로 페이지를 분리하여 관리
    • 파일이 복잡해지지만, 리뷰할 때는 명확함

3. 폰트와 타이포그래피 대응

언어별로 같은 크기의 글씨라도 실제로 차지하는 공간은 다릅니다.
예를 들어, 한글과 일본어는 같은 크기에서도 다소 다르게 보이고,
중국어는 자간이 좁고 높이가 더 커 보입니다.

실무 대응 방식

  • 폰트 패밀리를 언어별로 따로 설정
    • 예: 영문 → Inter, 한글 → Noto Sans KR
  • Text Style 이름에 언어명을 포함
    • 예: Heading/EN, Heading/KR
  • 시스템 상에서는 동일 스타일명을 공유하되, 실제 UI에서 구분 적용

4. RTL 언어(아랍어, 히브리어) 대응

글을 오른쪽에서 왼쪽으로 읽는 언어들은
레이아웃도 반대 방향으로 정렬해야 하기 때문에
초기에 대비하지 않으면 전체 구조를 뒤집어야 하는 상황이 생깁니다.

Figma 적용 팁

  • Auto Layout 정렬 방향을 Right-to-Left로 설정
  • Flex wrap 대신 정렬 기준(Alignment)을 활용한 구조 설계
  • 아이콘, 텍스트 위치 자동 반전 고려 (mirroring)

5. 다국어 QA 및 검수 체크리스트

디자인이 완료됐다고 해도, 실제 앱이나 웹사이트에서
텍스트 잘림, 겹침, 잘못된 언어 적용 같은 이슈가 자주 발생합니다.
아래 항목은 디자인 리뷰 단계에서 꼭 확인하는 것이 좋습니다.

  • 모든 언어에서 텍스트가 잘리지 않는가
  • 줄바꿈이나 텍스트 크기로 인한 레이아웃 오류가 없는가
  • 버튼/라벨 등의 위치가 의도대로 적용되는가
  • 언어별 타이포 스타일이 일관성 있게 적용되었는가
  • RTL 언어에서 방향 전환이 정상 작동하는가

마무리하며

다국어 UI 디자인은 번역만 잘하면 되는 일이 아닙니다.
언어마다의 시각적 특성, 레이아웃 구조, 타이포그래피 차이까지 고려해야 하기 때문에
디자이너가 처음부터 시스템적으로 설계하지 않으면
결과물의 완성도는 물론, 협업 효율도 떨어지게 됩니다.

Figma는 이런 다국어 디자인을 직접 지원하진 않지만,
Auto Layout, Variants, 텍스트 스타일, 외부 데이터 연동 등을 활용하면
충분히 체계적이고 확장 가능한 다국어 디자인 시스템을 만들 수 있습니다.

지금부터라도 화면 하나를 만들 때 “이 문장이 다른 언어로는 얼마나 길어질까?”를
먼저 고민하면서 시작해 보세요. 현업이 영어문장과 일본어 문장을 주지 않아서 화가 나겠지만..
글로벌 UX의 품질은 결국 이런 디테일에서 결정됩니다.

Leave a Comment