A11Y
"보이지 않는 질서 (3)"
"Identical
Device Experience를 위하여,
다름은 곧 같음이다."
Accessibility에서 '시각(Vision)'에 관련된 기능들은 다른 Type에 비해 제공되는 가짓수가 많고, Severity의 폭도 굉장히 넓은데요, 그만큼 사람마다 가지고 있는 '눈'의 Condition이 제각기 다르기 때문입니다.
아이부터 어른까지 최적의 판독성을 갖는 글자의 크기가 다르며, 색약·색맹에 따라 감지할 수 있는 색의 범위가 다르고 형태를 구분하는 인지력도 다릅니다. 더욱 중요한 것은 이 Condition에 영원불변의 고정값은 없다는 것입니다.
보이지 않는 질서(1)에서 Total blind와 '음성 가이드', 보이지 않는 질서(2)에서는 'Text size(General-Accessibility)'에 관한 내용을 다뤘습니다. 시리즈 (3)에서는 Legibility와 Readability를 화두로 Legibility에서는 General 한 범주를, Readability에서는 조금 더 Accessibility 집중된 사항들을 얘기해보려고 합니다.
#03. 모두를 위한 질서-Legibility와 Readability
사전에서 Legibility와 Readability를 검색해보면 가독성, 시인성 등의 단어로 함께 표현되고 있지만 둘은 조금 다른 뜻을 내포하고 있습니다.
"Legibility" is based on the ease with which one letter can be told from the other.
"Readability" is the ease with which the eye can absorb the message and move along the line."
-from 'Types of Typefaces, 'by J. Ben Lieberman
간단히 말해, Legibility는 서체의 Character 하나하나가 뚜렷하게 '잘 구분되어 보이는 것'이고
Readability는 Character들의 조합인 글줄과 문단이 알맞은 구성과 흐름을 가져 '쉽게 읽히는 것'입니다.
정보를 습득하는데 있어 '보고(Legible) 읽는 것(Readable)'은 모두 중요한 요소들이며, 관련 App 및 사례를 통해 Screen Device에서의 Legibility-Readability는 어떤 의미를 가지는지 알아보고자 합니다.
[Screen Device에서의 Legibility]
"잉크부터 Digital native font까지"
Text가 운용되는 '환경'을 고려하여 서체는 꾸준히 변모하여 왔습니다. 인쇄 활자가 주를 이루던 시절에는 '종이'라는 Material에 최적화된 가독성 높은 서체가 필요했습니다. Garamond는 훌륭한 본문 텍스트인 동시에 잉크를 아껴주는 동시대 가장 친환경적인 폰트였고, Bell Centennial은 인쇄 공정 동안 잉크가 번지는 것에 잘 적응할 수 있도록 디자인되었습니다. Screen display로 넘어오면서 Text는 더 이상 종이에 박제된 죽은 존재가 아니었으므로 종이와 잉크의 흡착력보다 더 다양한 고민이 필요하게 되었습니다. Web browser의 종류에 따라 바뀌는 Text 환경, User의 인터렉션 조작에 따라 Flexible하게 달라지는 Text size와 글줄 등 변화무쌍한 on Screen 환경을 고려한 Digital fonts; Georgia, Verdana, Azuro 등이 제작되었습니다.
제조사의 인하우스 디자이너들을 비롯하여 Screen device를 매개로 컨텐트를 전달하는 관련자들은 최적의 Digital font를 제공하기 위해 많은 노력을 해왔습니다. 특히, 제조사의 경우 Flagship부터 Mass 모델까지 다양한 스펙의 Display 환경을 커버(TFT·TN 등 저가 Display의 경우 열화현상이 발생하여 글자가 뭉개지는 현상 발생)해야 하고 Font type으로 자사 Device Identity를 함께 표현해야 했기 때문에 자체 서체 개발 및 유수의 Typographer들과의 콜라보레이션에 많은 노력을 기울였습니다.
최근에는 단순히 기존의 Font를 Display 환경에 최적화시키는 Digital font의 개념을 떠나, 'Digital native font(디지털 태생의 서체)'의 개념이 두드러지고 있습니다. Digital native font는 iOS 9부터 새롭게 적용된 Apple의 'SF(San Francisco)'체를 통해 그 특징을 살펴볼 수 있는데요, Apple은 iOS 9 이전에 Apple watch를 통해 기존의 Helvetica Neue가 아닌 'SF(San Francisco)'체를 대중들에게 선보입니다.
New Font가 Watch에 선적용 된 것이 의아할 수도 있겠지만, Watch야 말로 새로운 서체의 적용이 가장 시급한 'Tier'였습니다. Helvetica는 세계에서 가장 사랑받는 서체 중 하나이지만, Small text에서 가독성이 떨어진다는 단점이 있었고 이것은 Phone보다 작은 Display를 가진 Watch에서는 충분히 문제가 될 수 있는 부분이었습니다. (더불어, 작은 Screen일지라도 해상도는 종이보다 훨씬 좋으니까요.) Apple에서 더욱 신경을 쓴 점은 단순히 Font를 바꾼 것뿐만 아니라, 동일 Font의 자족(Font family)을 각 제품군에 맞게 별도로 적용했다는 점입니다. iMac에는 'SF를, Watch에는 'SF Compact'를 적용하여 Device type에 맞는 Legibility와 Readability를 확보하였습니다.
SF Compact는 Round shape을 조정하여 Letter간 공간을 확보함으로써 Small Screen에 더욱 적합하다또한, SF와 SF Compact에 각각 Text type 및 Display type 용 Family를 추가하였는데, 특정 Text size를 기준으로 하여 20pt 이상부터는 Display type, 19pt 이하부터는 Text type의 서체가 자동으로 적용될 수 있도록 했습니다. (Type 별로 Negative space와 Shape이 디테일하게 조정된 Family 들은 SF체가 일관성 있는 캐릭터를 유지함과 동시에 최적화된 가독성까지 확보할 수 있도록 했습니다.) System Automatically 적용되는 Font type 외에도 New weight adoption 및 최적화된 정렬을 보여주는 Vertically Centered Colon(:), Alternate Number 등을 통해 Apple은 Font가 디자인 툴에서 Code로 넘어갈 때 발생하는 간극을 세밀하게 채워주고 있습니다. (Indesign에서 이러한 기호들; 따옴표, 쉼표, 분수, 세미콜론 등의 자간 및 높낮이를 일일이 맞춰본 경험이 있다면 이러한 디테일이 얼마나 세심한 배려인지 느낄 수 있습니다.)
San Francisco의 Family tree'SF'체가 Device 및 Text size에 따라 자동적으로 서체가 반영되고, 최적화된 Align을 보여준다는 '가독성'적인 측면으로만 Digital native font로 명명되는 것은 아닐 것입니다. Apple의 메인 얼굴을 유지하면서도 앞으로 태어날 New Device군을 위해 일관성 있는 자족을 늘려갈 수 있다는 점에서, 'SF'체는 Digital native font에 대한 많은 가능성을 내포하고 있다고 생각합니다.
'SF'체에 관련된 사항들은 하기 링크를 참고하였습니다.
-Apple developer site_WWDC (Video & Transcript)
Legibility에는 Font type뿐만 아니라 Text size, Serif, Sans-Serif, X-Height 등 많은 요소들이 포함되어 있습니다. 자세한 사항들은 관련된 몇 가지 링크를 참고하시면 좋을 것 같습니다. (정확한 수치에 대해서는 기준이 명확치 않으니, 전반적인 요소만 보시면 되겠습니다 :)
-Legibility & Readability (1)
-Legibility & Readability (2)
-Legibility & Readability (3)
[Screen Device에서의 Readability]
"모든 이들의 평등한 Display 경험을 위하여"
서두에서 언급했듯, Readability에서는 어떠한 Vision 기능들이 '각기 다른 Condition의 눈을 가진 사람들'의 동등한 Device 경험을 돕는지 살펴보고자 합니다. Readability의 중요 요소 중 하나인 '대비(Contrast)'는 저시력자뿐만 아니라 일반인에게도 꼭 필요한 사항으로, KWCAG*에서는 Background와 Foreground(Text)의 명도차를 최소 4.5:1 이상으로 할 것을 권고하고 있습니다.
KWCAG*=한국형 웹 콘텐츠 접근성 지침
최근 개정된 지침서에서는 화면 확대가 가능하도록 구현된 텍스트 콘텐츠(텍스트 및 텍스트 이미지)의 경우, 명도 대비를 3:1까지 낮출 수 있도록 했다.
Google은 Native app부터 3rd party까지 Device 내 모든 Text의 명시성을 확보할 수 있도록 '고대비 텍스트' 기능을 제공하고 있습니다. (Experimental version)
Text를 White or Black으로 변경한 후, 각 Text Color에 반전되는 Outline을 추가Text 속성을 가진 대부분의 글자에 영향을 준다는 장점이 있으나, Text가 놓여 있는 Background를 인지하지 못하고 Text 자체 Color RGB 값만을 합산하여 변경되기 때문에 항상 Outline이 수반되어야 한다는 단점이 있습니다. (Outline은 작은 글씨에서 오히려 가독성을 해칠 수 있습니다.)
Apple에서는 Increase contrast 항목 내, 3가지 세부 기능(Reduce Transparency, Darken colors, Reduce White point)을 두어 명도 및 조도 등을 조정할 수 있는 기능을 두었습니다.
Reduce Transparency: Blur 및 Opacity가 적용된 요소들을 불투명으로 바꾸어 준다
Darken Colors: App별 Primary Text 및 주요 Icon의 명도를 낮춰 배경과의 대비차를 높임
Reduce White point: Bright color의 강도를 낮춘다시인성과 관련된 Brightness, Contrast, Transparency를 세부적으로 조정할 수 있다는 것은 장점이나, Grey계열의 Sub text 및 Section divider Text 등의 명도는 변경되지 않아 지원 범위가 넓지 않다는 것이 단점입니다.
최근에는 제조사 외, 3rd Party에서도 Generally 사용할 수 있는 'High contrast theme'을 제공하기 시작했는데요, 그 예로 '카카오톡의 고대비 테마'를 들 수 있겠습니다. Low Vision을 위한 테마이긴 하지만, 눈의 피로도를 낮출 수 있고 컴포넌트들의 시인성이 뛰어나다는 점에서 Senior를 포함한 General 타겟에도 충분히 도움을 줄 수 있다고 생각됩니다.
이미지 출처: Playstore-고대비 카카오톡 테마현재, 각 제조사 및 App이 가진 Color scheme과 Animation Effect 등은 고유의 Identity를 만듦과 동시에 풍부한 GUI를 제공해주지만 한편으론, 기본적인 Readability의 기준과 상충되기도 합니다.
사실, 고대비를 만족시키려면 사용할 수 있는 색상 범위가 제한되고 미려한 Effect의 사용을 과감히 포기해야 하기 때문에 GUI 디자이너가 그 접점을 찾기란 쉽지 않을 것입니다. 모든 디자인을 Accessibility에 맞춰할 수는 없지만 적어도 디자인을 하면서 이러한 부분들을 한 번쯤 고려해보고 보완점을 함께 생각한다면 더욱 폭넓게 사용자층을 이해할 수 있을 것입니다.
2015년 Naver에서는 색을 잘 구별하지 못하는 사용자들을 위해 '색약 지하철 노선도'를 내놓았습니다. 색약·색맹을 갖고 있는 사람들은 Type에 따라 특정 색을 구분하는 감각이 둔하여, 그 색들을 잘 분별하지 못합니다. 기존의 지하철 노선도는 10개가 넘는 라인들을 대부분 Color로 구분하고 있고, 환승하는 곳의 교차점은 오로지 해당 호선들의 색깔이 입혀진 Dot으로만 표기가 되고 있습니다. 한국형 웹 콘텐츠 접근성 지침에서는 '콘텐츠는 색에 관계없이 인식될 수 있어야 한다'고 명시하고 있습니다. Naver 색약 지하철 노선도에서는 기본적인 색상 조정 외에도 라인에 Outline을 추가하여 색이 아닌, 일종의 패턴으로 노선도를 구분할 수 있도록 하였습니다.
Naver 색약 지하철 노선도iOS, Android, Samsung TouchWiz에서도 색약·색맹을 돕기 위해, 다양한 Screen Display 조정 기능을 제공하고 있습니다. Negative Color와 Grey scale은 대부분의 Device에서 기본 제공되는 항목으로 컴포넌트 간 대비를 높여 저시력자에게도 도움을 주는 기능입니다.
(좌): Grayscale (우): Invert colors
Negative colors를 사용하는 UserGoogle Android에서 제공하는 Color Correction과 Samsung TouchWiz에서 제공하는 Color Adjustment는 Color blindness 뿐만 아니라, 개인의 선호도에 맞는 최적의 Screen 색상을 원하는 일반 사용자에게도 유용합니다.
Galaxy Note 5-Color adjustment: 개인 선호도에 따른 Color Tone 지정 및 개별 Condition에 알맞는 Color 제공 iOS에서는 Color blindness 관련 색상 조정 기능이 없는 대신, Button shapes와 On/Off Labels를 제공(특정 기호 및 Shape 등을 추가)하여, 색에 무관한 인지가 가능하도록 하고 있습니다.
Button Shapes: Text Button에 Background를 생성하여 버튼의 시인성을 높임 
On/Off Labels: O과 I로 Color외에도 기호를 추가하여 인지성을 높임 덧+
현재의 Accessibility 동향에 대해 조심스럽게 얘기해보자면, 점점 General의 사용성을 흡수하는 Overall한 범주로 나아가고 있습니다. 초기에 Severity가 높은 '장애'만을 고려하여 Specific한 기능들이 제공되었다면, 최근에는 장애와 상관없이 '모두'의 사용성이 Cover되는 넓은 범주로 뻗어나가고 있는 것입니다. 이렇게 전방위적으로 접근성의 범위가 넓어지는 이유는 Accessibility가 단순히 제조사의 Device를 잘 사용할 수 있는 것뿐만 아니라, 이제는 그들의 Life 자체에 가치를 주고 싶어 하기 때문입니다.
