brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jan 08. 2023

[HIG] Right to left

문화권을 고려한 인터페이스 디자인

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

필요에 따라 아랍어 및 히브리어와 같은 오른쪽에서 왼쪽으로 보는 문화권의 사람들을 위해 인터페이스 반전을 제공합니다.

사람들은 자신의 기기와 앱 또는 게임이 자신들의 언어에 맞춰서 인터페이스가 다양한 방식으로 최적화되기를 원합니다. (자세한 내용은 Localization 참고하세요).

시스템이 제공하는 UI 프레임워크는 기본적으로 오른쪽에서 왼쪽(RTL)을 지원하므로 시스템 제공 UI 구성 요소가 RTL 콘텍스트에서 자동으로 반전될 수 있습니다. 시스템 제공이 제공하는 요소 및 표준 레이아웃을 사용하는 경우 시스템이 반전을 시켜 주므로 따로 UI를 제공할 필요가 없습니다.

RTL 언어를 사용하는 국가의 다양한 지역에서 발생할 수 있는 통화, 숫자 또는 수학 기호에 맞게 레이아웃을 미세 조정하거나 현지화를 향상하려면 다음 가이드를 따르세요.

Text alignment

시스템에서 자동으로 적용되지 않는 경우 인터페이스의 방향과 일치하도록 텍스트 정렬을 조정해야 합니다. 예를 들어 왼쪽에서 오른쪽(LTR) 콘텍스트에서 콘텐츠와 함께 텍스트를 왼쪽 정렬하는 경우 RTL 콘텍스트에서 콘텐츠의 반전된 위치와 일치하도록 텍스트를 오른쪽 정렬합니다.

언어를 기준으로 단락을 정렬해야 합니다. 세 줄 이상의 텍스트로 이루어진 단락의 정렬이 해당 언어와 일치하지 않으면 사람들이 읽기 어려울 수 있습니다. 예를 들어 LTR 텍스트로 구성된 단락을 오른쪽 정렬하면 각 줄의 시작 부분을 사람들이 알아보기 어려울 수 있습니다. 가독성을 높이려면 현재 읽기 방향과 일치하도록 한 줄 또는 두 줄의 텍스트 블록을 정렬하고 해당 언어와 일치하도록 단락을 정렬합니다.

모든 텍스트에 일관된 정렬을 사용합니다. 사용자들에게 좋은 사용경험을 제공하려면 다른 스크립트에 표시되는 항목을 포함하여 모든 텍스트 정렬을 반대로 하는 것이 좋습니다.

Numbers and characters

RTL 언어는 다른 숫자 체계를 사용할 수 있습니다. 예를 들어, 히브리어는 서부 아라비아 숫자를 사용하는 반면 아랍어는 서부 또는 동부 아라비아 숫자를 사용할 수 있습니다. 서양 및 동양 아라비아 숫자의 사용은 국가 및 지역에 따라 다르며 동일한 국가 또는 지역 내에서도 지역에 따라 다릅니다.

앱에서 수학 또는 숫자가 중요하게 사용되는 경우 지원하는 각 지역에 이러한 정보를 표시하는 적절한 방법을 확인하는 것이 좋습니다. 앱이 수학 또는 숫자가 중요하지 않은 경우 시스템에서 제공하는 숫자 표현을 사용하면 됩니다.

특정 숫자의 순서를 바꾸면 안 됩니다. 현재 언어나 콘텐츠에 관계없이 "541", 전화번호 또는 신용 카드 번호와 같은 특정 번호의 숫자는 항상 동일한 순서로 나타납니다.

진행률 또는 방향을 나타내는 숫자의 순서를 반대로 표시해야 합니다. 숫자 자체를 뒤집지 마세요. 진행률 표시줄, 슬라이더 및 등급 컨트롤과 같은 컨트롤에는 의미를 명확히 하기 위해 숫자가 포함되는 경우가 많습니다. 이런 식으로 숫자를 사용하는 경우 반전된 방향과 일치하도록 숫자의 순서를 반대로 해야 합니다. 또한 순서를 사용하여 특정 의미를 전달하는 경우 숫자 순서를 뒤집습니다.

