AI相談員のリアルタイム映像・音声応答
銀行の営業店の画面に立つAI行員が顧客の言葉を聞き取り、預金・積立や融資といった商品を声と映像で案内するサービスで、顧客の声をサーバーへ送り、AIが作った行員の応答映像を受け取って再生するアプリ側の区間を作りました。顧客が話し終えた後に映像が遅れて始まれば会話ではなく待ち時間になるため、音声を送ってから映像を受け取るまでの遅延を減らすことに集中しました。マイク入力を受けて圧縮し、リアルタイムの接続でサーバーへ流し、戻ってきた映像をすぐ再生する段階を一つずつ分けて設計しました。音声認識と映像合成はサーバーが担い、作業範囲はアプリ側です。
話している間、途切れずに集める音声入力
AI行員アプリは、顧客がマイクに向かって話す声をリアルタイムで受け取り、サーバーへ送るのに適した生の音声データに変換します。話している途中で音が途切れたり遅れたりしないよう、入力をためておくバッファと送信のタイミングを調整しました。音声認識はサーバーで行うため、アプリが取りこぼした音はAIにも届きません。

音声を縮めてリアルタイム接続で流す送信
AI行員アプリは、受け取った生の音声を音声専用の圧縮形式で縮めてサーバーへ送ります。音声認識に必要な品質を保ちながらネットワークで送る量を減らすよう、圧縮の過程とデータのまとまりの流れを整理しました。圧縮した音声は、サーバーと開いたままのリアルタイム接続で流し続けます。接続状態、送信失敗、切断、再接続といった例外も流れの中に組み込みました。

サーバーが作った行員の映像をすぐにつなぐ応答再生
AI行員の答えは、サーバーが作った合成映像として返ってきます。アプリはこの映像を遅延の短いリアルタイム映像伝送方式で受け取り、再生します。映像の中の行員は実在の人物をもとに作った仮想人物で、音声合成と映像合成によって顧客の質問に合わせて話します。顧客が話し終えた後に応答映像が自然につながるよう、映像の受信、再生状態、画面表示をアプリで扱いました。音声を送る側と映像を受け取る側の間で、不要な待ち時間と状態の食い違いを減らすことに集中しました。

マイクから映像まで7段階に分けた処理構造
AI行員の音声・映像処理は、マイク入力、生の音声への変換、音声圧縮、リアルタイム接続での送信、サーバー処理、映像受信、画面再生の7段階でつながります。サーバー処理を除く6段階がアプリ側の仕事で、これらを互いに切り離しておき、問題が起きたらどの段階で起きたかを個別に追えるよう構造を組みました。応答の遅れがそのまま不便につながるサービスなので、段階間の不要な待ちを減らすことが設計の基準でした。

この仕事のポイント
マイク音声を圧縮し途切れなくサーバーへ送るリアルタイム送信
サーバーが作った行員の応答映像を短い遅延で受けてすぐ再生
マイクから映像まで段階を分けて問題の場所を追える処理構造
インサイト
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…



