아랍어를 위한 디자인

♪ ♪

안녕하세요 Mohamed Samir입니다 저는 Apple Design 팀의 디자이너입니다 오늘 저는 아랍어 앱 디자인에 관한 일부 우수 사례들을 보여드리려고 합니다 오늘 세션에 아랍어가 지원되니 확인해 보시길 바랍니다 들어가기 전에 아랍 오디언스가 사용하는 앱이나 게임을 디자인하거나 최적화하는 걸 고려하는 게 왜 중요한지 말씀드리고 싶었는데요 오늘날 아랍 문자 사용자는 전세계 약 6억 6천 명입니다 세계에서 3번째로 가장 많이 쓰이는 언어죠 라틴어와 중국어 다음으로요 22개국 이상에 사는 다양한 사람들이 여러분이 만드는 걸 보고 사용할 수 있다는 거죠 소수의 오디언스에게라도 도달하고 싶다면 언어 뿐 아니라 UI의 방향성에 대해서도 최적화하는 것을 고려하셔야 합니다 아랍어는 오른쪽에서 왼쪽으로 쓰이는 언어이기 때문이죠 예시를 하나 보여드릴게요 이건 아랍어로 '아라비안 사막'입니다 보시다시피 스크린의 오른쪽에서부터 쓰이죠 하지만 이뿐만이 아닙니다 이 문구가 레이아웃에 있다면 전체 레이아웃은 위에서 아래로 오른쪽에서 왼쪽으로 흐릅니다 언어의 읽기 행위와 방향에 맞추기 위해서요 이건 타이틀, 패러그래프 칼럼, 심지어 영상까지 모든 것들이 오른쪽에서부터 흘러야 한다는 거죠 이 방향성은 레이아웃을 넘어 UI까지도 확장됩니다

Pages 앱에 나타난 이 사례를 보시면 내비게이션 바의 순서와 방향이 오른쪽에서 왼쪽으로 갑니다 아이콘 또한 같은 방향으로 흐르죠 앱을 전체를 한 번 살펴 보시면 메뉴와 제어 그래픽 요소를 보실 수 있습니다 심지어 표는 언어의 자연스러운 플로우와 행위에 맞춰 설계되었습니다 이게 아랍어로 작동하는 앱이나 게임을 최적화할 때 얼마나 많은 작업으로 이어질지 생각해 보세요 그래도 Swift UI와 같은 네이티브 프레임워크를 사용한다면 Apple에 의해 많은 것들을 처리할 수 있어 여러분의 앱이나 게임 특유의 콘텐츠와 기타 UI 디테일에 집중하실 수 있습니다 오늘 세션에서는 최적화 작업을 하면서 꼭 확인해야 하는 것들을 알려드리려고 하는데요 UI 방향성과 고려해야 할 예시 컴포넌트를 먼저 살펴 보겠습니다 그 다음 아랍 문자의 주요 특징과 Apple이 제공하는 아랍어 타이포그래피 지원 아이코노그래피가 어떻게 아랍어 경험 전반을 향상시키는지 살펴 봅시다 마지막으로 아랍어 사용을 위해 Apple이 지원하는 진법을 보죠 'UI 방향성'부터 시작해 봅시다 이건 App Store에서 가져온 예시인데요 Today 탭의 스토리 카드 스토리 페이지로 시작하고 앱 제품 체이지로 끝나는 플로우입니다 레이아웃 방향성 고려 시 가장 좋은 방법은 레이아웃을 와이어프레임으로 바꾸는 겁니다 아랍어에서는 이 스크린의 UI 컴포넌트 배치를 바꿔야 할 겁니다 요소들 중 일부는 오른쪽에서 왼쪽으로 가겠죠 어떤 건 그대로겠지만요 타이틀, 버튼, 내비게이션 바는 순서와 포지션이 바뀌어야 하죠 패러그래프는 항상 오른쪽에 정렬됩니다 캐러셀과 스와이프 가능 요소는 오른쪽에서부터 흘러야 하고요 UI 컴포넌트 배치를 바꾸고 콘텐츠를 로컬라이징하고 이미지는 그대로 두면 오른쪽에서 왼쪽으로 흐르는 레이아웃이 됩니다 레이아웃 방향성을 바꾸는 건 이 행위를 만드는 긴 여정의 시작일 뿐입니다 이걸 기억하셔야 해요 지금 앱의 전체 플로우가 다른 구조라는 점을요 사용자들은 바뀐 방향의 페이지를 어떻게 볼지 생각하죠 그래서 오른쪽의 Today 탭부터 시작하여 스토리 카드를 훑어보고 왼쪽의 제품 페이지로 마무리하게 됩니다 마치 아랍어 책을 오른쪽부터 읽는 것처럼요 아까 말씀드렸지만 네이티브 프레임워크를 사용하면 이 모든 게 자동으로 가능합니다 이제 UI 방향성을 바꿈으로써 영향을 받을 수 있는 영역과 컴포넌트의 또다른 사례를 보여드리죠 Weather 앱에서 가져온 예시인데요 왼쪽은 영어 레이아웃이고 오른쪽은 아랍어 레이아웃입니다

