iOS) 앱 올리기 5탄(Text To Speech=TTS, UISlider, UserDefaults)

이미지 제공 감사합니다 :)

 

앱 스토어 앱 올리기 Index

 

1탄 (https://atelier-chez-moi.tistory.com/84)

개발자 계정 구매 및 활성화 문제 해결, Failed with exit code 1 해결, 인증서 문제 해결 과정

2탄 (https://atelier-chez-moi.tistory.com/85)

앱 스토어 커넥트 둘러보기, 개인정보 처리방침 URL 만들기, TestFlight 에 앱 올리기

3탄 (https://atelier-chez-moi.tistory.com/91)

TestFlight 테스터 관리, 스크린샷 피드백, pageSheet 문제 수정, 가로모드 허용 금지

4탄 (https://atelier-chez-moi.tistory.com/93)

UserNotification

5탄 (NOW)

AVSpeechSynthesizer(TTS, Text To Speech) 사용법, UserDefaults

6탄 (https://atelier-chez-moi.tistory.com/95)

AVSpeechSynthesizer 2, Singleton Pattern

7탄 (https://atelier-chez-moi.tistory.com/96)

무음 모드(Slient mode)시 소리 재생 방법, App store screenshot

 

 

 

French Voca 는 단어와 예문을 읽어주는 기능을 가지고 있다.

프랑스인 네이티브 스피커를 고용하여 하나씩 단어와 예문을 제작할 수 없는 상황이기 때문에 이 문제를

어떻게 해결해야할지 고민을 하던 차에 승진이가 'TTS(Text To Speech)' 쓰면 된다는 조언을 해주어서

이를 구현하였다. 구현하는 과정은 어렵지 않았지만 이제 출시를 앞두고 발음 속도를 조절하는 기능이 있었으면

좋겠다는 생각이 들었다. 귀찮아서 일단 출시하고 업데이트를 하면 되겠다고 생각했으나 갑자기 개발본능이 깨어나는 바람에...

 

변덕은 날씨보다 사람이 더 심한 것 같다. 알아보도록 하자.

오늘 만들어볼 화면이다.

 

 

 

 

구체적인 UI 구현은 지금 알아보긴 힘들지만, 일단 가장 중요한 내용들을 살펴보자.

이 뷰 컨트롤러의 핵심적 기능은 Text-To-Speech 이다. 이건 어떻게 구현한걸까?

 

 

< AVSpeechSynthesizer >

 

TTS 는 AVFoundation 프레임워크 내에 있는 AVSpeechSynthesizer 클래스가 핵심적인 역할을 한다.

iOS 7 버전부터 지원하는 이 클래스의 간단 자기소개는 다음과 같다.

 

"텍스트 음성(text utterances)에서 합성된 음성(synthesized speech)을 생성하고 진행중인 음성(ongoing speech)을 통제하고 모니터링 하기 위한 컨트롤을 제공하는 객체(Object)입니다."

 

 

... 이게 뭔 멍멍이소리야 ... ?

자 이제 '나' 맞춤식 해석으로는.. "텍스트를 음성으로 만들어주는 객체구나~~~~~"  라 생각하고 넘어가겠다.

 

 

 

< AVSpeechUtterance >

 

일단 이 클래스는 만들어주는 객체인 것이지 텍스트를 담당하는 객체는 따로 존재한다. 

 

 

AVSpeechUtterance 클래스 친구인데, 이 친구가 Overview 에 사용법을 잘 설명해주었다.

 

1. AVSpeechUtterance 인스턴스를 말하고 싶은 텍스트를 포함해서 생성한다.

   아래 처럼 Initialization 을 해주면 된다.

2. (선택적 사용) 사용할 언어를 포함한 목소리, 속도와 같은 발화의 요소들을 변경하세요. (의역)

    이중에서 'rate' 와 'voice' 를 사용하도록 하겠습니다.

찾다보니 발음 속도에 대해 최소값, 최대값, 기본값에 대한 프로퍼티가 존재했네요 ! 반가워서 넣어봅니다...

3. uttrance 를 AVSpeechSynthesizer 인스턴스에 전달해서 TTS 를 완성하세요 (의역)

 

 

 

< UISlider >

 

 

진짜 이게 끝이다. 더 이상 해줄게 없다. 이제 UISlider 를 생성해서 Silder의 움직임과 함께 값이 변하도록 구현해보자.

UISlider를 추가하는 방법은 크게 어렵지 않다.

 

UISlider)

https://developer.apple.com/documentation/uikit/uislider

UISlider - UIKit | Apple Developer Documentation

 

딱 기본적인거 하나만 보고 가야겠다.

 

Source : Apple Developer

- 슬라이더가 나타내는 값의 범위를 특정지어라.

- 원한다면 슬라이더의 외형을 적절한 컬러 혹은 이미지로 구성하라.

- 하나 이상의 액션 메서드를 슬라이더에 연결하라

- 여러분의 인터페이스 내에서 슬라이더의 사이즈와 좌표를 통제하기 위해 오토 레이아웃 규칙을 설정하라.

 

 

UISlider 사용 시에 위의 규칙을 잘 기억해야겠다.

UISlider 는 다음과 같이 활용하려고 한다.

왼쪽 사진의 세 개의 점 아이콘을 누르면 다음과 같은 발음 속도 조절을 할 수 있는 창을 pageSheet 스타일로 띄워서

발음 속도를 조절하고자 했다.

 

역쉬... 개발보다 저 디자인이 더 오래 걸린다.

가끔 디자인을 하다보면 뭐 뛰어난 실력은 아니여서 엄청 디자인을 잘했다고는 못하지만

저런 화면을 만드는 것도 정말 어렵다는 생각이 든다.

UI/UX 디자이너 분들께 리스펙을 보내드린다.

 

UISlider 에 대해서 알아보고 있기 때문에 아쉽지만 자세한 UI 구현 방법은 다음에..

 

1. 최대값과 최소값을 정한다.

   발음 속도 조절을 해주기 위해 만든 뷰 컨트롤러 페이지 내에 다음과 같은 슬라이더를 선언하였다. (다른 내용은 생략한다.) 슬라이더는 당연히 값을 조절하는 객체이기 때문에 최대값과 최소값을 지정해주어야 한다. 나는 이 값을 스피치 속도 조절에 사용하기로 했기 때문에, 위와 같이 값을 부여하였다. AVSpeechSynthesizer 프레임워크에서 제공하는 스피치 속도의 최소/최대 값은 0.0 ~ 1.0 이고 타입은 Float 타입을 가진다. 

 

  최소값 뒤에 0.001 이라고 지정해준 부분은 조금 뒤에서 다룰 예정이다. 최대값은 1.0 인데 너무 빨라서 의미가 없다는 생각이 들었다. 그래서 뭔가 괜찮으면서도 빠른 속도를 값을 조금씩 바꿔주면서 찾다보니 0.6 정도가 최대값으로 적당하다는 생각이 들었다. 자 이제 갑자기 느닷없이 UserDefaults.standard 가 나오는 이유는?

 

2. 앱을 처음 다운받았을 때 기본 속도와 속도를 조정한 이후 시점부터 기억해줄 값이 필요하다.

  앱을 처음 다운받았을 경우에는 UserDefaults 에 값이 저장되어 있지 않다. 참고로 UserDefaults 에 값을 저장하면 앱을 종료한 이후에도 그 값을 계속해서 기억하고 있게 된다. 나같은 경우에는 단순한 값이면서 앱이 기억하고 있어야 하는 경우에 이를 활용한다. 아무튼 그래서 UserDefault 에 "발음속도" 라는 키워드로 값을 찾을 수 있도록 했다. 처음에는 plist.float(forKey: "발음속도") 의 값이 저장되어 있지 않으니 0.0 이여서 이럴 경우에는 AVSpeechUtteranceDefaultSpeechRate 를 지정해 주고 아닐 경우에는 plist.float(forKey: "발음속도") 로 부터 값을 지정해주기로 했다. 

 

 아 참 ! slider.value 에서 value 의 역할은 슬라이더를 보면 만약 이 뷰를 present 했을 때, 이 슬라이더의 기본 위치를 정해주어야 하지 않는가? 그 위치를 정해주는 역할을 한다. 위의 사진을 보면 살짝 오른쪽으로 치우쳐 있는데 그 이유는 최소값이 0.0 (+0.001 은 잊어주세요) 이고 최대값을 0.6 으로 지정해줬으니 중간이면 0.3이 되어야 하는데 내가 AVSpeechUtteranceDefaultSpeechRate(=0.5) 를 사용했기 때문에 0.6에 가까워지게 된 것이다. 왜 0.3이 아니냐 하시면.... 0.3은 너무 느리다.. 뭔가 딱 일상적인 대화 속도 수준이 0.5 라는 판단이 들어 그렇게 했다.

 

3. 최소값 이미지, 최대값 이미지

  이것은 그리 어렵지 않으니 패스... 토끼와 거북이 아이콘을 최대값과 최소값에 각각 넣을 수 있게 해주는 방법이다.

 

4. addTarget..

  이제 마지막으로 타겟을 추가해주어 slider 의 움직임에 따른 액션을 어떻게 가져갈 것인지 정해준다. '.valueChanged' 의 경우 값이 변할 때마다 이 값의 변화를 추적해준다. 그러니 UISlider 의 목적과 부합한다.

 

  마지막의 handleRateChange() 메서드를 통해서 변화가 추적 될때마다 전역변수 willPassValue 에 그 값을 담아준다.

 

 

왜 값을 담아주게 됐는지는 다음 편에서 이어 가도록 하겠습니다.