안내: 본 프로젝트는 카카오 Kanana-o API(베타)의 스트리밍 응답을 활용해, 디지털 포렌식 관점의 분석 HUD를 데모 형태로 구현한 결과물입니다.
Kanana-O Watcher는 카카오톡 스크롤 영상/캡처 등 디지털 증거의 조작 가능성을 빠르게 점검하기 위한 AI 디지털 포렌식 HUD입니다.
브라우저 기반의 경량 로컬 분석(Δy)과 Kanana-o API의 스트리밍 추론을 결합한 하이브리드 파이프라인을 제공합니다.
-
하이브리드 포렌식 분석 파이프라인 (Multi-Mode 지원)
- [Video Mode] 시각적 조작 탐지 (Δy 엔진): 브라우저 내장
<video>및<canvas>를 활용하여 영상 프레임 간 휘도(Luma) 변화량을 계산해 스티칭(Stitching)이나 컷 편집이 의심되는 구간을 빠르게 식별합니다. 이후 Kanana-O API가 폰트 불일치, 대화 시간차 등 시각적/물리적 조작 의심 정황을 분석하여 보조합니다. - [Chat Image Mode] 언어적 지문 대조 (Linguistic Forensics): 특정인과의 과거 정상 대화 캡처본과 현재 의심되는 대화 캡처본을 다중 업로드하여, Kanana-O AI가 '어투 변화', '사용 어휘', '대화 뉘앙스와 맥락'을 대조 분석합니다. 이를 통해 사칭/해킹 여부나 다중 계정 조작(1인 2역) 가능성을 추정합니다.
- [Audio Simulation Mode] 음성 포렌식 데모 (Simulation): 현재 버전은 업로드한 오디오 파일을 서버로 전송/분석하지 않고, 보이스피싱/딥페이크 “판별 시나리오”를 데모용 텍스트 스트리밍으로 제공합니다. (옵션:
NEXT_PUBLIC_ENABLE_AUDIO_FEATURES활성화 시 Kanana-o의 오디오(TTS) 응답 재생 및 텍스트 동기화 지원 - 단, 브라우저 정책 및 API 과금 제약으로 프로덕션 환경에서는 기본 비활성화 권장)
- [Video Mode] 시각적 조작 탐지 (Δy 엔진): 브라우저 내장
-
고대비 다크/라이트 모드 포렌식 HUD (UI/UX)
- 관제 대시보드 스타일의 UI.
- 다국어 UI: 한국어/영어/일본어(프롬프트 언어 동기화).
- 테마 및 언어 설정 로컬 스토리지 영구 저장(Persist).
- 모바일 반응형 UI (스크롤 방지 100vh 뷰, 카메라 직접 촬영 지원, 로그 숨김 토글).
- 결함 격리 (Fault Isolation): React Error Boundary를 적용하여 개별 컴포넌트 오류 발생 시 앱 전체의 크래시를 방지합니다.
-
로컬 캐싱 및 안전한 폴백(Fallback) (UX)
EvidenceCache: 영상이나 이미지 지문 캐싱에 최신 네이티브 파일 시스템인 **OPFS(Origin Private File System)**를 도입하여 메모리 오버헤드를 없앴으며, 지원하지 않는 브라우저에서는 IndexedDB로 매끄럽게 폴백(Fallback)됩니다.- 429(Too Many Requests) 등 서버 제한 응답 시 Demo 모드(Mock SSE)로 폴백합니다. (IP Rate Limit 차단은 Demo로 우회하지 않음)
-
API Key 커스텀 입력 및 오디오-텍스트 동기화 (Jitter Buffer)
- 사용자 입력 키 기반 실행: API Key는 앱 접속 시 모달 UI에서 사용자가 직접 입력합니다. 이를 통해 베타 테스터별 독립적인 API 사용 환경을 제공합니다. 키를 입력하지 않으면 Demo 모드(Mock SSE)로 동작하며, 실제 API 호출 없이 스트리밍 플로우를 확인할 수 있습니다.
- Kanana-o API의 오디오 PCM 데이터를 Web Audio API로 재생하며, 재생 시간에 맞춰 스트리밍 텍스트가 타이핑되는 동기화 버퍼(
JitterBuffer)를 적용하여 네트워크 지연에 대응합니다. - Zod Fallback: AI의 불완전한 JSON 응답(Hallucination)에 대비한 스키마 방어 로직을 통해 UI 크래시를 원천 차단합니다.
-
Vercel 무료 배포 및 보안 최적화 (Edge Runtime & Security)
- 서버리스 10초 타임아웃 우회:
export const runtime = 'edge'및 SSE(Server-Sent Events) 스트리밍 방식을 결합하여 긴 AI 추론 응답을 끊김 없이 수신합니다. - 어뷰징 방어 (Zero-Cost / Best Effort): Origin/Referer/Host 검증과 In-Memory Rate Limiting을 통해 특정 IP의 무분별한 요청을 완화합니다. (※ 단, Vercel Edge 환경 특성상 Isolate(노드) 간 메모리가 공유되지 않으므로, 완벽한 글로벌 차단을 위해서는 Redis 등의 외부 KV 스토리지 연동이 필요합니다.)
- CSP 강화: nonce 기반 CSP(Next Proxy)를 적용해
script-src 'unsafe-inline'없이도 동작하도록 구성했습니다. - 다중 실패 병목 제거: Promise.allSettled를 통해 다중 이미지 업로드 중 단일 파일 오류가 발생해도 정상 파일 분석은 안전하게 진행됩니다.
- 서버리스 10초 타임아웃 우회:
- Framework: Next.js 16 (App Router, Edge Runtime)
- Language: TypeScript
- Styling: Tailwind CSS (v4), Framer Motion (애니메이션)
- Icons: Lucide React
- State Management: Zustand
- Data Validation: Zod
- Local Forensics: HTML5 Canvas, Video API
- Testing: Jest, Playwright
- PWA: @ducanh2912/next-pwa
cp .env.example .env.local
npm install
npm run dev- API Key는 앱 접속 시 모달에서 입력합니다. 키가 없으면 Demo 모드(Mock SSE)로 동작합니다.
- 프로덕션 실행:
npm run build && npm run start - 코드 품질 검사:
npm run lint
- 지연 시간 최적화:
stream=true옵션과 모델 고유의 저지연 파라미터를 결합하여 실시간성 확보 (프로젝트 기본 설정). - 멀티모달 응답 제어: 오디오 사전 설정(preset)을 활용한 화자 커스터마이징 지원.
- 엔드포인트 관리: API 엔드포인트 및 인증 키는 보안을 위해 환경변수(
.env)로 분리하여 관리하며, 서버 사이드 프록시를 통해 클라이언트 노출을 차단함.
- PWA 구성이 포함되어 있으며, 브라우저에서 선택적으로 설치할 수 있습니다.
src/app/: Next.js App Router 기반의 메인 UI (관제 대시보드page.tsx)src/app/api/kanana/stream/: Vercel Edge Runtime 기반의 Kanana-O API 스트리밍 프록시 엔드포인트src/proxy.ts: 요청 전 처리(Next Proxy). CSP nonce 등 보안 헤더를 동적으로 설정src/components/: 모듈화된 HUD UI 컴포넌트 (VideoViewer,RiskGaugePanel등)src/core/forensics/: 로컬 비전 분석 엔진 (videoAnalyzer.ts)src/core/kanana/: AI 응답 파싱(SSE) 및 Zod 검증 스키마src/core/cache/: 로컬 스토리지 캐시 유틸리티src/hooks/: 포렌식 분석 비즈니스 로직 커스텀 훅 (useForensicAnalysis.ts)src/utils/: 오디오 재생기(audioPlayer.ts), 타이핑 싱크 맞춤(jitterBuffer.ts), 이미지 압축(imageCompressor.ts) 유틸리티src/store/: Zustand 글로벌 상태 관리 (hudStore.ts)e2e/: Playwright E2E 테스트 코드src/__tests__/: Jest 단위 테스트 코드
본 프로젝트는 보안 및 디지털 포렌식 관제 시연용으로 개발되었습니다.