Gasree_Project_Blog

시각장애인을 위한 오프라인 의류 쇼핑 솔루션

가스리 = { 권지혜, 민지호, 신지호, 원은지 }

---

목차

1. 서론 | 문제 정의 및 프로젝트 개요
2. 본론 |
   1. 시스템 배경 및 기반 기술
   2. 사용 기술
   3. 인터페이스 구현
3. 결론 | 요약 및 확장

---

서론

문제 정의 및 프로젝트 개요

[문제정의]
한국인 5000만명 중 25만명이 시각 장애인이다. 84%가 저시력자이고 16%가 전맹인이다. 이중 95.6%가 생후 1년 이후에 발생한 후천성 장애인들이다. 또한 후천성 장애의 절반이 40세 이후에 생긴다.

저시력자들은 잔존시력에 조금이라도 의지할 수 있어, 자신의 장애를 쉽게 수용하지 않고 무엇이든지 스스로 하고 싶어한다.

시각장애인이 장애로 인하여 일상 생활에 여러 불편함을 겪고 있다. 특히 장애로 인해 소비 활동을 능동적으로 할 수 없다. 따라서 현재는 대대분의 시각장애인은 동행인과 함께 쇼핑을 하는 형태이거나 , 혼자 소비활동을 하기도 하지만 어려움을 겪고 있다. 따라서 소비활동을 원할 때 도움을 줄 수 있는 동행인이 당장 없거나 동행인이 있다고 해도 모든 활동을 같이해야 하는 것에 대해 미안함과 불편함을 느끼고 있다.

-> 대부분이 오프라인 쇼핑에 의존하고 있지만, 의류 정보 파악에 취약

최종목표

• 모바일 앱을 통해 시각장애인이 독립적으로 쇼핑할 수 있도록 한다.
• 쇼핑의 즐거움을 느낄 수 있도록 편의성을 제공한다.

Objectives

• 시각장애인들이 쉽게 정보를 제공받아야 한다(시각장애인을 위한 UI)
• 옷으로 가는 정확한 위치와 최단경로를 제공해야 한다
• 옷 각각의 정보를 제공해야 한다
• 옷을 추천해야 한다
• 쇼핑에 유용한 정보를 제공해야 한다
• 쇼핑 정보를 저장할 수 있어야 한다
• 장소를 떠난 이후에도 해당 데이터에 접근이 가능해야 한다
• 사람이 많은 곳에서도 사용할 수 있어야 한다
• 비용은 최소로 한다

Constraint

• 스마트폰을 사용하여야 한다
• 추가적 하드웨어가 있으면 안된다
• 실내에서만 사용 가능하다(실내 측위)
• 손이 자유로워야 한다

시스템 구성 및 개요도

Selction / Recommendation Module

처음에는 Selection / Recommendation 모듈입니다. 먼저 2가지의 시나리오가 있습니다:

1. 유저에게 특정 카테고리에 대한 기준을 입력 받아 해당되는 리스트들를 나열
2. 유저가 예전에 구매 했던 옷들이나 현재 산 옷들과 어울릴만한 옷들 추천 두가지 시나리오와 모듈을 통해 옷의 리스트와 그에 대한 정보를 받는다.

IndoorAtlas / Navigation Module

위 모듈들을 통해 옷을 정하게 될텐데, 그 옷이 어디에 위치하고 있는지 정보를 받아 그 장소까지의 최단경로를 제공하는 Navigation 모듈이다. 이때 사용하는 살내 측위 기술로는 자기장센서를 사용하는 IndoorAtlas라는 기술을 사용할 것이다.

NFC Module

옷 주변에 도착 했을 때 내 앞에 있는 옷이 그 옷이 맞는지 체크하거나 세부 정보에 대해서 더 듣기를 원할때 NFC 모듈을 사용하기로 하였다. 또한 구매확정인 옷들이나 즐겨찾기 같은 기능을 사용하기 위해 Server에 저장할 것이다.

전체 시스템 개요도

용어 설명

Module, Library, Framework, SDK, API 간단 용어 정리

Module(모듈)

• 컴포넌트(component), 구성요소, 부품, 성분 개념으로 보면 될것 같다
• 프로그램을 구성하는 한 부분으로 볼 수 있다.

Library(라이브러리)

