---
title: "모바일 앱을 위한 텍스트 음성 변환 기능"
date: "2017-08-28"
categories: 
  - "mobile"
  - "mobile-development"
  - "mobiletogether"
  - "tools"
tags: 
  - "mobile-development"
  - "mobiletogether"
  - "software-tools"
description: Altova MobileTogether가 다양한 플랫폼의 모바일 앱에서 텍스트-음성 변환 기능을 구현하여 사용자 경험을 향상시키는 방법을 알아보세요. 이 기능을 통해 앱 내 정보가 음성으로 제공되어 사용자 편의성을 높일 수 있습니다.
---
Status: #blog

Tags:  #mobile-development #mobiletogether #software-tools

Categories: [mobile-development](/blog/ko/category/mobile-development.md) | [low-code+no-code](/blog/ko/category/low-codeno-code.md) 
# 모바일 앱을 위한 텍스트 음성 변환 기능

Altova MobileTogether는 텍스트-음성 변환 기능을 지원합니다 [플랫폼에 구애받지 않는 모바일 앱](https://www.altova.com/ko/mobiletogether), 개발자들이 음성 기능을 추가하고 풍부한 멀티미디어 사용자 경험을 구축할 수 있도록 지원합니다.

음성은 앱 내에서 텍스트가 나타나는 모든 곳에 완벽하게 통합될 수 있습니다. 예를 들어, "Parcel Delivery MobileTogether"와 같은 앱은 배송 기사가 교통 체증에 갇혀 있을 때, 다음 배송 주소를 소리 내어 알려주는 기능을 추가하여 더욱 편리하게 만들 수 있습니다. 또한, 다른 정보 블록에 포함된 텍스트도 모바일 기기를 통해 음성으로 들을 수 있습니다.

저희는 모바일 앱에서 텍스트를 음성으로 변환하는 기능의 작동 방식을 실험하기 위해 간단한 데모를 만들었습니다. 그런 다음, 이 기능을 택배 배송 앱에 추가했습니다.

![모바일 앱을 위한 텍스트 음성 변환 기능](/blog/images/shutterstock_1615112031.jpg)

<!--more-->

매우 간단한 텍스트 음성 변환 데모 앱은 다음과 같은 네 가지 기능을 제공합니다

- 입력 필드 컨트롤은 사용자가 원하는 텍스트를 입력하거나, 미리 설정된 기본 텍스트를 말할 수 있도록 합니다
- "말하기" 버튼을 누르면 입력된 텍스트가 음성으로 출력됩니다
- "음소거" 버튼을 누르면, 현재 음성이 출력되고 있는 경우 음소거가 일시적으로 중단됩니다
- "나가기" 버튼을 누르면 메시지 상자가 나타나며, 이 상자에는 음성 메시지가 표시되고 앱을 종료할 수 있는 옵션이 제공됩니다

다음은 안드로이드 기기에서 실행 중인 앱의 화면으로, 입력 필드에 텍스트가 표시되어 있습니다

![모바일 앱을 위한 텍스트 음성 변환 기능의 간단한 데모 시연 (안드로이드 기기)](/blog/images/new-android-shot-1-small.png)

앱 내의 텍스트는 다양한 출처에서 가져올 수 있으며, 여기에는 모바일 기기의 복사/붙여넣기 기능을 사용하는 경우도 포함됩니다. 아래 스크린샷에서 아이폰 사용자는 기본 텍스트를 삭제하고, 알토바 웹사이트에서 복사한 텍스트를 입력 필드에 붙여넣었습니다

![모바일 앱을 위한 텍스트 음성 변환 기능의 간단한 데모 시연 (아이폰)](/blog/images/replacement-iPhone-shot-small.png)

여러 줄 입력을 허용하는 입력 필드 속성을 선택하면, 붙여넣은 텍스트에 맞춰 상자가 자동으로 크기가 조정됩니다.

입력 필드에 입력된 텍스트는 앱 데이터 트리 내의 특정 요소에 저장됩니다. "말하기" 버튼에 할당된 기능은 기기에 내장된 텍스트 음성 변환 엔진을 작동시켜 해당 텍스트를 읽어주도록 합니다.

이 단일 동작은 MobileTogether 액션 대화 상자에서 정의되며, 앱이 안드로이드, iOS, 또는 윈도우 폰에서 실행되든, 윈도우 10 컴퓨터에서 실행되든, 심지어 다른 기기의 웹 브라우저에서 실행되든 상관없이 동일하게 작동합니다.

![모바일 앱에서 텍스트를 음성으로 변환하는 기능](/blog/images/text-to-speech-action.png)

"말하기" 버튼에 텍스트 음성 변환 기능을 직접 연결했지만, 이 기능은 액션 그룹에서도 사용할 수 있습니다. "종료" 버튼의 경우 액션 그룹을 사용했습니다. 사용자가 "종료" 버튼을 클릭하면, 메시지 상자를 표시하고 메시지를 음성으로 읽어주는 기능을 함께 사용하고 싶습니다. 안드로이드 폰에서 다음과 같이 구현할 수 있습니다

![모바일 앱을 위한 텍스트 음성 변환 기능의 간단한 데모. 종료 메시지](/blog/images/exit-message-capture.png)

다음은 "나가기" 버튼에 정의된 기능들입니다

![모바일 앱을 위한 텍스트 음성 변환 기능: "나가기" 버튼에 대한 동작 정의](/blog/images/message-box-action-group.png)

"이 앱을 정말로 종료하시겠습니까?"라는 문구는 데이터 트리 내에 저장되어 있으며, 텍스트-음성 변환 기능의 강조 표시 동작과 그 아래에 나타나는 메시지 상자에서 사용되는 XPath 표현식에 활용됩니다.

사용자가 "확인" 버튼을 클릭하면, 앱이 종료되기 전에 "루프(Loop)" 기능이 텍스트 음성 변환이 완료될 때까지 기다립니다.

### 모바일 앱을 위한 택배 배송 앱에 텍스트 음성 변환 기능을 추가했습니다

"소포 배송" 예제 앱은 원래 MobileTogether에서 지리 위치 데이터를 활용하는 방법을 보여주기 위해 만들어졌습니다. 이 시뮬레이션에서 사용자는 뉴저지에 있는 창고에서 뉴욕 시의 여러 곳으로 소포를 배송하는 배송 회사 소속 운전사 역할을 합니다.

각 배송 목적지가 할당되면, 앱은 해당 주소와 목적지까지의 현재 거리 정보를 보여주는 배송 페이지를 표시합니다. 아래는 안드로이드 폰용 MobileTogether 시뮬레이터에서 볼 수 있는 화면 예시입니다

![모바일 투게더 시뮬레이터에서 확인한 소포 배송 예제 앱](/blog/images/Delivery-Page-in-simulator.png)

운전자가 이동하는 동안, 각 새로운 목적지와 거리에 대한 음성 안내 기능을 추가하고 싶습니다.

먼저, 설정 페이지에 새로운 사용자 설정을 추가할 수 있습니다. 이 설정은 스위치 기능을 통해 텍스트-음성 변환 기능을 활성화하거나 비활성화할 수 있습니다. 다음은 아이폰에서 실행되는 수정된 설정 페이지의 모습입니다

![패키지 배송 모바일 데모 앱의 설정 페이지를 시뮬레이터에서 확인한 모습](/blog/images/new-configuration.png)

디자이너에서 "배송" 페이지를 살펴보면, 목적지, 현재 위치, 그리고 목적지까지의 거리가 모두 XPath 표현식을 통해 파생된 정보를 확인 할 수 있습니다

![소포 배송 모바일 데모 앱의 배송 페이지는 MobileTogether 디자이너에서 확인되었습니다](/blog/images/Delivery-Page-in-Designer.png)

이와 같은 표현들은 텍스트-음성 변환 기능에 적용될 수 있습니다. 먼저, 각 새로운 목적지를 안내하는 액션 그룹을 만들었습니다. 아래 파란색으로 강조 표시된 영역은 텍스트-음성 변환 기능입니다. 우리는 "concat" 함수를 사용하여 몇 가지 추가 단어를 더하고, 주소와 시작 지점까지의 거리를 포함하는 자연스러운 문장을 만들었습니다

![소포 배송 모바일 데모 앱: 다음 목적지를 음성으로 안내하는 기능](/blog/images/destination-action-group.png)

운전자가 목적지를 향해 이동하는 동안, 주기적으로 위치 정보가 업데이트되고 목적지까지의 거리가 갱신됩니다. 우리는 새로운 거리를 알려주기 위해 두 번째 동작 그룹을 만들었습니다

![모바일 앱을 위한 텍스트 음성 변환 기능 예시](/blog/images/new-distance-action-group.png)

상단 루프는 위에서 설명한 데모 앱의 "종료" 버튼에 정의된 기능과 유사합니다. 이 루프는 이전 텍스트-음성 변환 작업이 완료되지 않은 경우, 새로운 텍스트-음성 변환 작업이 중단되는 것을 방지합니다. 그렇지 않으면, 이전 음성 변환이 완료되기 전에 위치 정보 업데이트가 발생할 경우, 새로운 작업이 중단될 수 있습니다.

저희 텍스트-음성 변환 기능은 앱 실행 중에 호출되어야 합니다. 먼저, "배송" 페이지의 페이지 로드 시 실행되는 액션 시퀀스에 "다음 목적지 음성 안내" 그룹을 추가할 수 있습니다

![소포 배송 모바일 데모 앱: 첫 번째 목적지 선택 기능 그룹 배치](/blog/images/new-page-load-actions.png)

"배송" 페이지는 최초 배송 시 한 번 로드됩니다. 두 번째 배송부터 마지막 배송까지는, 기존의 "다음 목적지로 이동" 액션 그룹에 새로운 액션 그룹을 추가할 수 있습니다

![소포 배송 모바일 데모 앱: 다음 목적지 정보 표시를 위한 액션 그룹 배치](/blog/images/insert-first-vocalization.png)

 

이제 배송 페이지의 "OnPageRefresh" 액션 그룹에 "Vocalize New Distance" 액션 그룹을 추가하는 것만 남았습니다

![소포 배송 모바일 데모 앱 - 배송 페이지 새로 고침 기능](/blog/images/new-page-refresh-actions.png)

이제 앱이 MobileTogether 시뮬레이터에서 실행되든, 아니면 어떤 모바일 기기에서 실행되든, 운전자는 음성 안내를 통해 정보를 얻을 수 있으며, 길에서 눈을 떼지 않고도 필요한 정보를 확인할 수 있습니다!

개인적으로 모바일 앱을 위한 텍스트-음성 변환 기능을 직접 만들어 볼 수 있습니다. 이를 위해 [무료로 사용할 수 있는 MobileTogether Designer를 다운로드](https://www.altova.com/ko/download/mobiletogether.html)하세요. 이 프로그램에는 통합된 도움말, 튜토리얼, 그리고 패키지 배송 앱을 포함한 다양한 샘플 앱들이 함께 제공됩니다.

이 글에서 설명하는 솔루션은 다음 주소에서 다운로드할 수 있습니다: [https://github.com/altova/MobileTogether-TTS](https://github.com/altova/MobileTogether-TTS)

MobileTogether 디자이너에서 .mtd 파일을 열어 해당 파일이 어떻게 구성되었는지 확인하고, MobileTogether 시뮬레이터에서 실행해 보세요.

기기에 맞는 앱 스토어에 접속하여 [MobileTogether 모바일 앱을 다운로드하세요.](https://www.altova.com/ko/download/mobiletogether.html) 그런 다음, 더 많은 데모 앱을 실행하기 위해 MobileTogether 데모 서버에 연결하십시오. MobileTogether 모바일 앱을 설치하면, MobileTogether 디자이너를 서버로 사용하여 자신의 기기에서 모바일 앱용 텍스트-음성 변환 기능을 직접 시험해 볼 수도 있습니다.