개발자가 590개 이상의 약초-약물 상호작용 데이터를 정적 HTML 도구로 구현해 의존성 없이 1초 이내 로딩 및 50ms 이내 검색 응답

Context

약초 건강식품과 처방약의 상호작용 정보는 학술지와 FDA 경고에 산재되어 있다. 기존 도구들은 의료 전문가 로그인을 요구하거나 처방약만 지원하고 유료이며 사용성이 떨어진다. 미국과 유럽 성인의 약 70%가 건강식품을 복용하면서도 의사에게 보고하지 않는 상황에서 일반인이 쉽게 접근할 수 있는 정보가 부족했다.

Technical Solution

• 의존성 제거: 순수 HTML/CSS/JavaScript로 구현해 프레임워크, 빌드 단계, npm 패키지 제거
• 클라이언트 검색: Levenshtein 거리 기반 가중치 퍼지 검색으로 오타, 동의어, 영어/스페인어 자연어 처리를 브라우저에서 수행
• 데이터 구조: 47개 약초와 23개 약물 분류 기준으로 590개 이상의 상호작용을 메타데이터(심각도, 메커니즘, DOI, 권장사항)와 함께 JavaScript 객체로 인라인
• 오프라인 지원: 전체 데이터베이스를 gzip 압축 30KB로 압축하고 초기 로드 후 인터넷 없이 검색 가능하도록 설계
• 정적 배포: CDN에 서버 및 데이터베이스 없이 배포해 월별 호스팅 비용 $0 달성

Impact

• 번들 크기: gzip 압축 47KB, 3G 연결에서 1초 이내 로딩
• 검색 성능: 모던 브라우저에서 5ms 이내, 저사양 기기에서도 50ms 이내 응답
• 모바일 트래픽: 첫 달 분석 결과 83% 모바일 사용률
• 데이터 신뢰성: 모든 상호작용을 최소 2개 이상의 문헌(PubMed, Natural Medicines, FDA, EMA)으로 검증

Key Takeaway

보건 콘텐츠의 핵심은 코드보다 데이터 큐레이션에 있으며, 모바일 우선 설계와 완전한 인용 근거 제시가 건강 도구의 신뢰성을 결정한다. 의존성 제거는 장기 유지보수 부담을 거의 영점 수준으로 낮추면서 사용자 신뢰를 동시에 확보할 수 있다.