모든 사람이 Mac 앱을 더 손쉽게 사용하도록 만들기

모든 사람이 Mac 앱을 더 손쉽게 사용하도록 만들기

macOS의 강점과 유연성을 최대한 활용하는 손쉬운 사용 기능을 통합하는 방법을 알아보세요. 기본적인 내용뿐만 아니라, VoiceOver 및 음성 명령을 지원하고, 뷰 레이아웃을 개선하며, 보조 기술로 콘텐츠를 탐색하는 방법 등을 살펴봅니다.

챕터
- 0:00 - 인사말
- 0:44 - 레이아웃
- 7:48 - 탐색
- 9:52 - 상호작용
리소스
관련 비디오

WWDC24
- SwiftUI의 손쉬운 사용 관련 업데이트
WWDC21
- SwiftUI Accessibility: Beyond the basics
안녕하세요, Accessibility 팀 엔지니어 Nicholas입니다 접근성은 개발자가 만든 앱을 모든 사용자가 경험하고 즐겨 사용할 수 있도록 합니다 이 세션에서는 기초를 넘어 Mac 앱의 접근성을 개선하는 방법을 설명하겠습니다 Mac 앱은 키보드와 마우스의 상호작용을 위해 설계됐고 조밀한 사용자 인터페이스와 강력한 멀티태스킹 기능이 있죠 오늘 다룰 접근성 개선을 위한 고려 사항이 가능한 것도 이러한 Mac만의 특징 덕분이죠
여기에는 앱의 레이아웃에서 접근성을 표현하고 앱 내 탐색을 가속화하고 앱 상호작용의 접근성을 개선하는 것이 포함됩니다 Mac에서 앱의 공간은 넓어 컨트롤과 콘텐츠를 표시하죠 직관적이고 이해하기 쉽도록 인터페이스의 시각적 요소를 배치하듯이 이러한 정보가 접근성 기술에 어떻게 전달되는지 고려해야 합니다 SwiftUI는 앱을 구성하는 개별 뷰를 접근성 요소로 전달합니다 접근성 요소는 접근성 기술이 앱을 이해하고 앱과 상호작용하기 위해 필요한 정보를 포함합니다 접근성 요소에 익숙하지 않다면 WWDC 2024 ‘SwiftUI의 손쉬운 사용 관련 업데이트’를 시청하세요 텍스트 문서 편집을 위한 새 Mac 앱을 SwiftUI로 개발 중입니다
사이드바에서 페이지를 전환하고 중요한 페이지를 북마크로 표시할 수 있습니다
또한 선택한 텍스트에 형식을 지정하기 위한 컨트롤을 포함하는 속성이 있으며 여러 형식 옵션을 한 번에 적용할 수 있는 스타일 프리셋 목록도 있습니다
이 앱을 근사한 Mac 앱으로 만들기 위해 모든 사용자가 접근 가능한 앱으로 만들어야 합니다 처음부터 접근성 기본 사항을 구현했으며 추가한 새 기능을 VoiceOver로 테스트하고 있습니다
VoiceOver는 다양한 시력 수준을 가진 사용자가 앱을 사용할 수 있도록 지원하는 화면 읽기 도구입니다 VoiceOver로 앱의 인터페이스를 들을 수 있죠 접근 가능한 텍스트 편집기에서 VoiceOver를 사용하거나 점자로 읽을 수 있습니다 또한 앱의 접근성을 효과적으로 테스트할 수 있습니다 VoiceOver는 앱이 제공하는 모든 접근성 정보를 완전히 활용하기 때문입니다 앱에서 VoiceOver가 잘 작동한다면 음성 명령, 스위치 제어 등 다른 접근성 기술에서도 훌륭한 경험을 제공할 수 있습니다
Mac에서는 주로 키보드 단축키로 제어됩니다 예를 들어, 화면의 다음 및 이전 요소로 이동하는 키보드 단축키가 있습니다 이 키보드 단축키를 사용하면 VoiceOver 초점을 한 요소씩 이동시켜 해당 요소의 설명을 들을 수 있습니다
최소화, 버튼, 전체 화면 버튼, 툴바 텍스트 문서, 사이드바 표, 수직 자르기 도구 텍스트 편집, 텍스트 끝 삽입 수직 자르기 도구 포맷 속성, 스크롤 영역 마우스를 사용할 때는 빠른 움직임으로 끝날 작업이 VoiceOver를 사용하면 여러 키를 입력해야 하죠
VoiceOver는 SwiftUI가 제공하는 다음 접근성 요소로 이동하는 식으로 작동합니다
VoiceOver로 더 빨리 탐색하기 위해 SwiftUI는 접근성 요소를 컨테이너 접근성 요소로 그룹화할 수 있습니다
이 컨테이너에 초점을 맞추거나 벗어나는 키보드 단축키가 있죠 Mac에서 기본적으로 VoiceOver는 컨테이너로 탐색해 앱 내에서 더 빠르게 이동하며 필요할 때만 컨테이너에 초점을 맞춥니다 Mac과 iPhone, iPad 등 다른 플랫폼의 접근성 차이는 Mac에 중첩된 컨테이너가 포함되는 경우가 있다는 점이죠 이 중첩은 앱의 인터페이스를 표현하는 접근성 요소로 구성된 나무와 같은 구조를 생성합니다 앱에서 관련 요소를 컨테이너로 그룹화하여 VoiceOver로 더 빠르게 탐색하세요
또한 지나친 수준의 중첩된 컨테이너를 생성하지 마세요 앱에서 요소를 찾기 어려워지고 컨테이너에 반복적으로 초점을 맞추는 데 시간이 소요될 수 있습니다
앱의 컨테이너를 조정하려면 accessibilityElement children 수정자를 사용하세요
이 수정자를 뷰에 적용하면 제공된 동작이 해당 뷰와 하위 뷰가 접근성에서 어떻게 표시되는지 결정합니다 세 가지 동작 옵션이 있습니다
contain은 뷰를 접근성 컨테이너로 표현하며 하위 뷰는 해당 컨테이너 내의 접근성 요소로 표시합니다
combine은 뷰와 그 하위 뷰를 하나의 접근성 요소로 표현하고 모든 속성과 동작을 통합합니다 ignore는 뷰를 하나의 접근성 요소로 표현하며 하위 뷰를 완전히 무시합니다
VoiceOver로 제 앱을 테스트해 봤는데 보완이 필요한 몇 군데를 찾았습니다 먼저 VoiceOver를 우측 포맷 속성에서 한 요소씩 이동시키죠 포맷 속성의 스크롤 영역 항목 22개 제목 스타일 제목, 적용 버튼 부제목, 적용 버튼 제목, 적용 버튼 본문, 적용 버튼 굵게, 토글 버튼 스타일 프리셋을 모두 이동해야 ‘굵게, 토글 버튼’에 도달할 수 있다는 점을 발견했습니다 이 스타일 프리셋은 VStack으로 표시됩니다
contain 동작을 포함한 accessibilityElement children 수정자를 VStack에 추가하여 컨테이너를 만들 수 있습니다 accessibilityLabel 수정자로 컨테이너 이름을 지정할 수도 있죠
이제 다시 우측 포맷 속성에서 VoiceOver를 하나씩 이동해 보겠습니다 포맷 속성의 스크롤 영역 항목 15개, 제목 스타일 스타일 프리셋, 그룹 굵게, 토글 버튼 훌륭합니다! 필요하지 않을 때 모든 스타일 프리셋 간에 일일이 이동할 필요가 없습니다 스타일 프리셋 컨테이너에서 탐색이 잘 되는지 확인할게요 VoiceOver 초점을 스타일 프리셋 컨테이너에 맞춘 다음 VoiceOver를 하나씩 이동합니다
스타일 프리셋의 그룹, 항목 8개 제목, 적용, 버튼, 부제목 적용, 버튼, 제목, 적용 버튼, 본문, 적용, 버튼 괜찮지만, VoiceOver가 각 스타일 프리셋 제목과 적용 버튼에 일일이 초점을 맞추고 있습니다
스타일 프리셋은 Title, Button 뷰를 포함하는 HStack으로 표시됩니다
combine 동작을 포함하는 accessibilityElement children 수정자를 HStack에 적용하여 Title, Button 뷰의 속성을 합친 접근성 요소를 만들 수 있습니다
스타일 프리셋 컨테이너에서 VoiceOver를 하나씩 다시 이동해 보겠습니다 스타일 프리셋에서 그룹 항목에 대해 제목, 적용 버튼 부제목, 적용 버튼 제목, 적용 버튼 본문, 적용 버튼 각 스타일 프리셋을 하나의 요소로 처리할 수 있죠 사용자가 더 쉽게 탐색하고 이해할 수 있습니다
접근성 구조에서 개선할 수 있는 또 다른 요소는 요소의 순서입니다 여기서 시각적으로 책의 저자는 책 제목 전에 표시되죠 하지만 VoiceOver가 책 제목을 먼저 읽길 바랍니다 많은 책을 빠르게 훑어볼 때 더 편리하기 때문이죠 accessibilitySortPriority 수정자를 사용하여 접근성 요소 순서를 변경할 수 있습니다
책 제목 뷰에 높은 우선순위 부여 시 먼저 정렬되죠 기본적으로 뷰는 정렬 우선순위가 0입니다 동일한 우선순위를 가진 뷰는 시각적 위치에 따라 정렬됩니다 이제 VoiceOver가 책 제목을 저자와 설명보다 먼저 읽게 됩니다 VoiceOver로 앱 테스트 시 순서가 올바르지 않다면 accessibilitySortPriority 수정자를 사용하세요
앱의 접근성 구조가 개선되었으니 이제 로터를 활용해 탐색을 더욱 확장하고 싶습니다
앱의 북마크 기능을 통해 사용자는 페이지 목록을 빠르게 훑어보며 북마크가 추가된 페이지를 확인할 수 있습니다 그러나 VoiceOver 사용자는 북마크가 있는지 확인하기 위해 모든 페이지를 일일이 탐색해야 합니다 2페이지 북마크 추가됨 3페이지 4페이지 5페이지 북마크 추가됨 6페이지 7페이지, 8페이지 북마크 추가됨, 9~10페이지 VoiceOver 사용자가 시각적 경험처럼 쉽게 탐색하려면 북마크가 추가된 페이지만 탐색하는 기능이 필요합니다
이 기능을 제공하기 위해 로터를 사용할 수 있죠 VoiceOver 사용자의 탐색 속도를 높이는 데 필수죠 로터를 사용하면 빠르게 이동할 수 있는 앱 내의 뷰 또는 텍스트 범위의 컬렉션을 정의할 수 있습니다 페이지 목록에 북마크 로터를 추가하려면 accessibilityRotor 수정자를 사용하고 이름을 ‘Bookmarks’로 지정합니다 Bookmarks 로터에 포함할 페이지를 조건부로 선언할 수 있습니다 사이드바의 페이지 목록에 VoiceOver의 초점을 맞추면 키보드 단축키로 로터 메뉴를 열고 모든 북마크를 빠르게 탐색해 원하는 북마크가 지정된 페이지로 바로 이동할 수 있습니다 북마크 메뉴 2페이지 5페이지 5페이지 북마크 추가됨
접근성 로터는 VoiceOver 사용자가 시간을 쓰거나 복잡한 탐색을 할 때 좋은 경험을 제공하죠
VoiceOver로 앱을 탐색할 때 저는 VoiceOver 초점을 이동시키고 있습니다 VoiceOver 같은 접근성 기술은 키보드 초점과 독립적인 자체 초점 상태를 유지합니다
accessibilityDefaultFocus 수정자를 사용하면 macOS, iOS 26 앱에서 VoiceOver 같은 접근성 기술을 위해 초점의 첫 위치를 제안할 수 있죠 새 장면 표시 시 SwiftUI는 수정자가 적용된 뷰에 초점을 두도록 제안하지만 사용자의 선호에 따라 접근성 기술이 최적의 결정을 내릴 수 있도록 허용합니다
이제 앱 내 모든 요소로의 이동이 매우 편리해졌죠 사용자가 이러한 요소와 쉽게 상호작용할 수 있도록 해보죠 제 앱에 페이지 섬네일 위에 포인터를 올릴 때 표시되는 버튼을 통해 페이지에 북마크를 두는 기능을 추가했습니다 버튼이 필요하지 않을 때는 섬네일이 가려지지 않으므로 시각적 측면에서 좋습니다 그러나 VoiceOver 사용자는 포인터를 이동하지 않아 이 버튼에 접근할 수 없죠
앱에서 포인터를 움직이거나 트랙패드 제스처를 실행하는 상호작용은 일부 사용자가 접근하지 못할 수 있습니다 다른 방법으로 이러한 상호작용을 발견하고 실행할 수 있도록 지원해야 합니다
다행히 SwiftUI로 쉽게 구현할 수 있죠 VoiceOver와 같은 접근성 기술이 접근 가능한 방식으로 실행할 수 있는 접근성 동작을 뷰에 추가하면 됩니다 뷰에 접근성 동작을 추가하려면 accessibilityAction 수정자를 사용하세요 이 수정자로 페이지 목록 뷰에 북마크 추가 동작을 추가할게요 버튼을 추가하는 것만큼 간단합니다
이제 VoiceOver를 통해 페이지 섬네일에 초점을 맞추고 새로운 북마크 추가 접근성 동작을 사용해 볼게요 3페이지 동작 메뉴 항목 2개 대체 항목 표시 3페이지에 북마크 추가 3페이지에 북마크 추가
키보드 단축키로 동작 메뉴를 열고 페이지에 쉽게 북마크를 추가했습니다 스위치 제어, 음성 명령 등 다른 접근성 기술도 이러한 접근성 동작에 의존합니다
앱과의 상호작용을 개선하는 빠른 방법은 키보드 단축키죠 자주 사용되는 앱의 동작에 키보드 단축키를 추가하는 것은 파워 유저를 위한 훌륭한 기능일 뿐만 아니라 접근성에 큰 영향을 미칩니다 특히 마우스를 이용할 수 없는 사용자의 경우에요 마지막으로, 자체 맞춤형 컨트롤을 생성할 경우 다른 컨트롤에 내장된 접근성 정보가 포함되지 않을 수 있습니다 SwiftUI에서의 쉬운 컨트롤 접근성 구현 방법을 배우려면 WWDC 2021 ‘SwiftUI 접근성: 기초를 넘어'를 시청하세요 이제 Mac에서 VoiceOver로 앱을 테스트하고 앱의 컨테이너를 조정하고 맞춤 로터를 추가할 만한 위치를 찾아보세요 앱의 우수한 접근성을 손쉬운 사용 취급 개요표로 강조하실 수 있습니다 자세한 내용은 ‘손쉬운 사용 취급 개요표로 앱 평가하기’를 참고하세요 시청해 주셔서 감사합니다

