모든 버그에는 이야기가 있습니다. 여기서는 연쇄적인 React 상태 재렌더링(state re-render) 폭풍을 어떻게 포착했는지, Sentry를 사용하여 1.4GB의 메모리 누수(memory leak)를 어떻게 제거했는지, 그리고 Google AI를 사용하여 8.4초의 진단 지연 시간(latency)을 1.1초로 어떻게 단축했는지에 대한 기술적 분석을 제공합니다.

🏆 코드베이스 조화 복구
Sentry의 실시간 텔레메트리(telemetry)와 Google AI의 구조화된 생성(structured generation)을 결합함으로써, 충돌이 빈번했던 프로토타입을 프로덕션급 임상 AI 제품군으로 전환할 수 있었습니다.

이야기 1: 8초 AI 지연 시간 단축 (Google AI의 최적 활용)

혼돈
멀티모달(Multi-modal) 흉부 방사선 추론 과정에서 8.4초의 첫 번째 토큰 생성 시간(Time-To-First-Token, TTFT) 지연이 발생하였고, 복잡한 ICD-11 심장-신장 대항 지표(cardiorenal contraindications)에 대해 간헐적인 환각 드리프트(hallucination drift) 현상이 나타났습니다.

Google AI가 앱을 변화시킨 방법
우리는 AI 아키텍처를 최신 @google/genai TypeScript SDK로 업그레이드했습니다:

Gemini 2.5 Flash: 빠른 초기 분류(triage) 및 네이티브 구조화된 JSON 스키마 강제 적용(responseMimeType: 'application/json' + responseSchema)을 위해 활용되었습니다.

MedGemma 27B: 시스템 2 사고 체인(System 2 Chain-of-Thought, CoT) 기반의 반사실적 약물 추론(counterfactual drug reasoning)을 위해 활용되었습니다.

MedSigLIP: 흉부 방사선 사진에 대한 관심 영역(Region-of-Interest, RoI) 경계 상자(bounding boxes)를 제공하는 멀티모달 시각적 접지(visual grounding)를 위해 활용되었습니다.

✅ Google AI SDK 구현:
import { GoogleGenAI, Type } from '@google/genai';

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

const response = await ai.models.generateContent({
model: 'gemini-2.5-flash',
contents: [xrayImagePart, clinicalPrompt],
config: {
responseMimeType: 'application/json',
responseSchema: {
type: Type.OBJECT,
properties: {
pulmonaryCongestion: { type: Type.BOOLEAN },
confidenceScore: { type: Type.NUMBER },
counterfactualRenalDose: { type: Type.STRING }
}
}
}
});

입증된 효과 및 벤치마크 (Proven Impact & Benchmarks)

스토리 2: 무한 리렌더링 폭풍 퇴치하기 (Sentry의 최적 활용 사례)

혼돈 (The Chaos)
실시간 의료 원격 측정 (Medical Telemetry) 스트림의 고동시성 (High-concurrency) 테스트 도중, 메모이제이션(Memoization)되지 않은 React useEffect 의존성 루프가 스레드 잠금 현상을 유발했습니다:

• CPU 급증 (CPU Spikes): 컨테이너 스레드가 98~100% 점유율로 잠김.
• 메모리 누수 (Memory Leak): 힙(Heap)이 1.4GB에 도달할 때까지 초당 약 64MB를 할당하여 빈번한 OOM(Out of Memory) 크래시 발생.
• 데이터베이스 부하 (Database Strain): 20분도 채 되지 않아 제한(Throttling)되지 않은 420만 건 이상의 쓰기 작업 발생.

Sentry가 문제를 해결한 방법

1. Sentry 성능 모니터링 (Sentry Performance Monitoring): render_ecg_canvas에 대한 트랜잭션 스팬(Transaction spans)이 500ms 임계값을 초과하는 것을 식별 (평균 842ms의 롱 태스크 (Long tasks) 발생).
2. Sentry 에러 트래킹 (Sentry Error Tracking): 14,000개 이상의 DOM 노드 힙 할당 예외를 하나의 실행 가능한 스택 트레이스 (Stack trace)로 그룹화.
3. 브레드크럼 (Breadcrumbs): useECGStream 내에서 메모이제이션되지 않은 캔버스 버퍼 콜백 (Canvas buffer callbacks)을 정확히 찾아냄.

코드 수정 (The Code Fix)
requestAnimationFrame에 의해 구동되는 제로 할당 (Zero-allocation) useRef 프레임 버퍼를 구현함으로써, 상태 업데이트를 React의 리렌더링 루프로부터 분리했습니다.

❌ 수정 전 (버그가 있는 코드):

useEffect(() => {
...