목차

1. 귀타 - 귀로 듣는 기타 튜너
   1. 시연
2. 디자인
   1. 스크린 리더기 친화적 디자인
   2. 튜너 디자인
   3. 코드 학습 디자인
3. Flutter
   1. 접근성 구현
   2. 튜너 구현
4. 마무리

시각 장애인을 위한 기타 튜너 앱을 소개합니다.

1부. 귀타 - 시각 장애인을 위한 기타 학습 앱
✔︎ 2부. 귀타 - 시각 장애인을 위한 기타 튜너

귀타 - 귀로 듣는 기타 튜너

시각 장애인을 위한 기타 튜너 앱
👉 Play Store
👉 App Store

이번 프로젝트는 1부에서 전맹 시각장애를 가진 하권사님 댁을 마지막으로 방문했을 때, 기타가 전혀 튜닝되어 있지 않은 상태인 것을 발견한 데서 시작되었습니다. 시중의 기타 튜너 앱들은 대부분 시각적인 피드백에 의존하고 있어, 시각장애인이 사용하기에는 어려움이 있었습니다.

이러한 문제를 해결하고자 시각장애인을 위한 기타 튜너 앱 개발을 시작했으며, Flutter를 사용해 한 달 동안 1인 개발로 프로젝트를 진행했습니다.

시연

앱은 기타 튜닝과 코드 운지법 학습 기능을 제공하며, Android와 iOS를 모두 지원합니다. 다음 영상은 iOS Voice Over를 이용한 앱 시연 영상입니다.

디자인

이전 프로젝트에서는 전맹 유저만 대상으로 하였기에 시각적인 요소를 고려하지 않았는데, 이번엔 더 많은 유저가 사용할 수 있도록 전맹 시각 장애인과 저시력자 모두를 유저로 고려하였습니다.

스크린 리더기 친화적 디자인

스크린 리더기는 Android에서는 TalkBack, iOS에서는 VoiceOver라고 불립니다.

스크린 리더기는 화면의 상태를 포커스가 이동된 순서와 음성 설명을 기반으로 파악하므로, 전체 화면의 상태를 파악하는데 많은 시간이 소요됩니다.

스크린 리더기 사용자의 인지 부담을 최소화하고 예측 가능하며 일관된 탐색 경험을 제공하기 위해 다음과 같은 규칙을 기반으로 UI를 구현하였습니다.

간결한 스크린 리더기 안내 제공

• 스크린 리더기 설명은 핵심 정보만 간결하게 전달
• 설명이 길어질 경우 사용자가 피로감을 느끼고 전체 사용성이 저하될 수 있음

포커스 위치 임의 변경 금지

• 임의로 포커스를 이동시키지 않음
• 예기치 않은 포커스 변화는 사용자의 탐색 흐름을 방해하므로, 일관된 규칙에 따라 자연스럽게 이동하도록 설계

동적 UI 변화 최소화

• 화면 일부 요소가 동적으로 변경되는 구조 지양
• 스크린 리더기 사용 시 맥락 혼란을 유발할 수 있는 위젯 사용 최소화
  e.g. BottomNavigationBar, ExpansionTile

네비게이션 요소 위치 통일

• WCAG(Web Content Accessibility Guideline) – Consistent Navigation 권장 사항 준수
• 네비게이션 요소를 항상 동일한 위치와 순서로 배치하여 예측 가능성 확보
  e.g. 뒤로가기 버튼은 좌측 상단에, 가이드 버튼은 우측 상단에 배치

TTS(Text To Speech) 대신 스크린 리더기 사용

• 여러 음성이 동시에 재생될 경우 사용자가 정보를 명확히 인지하기 어려움
• 모든 음성 가이드는 TTS 대신 스크린 리더기를 통해 일관되게 제공

튜너 디자인

전맹 시각 장애인은 기타 튜닝 상태를 스크린 리더기의 안내 음성과, 지속적으로 재생되는 비프음 두 가지 청각적 피드백으로 파악할 수 있습니다.

코드 학습 디자인

Flutter

이번 프로젝트는 Android와 iOS를 모두 지원하기 위해 Flutter로 개발하였습니다.

접근성 구현

Flutter 접근성 공식 문서에서 접근성 관련된 내용을 확인할 수 있습니다. 자주 사용하는 접근성 관련된 위젯은 다음과 같습니다.

