Vanilla JS와 CIEDE2000으로 구현한 고정밀 색상 인식 게임

Context

단순 RGB 거리 계산 방식의 색상 유사도 측정은 인간의 실제 시각 인지 체계와 불일치함. 프레임워크 도입 시 불필요한 복잡도가 증가하고 초기 로딩 속도가 저하되는 구조적 한계 존재.

Technical Solution

• 인간의 색채 인지 특성을 반영한 CIEDE2000 알고리즘 기반의 고정밀 색상 차이 계산 로직 구현
• S-curve 수식을 적용하여 deltaE 값에 따른 가중치 기반 점수 산정 체계 설계
• 빌드 단계와 번들러를 제거한 Vanilla HTML/CSS/JS 구성으로 런타임 오버헤드 최소화
• Cloudflare Workers와 D1(SQLite)를 조합한 Edge 기반의 서버리스 아키텍처 채택
• navigator.language 기반의 자동 언어 감지 및 i18n 인터페이스 구현
• 임베디드 브라우저의 Clipboard API 미지원 문제를 해결하기 위해 textarea 기반의 Legacy 복사 방식 병행 적용

Impact

• 프론트엔드 전체 파일 크기를 Unminified 기준 50KB 미만으로 유지

Key Takeaway

단순한 DOM 조작 중심의 서비스에서는 프레임워크보다 Vanilla JS가 추론 가능성과 성능 면에서 유리함. 도메인 특성에 맞는 정교한 수학적 모델(CIEDE2000) 선택이 사용자 경험의 질을 결정함.