DINEASY는 시각장애인, 저시력자, 시니어 등 ‘시각의 보조'가 필요한 사용자를 위한 음성 기반 음식점 추천 및 내비게이션 모바일 웹앱입니다. 해당 앱은 Geolocation, TMAP, Speech Recognition API와 서대문구청 음식점 Open Database를 활용한 매시업 아키텍처 (Mash-Up Architecture)로 이루어졌으며, 기술혁신을 통하여 기존 사회적 취약계층이 직면했던 물리적 장벽을 허물고, 배리어프리 (barrier-free) 앱 서비스를 제공하여 시각적 취약계층의 편의와 자율성을 증진하고자 합니다. 궁극적으로 기존 시각의 보조가 필요한 사회적 약자들의 음식점 “정보의 접근성” 문제를 해결함으로써, DINEASY는 크게 두 가지 가치를 창출하여 타겟 유저들의 전반적인 안녕, 행복, 그리고 사회적 통합에 기여합니다.
1. 사회적 약자의 편의 증진
타인의 도움 없이 스스로 자신 있게 레스토랑을 발견하고, 선호도에 따라 정보에 입각한 선택을 할 수 있는 문을 열어줍니다. 부가적으로 사회활동의 폭을 넓히고, 다양한 요리 경험을 즐기고, 활동적인 생활방식을 유지하기 쉽게 함으로써 사회적 약자의 삶의 질을 향상하고 독립성을 독려합니다.
2. (지역) 산업사회 문제 개선
시각장애인들과 외식산업 사이의 격차를 해소함으로써 외식업계의 포괄성 및 접근성을 증진하고, 사회적 약자들이 더욱더 편리하고 즐거운 식사 경험을 할 수 있도록 하여 기회균등하고 향상된 사회 참여 환경을 제공해줍니다.
1. 시각 약자들의 음식점 이용을 도와주는 특정 시나리오를 위한 서비스
현재 시각장애인의 보행에 도움을 주는 어플리케이션은 존재하지만, DINEASY와 같이 식품업소를 이용할 때 시각장애로 인해 생기는 특정 문제점을 파악하고 이를 개선하기 위하여 시나리오와 사용자들의 기준에 맞춘 음식점 길도우미 앱의 사례는 존재하지 않습니다. DINEASY는 현재 위치 기반 근처 음식점 찾기, 음성 명령/안내 기능, 음성 길안내 기능을 통해 고유 타깃 유저와 시나리오를 위한 맞춤형 솔루션을 제공함으로써 유사 서비스와의 차별성을 유지하고자 합니다.
2. 사용자 개인화를 통한 맞춤형(personalization) 서비스
시중에 나와있는 길찾기 어플리케이션 중 개인화를 통한 음식점 찾기 기능이 있는 앱은 없습니다. DINEASY에서는 음식점 검색시 사용자의 거리, 음식 종류를 파악하고, 맞춤형 음식점을 필터링합니다. 또한, 주메뉴를 사용자가 직접 고려하여 음식점을 선택할 수 있습니다. 이러한 개인화 측면은 맞춤형 지원을 제공하는 앱의 기능을 향상시킵니다.
3. 타겟 유저의 앱 편의를 고려한 UI/UX 구축
기존의 길 찾기 애플리케이션은 위치 정보에 관한 시각적인 데이터에만 제공하고 있어 시각약자들이 이용하기에 많은 어려움이 있습니다. 현존하는 시각장애인 타깃 어플리케이션 또한 유저 인터페이스 (UI) 가 저시력자 혹은 전맹이 이용하기에 많은 어려움이 존재합니다. DINEASY는 유사 앱 벤치마킹과 시각약자 관련 논문을 읽어보며 UX리서치를 한 후, 이에 따라 저시력자들이 이용하기 쉽고 편리한 인터페이스를 개발하여 ‘유니버설 디자인’을 구축하였습니다. 예시로 고대비 색상과 (빨간, 검정, 하얀색), 굵은 선으로 표현된 앱 디자인은 저시력자들이 보다 편하게 앱을 볼 수 있도록 돕습니다. 또한, 버튼의 위치, 음성 안내 기능등의 디테일을 통하여 기존 시각약자들의 패인포인트와 물리적인 장벽을 허물고, 편리하고 직관적인 어플리케이션을 개발하였습니다.
https://www.youtube.com/watch?v=p_mGoO7FsWs&ab_channel=NakyungKim
다음은 본 프로젝트에서 Mobile Mash-Up 개발을 위해 활용한 API와 데이터 가공 및 활용을 나타낸 것입니다.
1. 어플 실행 및 현재 위치 확인
2. 현재 위치 기반 음식점 찾기, 혹은 카테고리 기반 음식점 찾기
2-1. 카테고리 기반 검색 시, 음성을 통해 사용자의 선호 음식 카테고리를 입력 받음.
3. 현재 위치 기반, 혹은 카테고리 기반으로 음식점 목록을 제공
4. 사용자가 선택한 음식점에 대한 정보를 제공
5. 사용자가 음식점의 길 안내를 원한다면, 경로 안내를 시작하며, 경로 안내가 필요한 지점에 도착하게 되면 음성 및 텍스트를 통해 경로를 안내 받음
아래는 해당 어플리케이션을 구현하기 위한 구성요소들이다.
1. HomeMap.js
| function | description |
|---|---|
| navigator.geolocation.getCurrentPos ition() | 기기에 현재 위치 좌표를 요청하고 이를 위 경도 좌표로 반환 |
| reverseGeo(lon, lat) | 로컬스토리지에 저장되어 있는 사용자의 현재 경위도 좌표를 인자로 입력받아 지번주소로 바꾸고 문자열 형태로 저장 |
| navigator.geolocation.watchPosition (success, error, options) | 5초 간격으로 사용자의 위치를 확인해, 좌표의 변경이 있다면 변경된 좌표를 반환 |
2. map.js
| function | description |
|---|---|
| removeQuotesAndBrackets(sentence) | 배열 형태로 저장된 목적지 좌표에서 괄호와 따옴표를 제거해 값을 재처리 |
| initTmap() | TMAP API 기능 기반인 지도와 마커를 초기 설정으로 생성하고, ajax를 이용해 경로 API를 추가로 불러와 경로 탐색 및 그리기 기능을 실행 |
| window.localStorage.setItem / getItem() | 데이터베이스 서버를 대체할 로컬스토리지에 값을 할당하거나, 저장된 값을 불러옴 |
| getDistanceFromLatLonInKm() | 현재 좌표와 목적지 좌표 간의 거리를 계산한다. 이후, 경로 안내 지점 도착 시 저장된 설명문을 읽는 데 사용 |
| AddressToCoordinates() | 한글 주소를 위경도 좌표로 반환 |
3. annyang.js
음성 인식은 기본적으로 Tal Ater가 Github에서 제공하는 annyang.js를 사용하였고, 참고하여 기능을 추가했습니다. 결과적으로, 사용자의 음성을 인식한 후, 선호하는(먹고 싶은) 음식점의 카테고리를 분류하여 값을 저장하게 됩니다. 아래는 추가된 함수들입니다.
| function | description |
|---|---|
| Vrecord(callback) | 음성 인식 후 음성 텍스트에 포함된 카테고리를 분류하는 함수를 callback 함수로 구현 |
| startRecording() | Vrecord의 callback을 위한 함수 |
| Rpause() | Vrecord 분류가 완료되면 음성인식을 멈춤 |
| handleCategoryChange(category) | 분류된 카테고리의 값을 사용할 수 있도록 처리하고, 로컬 스토리지에 저장 |
4. sayThis.js
| function | description |
|---|---|
| speech(txt) | txt를 읽음과 동시에 txt의 내용을 lastTxt 변수에 할당 |
| sayAgain() | lastTxt를 다시 읽어주는 함수 |
5. restaurant.js
이 파일은 사용자의 GPS 정보 혹은 음성 입력값을 기반으로 추천 식당 리스트를 생성합니다. 다음은 기능 구현을 위해 작성한 주요 함수들입니다.
| function | description |
|---|---|
| getAddress(locat) | 지번 주소로부터 동 정보를 추출 |
| getRestaurants() | json 파일을 fetch하는 promise를 반환 |
| categoryRest(), locationRest() | 사용자 요청에 일치하는 식당을 필터링 |
| restSelect(rest) | 로컬스토리지에 사용자가 선택한 식당을 저장하고 식당 정보 화면을 보여줌 |
✔결론
1. 다인이지 (DINEASY): 음성기반 시각보조 레스토랑 네비게이션 앱
해당 서비스를 통해 시각 중심적인 기존의 어플리케이션 생태에서 벗어나, 간단한 조작, 간단한 음성 명령을 통해 음식점을 찾아다닐 수 있는 방법을 모색해보았습니다. 이를 통해 기존 시각약자들이 즐기기 어려웠던 식문화의 물리적 장벽을 허물고, 음성 기반 길안내를 통한 배리어프리 (barrier-free) 서비스를 제공하여 시각적 취약계층의 편의와 자율성을 증진하고자 할 수 있을 것으로 보입니다.
또한 시각약자를 위한 어플리케이션으로 설계되었지만, 서비스 시나리오 모든 과정에서 사용자의 편의를 고려하였습니다. 때문에 주위 맛집을 찾고 싶은 모든 개인 사용자의 활용이 가능할 것으로 보이며 향후 opendata를 추가하거나, 기능을 추가해 발전해 나갈 수 있을 것이라 예상합니다.
2. 진행 과정
다음은 서비스 개발 과정에서 겪은 시행착오입니다.
| 문제점 | 해결방안 |
|---|---|
| Figma에서 디자인한 UI 파일 코딩 시 화면 깨짐 현상 | Figma 컴포넌트 inspect를 활용, 아이콘/버튼은 따로 SVG 파일을 다운받아 이용 |
| 공공데이터포털 제공 API로는 데이터를 한번에 1000개씩 받아와야 해서 약 2만개의 데이터를 처리하는데 어려움이 발생 | API 데이터를 JSON파일로 받아와 필요한 데이터만 가공하여 약 5천개로 줄이고 로컬에서 이용 |
| SQL 서버 데이터베이스 구현 위한 시간 부족 | 자바스크립트에 내장된 localstorage를 이용하여 값을 저장하고 반환 + github Actions로 빌드 |
이와 같이 모바일 매쉬업 웹 어플리케이션을 직접 구현하며 고민하고, 문제를 해결하는 과정에서 웹 서비스 개발과 기존 서비스를 활용하여 가치를 창출하는 방식에 대한 이해를 높일 수 있었습니다.
3. 한계점 및 보완
DINEASY는 현재 서대문구에 위치한 식당을 대상으로만 서비스하고 있지만 추후 더 넓은 범위의 지역까지 확장시킬 예정입니다. 정보 제공 관점에서는 식당 이름과 주소, 음식점의 카테고리 분류 정도의 간단한 정보들만 제공하고 있는데 메뉴나 가격 등의 정보들도 추가적으로 제공할 수 있게 하고자 합니다. 또한 식당 도착에서 끝나는 것이 아니라 음식 주문, 키오스크 이용을 돕는 부가 서비스를 모색하고 있습니다.
팀원 별 프로젝트 기여 사항
조윤호(팀장)
- TMAP API 가공(지도 생성 및 경로 그리기 기능 전반 구현, 경로 안내에 필요한 좌표 정보 및 길 안내 텍스트 추출, 출발지/도착지/현재 위치 좌표 추출 및 마커 생성)
- geolocation api를 이용한 실시간 위치 추적 및 현재 위치 좌표 반환 기능 구현
- 좌표를 지번주소로 전환하는 리버스 지오코딩 기능 구현
- 협업용 깃허브 레포지토리 생성 및 깃허브 액션 서버 빌드 및 디버그
- 각 기능 조합 및 전체 디버그 작업
- 발표 자료(동영상) 촬영 및 1차 가공
김나경(UX/UI 디자이너)
- 서비스 기획
- UX 리서치, UI 디자인
- 디자인 컴포넌트 생성(HTML, CSS)
- 발표 자료 2차 가공(PPT + 동영상) 및 발표
정지윤(프론트엔드)
- 음식점 Open Dataset API 가공
- 필터링된 추천 식당 리스트 생성, 식당 상세정보 텍스트와 음성 제공 기능 구현 및 해당 부분 인터페이스 작업
- 발표자료(PPT) 제작
정호수(프론트엔드)
- 사용자 음성 인식 후 카테고라이징 기능 구현
- 지오 코딩을 통한 한글 주소와 좌표 연동 기능 구현
- 음성 및 텍스트로 목적지까지의 경로 안내 기능 구현
- 각 기능 조합 및 전체 디버그 작업
- 제안서 발표 영상 제작