티스토리 뷰

Visual Design and Accessibility

영상 주소 - https://developer.apple.com/videos/play/wwdc2019/244/

이번 세션은 비주얼 적으로 앱의 접근성을 높이는 만드는 방법을 알려줍니다.
주제는 세 가지며 Dynamic Type, 향상된 Reduce Motion, mac에서 iOS로 가져온 Differentiate Without Color API 입니다.

Dynamic Type

어떤 사용자는 더 작은 텍스트 크기를 원할 수도 있고, 어떤 사용자는 더 큰 텍스트 크기를 원할 수도 있습니다. Dynamic Type을 사용하여 사용자가 원하는 크기대로 보여질 수 있도록 설정할 수 있습니다.

Dynamic Type을 구현할 때 아래 네 가지 원리를 기억하면 좋습니다.

Dynamic Type Principle(원리)

  1. 텍스트를 가능한 만큼 다이나믹하게 만드세요.

  2. 가능한 만큼 화면 가로 비를 사용하세요.

  3. 텍스트가 커질 때 텍스트의 길이를 줄이지 마세요.

  4. 텍스트 옆의 아이콘도 함께 크기가 변경될 수 있도록 하여 UI에 균형을 유지합니다.

iOS에는 타이틀부터 설명, 주석에 이르기까지 Dynamic Type과 함께 사용할 수 있는 11개 텍스트 스타일이 있습니다. 아래 코드를 통해 기본 폰트 / 커스텀 폰트에 따라 설정할 수 있습니다.
이것은 언제든지 사용자가 텍스트 크기를 변경할 때 앱이 포그라운드에 있을 때도 뷰를 업데이트 하는 것을 보장합니다.

  • 기본 폰트

      label.font = UIFont.preferredFont(forTextStyle: .body)
      label.adjustsFontForContentSizeCategory = true
  • 커스텀 폰트

      var fontDict: [UIFont.TextStyle : UIFont] = myCustomFontDict() 
    
      if let font = fontDict[style] {
          label.font = UIFontMetrics(forTextStyle: style).scaledFont(for: font) 
      } else {
          label.font = UIFont.preferredFont(forTextStyle: style) 
      }

Dynamic Type은 Xcode에서 미리보기로 확인할 수 있는데요. 해당 메뉴는 Xcode에서 Simulator로 빌드하면 활성화 되며 Xcode > Debug > View Debugging > Configure Environments overrides 를 누르면 실행됩니다.

Text에 위치한 스위치를 활성화시키고 Dynamic Type Slider를 움직이면 시뮬레이터에서 즉각적으로 확인할 수 있습니다. 여기서 라이트/다크 모드, 다양한 접근성을 확인할 수 있습니다.

Reduce Motion

  1. Reduce Motion (동작 줄이기)

    iOS, 앱의 Motion(동작)은 흥미로운 부분이며 고객들에게 에워싸는 경험을 생성하기 위해 모션을 사용하기도 합니다. 하지만 어떤 사용자에게 이러한 동작은 필요하지 않을 수 있습니다.

    세명 중 한 명은 이러한 동작에 민감하다고 할 수 있으며 동작을 가진 화면을 바라보는 것이 힘들 수도 있습니다.

    그래서 iOS에서는 이미 접근성에서 시스템의 날씨와 패럴렉스 효과와 같은 것을 비활성화하는 Reduce motion 기능을 제공하고 있습니다. (한국어 메뉴로는 설정 > 손쉬운 사용 > 동작 > 동작 줄이기 활성화)

    아래 코드를 사용해 동작 줄이기가 활성화되있다면 그에 맞게 애니메이션을 변경하는 것이 필요합니다.

     static var UIAccessibility.isReduceMotionEnabled: Bool { get }
     static let UIAccessibility.reduceMotionStatusDidChangeNotification: NSNotification.Name
  2. Autoplaying video (비디오 자동 재생)

    앱스토어를 들어가보면 게임 트레일러가 자동으로 재생되게 해 해당 게임에 대한 흥미를 이끌게 합니다. 이것도 마찬가지로 모션에 민감한 사람이 있을 수 있기 때문에 자동 재생되지 않도록 설정할 수 있습니다.

    메뉴는 설정 > 손쉬운 사용 > 동작 > 비디오 미리보기 자동 재생 항목을 활성화하거나 비활성화하면 됩니다. 이것도 코드가 있으며 그에 맞게 비디오 자동 재생을 설정하면 됩니다.

     static var UIAccessibility.isVideoAutoplayEnabled: Bool { get }
     static let UIAccessibility.videoAutoplayStatusDidChangeNotification: NSNotification.Name

    앱의 자동 재생 설정을 기본으로 반영하기

    앱 내에서 이미 자동 재생 설정을 제공하는 경우 그것을 반영하길 원할텐데요, 앱의 설정으로 반영이 가능합니다.

  3. Screen Transition (화면 전환)

    설정 앱을 보면 대부분 sliding 형식으로 화면 전환이 이루어지는 것을 볼 수 있습니다. 이것을 Dissolve 방식으로 변경할 수 있습니다.

    마찬가지로 동작 화면에서 크로스페이드 전환 선호 를 활성화하면 UIKit standard navigation이나 modal presentation화면 전환이 dissolve 방식으로 적용됩니다.

