AI 상담원 실시간 영상·음성 응답
은행 영업점 화면 속 AI 은행원이 고객의 말을 알아듣고 예 · 적금이나 대출 같은 상품을 말과 영상으로 안내하는 서비스에서, 고객의 목소리를 서버로 보내고 AI가 만든 은행원 응답 영상을 받아 재생하는 앱 쪽 구간을 만들었습니다. 고객이 말을 마친 뒤 영상이 늦게 시작하면 대화가 아니라 기다림이 되기 때문에, 음성을 보내고 영상을 받는 사이의 지연을 줄이는 데 집중했습니다. 마이크 입력을 받아 압축하고, 실시간 연결로 서버에 흘려보내고, 돌아온 영상을 바로 재생하는 단계를 하나씩 나눠 설계했습니다. 음성 인식과 영상 합성은 서버가 맡고, 작업 범위는 앱 쪽입니다.
말하는 동안 끊기지 않게 모으는 음성 입력
AI 은행원 앱은 고객이 마이크에 대고 말하는 소리를 실시간으로 받아, 서버로 보내기 알맞은 원음 데이터로 바꿉니다. 고객이 말하는 도중에 소리가 끊기거나 밀리지 않도록 입력을 담아 두는 버퍼와 보내는 타이밍을 조정했습니다. 음성 인식은 서버에서 하기 때문에, 앱이 놓친 소리는 AI도 듣지 못합니다.

음성을 줄여 실시간 연결로 흘려보내는 전송
AI 은행원 앱은 받은 원음을 음성 전용 압축 형식으로 줄여 서버로 보냅니다. 음성 인식에 필요한 품질은 지키면서 네트워크로 보내는 양을 줄이도록 압축 과정과 데이터 묶음의 흐름을 정리했습니다. 압축한 음성은 서버와 열어 둔 실시간 연결로 계속 흘려보냅니다. 연결 상태, 전송 실패, 끊김, 다시 연결하기 같은 예외 상황도 흐름 안에 넣어 구성했습니다.

서버가 만든 은행원 영상을 바로 이어 붙이는 응답 재생
AI 은행원의 대답은 서버가 만든 합성 영상으로 돌아옵니다. 앱은 이 영상을 지연이 짧은 실시간 영상 전송 방식으로 받아 재생합니다. 영상 속 은행원은 실제 사람을 본떠 만든 가상 인물이고, 음성 합성과 영상 합성으로 고객의 질문에 맞춰 말합니다. 고객이 말을 마친 뒤 응답 영상이 자연스럽게 이어지도록 영상 수신, 재생 상태, 화면 표시를 앱에서 다뤘습니다. 음성을 보내는 쪽과 영상을 받는 쪽 사이에서 불필요한 대기와 상태 불일치를 줄이는 데 집중했습니다.

마이크에서 영상까지 일곱 단계로 나눈 처리 구조
AI 은행원의 음성 · 영상 처리는 마이크 입력, 원음 변환, 음성 압축, 실시간 연결 전송, 서버 처리, 영상 수신, 화면 재생의 일곱 단계로 이어집니다. 서버 처리를 뺀 여섯 단계가 앱 쪽 일이고, 이 단계들을 서로 떼어 두어 문제가 생기면 어느 단계에서 생겼는지 따로 추적할 수 있게 구조를 잡았습니다. 응답 지연이 곧 불편으로 이어지는 서비스라, 단계 사이의 불필요한 대기를 줄이는 것이 설계의 기준이었습니다.

이 작업의 포인트
마이크 음성을 압축해 끊김 없이 서버로 보내는 실시간 전송
서버가 만든 은행원 응답 영상을 짧은 지연으로 받아 바로 재생
마이크부터 영상까지 단계를 나눠 문제 위치를 추적하는 처리 구조
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



