A11Y
"보이지 않는 질서 (2)"
"타이포그래피는 보이지 않는 말을
보이게 하는 것이다."
-Erick spiekermann
지하철이나 버스를 타면 사람들의 얼굴보다 손에 들려있는 스마트폰을 먼저 보게 됩니다. 바쁘게 손가락을 움직이며 톡을 주고받는 사람들, 게임을 하는 사람들, 주소록을 찾는 사람들, 인터넷을 보는 사람들. 그러다 문득 스마트폰이 아닌, 사람들의 얼굴을 보기 시작합니다. 미간을 찌푸리며 실지렁이 같은 눈으로 화면 속의 글씨를 읽는 사람들, 팔 너비 만큼 스마트폰을 앞으로 밀어 보는 사람들, 책을 보듯 편안하게 화면을 읽는 사람들.
사람들의 '글자크기'가 저마다 다릅니다.
대학교 3학년 때, 웃으며 타이포그래피 수업을 들으러 갔다가 울며 나온 기억이 있습니다. 교수님께 한 학기 내도록 자간, 행간, 가독성을 지적받다가 마지막 수업에서야 겨우 행간을 맞췄다는 슬픈 칭찬을 들었습니다. 그렇게 귀에 딱지가 앉도록 듣던 타이포그래피의 기본은 종이 매체를 떠나 Display Screen으로 옮겨오면서 어느 새 까마득히 기억 속에서 잊혔고, 실사용자들의 VOC를 받고 나서야 타이포그래피 교수님의 매질을 떠올리게 되었습니다. 스큐어모피즘과 플랫디자인, 애니메이션, 컬러, 인터렉션에 정신이 팔린 나머지 어쩌면 가장 기본적인 사항을 흘려버렸던 것 같습니다. 사람들의 목소리는 "글씨를 읽지 못하겠다."였습니다.
"글씨를 읽지 못하겠다."에는 크게 2가지 사항이 내포되어 있었는데, 첫 번째는Text가 고정되어 있어 충분히 커지지 않은 점(#02), 두 번째는Background와 Text 컬러가 유사하여 구분이 쉽지 않았던 점(#03)입니다.
#02. 모두를 위한 질서-Larger Font
GUI를 통해 실시간 Feedback을 제공하는 많은 이미지와 Icon이 생겨났지만, 여전히 Contents의 중심에는 'Text'가 자리 잡고 있습니다. 기존 활자매체에서는 종이에 잉크가 스며든 순간 Text의 유동성이 모두 사라지지만 Display 내에서의 Text는 Size 조정, Color 변경, 다국어 변환, Display에 따른 가변적인 글줄 등 Device 환경 및 사용자의 선택에 따라 매우 변화무쌍한 유연성과 탄력성을 가지게 되었습니다.
[TEXT-GENERAL]
iOS, Android, Samsung TW 등 OS와 제조사는 기본적으로 사용자가 최적의 Font를 사용할 수 있도록 Text size와 Font type 옵션을 제공하고 있습니다. 총 Text level 및 Level 별 Text Size는 다르지만 크게 General과 Accessibility larger font(Huge level)로 구성되어 있습니다.
(Larger font에 관한 부분은 [TEXT-ACCESSIBILITY LARGER FONT] 부분에서 다시 언급하겠습니다.)
[Apple iOS]
Total Text Level: 12단계 (General 7단계 + Larger Text 5단계)
Larger Text는 Accessibility settings에서 별도로 제공[Google Android]
Total Text level: 4단계 (General 3단계 + Huge Text 1단계)
Huge level과 Large text의 값이 동일[Samsung TouchWiz]
Total Text level: 11단계 (General 7단계 + Larger font 4단계)
Larger font는 Accessibility settings에서 별도로 제공Smart phone이나 Tablet에서 Level 별로 Font size를 조정해보면, 모든 Text가 다 커지거나 작아지지 않는다는 것을 알 수 있습니다. Android 기준으로 Text는 dp 또는 sp의 속성을 가지고 있는데, dp는 고정값으로 Font level에 따른 영향을 받지 않고, sp로 정의된 Text에서만 글자가 작아지거나 커지게 됩니다.
dp: Density-independent pixels / 절대값으로 항상 같은 Size로 고정되어 있음
sp: Scale-independent pixels / 상대 값으로 Level에 따라 Size가 가감됨
sp로 정의 된 Text만 Font level의 영향을 받음 (Galaxy Note 5 기준)Calendar의 Month view나 Calculator처럼 특정 메타포를 중심으로 고정적인 Layout이 중요한 경우, 대부분 Text를 dp로 설정하여 Font level에 영향을 받지 않게 합니다. 이외, List나 Description처럼 Scalable layout에 크게 영향을 받지 않는 구조에서는 sp로 설정되어 다양한 Font level의 조정을 받게 됩니다. 최근에는 저시력자뿐만 아니라 Senior 타겟층을 고려하여 대부분의 Text가 사이즈 조정을 받을 수 있도록 하는 추세인데요, Text를 sp로 설정할 때는 몇 가지 고려사항이 수반됩니다.
첫 번째, Text가 커지고 작아진다는 것은 'Flexible 한 공간이 필요하다'는 의미와 동일합니다. 대부분의 Text Size는 System 배율에 의해 자동적으로 가감되기 때문에 GUI designer들이 Text size에 따른 공간을 미리 고려하지 못하고 App의 Layout을 디자인하는 경우가 많습니다. 한 가지 Text size만 고려하여 디자인하는 경우, Text가 가진 공간이 커지거나 줄어들 때 주변 컴포넌트들과의 배열 조화 및 Hierarchy를 놓칠 수 있습니다. 아래 List type을 예로 들어보면, 오른쪽은 Scalable layout이 함께 고려된 경우이고 왼쪽은 고려되지 않은 상황입니다.
Text size 변경 시, Text 위- 아래의 공간; padding 값도 함께 고려되어야 한다.디자인 작업 시의 고려 못지않게 초기 개발팀과의 커뮤니케이션도 중요한 포인트입니다. App의 화면 초기 작업 시부터 개발팀과 함께 Scalable layout에 대한 충분한 이해 및 선검토가 필요합니다.
Developer options > Show layout boundaries에서 Text의 위치 및 padding 값 등을 확인할 수 있다.두 번째, sp 설정 시 '정보의 Hierarchy'가 고려되어야 합니다. Contents 속에는 저마다 고유의 위계질서를 가진 Text size들이 존재합니다. 아래 List 화면에서 크게 3가지; Categories(sub header) / Direction lock (Main text) / Unlock the screen...(Sub text) type의 Text 정보 위계를 볼 수 있습니다. 가령, 오른쪽 이미지처럼 질서 없이 Text에 sp 속성이 부여될 경우, Main text가 오히려 Sub text 보다 작아지는 우를 범할 수 있습니다.
Text가 가감될 시에도 본래의 정보 Hierarchy가 유지되어야 한다.[TEXT-ACCESSIBILITY LARGER FONT]
Accessibility Larger font는 저시력자를 Main target으로 하여, General 단계보다 더 큰 범위의 Text size를 제공합니다. Samsung Touchwiz에서는 partially sighted user를 위한 권장 Size를 기준(ADA: U.S Department of Justice Americans with Disabilities Act)으로 List main text의 경우 4.5mm, Contents text의 경우 7.1mm를 기준으로 Text size를 지정하고 있습니다.
mm 기준은 Device에서 실측으로 Text의 Height를 측정했을 때의 높이입니다.
(Normal style / 72 dpi / 'H' Height 기준)
Accessibility larger font는 총 4단계가 지원되며(iphone은 5단계 지원), General 범위와 달리 국소적인 부분에 한해 적용되고 있습니다. Text size가 매우 크기 때문에 사용자가 빈번하게 사용하는 주요 App 위주로 지원하며, 주요 App 중에서도 List Main text 및 Contents 항목에 한해 Larger font를 사용할 수 있습니다. Larger font를 General 지원 범위와 동일하게 적용하기 힘든 이유는 Readability에 있어 Text size도 중요하지만 단어의 의미를 파악할 수 있는 가독성 측면도 잘 고려되어야 하기 때문입니다. Smart phone의 경우, Web이나 Tablet 대비 Screen이 작고 Character 개수가 한정적으로 들어가기 때문에 Text size가 커질 경우 아래와 같이 단어 및 문맥을 한 눈에 알아볼 수 없는 경우가 발생합니다. 무조건 글씨 크기를 키우기보다는 Text가 놓인 화면의 Context를 고려하여 Larger font를 지정하고, 가독성에 문제가 많을 때에는
Larger font의 영향을 받되, Max level을 정해 특정 Level 이상 커지지 않도록 하는 것도 하나의 방법이 될 수 있습니다.
첫 번째 줄의 경우, Text size를 키워 시인성은 높였으나 전체 번호를 알 수 없습니다. 이럴 경우, 두 번째처럼 전체 번호를 파악할 수 있는 적정 Max size를 정하거나 세 번째 줄처럼 큰 Size를 유지하 되, 글줄이 자동으로 흐르는 Motion을 고려해볼 수 있습니다.
Larger font의 범주 자체가 저시력자를 위한 것이지만, 저시력자의 Severity는 매우 다양하기 때문에 제조사 및 OS에서 제공하는 단계만으로는 충분하지 않을 수 있습니다. Severity가 심한 저시력자의 경우, Text 보다는 Icon 및 이미지를 기억하여 App을 실행하는 경우가 많으며, Native 기능 외에도 여러 3rd party의 서비스를 통해 추가적인 도움을 받기도 합니다.
Big font: Bigger font / Giganticon: Big Icons / Flesky: Larger font in keyboard
(Google Play 기준)
덧+
Contents와 Text가 놓인 환경이 종이에서 Screen으로 넘어오면서, 어느덧 Typography의 요소들은 System의 자동화에 묻히고 말았습니다. 꼼꼼히 신경 쓰지 않다 보니 기본적인 것조차 시스템에 맡겨버렸고, 결국 읽을 수 있는 글자가 아닌 Screen위의 Display를 만들어 버린 것은 아닐지 반성하게 됩니다. 처음에는 Accessibility larger font에 집중하여 정리를 하려고 마음먹었는데, 결국 Larger font를 제대로 알려면 Typography의 기본 지식부터 재정리가 필요했습니다. 다음 글에서는 Legibility와 Readability의 차이, Contrast 등을 공부하면서 Larger font 뿐만 아니라 Screen 환경에서의 Text에 대해 더 많은 생각을 나눠보면 좋을 것 같습니다.
#Accessibility #접근성 #Larger font #Typography #Readability
