목차
  1. 귀타 - 귀로 배우는 기타 학습
  2. 페르소나 설정
  3. 눈감고 기타 배우기
  4. 기획 및 구현
    1. 코드 학습
    2. 주법 및 곡 학습
  5. 소리 인식 기능 구현
    1. Note Classification
    2. Chord Classification
  6. 접근성
    1. Voice Over
    2. 음성 제어
  7. 시연
  8. 마무리

시각 장애인을 위한 기타 학습 앱 ‘귀타’를 소개합니다.

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

귀타 - 귀로 배우는 기타 학습

보지 않고도 배울 수 있는 기타 학습 앱
👉 App Store

귀타는 Apple Developer Academy 4기 팀원들과 함께 5주간 진행한 iOS 프로젝트입니다. 시각 장애인의 학습 장벽을 허물기 위해 기획되었습니다.

시각 장애인을 위한 기타 학습 앱 귀타시각 장애인을 위한 기타 학습 앱 귀타

페르소나 설정

이번 프로젝트의 핵심은 ‘단 한 명을 위한 앱’을 만드는 것이었습니다. 저희는 후천적으로 전맹이 되신 50대 하권사님을 위한 앱을 제작하기로 했습니다. 직접 찾아뵙고 오랜 시간 대화를 나누며, 하권사님의 일상과 필요를 하나씩 이해해 나가기 시작했습니다.

페르소나페르소나

하권사님은 취미로 기타를 즐기십니다. 트로트 곡의 멜로디를 기타로 연주하실 정도의 실력을 갖추셨는데, 코드 연주는 하지 못하고 계신 것을 발견했습니다.

하권사님의 기타 학습 유저 저니하권사님의 기타 학습 유저 저니

인터뷰를 통해 하권사님의 기타 학습 저니를 분석한 결과 다음과 같은 문제를 발견하였습니다.

  • 핵심 문제 상황: 코드 운지법을 매번 주변에 물어봐야 하는 미안함 때문에 학습을 중도 포기하게 됨
  • 해결 포인트: 타인의 도움 없이 스스로 코드 운지법을 익히고 검증할 수 있는 수단을 제공하자

눈감고 기타 배우기

처음에는 시각에 의존하지 않고 기타 코드 연주를 배우는게 얼마나 어려운지 감이 오지 않았습니다. 하지만 직접 안대를 쓰고 학습해 본 결과, 이게 얼마나 쉽지 않은 일인지 팀원 모두가 체감할 수 있었습니다.

기타 코드를 연주한다는 것은 코드 운지법을 알고, 주법도 알며, 악보도 읽을 줄 안다는 의미입니다. 그리고 각각의 요소들을 세부적으로 분석해보면 굉장히 디테일한 정보들이 많습니다.

기타 코드 연주 구성 요소기타 코드 연주 구성 요소

간단한 코드 운지만 봐도 다음과 같은 난관들이 있습니다.

  1. 디테일한 위치 정보: 단순히 ‘몇 번 줄’을 잡는 것을 넘어, 프렛 내부의 미세한 위치 차이가 음질을 결정합니다.
  2. 간섭 문제: 한 줄을 잡은 손가락이 인접한 줄을 건드려 소리가 뮤트되는 현상을 스스로 인지하기 어렵습니다.
  3. 사전 지식의 방대함: 코드 하나를 설명하기 위해 손가락 번호, 줄 번호, 프렛 위치 등 너무 많은 정보가 쏟아집니다.
A 코드 하나를 설명하기 위해 필요한 방대한 정보량A 코드 하나를 설명하기 위해 필요한 방대한 정보량

시각 장애인이 한 곡을 완주하기 위해서 넘어야 하는 난관들을 정리하면 다음과 같습니다.

시각 장애인이 기타를 배우는데 겪는 어려움시각 장애인이 기타를 배우는데 겪는 어려움

저희 팀은 위 문제들을 음성 가이드와 실시간 음 인식 기술을 이용하여 사용자 혼자서도 곡 하나를 완주할 수 있게 만드는 것을 최종 목표로 삼았습니다.

기획 및 구현

학습 화면학습 화면
하권사님이 선호하시는 "여행을 떠나요"를 커리큘럼으로 구성했습니다.
  1. 코드 학습: A, E, B7 등 필수 코드 운지법 습득
  2. 주법 학습: 스트로크 및 칼립소 리듬 익히기
  3. 구간 학습: 4마디 단위 끊어 가기
  4. 전체 학습: 속도 조절을 통한 완곡 연습

코드 학습