• 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아놓은 것이다.
• 라이브러리 분류
  • 정적 라이브러리
  • 동적 라이브러리
    • 동적 링크 라이브러리
    • 동적 로드 라이브러리

정적 라이브러리

• 컴파일러가 소스파일을 컴파일할 때 참조되는 프로그램 모듈
• 빌드 시에 라이브러리가 제공하는 코드를 실행파일에 넣는 라이브러리
• 시스템환경이 변해도 앱에는 아무 영향 없으며, 완성된 앱을 안정적으로 사용 가능하다.
• 사용하는 모든 오브젝트 코드를 실행파일에 내장하므로, 메모리에 로드되는 앱 코드가 많아진다.

동적 라이브러리

• 프로그램 수행 도중 해당 모듈이 필요할 때 호출해 사용하는 프로그램 모듈 앱을 빌드할 때 존재하지 않던 라이브러리도 사용 가능하다. 플러그인 형식으로 경로를 설정해야 하며, 설치가 따로 필요하다.
• 동적 링크 라이브러리 실행파일과 관련된 라이브러리코드를 모두 메모리에 읽어들여 호출관계를 조정한 다음 앱이 실행된다.
• 동적 로드 라이브러리 실행파일 실행 시 읽어 들이지 않은 라이브러리를 추가적으로 이용하는 라이브러리

Framework(프레임워크)

• 문제를 풀기 위한 추상적 설계를 구체화한 클래스의 집합.
• 설계, 구현을 재사용하게끔 협업화된 형태로 클래스를 제공하는 것.
• 라이브러리와 달리 앱의 틀과 구조를 결정하며, 그 위에 개발된 개발자의 코드를 제어한다.
• 구체적이고, 확장 가능한 기반 코드를 보유한다. 설계자가 의도하는 여러 디자인 패턴의 집합으로 구성돼있다.

API(Application Programming Interface)

• 앱을 개발하기 위한 규칙.
• 앱에서 사용할 수 있도록, 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.
• 개발자를 위한 인터페이스.
• 앱 간에 연동의 개념이 많아지자 서로 다른 앱 간 기능을 공유할 수 있도록 개발한다.
• SDK와 거의 같은 뜻으로 쓰인다.

SDK(Software Development Kit)

• 소프트웨어 개발 도구 모음
• SDK 안에는 개발에 도움이 될 개발 도구 프로그램, 디버깅 프로그램, 문서, API 등이 있다.

출처: http://waaan.tistory.com/16 [waaan]

---

본론

시스템 배경 및 기반 기술

1. 네이티브 앱 VS 웹 앱 VS 하이브리드 앱

네이티브 앱은 사용자들이 어플리케이션을 사용하기 위해 스마트폰에 설치해야 하는 어플리케이션을 말합니다. 네이티브 앱은 개발 언어를 스마트폰에 최적화된 개발 언어를 사용하기 때문에 스마트폰에서 프로그램을 구동할 때 매우 빠르고, 안정적입니다. 스마트폰에 최적화 되어 있어 카메라나 스마트폰의 센서를 다루기도 용이하며, GPS나 블루투스와 같은 외장기기들과의 연결에도 높은 성능을 보일 수 있습니다.

하지만 네이티브 앱은 안드로이드와 IOS의 호환이 되지 않기 때문에 별도로 제작을 해야 합니다. 어플리케이션이 업그레이드가 되면 제공자는 각 스토어에 다시 업로드를 해주어야 하고, 사용자는 스토어에서 업데이트를 해야 하는 번거로움이 있습니다. 또한 개발 시간과 비용도 상대적으로 많이 필요하다는 단점이 있습니다.

웹 앱은 스마트폰으로 볼 수 있는 모바일 웹 사이트를 말합니다. 스마트폰에 기본적으로 제공되는 인터넷 브라우저를 통해 주소를 입력하여 사용할 수 있습니다. 웹 앱은 모바일 웹 앱이라고도 불리며 HTML, CSS, JavaScript로 만들어 질 수 있습니다. 웹 앱은 멀티 플랫폼을 지원하며 개발 비용이 적게 든다는 장점이 있습니다.

하지만 웹 앱은 OS와 직접 연동하여 독립적으로 실행하는 네이티브 앱과 달리 브라우저 내에서 실행합니다. 브라우저는 그 자체가 OS API에 직접 액세스하는 네이티브 앱이지만 브라우저 내에서 실행되는 웹 앱이 액세스할 수 있는 API의 수에는 제한이 있습니다. 네이티브 앱은 디바이스에 대해 전체 액세스 권한을 갖지만 웹 앱에서는 많은 기능들이 제한됩니다.

