개발자가 592개 상호작용 데이터를 브라우저에 내장해 서버 API를 완전히 제거하고 클라이언트 사이드 검색을 0.5ms 이내로 구현

Context

기존 건강 정보 앱들은 사용자 검색 쿼리가 모두 서버를 거쳐 HIPAA, GDPR 규제 대상이 되고 있었다. 약물-허브 상호작용 정보 조회 시 사용자의 건강 상태(예: 당뇨병, 우울증)가 서버 로그와 데이터베이스에 기록되는 프라이버시 문제가 발생했다.

Technical Solution

• 592개 약물-허브 상호작용 데이터를 JavaScript 상수로 정의해 단일 HTML 파일에 내장하고 GitHub Pages에 배포
• Fuzzy 매칭 알고리즘 구현: 접두사 정확 매칭(100점) → 포함 매칭(80점) → 단어 시작 매칭(60점) 방식으로 우선순위 결정
• 유니코드 정규화(NFD) 및 발음 부호 제거로 스페인어 입력값 처리: 'maca'와 'máca' 동시 매칭
• 상호작용 데이터에 근거 수준 메타데이터 추가: Clinical(임상 시험), Pharmacological(약학적 기전), Theoretical(이론적), Traditional(전통 의학) 분류
• 서비스 워커 구현으로 오프라인 지원 및 캐싱 기능 제공

Impact

• 전체 배열 스캔(592개 항목) 0.08ms, 퍼지 매칭 + 정렬 + 슬라이스 0.12ms, DOM 업데이트 0.3ms로 총 키스트로크당 0.5ms 달성
• API 왕복(200ms 기준) 대비 400배 빠른 응답 속도 실현
• 농촌 페루 3G 환경에서 800ms+ 필요한 API 방식 대비 현저히 우월한 성능
• 전체 앱 + 592개 상호작용 데이터 gzip 압축 후 127KB 크기

Key Takeaway

건강 데이터 같은 민감한 정보를 다루는 참조용 데이터베이스(약물 상호작용, 용량 계산기)는 서버 API를 제거하고 클라이언트 사이드 아키텍처를 도입하면 프라이버시 규제 부담과 네트워크 레이턴시를 동시에 해결할 수 있다. 데이터 품질 관리(최소 2개 출처 교차 검증, 약학자 검토)와 근거 수준 표기가 의료 정보 도구의 신뢰성 핵심이다.