먼저 코드 운지법을 배워야 합니다. 하나의 코드를 운지하기 위해선 손가락, 프렛, 줄 번호를 알아야 하며, 이를 다음과 같은 흐름으로 설명하였습니다.

  1. 손가락 번호, 프렛, 줄 번호 순으로 운지법을 설명합니다.
  2. 제대로 운지했는지 한 줄씩 튕기며 소리를 확인합니다.
  3. 1, 2번 과정을 모든 운지해야 하는 손가락에 대해서 반복 진행합니다.
  4. 전체 코드를 잡고 스트로크 하여 소리를 확인합니다.
1. 줄 별 운지법 설명
2. 줄 별 소리 확인
3. 전체 코드 소리 확인

운지를 올바르게 했는지 확인하는 정음 확인 기능도 구현했는데, 자세한 방법은 아래에서 설명하도록 하겠습니다.

주법 및 곡 학습

다음으로 오른손 스트로크 주법 설명과 곡 학습 기능을 구현하였습니다. 시각 장애인들을 위한 점자 악보도 존재하지만, 점자를 모르시는 분들도 많기에 한 마디 전에 코드를 읽어주도록 구현하였으며, 전체 곡 학습에선 재생 속도를 조절할 수 있는 기능을 구현하였습니다.

여행을 떠나요 악보 일부여행을 떠나요 악보 일부
주법 학습
곡 구간 학습
곡 전체 학습

소리 인식 기능 구현

사용자가 코드를 제대로 잡았는지 확인하기 위해 두 가지 기술을 적용했습니다.

Note Classification

개별 줄을 튕기는 소리를 확인하는 기능은 FFT(Fast Fourier Transform)를 이용하여 구현하였습니다. 다만, 저음역대에서 배음(Harmonics) 중첩으로 옥타브를 오인하는 문제가 발생했고, 이를 HPS(Harmonic Product Spectrum) 알고리즘으로 보정하여 정확도를 높였습니다.

👉 Note Classification 소스 코드

Chord Classification

기타 코드 분류기는 코사인 유사도 방식과 머신러닝 방식 두 가지로 구현하였습니다.

👉 코사인 유사도 기반 코드 분류기 소스 코드
👉 머신러닝 기반 코드 분류기 Github

1) 코사인 유사도 코드 분류기

  1. 마이크로 들어온 입력을 FFT 알고리즘으로 주파수 분석
  2. Chroma Feature로 12음계 활성도 분석
  3. 코사인 유사도(70%)와 유클리드 거리 기반 유사도(30%)를 가중합하여 코드 분류

2) 머신러닝 코드 분류기

  1. 데이터 수집: 각 코드를 50회씩 직접 녹음.
  2. 라벨링: Audacity의 ‘사운드 레이블’ 기능을 활용해 자동 슬라이싱 및 라벨링 진행.
    Audacity 라벨링 작업 자세히 보기

    1. 코드를 50번씩 1초 간격으로 연주한 하나의 녹음 파일을 만듭니다.

    2. audacity에 녹음한 파일을 불러온 뒤 트랙을 전체 선택(Ctrl + A 또는 Cmd + A)합니다.

    3. 분석 → 사운드 레이블을 선택하고, 녹음 환경에 맞춰서 임계값(dB)을 조정한 뒤 적용합니다.

    4. 파일 → 내보내기를 선택하고, 내보내기 범위를 여러개의 파일로 선택합니다.

    5. 구간별로 잘린 파일들이 라벨링되어 생성됩니다.

  3. 전처리: FFT 결과를 12개의 반음 체계로 표현한 Chroma Feature로 변환.
  4. 모델 학습: CNN 모델로 학습하여 h5 모델 생성
  5. 모델 변환: Coremltools로 h5 모델을 mlpackage 모델로 변환
  6. 앱 구현: Xcode에 추가한 뒤, Swift로 동일한 전처리 코드를 구현하여 모델 구동
Chroma Feature 분석 예시Chroma Feature 분석 예시

참고로 무음 class를 만들기 위해 Silence로 분류된 음성 파일도 만들었는데, Chroma 스펙트럼으로 변환시 이미지를 보며 위와 같이 Silence 모드에선 아무것도 안나오도록 노이즈 게이트를 추가해야 학습이 됩니다. 이렇게 추출한 값을 CNN 모델로 학습하여 기타 코드 분류기를 만들었습니다.

CNN 모델 데모 영상

접근성

전맹 사용자가 앱을 불편 없이 이용할 수 있도록 접근성을 최우선으로 고려했습니다.

Voice Over

시각 장애를 가진 유저들은 스크린 리더기를 이용하여 디지털 기기를 사용합니다. iOS에선 Voice Over, Android에선 TalkBack 이라는 이름으로 불립니다. 이번 프로젝트는 iOS에서 개발되었기 때문에 Voice Over에 대해서만 다루겠습니다.

