피드로 돌아가기
Dev.toFrontend
원문 읽기
Zero API, Vanilla JS로 구현한 키워드 매칭 기반 유머 엔진
"Be Anything You Want" — OK, Here's How (Technically)
AI 요약
Context
복잡한 AI 모델이나 외부 API 의존성 없이 즉각적인 응답을 제공하는 경량 시스템 필요. 사용자 입력값에 따라 기술적으로만 정답인 위트 있는 답변을 매칭하는 로직 설계.
Technical Solution
- HTML, CSS, vanilla JavaScript만 사용하는 Zero Dependency 아키텍처 채택
- 모든 답변 데이터를
answers.js파일 하나에 집중시킨 로컬 데이터 관리 방식 - 입력값의 소문자 변환 및 문장 부호 제거를 통한 데이터 정규화 과정 수행
- Word-boundary Regex를 활용하여 입력 키워드와 44개 카테고리 풀을 대조하는 매칭 알고리즘 구현
- 매칭 실패 시 24개의 범용 답변(Fallback)을 무작위로 반환하는 예외 처리 구조
- GitHub Pages를 이용한 정적 웹 사이트 배포로 서버리스 환경 구축
Key Takeaway
복잡한 문제 해결을 위해 반드시 고도화된 AI나 외부 인프라가 필요한 것은 아니며, 명확한 규칙 기반의 데이터 구조 설계만으로도 충분한 사용자 경험을 제공할 수 있음.
실천 포인트
초경량 인터랙티브 기능 구현 시 API 호출 대신 로컬 JSON/JS 파일 기반의 키워드 매칭 시스템 검토