역서 제일 먼저 눈에 띄는 건 이미지, 비디오, 배경 등 콘텐츠가 동일하게 남아있다는 점인데요 이 예시에서 해는 지역이나 언어에 관계없이 항상 동쪽에서 뜨기 때문에 콘텐츠 바꾸는 걸 피하셔야 할 거예요 그래서 전반적인 경험에 영향을 주지 않죠

여기서 두 번째 컴포넌트는 '하루의 날씨'라는 캐러셀입니다 둘 다 이 컴포넌트의 상호 작용과 애니메이션이 UI 방향에 맞게 뒤집어져 있죠 말씀드리고 싶은 세 번째 컴포넌트는 온도계입니다 아랍에서는 최저 온도가 오른쪽에 있고 최고 온도는 왼쪽에 있습니다 스케일 그라디언트와 기호도 그렇죠 이 행위에 맞게 바꿔준 겁니다 전에 말씀드렸듯 페이지 간 전환에 대한 멘탈 모델 또한 역전되었습니다 주요 페이지는 맨 오른쪽에 있고 두 번째 페이지는 왼쪽으로 가야 하죠 따라서 페이지를 나타나는 점도 오른쪽부터 왼쪽으로 흘러야죠 두 번째 예시는 Calendar 앱에서 가져왔는데요 날짜, 월, 연도의 프로그레스와 플로우가 아랍어가 사용될 땐 오른쪽에서 왼쪽으로 갑니다 아랍 국가의 실제 달력 프로그레스와 일치합니다 앱이 문화적으로 관련되게 하는 것도 항상 중요합니다 Calendar 앱에서 가져온 이 예시에서 일부 날짜 아래에 빨간 선이 보이실 겁니다 실제 이슬람력에서 각 달의 시작을 나타내기 위해 사용됩니다 아랍 및 이슬람계 사람들이 이용 가능하죠 방향성의 마지막 예시는 설정의 배터리 상태인데요 토글, 분할된 컨트롤러 디자인, 상호 작용이 아랍어 레이아웃에 반영되네요 Charts도 UI에서 방향성이 영향을 받을 수 있는 또다른 곳입니다 요일, 주, 월, 연도와 같은 시간 컴포넌트를 포함하는 차트에서는 더욱 그렇죠 배터리 사용 그래프에서 영어 UI에서는 요일이 왼쪽에서 오른쪽으로 가지만 아랍어 UI에서는 오른쪽에서 왼쪽으로 프로그레스시키는 게 선호됩니다 이전 에시에서도 언급한 달력 행위에 맞추기 위해서요 즉, 이른 시간이 오른쪽에 늦은 시간이 왼쪽에 있어야 한다는 겁니다 일반적으로 차트와 그래프는 국가에 따라 다른데요 따라서 차트에 사용할 방향을 결정하기 전에 다시 한 번 확인하셔야 합니다 여기까지 'UI 방향성'이었고요 이제 '타이포그래피'에 대해 이야기해보죠 하지만 앱 디자인 시 고려해야 하는 타입페이스와 타입스타일 조정에 들어가기 전에 아랍 문자와 주요 특징을 간략하게 설명드리겠습니다 이건 아랍어로 '아랍어'라는 단어의 철자 4개인데요 글을 쓸 때는 연결되기 전까지 그 자체로는 의미가 없습니다

더 이해하기 위해서 iOS 키보드를 사용해 아랍어 문장에서 이 단어를 어떻게 쓰는지 보여드릴게요

