2023 국민행복 서비스 발굴·창업 경진대회 대상 수상 (보건복지부 장관상)

• 개요
  • 프로젝트 소개
  • 시장 조사
  • 서비스 활용 시나리오
  • 시스템 아키텍쳐
• 유저 테스트 및 업데이트 계획
  • 버전 관리
  • 테스트
• Front-End
  • UI/UX
  • 문제해결
• AI
• Back-End
• 프론트엔드 저장소
• 백엔드(AI) 저장소
• 백엔드 저장소

eye(I) 쇼핑은 시각장애인들이 스스로 제품을 판별하고 구매하는 과정에서 겪는 정보 접근성 문제를 머신러닝을 통한 사진인식 기술과 ChatGPT를 활용한 자연어 처리 기술을 융복합하여 맞춤형 정보를 제공합니다.

기획 배경

1. 시각장애인의 선택적 구매 욕구와 사용성을 충족시키는 개인화 서비스 부재
2. 시각장애인을 돕기 위한 서비스들이 존재하긴 하나, 사용성이 미흡함
3. 점자는 시각장애인의 기호를 무시하고 제품군만 표시하는 경우가 많으며, 때로는 전혀 표시하지 않는 경우도 빈번함

시각 장애인을 주요 고객층으로 한 시장의 규모는 전 세계 3억명 국내 26만명이며
이들의 보조기기 시장 규모는 17조원이며, 국내 시각 장애인 이동통신단말기 시장은 500억 규모입니다.

2023.06.01
경기도 OO고등학교 통합교육반 김O수 선생님의 도움을 받아 시각장애인 2명을 대상으로 편의점에서 유저 테스트를 진행.

유저 의견을 먼저 반영하여 1.1버전으로 개선하였으며, 개선사항을 반영하여 추후 1.2버전으로 업데이트 예정

• 보이스오버 기능과 TTS(Text-To-Speech) 기술을 통해 시각장애인의 접근성 및 사용성을 향상
  
• 일관된 버튼 배치 구조로, 시각장애인 사용자의 사용성을 증진
  
• 화면 컨트롤 영역을 확장하여 화면의 어느 부분을 터치해도 그에 설정된 동작이 실행

• 문제: 브라우저의 보안 정책으로 인해 화면에서 음성 파일의 자동 재생 제한
• 해결:
  • oncanplaythrough : 오디오나 비디오의 메타데이터 로딩이 완료되고, 그 이후 미디어가 끝까지 재생되는 데 중단 없이 충분한 데이터가 있는 경우 음성 안내를 제공하여 보안 정책을 우회
  • setInterval : useState Hook을 사용해 Loading여부를 판별하고 음성 출력Interval을 handling
  • Button Mapping : client의 버튼 상호작용을 통해 음성출력 handling

2. CORS

• 문제: 브라우저에서 다른 출처로 HTTP 요청을 실행하는 것을 제한하여 웹 앱에서 데이터를 교환하는데 문제 발생
• 해결:
  • Middleware Proxy 서버 API를 사용하여 브라우저의 CORS 정책을 우회하고 데이터를 원활하게 교환할 수 있게 한다.

3. IOS Access

• 문제: iOS 카메라 접근 시 https 프로토콜을 필요로 하여 해당 요건을 만족하였음에도 카메라 접근에 실패하는 문제가 발생
• 해결:
  • iOS에서 비디오나 카메라를 제어하려면 웹 앱이 해당 리소스에 대한 지속적인 접근 권한을 가져야 하는데 전체 화면 모드가 활성화되면, 사용자 인터페이스는 웹 앱의 범위를 벗어나고 웹 브라우저 자체의 제어 아래에 있게 된다. 이 때 웹 앱이 비디오나 카메라에 대한 직접적인 제어를 할 수 없게 되므로 playsInline 속성을 사용해 전체 화면 모드로 전환되는 것을 방지한다.

4. CLOVA Voice Request

• 문제: 서비스에 회원 가입 기능이 없어 사용자 구별 및 설정 값 구현기능에 어려움
• 해결:
  • 사용자를 구별하기 위해 토큰을 활용하고, 세션 스토리지를 이용하여 사용자의 설정 값을 저장한다.
    백엔드와 소통하기 위해 2진법을 사용하여 설정 값을 전달.