내가 SilentEar를 만든 방법 — 청각 장애인 사용자를 위한 실시간 AI 접근성 에이전트, Gemini Live API와 함께

발행: 1개월 전 (2026년 3월 16일 오전 05:39 GMT+9)

12 분 소요

원문: Dev.to

Source: Dev.to

왜 이걸 만들었는가

제 아들은 선천적으로 청각 장애를 가지고 태어났습니다. 그가 학교에서 파키스탄 수화(PSL)를 배우기 시작하면서, 저는 그와 함께 기본 훈련을 시작했습니다. 이 과정을 통해 청각 장애인과 그 가족에게 일상이 얼마나 고립되고 위험할 수 있는지 보게 되었습니다:

그룹 상황에서 무시당하거나 고립된 느낌
청인과 원활하게 소통하기 어려움
중요한 환경 알림(화재 경보, 문 두드림, 아기 울음 등)을 놓침

AI가 크게 발전했음에도 불구하고, 대부분의 접근성 도구는 여전히 단순 음성‑텍스트 전사에 의존합니다. 전사는 소리가 긴급함을 나타내는 맥락을 놓칩니다. 아들의 경험과 Gemini Live API의 강력함에 영감을 받아, 저는 청각 장애 사용자가 실제로 필요로 하는 형식(촉각 피드백, 화면 플래시, 시각 수화)으로 듣고, 해석하며, 생명을 구하는 신호를 전달하는 에이전트를 만들기로 했습니다.

SilentEar가 하는 일

SilentEar는 주변 오디오를 지속적으로 모니터링하고 의미를 추출하여 실시간으로 사용자에게 알림을 제공합니다.

핵심 기능	작동 방식
환경 소리 감지	Gemini Live API가 양방향 오디오를 스트리밍하고, 함수 호출(`trigger_alert`)이 맞춤 알림(개 짖는 소리, 초인종, 사이렌, 이름 호출 등)을 트리거합니다.
문맥 인식 전사	Gemini 3 Flash가 잡음이 섞인 말을 정제하여 깔끔한 문장으로 만들고 장면 정보를 추가합니다.
시각적 수화 지원	SignMoji – 알림과 함께 표시되는 수화 비디오 라이브러리입니다. 사용자는 비디오 업로드, URL, 웹 검색을 통해 맞춤 SignMoji를 추가할 수 있습니다.
양방향 통신	AI 기반 Voice Deck이 텍스트‑음성 변환을 제공하며, 스마트하고 문맥 인식 구문 예측을 수행합니다 (Gemini 3 Flash).
보호자 대시보드	신뢰할 수 있는 연락처가 원격으로 실시간 알림, 장치 상태 및 기록을 확인할 수 있습니다.

아키텍처 개요

프론트엔드

Framework: React 19 + TypeScript (PWA)
Styling: Tailwind CSS
Audio processing: Web Audio API + local FFT for ultra‑low‑latency alarm detection

백엔드

Runtime: Node.js + Express on Google Cloud Run
Streaming: WebSocket proxy that forwards PCM audio (16 kHz) to Gemini Live API
AI integration: @google/genai SDK – live audio streaming, function calling (trigger_alert), and REST calls to Gemini 3 Flash for transcript refinement & scene analysis

데이터 및 미디어

서비스	역할
Supabase (PostgreSQL + Realtime + Storage)	사용자 프로필, 커스텀 SignMoji 라이브러리, 트리거 정의, 보호자 동기화
Cloud Firestore	알림 기록, 디바이스 상태, 트리거 구성
Google Cloud Run	Express + WebSocket 백엔드 호스팅, Gemini 3 Flash 처리용 서버‑사이드 REST 엔드포인트 실행

오디오 흐름

Device Microphone → PCM Audio (16 kHz) → WebSocket → Cloud Run → Gemini Live API
                                                                      ↓
                                 Haptic + Visual Alerts ← Function Call (trigger_alert)

Source: …

Gemini Live 함수 호출

키워드 매칭만을 사용하는 기존 방식과 달리, SilentEar는 Gemini에게 사용자가 정의한 카테고리를 인식하는 trigger_alert 도구를 제공합니다. 모델이 일치하는 소리나 구문을 감지하면 이 도구를 호출해 즉시 장치에 알림을 보냅니다.