보시다시피 연결되어 있다고 주어진 단어의 모든 글자가 연결된 건 아닙니다 이 단어는 두 부분으로 구성되죠 각 부분에 두 개의 글자가 있는 겁니다 바로 이게 아랍 문자의 주요 특징 중 하나입니다 '연결된 성질'이요 이건 각 글자와 쌍에 대해 가능한 기호가 많을 수 있다는 뜻입니다 첫 번째 글자인 'Ain'은 단어 내 포지션에 따라 형태가 변화합니다 독립적으로 쓰일 때 단어의 시작에 쓰일 때 중간에 쓰일 때 끝에 쓰일 때로 나뉘죠 이게 아랍어 폰트 라이브러리를 라틴어보다 훨씬 크게 만듭니다 알아두시면 좋죠

아랍 문자의 또다른 특징은 단어가 대개 라틴어보다 간결하다는 점입니다 연결성이 단어와 구에 더 응축된 느낌을 주는 경향이 있기 때문이죠 키가 더 크기도 합니다 특히 점과 발성 발음 구별 부호를 많이 사용하죠 발성 기호는 특정 글자를 강조하거나 소리는 다르나 구별하지 않으면 똑같이 쓰이는 단어들을 구별하기 위해서 사용됩니다 앱에 발성 기호가 많이 사용될 경우 잘림 방지를 위해 UI의 수직 간격이 더 필요하죠 아랍어와 라틴어의 주요 차이점을 알아보았습니다 우리의 시스템 API 사용 시 제공 가능한 타입페이스를 보죠 Apple은 가독성과 기능성을 신중하게 고려하여 디자인한 Apple만의 아랍어 타입페이스를 제공합니다 2개국어 컨텍스트에서도 자연스러운 느낌을 내기 위해 Latin SF 패밀리 스타일과 일관되게 디자인하였죠 SF Arabic체는 Latin SF체와 비슷하게 앱에 필요한 모든 가중치를 제공합니다 Ultralight부터 Black까지요 우리 네티이브 앱에선 다양한 가중치가 사용되죠 Clock 앱이 좋은 예시입니다 타이틀에는 Bold체를 도시들에는 Regular체를 시계 숫자에는 Light체를 사용했죠 다양한 가중치가 어떻게 사용됐는지 우리 생태계의 더 많은 앱에서 확인하세요

Health 앱에서는 타이틀과 바디 카피에 bold, medium, regular가 사용됩니다 Weather 앱에서는 숫자와 바디 카피에서 다양하게 사용됩니다 SF Arabic체 또한 확장성을 고려해 만들어졌죠 형태가 포인트 사이즈에 따라 약간씩 바뀐다는 뜻입니다 이건 옵티클 사이즈인데요 가장 큰 포인트 사이즈와 가장 작은 포인트 사이즈 사이에 구조적 차이가 잇ㅆ습니다 큰 글씨체는 보통 타이틀과 헤딩에 쓰이고 나머지 SF 패밀리의 기이한 느낌과 매치됩니다 더 작은 포인트 사이즈는 패러그래프와 바디 카피에 사용되며 스타일보다는 가독성과 기능성을 우선으로 디자인됐고요 이건 전체 폰트 구조에서 터미널, 너비, 대조에 기울기를 추가함으로써 나타납니다 시스템이 이 부분을 고려한다는 점 기억하세요 포인트 사이즈에 따라 맞는 형태를 자동으로 선택하죠 App Store Editorial 시트에서 가져온 예시입니다 디스플레이는 타이틀에 텍스트는 패러그래프에 사용됐죠 두 경우 모두 아랍어와 영어의 2개국어 컨텍스트에서 타입페이스가 자연스럽게 작동합니다

SF Arabic Scalable 타입페이스는 우리 생태계 전반에서 사용되나 여러분의 앱이나 게임에서도 사용될 수 있습니다 올해 SF Arabic Rounded체를 도입했는데요 Ultralight부터 Black까지 다양한 가중치도 포함됩니다

다음은 Reminders 앱인데요 SF Arabic Rounded체가 타이틀과 바디 텍스트에 있네요 보시다시피 Rounded는 컨텍스트에 따라 앱을 더 실용적이고 활동적이며 부드러워 보이게 만듭니다