Semantics 위젯을 추가하지 않아도 기본적인 텍스트를 스크린 리더기가 읽어주지만, 해당 위젯을 이용하면 추가적인 정보를 제공할 수 있습니다. 스크린 리더기는 Label → Hint → Child Semantics(존재시) → Value 순서로 속성을 읽어줍니다. 또한 OrdinalSortKey를 이용하여 포커싱 순서를 변경할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Semantics(
  label: '버튼 설명',                  // 스크린 리더가 읽을 텍스트
  hint: '추가 도움말',                 // 선택적 힌트
  button: true,                     // 버튼 역할 명시
  enabled: true,                    // 활성화 상태
  onTap: () {},                     // 스크린 리더기로 더블 탭하면 실행
  checked: false,                   // 체크박스 상태
  selected: false,                  // 선택 상태
  header: true,                     // 제목 표시
  liveRegion: true,                 // child 위젯이 변경되었을 때 다시 읽기
  sortKey: const OrdinalSortKey(1), // 포커싱 순서 지정
  excludeSemantics: false,          // 접근성 비활성화(접근성 트리에서 제외)
  child: MyWidget()
)

PageView의 경우 페이지가 넘어갔을 때 변경된 요소를 스크린 리더가 다시 읽어주길 원한다면 다음과 같이 구현한 뒤, 각 페이지의 liveRegion 속성을 true로 설정하시면 됩니다. onIncrease와 onDecrease는 PageView의 페이지 이동을 스크린 리더기로 구현하는 함수입니다. 포커싱한 뒤 위아래로 스와이프하여 페이지를 이동할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11

Semantics(
  container: true,
  onIncrease: () => _handleSemanticSwipe(1),
  onDecrease: () => _handleSemanticSwipe(-1),
  child: PageView(
    itemBuilder: (context, index) => Semantics(
      liveRegion: true,
      child: ...
    );
  ),
),

스크린 리더기 활성 여부도 다음과 같이 확인하여 분기처리 할 수 있습니다.

1
2
3
4
5

extension SemanticsExtension on BuildContext {
  bool isScreenReaderActive() {
    return MediaQuery.of(this).accessibilityFeatures.reduceMotion;
  }
}

MaterialApp에 showSemanticsDebugger 속성을 true로 설정하면 접근성 정보를 보여주는 오버레이를 볼 수 있습니다. 해당 기능을 이용하면 스크린 리더기가 읽어주는 Label, Hint, Value 등을 볼 수 있어 디버깅시 유용합니다.

1
2
3
4

MaterialApp(
  showSemanticsDebugger: true,
  ...
);

홈 화면 (Debugger Off)

홈 화면 (Debugger On)

튜너 구현

소리로 튜닝 상태를 알려주는 튜너를 만들려면 기타 소리만 인식하고, 비프음이나 스크린 리더의 음성은 인식하지 않도록 구현해야 했습니다. iOS는 Audio Session 설정을 통해서 디바이스에서 발생하는 소리를 OS 레벨에서 캔슬링해주어 손쉽게 구현할 수 있었습니다.

Android는 여러 문제가 연쇄적으로 발생해 구현이 쉽지 않았습니다. 녹음기의 Audio Source를 VOICE_COMMUNICATION으로 설정하면 기기에서 발생하는 소리는 효과적으로 캔슬링되었지만, 기타 1·2번 줄에 해당하는 주파수 대역이 제대로 인식되지 않는 문제가 있었습니다.

이를 해결하기 위해 Audio Source를 MIC로 변경하고, 비프음을 더 높은 주파수 대역으로 이동시킨 뒤 FFT 처리 단계에서 직접 필터링하도록 구현했습니다. 이 방식에서도 톡백 음성이 마이크 입력으로 유입되는 문제는 남아 있었으나, 알림 주기를 늘리는 방식으로 완화했습니다.

추가로, Audio Source를 MIC로 설정하면 Android에서 liveRegion 기능이 정상적으로 동작하지 않는 문제가 발생했습니다. 관련 내용을 Flutter Issue로 제보했으며, Android 기기에서는 liveRegion 대신 sendAnnouncement를 사용하도록 분기 처리하여 해결했습니다. 다만, sendAnnouncement API는 Android API level 36에서 폐지 예정이므로, 향후 Android 업데이트에 대응한 대체 구현이 필요할 것으로 보입니다.

마무리

평소 시각 인터페이스에 최적화된 앱을 설계했는데, 이번 프로젝트를 통해 음성 인터페이스 중심의 앱을 만들어 보면서 두 방식의 차이가 생각보다 크다는 것을 알게 되었습니다. 또한 스크린 리더를 사용하는 사용자에게 튜너를 어떤 인터페이스로 제공해야할지 고민했던 경험들이 의미있고 재미있었습니다.

귀타 - 시각 장애인을 위한 기타 튜너 앱
👉 Play Store
👉 App Store

귀타가 시각장애인 분들께 조금이나마 도움이 되는 도구가 되기를 바랍니다. 🎸