이 영상의 주제
이 영상은 OpenAI가 새롭게 출시한 실시간 음성-대-음성 모델인 gpt-realtime API와 WebRTC 기술을 활용하여 웹 기반 실시간 음성 에이전트를 구축하는 방법을 소개합니다. 기존의 느리고 부자연스러운 다단계 음성 파이프라인(STT -> LLM -> TTS) 대신, 단일 모델과 WebRTC 스트리밍을 통해 약 300ms의 인간 수준 반응 속도를 구현하는 원리를 설명합니다. Zod 스키마를 활용한 실시간 도구 호출(Tool Calling)과 React 상태를 동기화하여 음성으로 여행 예약 폼을 채우는 데모 앱을 직접 구현해 봄으로써, 중급 이상의 웹 개발자가 실질적인 음성 에이전트 서비스를 아키텍처부터 코드 레벨까지 이해하고 도입할 수 있도록 돕습니다.
다루는 기술 스택 / 키워드
- gpt-realtime (OpenAI API)
- WebRTC (RTCPeerConnection, SDP)
- JavaScript / React
- Tool Calling (Function Calling)
- Data Channel (oai-events)
- Signaling Server
- Zod Schema
타임스탬프별 핵심 포인트
| 시간 | 내용 |
|---|---|
| 00:00 | 기존 AI 음성 에이전트의 다단계 파이프라인(STT -> AI -> TTS)으로 인한 지연 시간(2~4초)의 한계 분석 |
| 01:11 | 단일 모델로 오디오 입출력을 즉각 처리하여 지연 시간을 300ms로 단축한 ‘gpt-realtime’ 기술 소개 |
| 01:34 | API 요청 방식이 아닌, 실시간 스트리밍 기술인 WebRTC를 사용하여 전화를 걸듯 소통하는 원리 설명 |
| 02:08 | 사용자의 자연어 음성을 알아듣고 여행 예약 폼을 자동으로 채우는(Form Filling) 데모 앱 시연 |
| 03:49 | 브라우저 환경에서 RTCPeerConnection 생성, 마이크 트랙 추가 및 데이터 채널(oai-events)을 여는 코드 구현 |
| 04:18 | API Key 노출 방지를 위해 자체 서버(프록시)를 통해 OpenAI 서버와 SDP(Offer/Answer) 정보를 교환하는 시그널링 흐름 구성 |
| 04:57 | 세션 업데이트(session.update) 메시지를 통해 시스템 프롬프트 지정, 음성(Marin) 설정 및 Zod 기반의 도구 정의 코드 작성 |
| 05:25 | OpenAI에서 흘러나오는 오디오 스트림을 브라우저 <audio> 태그에 연결하고, 데이터 채널로 수신되는 도구 실행 이벤트 처리 방법 |
| 06:20 | 실시간 채팅 말풍선 렌더링을 위해 입력/출력 텍스트 전사(Transcription) 델타 및 완료 이벤트를 제어하는 방식 설명 |
| 06:44 | gpt-realtime의 가격 구조(대화 분당 약 10~15센트) 및 시스템 프롬프트 캐싱을 통한 요금 절감 팁 제공 |
기본 정보
| 항목 | 내용 | |—|—| | 채널 | 노마드 코더 Nomad Coders | | 카테고리 | 프로그래밍 | | 게시일 | 2026-06-21 | | 영상 길이 | 7:44 | | 처리 엔진 | gemini-3.5-flash | | 원본 영상 | YouTube에서 보기 |