Rounded 타입페이스 사용 다양한 가중치 SF Arabic체의 확장성은 우리의 네이팁 앱에 나타납니다 여러분들은 아랍어 사용자의 최고 경험을 만들기 위해 이걸 어떻게 사용하시겠어요? SF Arabic Rounded체 등 올해 발표된 새로운 폰트 정보를 더 알아보고 싶으시다면 올해 열린 다음 세션을 확인해 보시기 바랍니다 이제 아랍어 타입페이스를 사용할 때 고려해야 할 타입스타일 내용을 살펴보죠 아랍어는 대소문자를 구별하지 않는 문자입니다 Digital Arabic 폰트는 라틴어 소문자에 맞춰집니다 하지만 대문자가 사용되는 경우 라틴 문자에 볼륨을 더 주고 아랍어가 라틴어에 비해 더 작게 느껴지게 만들죠 UI에서 이 옵티컬 사이즈 차이를 해결하기 위해서는 아랍어 폰트 사이즈를 10% 키워야 합니다 이 미묘한 차이는 가독성 향상에 도움이 됩니다 특히 더 작은 포인트 사이즈로 대문자가 사용될 때요 또 고려해야 할 점은 글자 간격입니다 아랍어가 연결되어 있다는 점을 고려하면 일부 아랍어 타입페이스는 공백을 적절히 처리할 정도로 완전히 최적화되지 않습니다 이건 잘못 배치된 링크가 보일 수도 있고 글씨는 나눠버릴 수도 있고 불필요한 공백을 보일 수도 있습니다 사용 중인 아랍어 타입페이스가 이렇게 충분한 최적화가 안되면 0 트래킹을 사용하세요 즉, 시스템 폰트를 사용해 글자 연결 부분을 추가하세요 {\an8이 연결 부분은 'Kashida'라고 합니다 이 시스템은 Kashida를 다양한 길이로 만들어 아랍어에서의 공백을 더 자연스럽게 만들어주죠 마지막으로 살펴볼 건 투명성입니다 간혹 글자 간 연결 부분이 눈에 보이는 경우가 있는데요 아랍어에 최적화가 완전히 안 된 폰트나 시스템에 투명성이 있어서 이런 게 생기는 겁니다 감사하게도 우리 시스템 폰트로 해결이 가능한 문제입니다 왜곡 가능성을 해결하기 위해 단어 전체에 불투명도가 적용됩니다 타이포그래피 섹션에서는 아랍 문자의 주요 특징과 우리 생태계에서 사용하는 아랍어 타입페이스 아랍어 특정 타입 처리에서 고려해야 할 점을 알려드렸어요 이제 '아이코노그래피'에 대해 이야기해 보죠 아이코노그래피는 놓치기 쉬운 UI 요소 중 하나입니다 하지만 보통 사용자 플로우의 엔트리 포인트이거나 특정 액션에 대한 트리거죠 그래서 올바른 아이코노그래피는 자연스러운 경험에 있어서 중요한 요소입니다 아랍어에서는 고객에 대해 가장 관련성 있는 심볼을 선택하는 게 중요한데요 App Store의 탭 바 아이콘을 예시로 가져왔습니다 심볼 일부는 바뀌어 있지만 동일한 부분도 있습니다 왜 이런 선택을 했는지 알려면 좀 살펴 봐야 하는데요

Today 탭의 심볼은 텍스트 방향을 보여줍니다 아랍어 사용자들의 자연스러운 읽기 방향에 맞춰 줄이 오른쪽 정렬되어 있으므로 아랍어 사용자들과 관련됩니다 돋보기의 방향은 오른손 사용 각도를 나타내지만 이건 전세계 사용자가 사는 지역에 상관없이 대다수가 보이는 행위이므로 아랍어 UI에서도 그대로 두기로 결정한 겁니다

방향성이 아랍어 UI에서 심볼이 처리되는 방식에 어떻게 영향을 주는지 보여주는 사례가 다른 앱에서도 볼 수 있습니다 펜의 기울기는 유지된 상태로 오른쪽부터 왼쪽으로 쓰는 경우 Apple 생태계 전반에 걸쳐 똑같은 슬래시 방향은 유지하고 해당 UI에서 자연스럽게 느껴지도록 스피커의 방향을 바꾼 경우 달의 프로그레스를 나타내는 달력의 점 모양 방향에 변화를 준 경우 시계침은 그대로 유지하되 시스템의 물리적 시계 표현에 매치한 경우 방향성에서는 무엇보다도 현지 관련 심볼을 갖추는 게 세계 시장에서 우수성을 보장하기 위해 시간이 흐르며 바꾸도록 노력해야 할 또다른 계층입니다 SF 심볼 라이브러리에 있는 아랍어 전용 심볼 사례입니다 예외적으로 그려진 아랍어 서명 심볼과 기타 텍스트 형식 심볼이죠 이들을 포함해 300개 이상의 아랍어 심볼을 SF Symbols 앱에서 찾을 수 있습니다 해당 앱에서는 심볼을 쉽게 찾아 인포 패널 내 로컬라이제이션 섹션을 체크해 아랍어와 기타 비라틴 문자의 현지 변형 심볼을 볼 수 있죠 우리 시스템 API를 사용한다면 오른쪽에서 왼쪽으로 가는 모든 현지 심볼은 앱에 자동으로 나타날 겁니다 보셨다시피 올바른 심볼 사용은 전체 앱 경험을 바꿀 수 있죠 사용자와의 관련성이 더욱 높아지니까요 특히 비라틴 문자를 사용하는 국가와 지역에 더 집중해야 합니다 다른 언어적, 문화적 뉘앙스를 간혹 잊어버리니까요 여러분들꼐서 아랍어 고객들을 위해 가장 관련성 있는 아이콘을 만들어주실 수 있길 바랍니다 이제 '아랍어 숫자'에 대해 이야기해 보죠 우리 모두 친숙하고 거의 전세계에서 사용되는 그런 숫자를 '아라비아 숫자'라고 합니다 이게 아랍 세계에서 발명됐기 때문인데요 그리고 당시 로마 숫자를 대체했습니다

그리고 오늘 현재까지 모든 수학적 계산은 오른쪽에서부터 왼쪽으로 가고 아랍 언어의 읽기 행위에 매치됩니다 일의 자리, 십의 자리 백의 자리 순으로 시작하는 덧셈 순서의 예시와 같이 오늘날 이 숫자 형태는 서양 아라비아 숫자라고 하며 동양 아라비아 숫자의 형태와는 대조됩니다 두 형태 모두 아랍 세계에서 개발됐고 다양한 아랍 국가에서 사용되고 있죠 서양 아라비아 숫자는 모로코, 알제리, 튀니지처럼 서아프리카 아랍 국가에서 사용되는 반면 동양 아라비아 숫자는 이집트나 사우디 아라비아 같은 레반트 및 걸프 지역 국가에서 사용됩니다

두 시스템 사이에서 선택하는 건 자동으로 사용자의 국가에 따릅니다 사용자 선택에 의해 시작될 수 있고요 그리고 우리 생태계에서 숫자를 사용하는 모든 앱에서 이런 선택이 반영되죠 Calculator 앱과 Calender 앱도 포함됩니다 Typograph 시계 페이스도 두 숫자 형태에서 다 예쁘게 디자인됩니다 시계 페이스 갤러리에서 다른 페이스도 확인 가능합니다 개발 중인 앱에 숫자가 포함된다면 두 가지 형태 모두 고려하시거나 타겟 국가를 정하세요 어떤 형태가 더 적절한지 검증하기 위해서요 마지막으로 오른쪽에서 왼쪽으로 이어지는 언어에 대해 더 많은 디자인 지침을 원하신다면 Human Interface Guidelines에 있는 Right to Left 지침을 참고하세요 오늘 저는 아랍어로 된 디자이닝에 대해 말씀드렸는데요 언어가 UI 방향성에 미칠 수 있는 영향도 이야기했죠 타이포그래피 섹션에서는 아랍 문자를 비롯하여 타임페이스, 아랍어 UI 타입의 고려 사항을 알려드렸습니다 또, 아이코노그래피와 함께 이게 앱 경험을 바꾸는 방법과 두 가지 형태의 아랍어 숫자 Right to Left Guidelines도 다뤘죠

이 모든 것에 대해 개발자의 관점에서 더 탐구하고 싶으디사면 다음 세션도 참고해 보시길 바랍니다 오늘 세션을 통해 아랍 세계에서 사용될 앱을 디자인하거나 최적화하기 위한 지침과 툴을 아셨길 바랍니다 이게 여러분의 앱에서 어떻게 구현될지 궁금하네요