하이브리드 앱은 네이티브 개발과 웹 기술을 혼합한 것입니다. 이 방식을 사용하면 개발자가 모바일 플랫폼과 상관없이 웹 기술로 어플리케이션을 개발할 수 있으며, 필요 시 네이티브 API에 직접 액세스 할 수 있습니다. 이 방식을 사용하면 네이티브를 통해 개발자는 모바일 기기가 제공하는 다양한 기능을 모두 활용할 수 있으며, 웹 언어를 사용하여 작성한 코드를 멀티 플랫폼에서 공유하여 개발 및 지속적인 관리를 중앙에서 보다 빠르고 경제적으로 수행할 수 있습니다. 이 역시 HTML, CSS, JavaScript와 같은 언어로 어플리케이션을 만들 수 있습니다.

아래의 사진들은 위에서 설명한 세 가지 개발 방식을 요약한 사진입니다.

네이티브 앱은 디바이스 API와 직접 연결될 수 있다는 특징을 가지고 있습니다. 웹 앱은 모바일 브라우저 위에 올라와 있는 것을 볼 수 있습니다. 하이브리드 앱은 웹 코드를 네이티브 컨테이너가 감싸며 이 또한 디바이스 API에 접근할 수 있다는 것을 보여주고 있습니다.

2. 아이오닉이란?

자, 이제 그럼 하이브리드 앱의 프레임 워크인 아이오닉에 대해 알아보겠습니다. 아이오닉2 framework는 angular js 2, cordova를 중심으로 다양한 UI components, API를 제공해주는 프레임워크입니다. 아이오닉을 사용하기 위해서는 먼저 아래의 요소들에 대한 지식이 있어야 합니다.

1. 앵귤러
2. 타입스크립트
3. 코도바

순서대로 설명해보도록 하겠습니다.

1. 앵귤러란?

현재 구글이 관리하고 있으며, 클라이언트 쪽 어플리케이션을 개발하는데 필요한 프레임워크 입니다.

2. 타입스크립트란?

마이크로소프트가 관리하고 있으며, 스케일 확장이 가능한 자바스크립트입니다. 즉, 자바스크립트에서 타입이 생긴 언어라고 볼 수 있습니다.

3. 코도바란?

아파치 재단에서 만들었으며 웹 기술을 사용해서 앱을 만들 수 있게 해줍니다. 코도바는 플러그인을 통해 하드웨어의 카메라와 같은 네이티브 기능들을 쓸 수 있게 해줍니다.

위에 그림에서 보이듯이, 코도바를 통해서 기술을 만들고 그 기술을 타입스크립트 프레임워크인 앵귤러가 틀을 만들고 아이오닉이 그 틀을 감싸서 돌아가는 것이라고 생각하면 됩니다.

아이오닉은 코도바와 앵귤러가 하는 일들을 묶어주는 기능뿐만 아니라 사용자들에게 편한 다양한 기능들을 제공해주고 있습니다.

