Echo

Problem

욕설이나 공격적인 언어는 온라인뿐 아니라 음성 대화 환경에서도 빠르게 퍼질 수 있지만, 사용자가 자신의 언어 습관을 실시간으로 인지하기는 어렵습니다. 해커톤이라는 제한된 시간 안에서 음성을 입력받고, 서버의 감지 결과를 앱 화면에 즉시 반영하며, 그룹 단위로 사용 패턴을 확인할 수 있는 모바일 경험을 만들어야 했습니다.

실시간 음성 처리 앱은 일반적인 CRUD 앱보다 연결 상태와 리소스 관리가 중요했습니다. WebSocket 연결이 끊기거나, 마이크 권한이 거부되거나, 녹음 리소스가 정상적으로 정리되지 않으면 사용자는 앱이 동작하는지 신뢰하기 어렵습니다.

또한 단순히 감지 여부만 보여주는 것은 행동 변화를 만들기에 부족했습니다. 사용자가 그룹을 만들고, 초대 코드로 참여하고, 금지어를 관리하고, 통계 화면에서 자신의 언어 사용 패턴을 확인할 수 있는 구조가 필요했습니다.

Approach

Expo Router 기반으로 홈, 그룹, 생성, 통계 탭을 나누고 모바일 앱의 주요 흐름을 빠르게 구성했습니다. 홈 화면에서는 큰 토글 버튼을 중심으로 녹음 시작 및 중지 상태를 표현하고, 연결 상태와 감지 결과가 즉시 보이도록 했습니다.

실시간 감지는 WebSocket 기반으로 구현했습니다. 사용자 ID를 포함해 서버에 연결하고, 서버에서 전달되는 텍스트, 감지 여부, 패턴, 신뢰도, 에너지 정보를 파싱해 화면 상태에 반영했습니다. 연결 타임아웃, 연결 종료 코드, 비정상 종료, 서버 오류를 구분해 로그와 상태를 남기도록 했습니다.

음성 입력은 expo-av를 활용해 녹음 흐름을 구성했습니다. 녹음 시작 및 중지 API를 호출하고, 녹음 리소스와 WebSocket 연결이 꼬이지 않도록 정리 함수를 분리했습니다. 연결이 끊기거나 중지될 때는 오디오 컨텍스트, processor, stream track, 녹음 객체를 정리해 반복 실행 시 문제가 쌓이지 않도록 했습니다.

WebSocket 안정성도 개선했습니다. 단순 ping 대신 keep_alive 형태의 구조화된 메시지를 사용하고, 종료 시에는 close 메시지를 보내도록 설계했습니다. 비정상 종료 시에만 재연결을 시도하고, 음성 활동 감지를 통해 의미 있는 볼륨 이상일 때만 오디오 데이터를 전송하도록 정리했습니다.

그룹 화면에서는 사용자가 참여한 그룹 목록을 불러오고, 초대 코드로 그룹에 참여할 수 있게 했습니다. 그룹별 금지어 목록을 조회하고, 금지어 추가 및 삭제 모달을 연결했습니다. 욕설 사용량이 많은 사용자와 적은 사용자를 정렬해 보여주고, 상위 일부만 먼저 보여준 뒤 확장할 수 있게 구성했습니다.

통계 화면은 React Native SVG를 활용해 오늘 및 이번 주 데이터를 시각화했습니다. 시간대별 및 요일별 그래프, 많이 감지된 단어 목록, 주요 지표 카드를 통해 사용자가 자신의 언어 사용 패턴을 한눈에 볼 수 있게 했습니다.

Result

Echo는 실시간 음성 감지, WebSocket 연결 상태, 그룹 관리, 금지어 관리, 통계 시각화를 포함한 모바일 앱으로 완성되었고, 하이톤 11회에서 우수상을 수상했습니다.

홈 화면에서는 녹음 상태와 감지 결과를 즉시 확인할 수 있고, 그룹 화면에서는 초대 코드 기반 참여와 금지어 관리를 수행할 수 있습니다. 통계 화면에서는 시간대별 및 요일별 사용 패턴과 주요 단어를 시각적으로 확인할 수 있습니다.