4:15 - Contain subviews within accessibility container

// Contain subviews within accessibility container

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .contain)
  }
}

4:23 - Combine subviews into one accessibility element

// Combine subviews into one accessibility element

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .combine)
  }
}

4:33 - Hide subviews from accessibility

// Hide subviews from accessibility

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .ignore)
  }
}

5:12 - Contain style presets in accessibility container

// Contain style presets in accessibility container

import SwiftUI

struct FormattingInspectorView: View {
  var body: some View {
    Form {
      VStack {
        StylePresetView(type: .title)
        StylePresetView(type: .heading)
        StylePresetView(type: .subHeading)
        StylePresetView(type: .body)
      }
      .accessibilityElement(children: .contain)
      .accessibilityLabel("Style Presets")
    }
  }
}

6:21 - Merge Title View and Button into one accessibility element

// Merge Title View and Button into one accessibility element

import SwiftUI

struct StylePresetView: View {
  let preset: StylePreset
  
  var body: some View {
    HStack {
      PresetTitleView(preset: preset)
      Button("Apply") { /* ... */ }
    }
    .accessibilityElement(children: .combine)
  }
}

7:01 - Set the order of accessibility elements

// Set the order of accessibility elements

import SwiftUI

struct BookDetailsView: View {
  let book: Book

