ryong.logryong.log
2023년 10월 19일·읽는 데 약 1분

음성인식 기반 스마트 민원서식 키오스크 서비스 개발 및 운영

관련 글

OpenRun

2023. 10. 12.

Yarn Berry 도입하기

2023. 11. 16.

OpenClaw를 활용한 hotfix 대응구축팀 설계

2026. 3. 6.

스마트 민원서식 키오스크 서비스란?

음성 인식을 통한 검색, 서식 작성, 스크린 리딩을 지원하는 배리어프리 키오스크 서비스를 개발하였습니다. 사용자는 음성을 통해 전입신고, 출생 신고 등의 민원 서식을 작성할 수 있습니다. 음성 챗봇을 이용하여 어려운 단어나 주소를 검색할 수 있으며, 작성한 민원 서식은 자동으로 관리자 시스템으로 전달되어 간편하게 접수를 진행할 수 있습니다. 정부 마이데이터와 연동하여 인증 후 간편하게 내 정보(이름, 주민번호, 가족 관계 등)를 불러올 수 있습니다

크롬-키오스크 모드를 활용하여 키오스크에 포팅하였습니다. 해당 서비스는 제주도청과 성동구청 및 사회복지관에 도입되어 현재까지 운영 중에 있습니다.

성동구 - 더불어 행복한 스마트포용도시 성동

성동구청 홈페이지에 방문하신 것을 환영합니다.

S

sd.go.kr/main/contents.do

↗

기술스택

  • 코어 : React JavaScript
  • 상태 관리 : React Redux
  • 스타일링 : Styled Components

기술적 고민과 러닝 포인트

1. 음성 챗봇 검색 도입

민원 서식에는 어려운 용어들이 많아 서식 작성에 어려움이 있을 수 있다고 판단하였고, 음성 챗봇 검색 기능을 도입하였습니다. 실제 시각 장애인 테스터를 모집하여 키오스크 사용 패턴을 확인하였습니다. 일반 사용자와는 다른 검색 패턴을 보여 해당 패턴을 고려하여 검색 서비스를 구성하였습니다.

임베디드 시스템에서 서버를 거쳐 넘어온 음성 rms값을 이용하여 음성 발화에 따른 파형 애니메이션을 구현하였습니다(canvas api). 녹음된 음성은 소켓 통신으로 서버에 전달되어 분석됩니다.

2. 웹 접근성 고려

시각 장애인을 위한 스크린 리딩 기능을 탑재하였기 때문에 인클루시브한 디자인이 필요하였습니다. 시맨틱 태그를 적극적으로 이용하였고, 시맨틱 태그의 적용이 어려운 부분에 한해서 aria-* 속성을 사용했습니다. aria-* 속성을 사용하여 구현한 경우, tabIndex 설정과 키보드 이벤트(예: tab push를 통한 focus 이동) 핸들링을 충분하게 고려하였습니다.

접근성 테스트는 w3c 툴과 크롬의 lighthouse를 이용하였고, UX/UI 팀의 디자인 미팅에 개발 측 대표로 지속적으로 참여하였습니다.

  • 음성인식 기반 스마트 민원서식 키오스크 서비스 개발 및 운영
  • 스마트 민원서식 키오스크 서비스란?
  • 기술스택
  • 기술적 고민과 러닝 포인트
  • 1. 음성 챗봇 검색 도입
  • 2. 웹 접근성 고려