아이오닉 공식 documents(https://ionicframework.com/docs/) 에서 다양한 UI components, API에 대한 자세한 설명을 제공해주는 것을 볼 수 있습니다.

아이오닉에서는 ion – slides 와 같은 다양한 ion - tag들을 제공해 개발자들에게 빠르게 구현할 수 있게 합니다

Reference

• http://i.wik.im/280311
• IBM 소프트웨어 WebSphere Thought Leadership 백서
• http://sisir.tistory.com/17
• https://ionicframework.com/

사용 기술

저희 프로젝트에서 한 축을 담당하는 실내측위 기술은 cordova plugin SDK로 된 아이오닉 외부모듈을 이용해 만들어집니다. 먼저 ionic framework에서 cordova를 이용해 native 기능을 사용하는 방법, 나아가 SDK를 끌어와 사용하는 방법을 설명하고 실내 측위 방법에 대해 설명하겠습니다.

1. Native 기능 사용하기

앞서 설명 들으신 대로 ionic framework 는 웹앱과 스마트폰과의 중간다리 역할을 하는 cordova 위에서 동작합니다. Cordova가 하는 주된 역할 중의 하나가 웹앱 프로젝트에서 스마트폰의 native기능을 사용할 수 있도록 해주는 것인데요. Cordova plugin이 그 역할을 합니다.
위 설명대로 cordova plugin은 플랫폼별 native 기능에 대해 JavaScript로 된 인터페이스를 제공합니다. Cordova plugin은 직접 만들 수도 있고, 누군가 만들어 놓은 것을 가져다 쓸 수도 있습니다. 저희 프로젝트에서는 cordova plugin으로 만들어져 있는 indooratlas SDK, NFC, TTS, STT 등의 모듈을 가져와서 사용하고 있습니다.
Cordova plugin을 ionic 프로젝트에서 사용하려고 하면 한 가지 문제가 생깁니다. Ionic2 부터는 javascript가 아닌 typescript를 사용한다는 것인데요, typescript는 javascript에 type을 만들어 객체지향적으로 사용할 수 있도록 만든 javascript의 superset입니다. 사실상 javascript와 동일한 언어이지만 문법이 달라 cordova plugin을 그대로 가져와 사용하기에는 무리가 있습니다. 그래서 ionic framework에서는 “ionic-native”를 제공합니다.

Ionic-native는 cordova plugin을 typescript로 감싸 그 인터페이스를 제공하는 역할을 합니다. 정리해보면 native 코드를 cordova가 javascript 인터페이스로 감싸고, ionic framework에서는 그것을 typescript 인터페이스로 감싸는 것이죠. 하지만 여기서 제공하는 기능들은 한정적이기 때문에 이외의 플러그인을 사용할 때는 다른 방법을 사용해야 합니다.
저희 프로젝트에서 한 축을 담당하고 있는 IndoorAtlas도 그런 경우 였는데요. 모듈에 대한 설명과 같이 사용법을 알아보겠습니다.

2.실내측위 IndoorAtlas

2.1. IndoorAtlas란

저희 프로젝트의 기능 중 하나인 실내 내비게이션 구현을 위해 실내측위 기술이 필요합니다. 여러분들이 흔히 알고 계시는 GPS는 건물 내에서는 GPS가 정확한 위치를 찾지 못해, 다른 대안이 필요합니다. 현재 많은 기술들을 이용하여 실내측위를 구현하고 있는데, 그 예로 Beacon을 이용하는 방법, wifi를 이용하는 방법 등이 있습니다.
그 중 저희가 선택한 기술은 자기장의 왜곡을 이용하는 것입니다. 철새들이 길을 찾을 때 지구의 자기장을 이용하는 것에서 힌트를 얻어 만든 것인데요. 뒤에서 설명 하겠지만 철새가 자기장 지도를 학습하고 길을 찾아가는 과정이 자기장 실내측위를 사용하는 방법과 매우 흡사합니다. 중요한 내용은 아니지만 신기해서… 누가 했는지 철새는 잘 코딩 되어있군요!

아래 그림 처럼 자기장이 실내 철제 구조물을 만나 왜곡되면, 마치 지문처럼 고유한 값을 가지고 나타난다고 합니다. 이것을 스마트폰에 있는 지구자기장 센서를 통해 매핑하고 그곳의 자기장을 하나의 좌표로 이용하는 것이 지자기를 이용한 실내측위의 핵심입니다.

아래의 그림은 여러가지 실내측위 기술을 비교한 것인데, 표를 보시면 자기장 실내측위 방법이 비교적 정확한 것을 알 수 있습니다.
자세한 내용이 궁금하신 분들은 링크를 참고하시기 바랍니다!
http://www.indooratlas.com/wp-content/uploads/2016/03/magnetic_positioning_opus_jun2014.pdf

이러한 자기장 측위법을 이용해서 실내측위 서비스를 제공하는 회사가 IndoorAtlas 입니다. 고맙게도 SDK를 안드로이드와 iOS, 그리고 우리가 원하는 Cordova Plugin으로도 제공을 해줍니다.

2.2.사용법

다음으로 indoorAtlas를 이용해 ionic framework로 실내 측위를 제공하는 어플을 만드는 법을 알아보겠습니다. indoorAtlas 이용하려면 크게 세가지 단계를 거쳐야 합니다.

  1) 실내측위를 하고자 하는 건물의 위치와 층별 실내 지도 입력 단계(floor plan)  