const triggerTool: FunctionDeclaration = {
  name: 'trigger_alert',
  description: 'Call this when an environmental sound or keyword matches alert categories.',
  parameters: {
    type: Type.OBJECT,
    properties: {
      alert_id: {
        type: Type.STRING,
        description: 'The ID of the alert to trigger.'
      },
      context: {
        type: Type.STRING,
        description: 'Short summary of what was heard.'
      }
    },
    required: ['alert_id']
  }
};

결과: Gemini는 TV에서 들리는 개 짖는 소리와 문 앞에 실제로 있는 개를 구분하여 오경보를 크게 줄입니다.

Gemini 3 Flash 향상

기능	이점
장면 분석	주기적인 요약 (“두 사람이 근처에서 대화하고 있습니다. 누군가 당신의 이름을 언급했습니다.”)
전사 정제	끊어진 조각들을 깔끔하고 읽기 쉬운 문장으로 변환합니다
트리거 자동 발견	주변 패턴을 분석하고 사용자에게 새로운 알림 카테고리를 제안합니다

이 모든 기능은 Cloud Run에서 가벼운 REST 엔드포인트로 실행되어 모바일 클라이언트를 빠르고 반응성 있게 유지합니다.

전체 스택 다이어그램 (단순화)

+----------------+      WebSocket      +----------------+      Gemini Live API
|  Mobile Device | ──────────────────► |  Cloud Run     | ──────────────────► |
|  (React PWA)   |                     |  Express WS    |                      |
+----------------+                     +----------------+                      |
        │                                   │                                 |
        │                                   ▼                                 |
        │                         +----------------+                         |
        │                         | Gemini 3 Flash|                         |
        │                         +----------------+                         |
        │                                   │                                 |
        ▼                                   ▼                                 ▼
   Haptic / Visual Alerts          Refined Transcripts               Scene Summaries

시작하기 (빠른 시작)

레포지토리 복제

git clone https://github.com/your‑username/silent‑ear.git
cd silent-ear

환경 변수 설정 (.env.local)

GOOGLE_API_KEY=your_google_api_key
SUPABASE_URL=...
SUPABASE_ANON_KEY=...
FIRESTORE_PROJECT_ID=...

로컬에서 실행

# Frontend
npm install && npm run dev

# Backend
cd backend && npm install && npm start

배포 (선택 사항) – 백엔드를 Cloud Run에, 프런트엔드를 Firebase Hosting 또는 기타 정적 사이트 호스트에 푸시합니다.

마무리 생각

SilentEar는 context‑aware AI가 전사(transcription)를 넘어 청각 장애인 사용자를 위해 세상을 진정으로 해석할 수 있음을 보여줍니다. Gemini Live의 스트리밍 + 함수 호출 및 Gemini 3 Flash의 장면 인텔리전스를 활용하여, 우리는 사용자를 안전하고 연결된 상태로 유지하는 시기적절한 멀티모달 알림을 제공합니다.

협업, 테스트, 또는 플랫폼 확장에 관심이 있으시면, 이슈를 열거나 직접 연락해 주세요.

트리거 구성

Gemini Live API

실시간 양방향 오디오 스트리밍 및 도구 호출

Gemini 3 Flash

장면 인텔리전스, NLP 후처리

Cloud Build

자동 CI/CD 파이프라인 (Docker 빌드 → 배포)

자동 배포

배포는 단일 cloudbuild.yaml 파일을 통해 완전히 자동화됩니다:

steps:
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/silentear-backend', '.']
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/silentear-backend']
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args: [
      'run', 'deploy', 'silentear-backend',
      '--image=gcr.io/$PROJECT_ID/silentear-backend',
      # …additional flags…
    ]

단일 gcloud builds submit 명령으로 Docker 이미지를 빌드하고 Cloud Run에 배포합니다—수동 단계가 전혀 없습니다.

SilentEar – 단순 데모가 아님

SilentEar는 실제 청각 장애 사용자를 위해 제작된 프로덕션 수준의 앱으로, 다음과 같은 기능을 제공합니다:

맞춤형 트리거 – 사용자는 고유한 진동 패턴과 색상으로 알림 단어(초인종, 화재, 아기, 자신의 이름 등)를 직접 정의합니다.
수화 비디오 – 알림에 ASL, BSL, PSL 수화 비디오 시연을 포함할 수 있습니다.
SignMoji – 사용자가 수화 비디오를 녹화, 검색하거나 AI 생성 아이콘과 연결할 수 있는 동반 수화 라이브러리이며, 기기 간 동기화됩니다.
Voice Deck – AI 기반 문구 제안을 제공하는 텍스트‑투‑스피치 도구로, 청각 장애 사용자가 기기를 통해 “말”할 수 있게 합니다.
보호자 대시보드 – 가족 구성원이 Supabase 실시간 구독을 통해 알림을 실시간으로 모니터링합니다.
오프라인 모드 – 클라우드가 이용 불가능할 때 브라우저 Speech Recognition API로 대체됩니다.
다중 언어 – 전사 처리에 10개 언어를 지원합니다.

“특히 SignMoji 통합이 얼마나 매끄러운지에 대해 매우 자부심을 느낍니다. 사용자가 웹을 즉시 검색하고, 자신만의 수화 비디오를 녹화하며, 이를 트리거 시스템에 안전하게 동기화할 수 있게 함으로써 플랫폼이 개인적이고 문화적으로 의미 있게 됩니다. Gemini Live 함수 호출을 통한 초저지연 알림 구현은 실제 테스트에서 혁신적이라고 느껴집니다.”

기술 하이라이트 및 학습 내용

Web Audio API 및 실시간 스트리밍 – 최신 브라우저에서 실시간 스트리밍의 제약과 Web Audio API에 대한 깊은 경험을 얻음.
접근성 우선 개발 – 청각 장애 문화의 뉘앙스를 배움: 전사만으로는 충분하지 않으며, 환경 인식, 시각 신호, 햅틱, 수화 등을 결합해야 진정한 포용이 가능함.

극복한 과제

Cloud Run에서 WebSocket 세션 관리 – Cloud Run의 요청 기반 스케일링에도 불구하고 안정적이고 장기 연결을 보장함.
오디오 포맷 호환성 – 브라우저는 오디오를 Float32 PCM으로 캡처하지만 Gemini는 특정 포맷을 요구함. 실시간 PCM 인코더를 구현하여 오디오를 변환하고 청크화해 최적의 스트리밍을 구현함.

내가 SilentEar를 만든 방법 — 청각 장애인 사용자를 위한 실시간 AI 접근성 에이전트, Gemini Live API와 함께

왜 이걸 만들었는가

SilentEar가 하는 일

아키텍처 개요

프론트엔드

백엔드

데이터 및 미디어

오디오 흐름

Gemini Live 함수 호출

Gemini 3 Flash 향상

전체 스택 다이어그램 (단순화)

시작하기 (빠른 시작)

마무리 생각

트리거 구성

Gemini Live API

Gemini 3 Flash

Cloud Build

자동 배포

SilentEar – 단순 데모가 아님

기술 하이라이트 및 학습 내용

극복한 과제

관련 글

왜 오픈소스 AI 도구가 조용히 승리하고 있는가

트라비고

신뢰 부채: AI 생성 코드베이스에 숨겨진 프로덕션 위기

전체 Agentic 배포 파이프라인 실행: Scaffold에서 Live CloudFront까지

왜 이걸 만들었는가

SilentEar가 하는 일

아키텍처 개요

프론트엔드

백엔드

데이터 및 미디어

오디오 흐름

Gemini Live 함수 호출

Gemini 3 Flash 향상

전체 스택 다이어그램 (단순화)

시작하기 (빠른 시작)

마무리 생각

트리거 구성

Gemini Live API

Gemini 3 Flash

Cloud Build

자동 배포

SilentEar – 단순 데모가 아님

기술 하이라이트 및 학습 내용

극복한 과제

관련 글

왜 오픈소스 AI 도구가 조용히 승리하고 있는가

트라비고

신뢰 부채: AI 생성 코드베이스에 숨겨진 프로덕션 위기

전체 Agentic 배포 파이프라인 실행: Scaffold에서 Live CloudFront까지

Gemini Live 함수 호출

Gemini 3 Flash 향상

Gemini 3 Flash