Differentiate Without Color

색맹은 다르게 나타나는 많은 색상들이 다른 것과 매우 비슷하게 보이는 것이 원인입니다.
제2색맹(deuteranopia)에서는 예를 들어 어떤 빨간색, 초록색, 노란색이 매우 같게 보일 수 있습니다.

세션에서는 Penut Butter App을 사용하여 설명을 하고 있는데요, 땅콩 버터 이름 왼쪽을 보면 색상 원을 볼 수 있습니다.

각각 초록색 원 - 현재 가지고 있는 땅콩 버터, 노란색 원 - 전에 한번 먹어 봤지만 지금은 없는 것, 빨간색 원 - 도전해 본 적 없는 것입니다.

아래 오른쪽 사진은 색맹 사용자가 보고 있는 화면으로 보다시피 원의 색상이 구분이 거의 가지 않는 것을 볼 수 있습니다.

설정 > 손쉬운 사용 > 디스플레이 및 텍스트 크기 > 색상 사용 없이 구별 메뉴를 활성화합니다. 개발자는 아래 코드로 메뉴 활성화 여부를 확인할 수 있습니다.

public func UIAccessibility.shouldDifferentiateWithoutColor() -> Bool

public static let UIAccessibility.differentiateWithoutColorDidChangeNotification: NSNotification.Name

설정이 활성화되어있을 때 색상 뿐 아니라 다른 것으로도 정보를 판별할 수 있도록 제공해야 합니다. 아래 사진을 보면 색상 뿐 아니라 도형 모양, 도형 안의 기호를 통해 정보를 주고 있는 것을 확인할 수 있습니다.

그러면 오른쪽에서 보는 것처럼 색맹 사용자가 보아도 각 항목이 어떤 것을 의미하고 있는 지 이해할 수 있게 됩니다.

When possible,

do not rely on color alone.
가능하다면 의미를 알리기 위해 색상만 의존하지 않도록 합니다.

위의 내용은 기능을 확인하기 위한 샘플 앱이었기에 원을 아예 사용하지 않을 수도 있고 또는 기호를 바꾸는 게 쉬울 수 있습니다.
하지만 그게 모든 앱에 해당되는 건 아니겠죠? Casuality 라는 게임 앱을 봅시다.

이 앱은 화면에 색상을 포함합니다. 끝의 타일을 보면 다른 색상에 X 마크가 있습니다. 일부 사용자에게는 같은 타일로 보일 수 있습니다. 그래서 게임 제작자는 색맹 모드를 제공하고 있습니다.

색맹 모드를 활성화해서 플레이어 머리 위에 심볼이 생겼고, 왼쪽 타일의 기호도 바뀐 것을 볼 수 있습니다. 이런 방법으로도 다양한 사용자들이 사용할 수 있도록 앱을 만들 수 있습니다.

Summary

이번 세션은 앱을 더 비주얼적으로 접근성있는 앱을 만들기 위한 세 가지 방법을 봤습니다.

  • Dynamic Type으로 모든 텍스트 크기를 지원할 수 있고
  • 움직임에 민감한 사용자를 위해 새로운 Reduce Motion 설정으로 조정할 수 있고
  • Differentiate Without Color를 체크하여 여러 정보를 다양한 방법으로 전달할 수 있습니다.
도움이 되셨다면.. Buy me a coffeeBuy me a coffee
댓글
댓글쓰기 폼