국제화(i18n) 디자인 시스템

국제화(i18n) 디자인 시스템은(는) 무엇을 하나요?

목적

국제화(i18n) 디자인 시스템 스킬은 글로벌 사용자를 대상으로 하는 인터페이스를 설계하기 위한 방법론을 제공합니다. 단순한 번역을 넘어 다양한 언어와 문화가 갖는 공간적, 타이포그래픽, 시각적 영향을 다룹니다. 이 시스템은 다양한 텍스트 길이를 수용할 수 있도록 레이아웃이 유연하고, 양방향(RTL) 레이아웃이 올바르게 미러링되며, 시각적 단서가 문화적으로 적절하도록 보장합니다.

사용 사례

• 다국적 출시를 위한 글로벌 SaaS 플랫폼 또는 전자상거래 사이트 디자인
• 기존 영어 전용 인터페이스를 RTL 언어(아랍어, 히브리어, 페르시아어)에 맞게 조정
• 비라틴 스크립트(CJK, 키릴 문자, 데바나가리)에 대한 타이포그래피 표준 수립
• UI 컴포넌트의 "확장 대비성" 감사(독일어나 핀란드어에서 텍스트 증가 처리)
• 문화적으로 특화되거나 방향적 편향을 피한 아이콘 세트 생성

사용하지 말아야 할 경우

• 단일 지역/단일 언어 사이트: 향후 확장 계획이 없고 지역적 관례가 엄격히 알려진 경우
• 순수 시각적 내러티브 사이트: 고정된 비-리플로우 공간 관계에 의존하는 예술적 표현인 디자인
• 콘텐츠 전용 번역: UI나 레이아웃 동작을 변경하지 않고 순수하게 카피만 번역하는 작업

입력

1. 대상 언어 목록: 지원해야 할 언어와 스크립트는 무엇인가요?
2. 읽기 방향: 언어는 LTR(좌→우) 또는 RTL(우→좌)로 흐르나요?
3. 타이포그래피 에셋: 스크립트 전반에서 브랜드의 목소리를 유지하는 지역화된 폰트 스택
4. 문화적 맥락: 색상, 기호, 데이터 형식(날짜, 통화)에 대한 지역별 관례
5. 레이아웃 중단점: 반응형 그리드 시스템에서

출력

1. 양방향(RTL) 미러링 명세: 어떤 요소가 뒤집히고 어떤 요소가 고정되는지(예: 진행률 표시줄 vs 미디어 컨트롤)에 대한 맵
2. 타이포그래피 스케일 매트릭스: 다양한 스크립트 패밀리에 맞게 조정된 글꼴 크기와 줄 높이
3. 확장 청사진: ±40% 텍스트 길이 변동을 처리하도록 설계된 UI 패턴
4. 아이콘그래피 로직: 미러링된 아이콘과 미러링되지 않은 아이콘에 대한 지침
5. 지역화 디자인 토큰: 디자인 명세에서 정의된 논리적 속성(예: padding-inline-start)

워크플로우

1. 텍스트 확장을 위한 디자인

레이블이 항상 짧을 것이라고 가정하지 마세요. 독일어나 이탈리아어와 같은 언어는 영어보다 30-50% 더 길어질 수 있습니다.

• 유연한 컨테이너: 고정 너비 버튼이나 카드를 피하고 min-width 또는 fit-content를 사용하세요.
• 텍스트 줄바꿈: UI 요소(탭이나 메뉴 항목 등)가 우아하게 줄바꿈되거나 "오버플로우" 메뉴로 전환될 수 있는지 확인하세요.
• 동적 중앙 정렬: 텍스트가 확장될 때 인접 요소와 겹치지 않도록 하세요.

2. RTL 미러링 로직 구현

우→좌(RTL) 언어의 경우, 페이지의 "멘탈 모델"이 뒤집힙니다:

• 레이아웃 미러링: 사이드바가 왼쪽에서 오른쪽으로 이동하고, 로고가 왼쪽 상단에서 오른쪽 상단으로 이동합니다.
• 논리적 속성: "왼쪽"과 "오른쪽" 대신 "시작"과 "끝"을 사용하여 디자인에 주석을 답니다.
• 탐색 흐름: LTR의 뒤로 가기 버튼(왼쪽을 가리킴)은 RTL에서 "이전 상태로 돌아가기"를 나타내기 위해 오른쪽을 가리켜야 합니다.

3. 타이포그래피 및 수직 리듬 지역화

비라틴 스크립트는 각기 다른 높이, 밀도 및 가독성 요구 사항을 가집니다:

• CJK(중국어, 일본어, 한국어): 문자 복잡성으로 인해 약간 더 큰 기본 크기와 더 넉넉한 줄 높이가 필요합니다.
• 아랍어: 키가 큰 어센더와 깊은 디센더가 특징입니다. 줄 간 겹침을 방지하기 위해 수직 간격을 늘리세요.
• 폴백 스택: 기본 브랜드 폰트의 두께와 x-높이에 최대한 가깝게 일치하는 시스템 폰트 폴백을 정의하세요.

4. 아이콘그래피 방향성 감사

RTL에서 모든 것이 뒤집히는 것은 아닙니다:

• 미러링: 방향 아이콘(화살표, 비행기, 자전거), 진행률 표시줄, "앞으로/뒤로" 이동을 나타내는 아이콘
• 미러링 안함: 시계 방향/반시계 방향 아이콘(시계, 새로고침), 미디어 재생 컨트롤(재생, 일시정지, 탐색), "체크 표시"(보편적임)
• 숫자: 대부분의 RTL 지역은 서아라비아 숫자(1, 2, 3)를 사용하며, 이는 RTL 텍스트 내에서도 여전히 LTR로 읽힙니다.

5. 데이터 형식 표준 수립

• 날짜 및 시간: 혼동을 피하기 위해 DD/MM/YYYY와 MM/DD/YYYY를 명확히 정의하세요.
• 통화: 기호가 금액 앞에 오는지 뒤에 오는지 정의하세요(예: $10 vs 10 €).
• 달력: 일부 지역에서는 주의 시작 요일이 다릅니다(월요일 vs 일요일).

의사 결정 규칙

• 미러링 규칙: UI 요소가 "방향" 또는 "시간"(앞으로 이동)을 나타내면 RTL에서 반드시 미러링되어야 합니다. 물리적 대상(카메라나 시계 등)을 나타내는 경우 일반적으로 고정됩니다.
• "35% 버퍼" 규칙: 확장을 대비하여 영어 디자인 단계에서 버튼과 레이블에 항상 35%의 빈 공간을 남겨두세요.
• 스크립트별 크기 조정: 스크립트가 매우 복잡한 경우(예: 데바나가리), 가독성을 위해 라틴어 동등 크기보다 글꼴 크기를 10-15% 증가시키세요.
• 문화적 민감성: 많은 문화에서 부적절한 저금통(돼지 저금통)과 같은 서양 중심의 아이콘을 피하세요.

제약 조건

• 접근성: 텍스트 확장이 대화형 요소를 숨기거나 수평 오버플로우를 유발해서는 안 됩니다. 모든 지역화된 버전에서 명암비가 유지되어야 합니다.
• 반응성: 방향을 전환할 때 레이아웃이 안정적으로 유지되어야 합니다. 명세에 padding-inline 및 margin-inline을 사용하세요.
• 계층 구조: 읽기 방향과 관계없이 기본 CTA가 가장 눈에 띄는 요소로 남아 있어야 합니다.

일반적인 실패 패턴

• "확장 충돌": 하드코딩된 너비로 인해 번역된 텍스트가 잘리거나 겹치는 현상
• 게으른 미러링: "재생" 버튼이나 시계처럼 미러링되어서는 안 되는 아이콘을 미러링하여 사용자를 혼란스럽게 함
• "영어 우선" 함정: 영어로 빡빡하고 미니멀한 UI를 디자인하여 긴 단어를 가진 언어에서는 완전히 사용할 수 없게 되는 경우
• 폴백 누락: 비라틴 스크립트에 대한 폰트를 지정하지 않아 "토후(깨진 문자 상자)"가 발생
• 일관성 없는 정렬: 미러링된 레이아웃과 미러링되지 않은 텍스트 정렬을 혼합하여 들쭉날쭉하고 다듬어지지 않은 느낌을 줌

검증 기준

• RTL 뷰포트에 대해 레이아웃이 성공적으로 미러링됨(사이드바/로고 교환)
• UI 컴포넌트가 40% 텍스트 확장을 깨지거나 겹치지 않고 처리함
• 타이포그래피 스케일이 스크립트 복잡성에 맞게 조정됨(예: 아랍어/CJK의 경우 줄 높이 증가)
• 아이콘그래피가 "미러링 vs 고정" 로직을 따름
• 디자인이 절대적 속성(Left/Right) 대신 논리적 속성(Start/End)을 사용함
• 날짜, 통화 및 숫자 형식이 올바르게 지역화됨
• 모든 대상 스크립트에 대한 폴백 폰트 스택이 정의됨