  var body: some View {
    VStack {
      Text(book.author)
      Text(book.title)
        .accessibilitySortPriority(1)
      DescriptionView(book: book)
    }
    .accessibilityElement(children: .combine)
  }
}

8:43 - Add an accessibility rotor for bookmarked pages

// Add an accessibility rotor for bookmarked pages

import SwiftUI

struct PagesView: View {
  @Binding var pages: [Page]
  
  var body: some View {
    List(pages) { page in
      PageListItemView(page: page)
    }
    .accessibilityRotor("Bookmarks") {
      ForEach(pages) { page in
        if page.isBookmarked {
          AccessibilityRotorEntry(page.title, id: page.id)
        }
      }
    }
  }
}

9:33 - Set the default VoiceOver focus

// Set the default VoiceOver focus

struct MyView: View {
  @AccessibilityFocusState(for: .voiceOver) var focusedForVoiceOver

  var body: some View {
    FirstView()
    SecondView()
      .accessibilityDefaultFocus($focusedForVoiceOver, true)
    ThirdView()
  }
}

10:28 - Add an accessibility action to bookmark the page

// Add an accessibility action to bookmark the page

import SwiftUI

struct PageListItemView: View {
  var page: Page
  
  var body: some View {
    VStack() {
      ThumbnailView(page: page)
      Text(page.title)
    }
    .onHover { /* ... */ }
    .accessibilityAction(named: page.isBookmarked ? "Remove Bookmark" : "Bookmark") {
      page.isBookmarked.toggle()
    }
  }
}