Controls

반전 컨트롤(Flip controls)로 현재 진행 상황을 표시합니다. 사람들은 자신의 언어와 같은 방향으로 진행 상황을 알기를 원합니다. 따라서 RTL 콘텍스트에서 슬라이더 및 진행률 표시기와 같은 컨트롤을 반전시키는 것이 좋습니다. 이 작업을 수행할 때 컨트롤의 시작 값과 끝 값을 나타내는 그림 문자 또는 이미지의 위치 또한 반대로 해야 합니다.

반전 컨트롤(Flip controls)은 사람들이 정해진 순서로 항목을 탐색하거나 액세스 하는 데 도움을 줍니다. 예를 들어 RTL 콘텍스트에서 화면 흐름이 RTL 언어의 읽기 순서와 일치하도록 뒤로 가기 버튼은 오른쪽을 가리켜야 합니다. 마찬가지로 순서가 정해진 항목에 액세스 할 수 있는 다음 또는 이전 버튼은 읽기 순서와 일치하도록 RTL 콘텍스트에서 뒤집혀야 합니다.

실제 방향을 나타내거나 화면 영역을 가리키는 컨트롤은 방향을 유지해야 합니다. 예를 들어 "오른쪽으로"를 의미하는 컨트롤을 제공하는 경우 현재 콘텍스트에 관계없이 항상 오른쪽을 가리켜야 합니다.

필요한 경우 인접한 라틴 및 RTL 스크립트의 균형을 시각적으로 조정합니다. 단추, 레이블 및 제목에서 아랍어 또는 히브리어 텍스트는 대문자 라틴 텍스트 옆에 있을 때 너무 작게 나타날 수 있습니다. 아랍어 및 히브리어에는 대문자가 포함되지 않기 때문입니다. 모두 대문자를 사용하는 라틴어 텍스트와 아랍어 또는 히브리어 텍스트의 시각적 균형을 맞추려면 RTL 글꼴 크기를 약 2포인트 늘리는 것이 좋습니다.

Images

사진, 일러스트레이션, 일반 삽화와 같은 이미지를 뒤집지 마세요. 이미지를 뒤집으면 종종 이미지의 의미가 바뀝니다. 또한 저작권이 있는 이미지를 뒤집는 것은 위반이 될 수 있습니다. 이미지의 콘텐츠가 읽는 방향과 밀접한 관련이 있는 경우 원본을 뒤집는 대신 새로운 이미지를 만드는 것이 좋습니다.

순서가 의미 있는 경우 이미지의 위치를 반대로 바꿉니다. 예를 들어 연대순, 알파벳순 또는 즐겨찾기와 같은 특정 순서로 여러 이미지를 표시하는 경우 RTL 콘텍스트에서 순서의 의미를 유지하기 위해 위치를 반전시킵니다.

Interface icons

SF Symbols를 사용하여 앱의 인터페이스 아이콘을 사용하면, 아랍어 및 히브리어에 대한 RTL 콘텍스트 및 지역화된 기호를 손쉽게 적용할 수 있습니다. 사용자 지정 기호를 만드는 경우 방향을 지정할 수 있습니다. 개발자 지침은 앱에 대한 사용자 정의 기호 만들기(Creating custom symbol images for your app)를 참고하세요.

텍스트 또는 읽기 방향을 나타내는 인터페이스 아이콘을 반전시킵니다. 예를 들어 인터페이스 아이콘이 왼쪽 정렬 막대를 사용하여 LTR 콘텍스트에서 텍스트를 나타내는 경우 RTL 콘텍스트에서 막대를 오른쪽 정렬합니다.