https://app.indooratlas.com/ 사이트에 들어가면 원하는 장소에 원하는 지도를 넣을 수 있습니다. Google Map을 통해 뉴턴홀의 위치를 찾고, 뉴턴홀3층에 대한 실내 지도를 입력한 모습입니다. 이 작업을 floor plan이라고 합니다.

  2) 공간의 경로를 지정하고 신호 정보를 모으는 단계  

Android의 Map creator 어플을 이용하여 waypoint를 설정하고, waypoints 간의 경로를 걸어가면서 맵에 저장합니다 - calibration - waypoint 설정 및 경로 저장
- positioning test
실제로 매핑을 완료한 뉴턴홀 복도에서 움직여본 결과입니다. 초록색으로 칠해진 부분이 mapping이 잘 된 부분이라고 보시면 됩니다.

  3) SDK를 어플리케이션에 합치는 단계  

마지막으로 ionic 프로젝트에 cordova plugin으로 된 SDK를 다운받아 넣고 코딩을 하는 단계입니다.
1. 커맨드창에서 다음 명령어를 입력하여 platform을 추가하고 플러그인을 설치합니다.
cordova platform add android
cordova plugin add cordova-plugin-indooratlas

설치가 완료되면 위와 같이 프로젝트에 플러그인이 들어가 있는 것을 확인할 수 있습니다.
2. 실제로 저희가 사용할 함수들은 js파일에 들어 있습니다.
저 중에 IndoorAtlas 파일을 열어보겠습니다.

IndoorAtlas가 정의되어 있고 그 안에 여러가지 함수들이 정의되어 있는 것을 볼 수 있습니다. 그 부분이 module.exports로 이 파일 외에서도 사용할 수 있도록 되어있네요.
3. 이제 아래 그림처럼 사용하고자 하는 typescript 파일에 가서 선언한 후 함수를 가져다 사용하기만 하면 됩니다.
여기서 사용한 initialize 함수는 아까 입력한 floorplan의 API key를 받아와서 ‘이 부분에 대한 실내측위를 실행하겠다’ 라고 초기화시켜주는 함수입니다.
그밖의 SDK 함수들은 http://docs.indooratlas.com/develop/cordova/api/ 에서 확인하실 수 있습니다!

2.3. 프로젝트 내에서의 역할, 향후 과제

앞에서 설명드린 부분은 indooratlas를 어플리케이션 내에 끌어오는 부분 까지 입니다. 저희 프로젝트에서는 indooratlas를 통해 실내 위치 정보를 받아 오고, 그 정보를 통해 쇼핑몰까지의 최단 경로를 안내해주는 내비게이션을 제공 합니다.
따라서 향후 과제는 자기장이 매핑된 실내 지도에 좌표에 따른 쇼핑 정보를 집어 넣고, 각각 쇼핑몰 사이의 경로를 제공하는 것을 구현하는 것입니다.

인터페이스 구현

시각장애인을 주 사용자로 설정한 저희의 솔루션에서 User Interface는 매우 중요한 요소입니다. 일반적으로 ‘인터페이스’라고 하면 떠올리는, 눈에 보이는 화면 구성과 동시에, 보이지 않는 부분에서의 interaction 또한 요구되기 때문입니다. 이에 저희는 콘텐츠융합디자인학부의 ‘주여’ 팀과 협업을 진행하여 화면 구성 완성도를 높였습니다.
시각장애인의 모바일 사용성을 높이기 위해 저희가 사용한 세 가지 방법은 큰 글씨, 제스처, TTS입니다. 이 장에서는, UI의 이론적인 부분보다는 실제 구현 부분에 초점을 맞추고자 합니다.

1. 큰 글씨

저희는 큰 글씨로 만들어진 이미지를 불러와서 화면 구성에 사용하는 방법을 사용하였습니다. 또한 프로젝트 기간 문제로 인해서 특정 플랫폼에 한정한 화면 디자인을 구성했습니다.
이미지를 프로젝트 내 경로에 저장한 후, html 파일에서 경로의 이미지를 불러와서 사용하면 됩니다.

<div [@nav1]="nav1State" class="cShadow"><img src="assets/t2img/Navigator1.png"></div>

css 파일에서 해당 이미지의 위치 등을 설정할 수 있습니다. 이 때 보통은 절대위치인 pt 단위를 사용한다고 하는데, 저희는 px 단위를 사용했습니다. 다음과 같이 위치 설정이 가능합니다.

