Echo

문제

음성에서 감지한 욕설을 사용자가 바로 인지하고, 그룹과 통계 화면에서 언어 사용 습관을 살펴보는 해커톤 앱을 개발했습니다. 제 담당은 Expo 기반 화면과 그룹 기능 연결, WebSocket 상태와 오디오 리소스 처리였습니다.

마이크 권한, 서버 연결과 녹음 상태는 서로 다른 시점에 바뀝니다. 연결이 끊겼는데 화면은 녹음 중으로 남거나, 중지한 뒤에도 마이크와 전송 작업이 계속 실행되지 않도록 시작·중지·정리 순서를 구성해야 했습니다.

선택한 방법

녹음 상태와 서버 감지 결과를 화면에 연결

Expo Router로 홈, 그룹, 생성과 통계 화면을 나눴습니다. 홈에서는 녹음 토글, 연결 상태와 감지 결과를 함께 보여주고 서버의 텍스트·감지 여부·신뢰도·에너지 응답을 화면 상태로 변환했습니다.

WebSocket의 연결 타임아웃과 오류, 정상 종료와 비정상 종료를 구분했습니다. 연결이 끊기면 녹음 상태와 리소스를 정리하고, 사용자가 기능을 켜 둔 상태의 비정상 종료에 재연결을 시도하도록 했습니다. 정리 과정이 다시 종료 API를 호출하는 순환도 피하도록 함수를 나눴습니다.

실행 환경에 맞춘 오디오 수명 관리

브라우저에서는 Web Audio 입력을 Int16 데이터로 변환해 WebSocket으로 전송했습니다. 네이티브 환경에서는 expo-av로 녹음을 시작·중지하고 연결에 녹음 상태를 전달하는 경로를 구성했습니다.

중지와 연결 해제에서는 processor, AudioContext와 stream track, 녹음 객체와 타이머를 각 환경에 맞게 정리했습니다. 권한 확인과 녹음 시작 API, 연결 확인을 순서대로 처리하고, 중간 단계가 실패하면 화면의 토글 상태를 되돌렸습니다.

그룹과 통계 인터페이스

참여한 그룹 조회, 초대 코드 참여와 그룹 생성 화면을 연결했습니다. 그룹별 금지어 조회·추가·삭제와 멤버 목록의 정렬·확장 UI도 구성했습니다.

통계 화면은 샘플 데이터를 바탕으로 React Native SVG의 시간대·요일별 그래프, 지점 선택과 툴팁, 주요 단어와 지표 카드를 구현했습니다. 좁은 화면에서도 시간대별 값을 탐색할 수 있도록 가로 스크롤과 선택 영역을 구성했습니다.

확인한 결과

음성 감지 결과 표시, 연결·녹음 상태, 그룹 관리와 통계 인터페이스를 하나의 앱 흐름으로 연결했고, 제11회 하이톤에서 우수상을 수상했습니다.

짧은 개발 기간에 화면을 구성하면서도 마이크 권한, 연결 종료와 리소스 정리처럼 실시간 인터페이스의 실행 순서를 함께 다룬 경험입니다.