- 0:00 - 인사말
- Mac 앱의 손쉬운 사용 기능 강화에 대해 알아보세요. 누구나 Mac 앱을 즐길 수 있도록 레이아웃 표현, 탐색 가속, 상호작용 접근성에 대한 모범 사례를 살펴봅니다.
- 0:44 - 레이아웃
- macOS에서 SwiftUI를 사용하면 모든 사람, 특히 VoiceOver에 의존하는 사람들이 앱을 손쉽게 사용할 수 있도록 지원합니다. SwiftUI는 뷰에서 손쉬운 사용 요소를 생성하지만, 최적의 탐색을 위해선 이 구조를 개선해야 합니다. macOS의 손쉬운 사용의 주요 측면에는 관련 요소를 컨테이너로 그룹화하여 탐색 속도를 높이는 나무 모양의 구조를 생성하는 것이 포함됩니다. ‘accessibilityElement(children:)’와 같은 수정자를 사용하여 뷰 및 해당 하위 뷰를 컨테이너로 표현하거나, 요소를 조합하거나, 무시하는 방식을 지정할 수 있습니다. 예를 들어, Nicholas의 텍스트 편집기 앱에서는 스타일 프리셋을 그룹화하고 제목 및 적용 버튼을 단일 요소로 조합하여 포맷 속성이 향상됩니다. 그뿐만 아니라, ‘accessibilitySortPriority’ 수정자를 사용하여 요소의 순서를 재정렬하면 더 중요한 정보를 먼저 읽을 수 있도록 할 수 있습니다.
- 7:48 - 탐색
- 예제 앱의 손쉬운 사용 기능은 책갈피가 추가된 페이지와 같은 특정 콘텐츠 사이를 빠르게 이동할 수 있도록 지원하는 VoiceOver 기능인 로터를 사용하여 향상됩니다. 탐색을 간소화하여 VoiceOver를 사용하는 사람들이 효율적으로 이 기능을 사용할 수 있습니다. SwiftUI의 새 수정자를 사용하면 초기 초점을 제안할 수 있습니다.
- 9:52 - 상호작용
- SwiftUI 앱에서 포인터 기반 메서드를 제외한 모든 상호작용에 접근할 수 있는지 확인합니다. VoiceOver, 스위치 제어, 음성 명령을 사용하는 사람들을 위해 손쉬운 사용 행동 및 키보드 단축어를 사용합니다.

챕터

리소스

관련 비디오

WWDC24

WWDC21