.cShadow{
    position:   absolute;
    padding:    0;
    border:     0;
    width:      765px;
    height:     765px;
    left:       -372px;
    top:        -7px;      
}

다음과 같이 자료를 받아

다음과 같은 화면을 만들어 낼 수 있어요!

2. 제스처

시각장애인을 포함한 모든 모바일 기기 사용자들은 제스처를 통해 휴대폰에 input을 넣습니다. 모바일 기기를 사용할 때를 생각해 보세요. 화면을 클릭하고, 우측으로, 또는 좌측으로 화면을 움직이고, 휴대폰을 흔드는 등의 행동을 함으로써 모바일 기기에 입력을 할 수 있습니다.

제스처의 경우 native 단에서 구현을 하는 것이 좋습니다. 제공하는 기능이 더 많고 쉽게 사용할 수 있습니다.

2.1 기본 제스처

Angular의 Event binding을 통해 사용자의 행동을 인식하고 이후 행동을 정의할 수 있습니다. 간단한 기본 제스처는 쉽게 사용이 가능합니다. 가령 click을 했을 때 특정 함수가 실행되게 하려면 다음과 같이 하면 됩니다.

 <button (click)="onSave()">Save</button>

이 경우, Save라 적힌 버튼을 클릭하면 (click 이벤트), onSave() method가 실행이 됩니다. 이렇게 생성 가능한 이벤트 목록은 다음을 참조하세요. https://coursetro.com/posts/code/59/Angular-4-Event-Binding

유저가 이벤트를 생성하면 이에 따른 시스템 반응이 있겠죠? 가령, 우리가 모바일 사용 시 하는 행동들을 생각해보면, 버튼을 클릭하면 다음 페이지로 넘어간다던가, 특정 파일이 실행된다던가 하는 어떤 action을 수행할 것입니다. 이를 위해 해당 event에 대한 데이터 값 등을 전달해주는 것이 event object $event입니다.

<button (click)="myEvent($event)">My Button</button>

괄호 안에 $event object를 통해 함수의 parameter로 이벤트 변수들을 전달할 수 있습니다.

2.2 custom event 구성

화면 전체에서 작동하는 스와이프 기능을 구현하기 위해 저희는 다음과 같이 코드를 구성했습니다.

T4-to-right.ts(directive)

import { Directive, Input, ElementRef, Renderer, Output, EventEmitter } from '@angular/core';
import { DomController } from 'ionic-angular';

@Directive({
  selector: '[t4-to-right]' // Attribute selector
})

export class T4ToRightDirective {

  @Input('startLeft') startLeft: any;
  @Input('startTop') startTop: any;

  @Output() overDrag: any = new EventEmitter();
  @Output() aaa: number = 0;
  @Output() dighdigh: any = new EventEmitter();
  triggered: boolean = false;

  @Output()
  panpan: EventEmitter<any> = new EventEmitter();
  constructor(public element: ElementRef, public renderer: Renderer, public domCtrl: DomController ) {
  }
ngOnInit(){
   // this.renderer.setElementStyle(this.element.nativeElement, 'position', 'absolute');    
    let hammer = new window['Hammer'](this.element.nativeElement);
    hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_ALL});
    hammer.on('pan', (ev) => {
      this.handlePan(ev);
      this.panpan.emit(ev);
    })
  }
 }

이 directive 는 코드 내에서 다음과 같이 사용됩니다.

<ion-content t4-to-right (pan)="panEvent($event)" (click)="onLongPress($event)">

다음과 같이 html 파일 화면 전체에 directive를 정의하여 이벤트를 받아올 수 있게 합니다.

<div class="interationCircle" [style.left] = "position + 'px'"> <img src="assets/t2img/navCircle2.png"></div>  

이벤트로 생성된 값이 다시 화면 구성에 사용되는 부분입니다.

constructor(public navCtrl: NavController, public navParams: NavParams, private tts: TextToSpeech) {
    this.triggered = false;
    this.position = this.defaultX;
  }  

constructor에서 포지션 정의를 해 줍니다.

panEvent(e) {

          if (e.deltaX <= -140 && !this.triggered) {
            this.triggered = true;
            this.position = 66.5;
            //event 실행
            this.navCtrl.push(T5Page, {}, { animate: false });
          }
          else if (this.position > 66.5) {
        this.position = this.defaultX + e.deltaX;
        if (e.isFinal == true) {
          this.position = this.defaultX;
          this.triggered = false;
        }
      }
    }  

