약초 박사가 Vanilla JavaScript로 7문항 퀴즈를 구축해 PubMed 기반 약초 추천과 약물상호작용 검사를 18KB 웹앱으로 구현

Context

Botánica Andina 프로젝트는 약초-의약품 상호작용 데이터베이스(503+ 상호작용)를 보유했으나, 사용자들이 "어떤 약초를 먹어야 할까"라는 실질적인 추천 기능을 요청했다. 기존 보충제 추천 퀴즈들은 판매 목적의 페이지로 위장한 형태였고, 근거 없는 추천과 부실한 금기사항 표시가 문제였다.

Technical Solution

• 안데스 약초 12종을 6개 건강 축(에너지, 면역, 소화, 스트레스, 인지, 호르몬)으로 벡터화: 각 약초마다 0~1 범위의 점수를 부여해 사용자 답변과의 내적(dot product) 계산 수행
• 사용자 입력을 "필요 벡터"로 변환: 7문항(건강 목표, 복용 약물, 식이 선호도, 연령대, 활동 수준)에서 수집한 답변을 각 건강 축에 대한 선호도로 매핑
• 약물상호작용 사전 필터링: 추천 전 사용자의 약물 목록을 약초별 상호작용 데이터베이스와 비교해 심각한 상호작용 약초는 결과에서 완전 제거(경고만으로 끝내지 않음)
• 정규화를 통한 과다 추천 방지: 초기 버전에서 maca가 모든 축에서 중간 점수를 받아 과다 추천되는 문제를 해결하기 위해 상위 순위만 높은 신호를 가진 약초가 상단에 올라오도록 조정
• 의료 명시성 강화: 금기사항 체크를 능동적으로 실행하는 코드 로직으로 구현해 체크박스 등으로 우회 불가능하게 설계

Impact

• 평균 완성율 89% (전체 7문항 완료)
• 상위 권장 약초: Maca 28%
• 상호작용 경고 발생 세션: 12%
• 페이지 가중치: 18KB (전체 약초 데이터 포함)
• Lighthouse 점수: 4개 카테고리 모두 100/100

Key Takeaway

프레임워크 없는 Vanilla JavaScript로 정적 데이터 기반의 제한된 규모 프로젝트를 구현하면 복잡도를 줄이고 성능을 극대화할 수 있다. 의료·건강 도구에서는 법적 책임 회피 텍스트보다 코드 레벨에서 위험한 추천을 원천 차단하는 능동적 설계가 핵심이다.