1) Voice Over 실행 방법
설정 → 손쉬운 사용에서 찾을 수 있으며, 기본적인 Voice Over 튜토리얼도 제공됩니다.
처음 Voice Over를 켜면 사용 방법이 낯설어 끄는게 쉽지 않습니다. 그럴 땐 Siri에게 “Voice Over 꺼줘”라고 요청하시면 됩니다.

2) 기본적인 Voice Over 사용법

기능 동작 방법
화면 탐색 좌우로 짧게 스와이프 or 화면을 누른 상태로 이동
요소 선택 두 번 탭
화면 커튼 세 손가락으로 세 번 탭
홈 화면으로 이동 하단 인디케이터를 두 번 소리가 날 때까지 위로 스와이프
앱 전환기 이동 하단 인디케이터를 세 번 소리가 날 때까지 위로 스와이프
제어센터 보기 상단에서 두 번 소리가 날 때까지 아래로 스와이프
알림센터 보기 상단에서 세 번 소리가 날 때까지 아래로 스와이프
현재 창 나가기 두 손가락을 Z 모양으로 스와이프

iOS는 소리를 이용하여 화면의 상태를 알려주는 디테일한 접근성 기능들이 굉장히 잘 구현되어 있습니다.

3) 접근성 API
Swift에는 다양한 접근성 API들이 제공됩니다. 이를 이용하면 Voice Over가 읽어주는 순서나 화면 요소의 의미 단위를 지정할 수 있습니다.

속성 설명 예시
accesibilityLabel 요소의 이름 “뒤로 가기”
accesibilityTraits 요소의 유형 버튼, 머릿말, 링크 등
accesibilityValue 변동하는 요소의 현재 상태 슬라이더 값, 진행률 등
accesibilityHint 조작했을 때 일어나는 일에 대한 힌트 “더블 탭하시면 …이 됩니다.”

Voice Over는 Label → Traits → Value → Hint 순서로 읽습니다.

정안 유저들은 기본적으로 공백이나 테두리 등의 시각 정보를 통하여 요소들을 그룹핑하여 인식하지만, 시각 정보를 이용할 수 없는 전맹 유저들에겐 불필요한 요소는 Voice Over가 읽지 않도록 숨기고, 하나의 버튼 안에 있는 다양한 텍스트들은 하나의 요소로 묶어서 읽어주도록 다음과 같은 접근성 API를 활용해 구현해 줍니다.

이름 설명
.accessibilityHidden(_:) 읽지 않도록 숨김
.accessibilityElement(children: .ignore) 자식 요소들을 완전히 무시하고 컨테이너만 접근성 요소로 처리
.accessibilityElement(children: .combine) 자식 요소들을 하나로 병합하여 하나의 접근성 요소로 읽히게 함
.accessibilityElement(children: .contain) 자식들을 그룹으로 묶은 컨테이너로 각 자식을 탐색 가능하게 함

4) 로터(Rotor)
로터는 Voice Over가 읽어주는 요소의 단위를 변경하는 기능으로, 이를 활용하면 설정으로 이동하지 않고도 탐색 옵션(문자 단위, 단어 단위, 줄 단위 또는 머릿말) 및 말하기 속도 등을 조절할 수 있습니다.

로터는 화면에 엄지와 검지를 대고 시계 또는 반시계 방향으로 돌려서 설정을 바꾸고 세로 방향으로 스와이프하여 사용할 수 있습니다.

로터를 머릿말로 설정하면, 아래 영상과 같이 세로 방향으로 스크롤을 하면 빠르게 머릿말들만 탐색할 수 있습니다. 머릿말 요소는 Traits을 header로 설정하여 지정할 수 있습니다.

Voice Over 머릿말 로터 영상

음성 제어

그 외에도 앱에선 양손으로 기타를 연주하고 있으니, “다음”, “정지”, “다시” 등의 자주 쓰이는 기능들을 음성으로 제어할 수 있도록 구현하였습니다. 해당 기능은 SpeechRecognizer를 활용하여 구현하였습니다.

시연

마무리

5주 동안 팀원들과 함께 개발한 앱을 들고 다시 권사님을 찾아뵈었고, 권사님이 다른 사람의 도움 없이 코드를 익히고 연주하는 모습을 볼 수 있었습니다. 비록 Apple 아카데미 프로젝트의 일환이라 iOS만 간단한 데모 형태로 구현했지만 기획한 대로 앱이 사용되는 것을 보니 뿌듯했습니다.

귀타 - 귀로 배우는 기타 학습
👉 App Store
👉 GitHub - iOS & ML Repo

다음으로 기타를 배우는 모든 시각 장애인 분들을 위해 Flutter로 만든 기타 튜너 이야기가 2부에서 이어집니다.

👉 2부. 귀타 - 시각 장애인을 위한 기타 튜너 보러가기