텍스트를 표시하는 인터페이스 아이콘을 현지화된 버전으로 만드는 것을 고려하세요. 일부 인터페이스 아이콘에는 글꼴 크기 선택이나 서명과 같은 스크립트 관련 정보를 전달하기 위한 문자나 단어가 포함되어 있습니다. 실제 텍스트를 표시해야 하는 사용자 정의 인터페이스 아이콘이 있는 경우 현지화된 버전을 만드는 것을 고려해야 합니다. 예를 들어 다음과 같이 SF Symbols에서 라틴어, 히브리어 및 아랍어 텍스트에 사용할 수 있는 다양한 버전의 서명, 서식 있는 텍스트 및 I-빔 포인터 기호를 제공합니다.

읽기 또는 쓰기와 관련 없는 개념을 사람들에게 전달하는 아이콘의 경우 텍스트를 사용하지 않는 대체 이미지를 디자인하는 것이 좋습니다.

앞 또는 뒤의 동작을 표현하는 인터페이스 아이콘은 반전시켜야 합니다. 사람들은 읽는 것과 같은 방향으로 무언가가 움직이면 그 방향을 앞으로 해석합니다. 어떤 것이 반대 방향으로 움직일 때 사람들은 그 방향을 거꾸로 해석하는 경향이 있습니다. 앞으로 또는 뒤로 이동하는 개체를 나타내는 인터페이스 아이콘은 동작의 의미를 유지하기 위해 RTL 콘텍스트에서 뒤집어야 합니다. 예를 들어 스피커를 나타내는 아이콘은 일반적으로 스피커에서 앞으로 나오는 음파를 보여줍니다. LTR 콘텍스트에서 음파는 왼쪽에서 오므로 RTL 콘텍스트에서 오른쪽에서 오는 파동을 표시하려면 아이콘을 뒤집어야 합니다.

로고나 보편적인 기호 및 마크를 반전시키지 마세요. 반전된 로고를 보면 사람들은 혼란스러울 수 있고, 법적인 문제가 생길 수 있습니다. 텍스트를 포함하더라도 항상 원래 형태로 로고를 표시해야 합니다. 또한 사람들은 확인 표시와 같은 보편적인 기호가 일관된 모양을 갖기를 원하므로 반전시키지 마세요.

일반적으로 실제 개체를 표현하는 인터페이스 아이콘을 반전시키지 마세요. 방향성이 중요하지 않은 일반적인 개체를 표현하는 아이콘을 반전시키지 않는 것이 좋습니다. 예를 들어 시계는 모든 곳에서 동일하게 표현되므로 기존의 시계 인터페이스 아이콘은 언어에 관계없이 동일하게 표현하는 것이 좋습니다. 일부 인터페이스 아이콘은 오른손잡이용으로 기울어져 표현되기 때문에 언어 또는 읽기 방향을 표현하는 것처럼 보일 수 있습니다. 그러나 대부분의 사람들은 오른손잡이이므로 오른손잡이 도구를 표시하는 아이콘을 반전시키는 것은 필요하지 않으며 반전시키게 되면 사람들은 혼란스러울 수 있습니다.

복잡한 사용자 지정 인터페이스 아이콘을 뒤집기 전에 개별 구성 요소와 전체적인 시각적 균형을 고려하세요. 경우에 따라 배지, 슬래시 또는 돋보기와 같은 구성 요소는 현지화에 관계없이 시각적 디자인을 준수해야 합니다. 예를 들어 SF 기호는 동일한 백슬래시를 사용하여 LTR 및 RTL 버전 모두에서 기호 의미의 금지 또는 부정을 나타냄으로써 시각적 일관성을 유지합니다.

다른 경우에 현지화된 아이콘이 의미가 있는지 확인하기 위해 구성 요소(또는 해당 위치)를 반전시켜야 할 수도 있습니다. 예를 들어 배지가 사람들이 앱에서 보는 실제 UI를 나타내는 경우 UI가 뒤집히면 배지도 반전되어야 합니다. 또는 배지가 인터페이스 아이콘의 의미를 전달하는 경우 배지가 반전될 때 아이콘의 변경된 의미와 전체적인 시각적 균형이 모두 유지되는지 여부를 고려하십시오.