VODA
VODA로 세상을 보다
- Period
- 2023.07 – 2023.08
- Role
- 기획 · 1인 Front-End
- Cycle
- 기획 → 개발
Why
시각장애인을 돕는 서비스는 이미 있었습니다 — 설리반+의 사진 분석, Be My Eyes의 봉사자 매칭.
하지만 둘 다 눈앞에 무엇이 있는지까지만 알려줍니다. 상대가 웃는지 곤란해하는지, 대화의 절반인 비언어 정보는 빠져 있었습니다.
복지관을 직접 찾아가 프로토타입을 보여드리고, 그 자리에서 받은 피드백대로 화면을 다시 짰습니다.
영상통화에 '표정 듣기'를 넣었습니다 — AI가 읽은 상대의 표정을 TTS로 안내합니다.
My Role in the Architecture
팀은 프론트엔드(본인) · 백엔드(Java/MySQL) · AI-RTC(OpenVidu, 표정·안면 인식) 세 파트로 나뉘어 있었습니다.
비장애인용·시각장애인용 두 화면 체계를 포함한 프론트엔드 전체를 혼자 설계·구현했습니다.
OpenVidu 클라이언트 SDK로 세션 연결과 영상·음성 스트림 처리 등 WebRTC 통화 화면을 직접 구현했습니다.
NVDA 스크린 리더기 사용자 기준으로 포커스 이동 순서(컴포넌트 Depth)를 다시 설계했습니다.
AI 파트가 인식한 표정 결과를 TTS·STT로 안내하는 화면 연동 로직까지 직접 붙였습니다.
Stack
Highlights
OpenVidu(WebRTC)로 만든 실시간 영상통화
서비스의 핵심은 시각장애인과 상대방을 실시간으로 잇는 영상통화입니다.
OpenVidu 클라이언트 SDK로 세션 연결과 영상·음성 스트림의 발행(Publish)·구독(Subscribe)을 구현했습니다.
SSE 이벤트가 오면 통화 알림을 띄워 바로 통화를 연결할 수 있게 했습니다.
'표정 듣기' 버튼을 누르면 AI가 상대방의 표정을 인식해 TTS·STT로 안내합니다.
두 가지 화면 설계
비장애인용 화면과 시각장애인용 화면의 UI/UX를 각각 설계했습니다.
키보드와 스크린 리더기(NVDA)만으로 조작하는 사용자 기준으로 컴포넌트 Depth를 다시 짰습니다.
토글 버튼 하나로 두 모드를 손쉽게 전환하도록 구현했습니다.
WCAG AA를 웃도는 명도 대비
저시력자를 위한 KoddiUD 온고딕 서체를 적용했습니다.
Dark-Navy·Dark-Yellow 조합으로 명도 대비율 7.86을 설계했습니다 — WCAG AA 기준(4.5)의 약 1.7배입니다.
실사용자 테스트와 스크린 리더기 대응
복지관을 직접 방문해 프로토타입 피드백을 받고 설계에 반영했습니다.
TabIndex로 Tab 키 접근 순서를, Aria-Label로 각 항목의 안내 문구를 설계해 NVDA가 정확히 읽도록 구현했습니다.
실제 안대를 쓰고 스크린 리더기만으로 사용하며 개선점을 찾았습니다.
Friction & Resolution
1인 프론트라 업무량이 많아, 디자인 완성도까지는 다 챙기지 못했습니다.
모바일 대응도 메인·영상통화 등 핵심 화면에만 적용하는 데 그쳤습니다.
Result
- SSAFY 공통 프로젝트 우수상 — 서울 7반 1위
- SSAFY 우수 UCC 제작
- SSAFY 특화 프로젝트 베스트 멤버 선정 (VODA·HARUMAN)
Next project