다음과 같이 사용합니다.

이 코드의 결과는 다음과 같습니다.
https://drive.google.com/uc?id=0B1b8Ja-hvDJ2X2ZSSFF1WUJQRnc

3. TTS(Text To Speech)

아이오닉 공식 documents(https://ionicframework.com/docs/) 에서 필요한 Native plugin의 설명을 읽고 사용할 수 있습니다. 원하는 플러그인에 대한 Usage, Supported Platforms에 대한 설명을 먼저 읽어보신 후 필요한 기능을 찾아 사용하시는 것이 좋습니다. 보통 제공하는 함수에 대한 설명도 모두 있어 document가 있는 경우 사용이 매우 용이합니다.
Ionic 에서 지원하는 native plugin을 사용하기 위해서는 주로 다음의 절차를 거칩니다. 여기서 저희가 사용한 Text to speech 기능을 예를 들어 설명해 보겠습니다.

1) Cordova plugin을 설치한다.

가장 먼저 설치 과정입니다.

$ ionic cordova plugin add cordova-plugin-tts
$ npm install --save @ionic-native/text-to-speech

대부분의 native plugin은 위와 같은 두 가지를 설치하도록 되어 있습니다. 이를 터미널 등에서 입력하면 설치가 이루어집니다.

2) app’s module에 이 플러그인을 추가한다.

다음으로 이 플러그인을 사용하기 위하여 app’s NgModule에 해당 플러그인을 추가해주어야 합니다.
경로는 프로젝트의 /src/app/app.module.ts 입니다. 다음과 같이 사용할 플러그인을 import 해주세요.

  import { TextToSpeech } from '@ionic-native/text-to-speech';

그 후 NgModule 내의 providers에 추가해주시면 됩니다.

@NgModule({
…
providers: [
…
TextToSpeech,
…
]})

이제 모든 사용 준비를 마쳤습니다!

3) 사용하고자 하는 페이지의 .ts 파일에서 사용한다.

파일 상단 import를 2)과 동일하게 하고,

 import { TextToSpeech } from '@ionic-native/text-to-speech';

constructor에서 정의한 후에 사용하면 됩니다.

constructor(public navCtrl: NavController, public navParams: NavParams, private tts: TextToSpeech) {
 }

저희는 다음과 같은 함수를 만들어 사용했습니다.

async speak(line): Promise<any> {
try {
  await this.tts.speak({
    text: line,
    locale: 'ko-KR',
    rate: 1
  });
  console.log('speak function start!');
 }
catch (e) {
  console.log(e);
 }
}

실제 사용은 다음과 같이 합니다. 참 쉽죠?

this.speak(`스타일체크를 시작해볼게요. 먼저 음성안내를 받아, 스타일체크 블록 장판으로 이동해 주세요!
스타일체크 볼록 장판에 바르게 서면 효과음과 함께 스타일체크를 시작합니다.
네, 스타일 볼록 장판에 서셨어요. 두번 탭하시면 스타일 체크가 5초 후에 시작됩니다.`);

`(backtick/backquote)를 사용하면 여러줄을 동시에 string으로 인식하게 할 수 있습니다.

결론

평가

보통의 개발 프로젝트와 다르게 UI 요소에 초점을 맞추어 먼저 개발을 진행하게 되었습니다. 이에 UI적 부분에 있어서는 기여를 했지만, 선행되어야 하는 기술적인 부분을 먼저 구축하지 못한 것이 아쉬움으로 남습니다.

앞으로의 과제

현재 저희 프로젝트에서 시각장애인으로 특정 되어 있는 사용자를 확장해보려 합니다. 시각장애인 스스로도 ‘장애인을 위한 어플’이 아니라 ‘장애인의 사용성이 높은 모두가 사용하는 어플’ 을 원하고 있는 만큼, 그에 초점을 맞추어 모든 사람들이 함께 쇼핑을 쉽고 재미있게 즐길 수 있는 솔루션을 만들어보고자 합니다.
의류 정보와 실내 위치 인식은 저희의 솔루션을 위한 기반 기술이기 때문에, 차후에는 실내 네비게이션과 의류 추천 기술에 대한 연구를 진행하려고 합니다.