개발자가 특수 문자 검색을 위해 매번 Google 검색하는 비효율을 해결하기 위해 Web Worker와 Intersection Observer API를 활용한 SymbolHub 개발

Context

개발자, 디자이너, 기술 작가는 em dash, copyright 기호, shrug emoji 같은 특수 문자가 필요할 때마다 브라우저 탭을 열어 검색했다. 기존 검색 방식은 광고로 가득한 웹사이트에 접속해 페이지 렌더링을 기다린 뒤 문자를 복사해야 했다. 이는 매주 반복되는 작은 마찰이 시간이 지나면서 누적되는 문제였다.

Technical Solution

• 무거운 프레임워크 제거로 초기 로딩 시간 단축: Vanilla HTML, CSS, JavaScript만 사용해 로드 시간을 거의 0에 가깝게 구성
• 검색 성능 최적화를 위한 Web Worker 도입: 문자열 매칭과 정렬 연산을 메인 UI 스레드에서 분리해 입력 필드의 반응성 확보
• 사전 컴파일된 검색 토큰 인덱싱: 수만 개의 Unicode 문자에 대한 이름과 카테고리의 검색 토큰을 미리 계산해 검색 범위 축소
• Intersection Observer API를 통한 가상화: 현재 뷰포트에 보이는 문자 카드만 렌더링하고 스크롤 시 동적으로 교체해 수천 개 DOM 노드의 브라우저 프리징 방지
• Cache API를 활용한 로컬 캐싱: 최적화된 JSON 형식의 문자 데이터를 브라우저에 캐시해 재방문 시 네트워크 요청 제거
• 정적 CDN 호스팅: 전 세계적으로 낮은 레이턴시를 위해 정적 콘텐츠를 CDN을 통해 배포
• Surrogate pair 올바른 처리: Emoji와 복합 기호의 복사 기능 구현 시 JavaScript의 코드 유닛 경계를 정확히 처리해 문자 손상 방지

Key Takeaway

작은 규모의 도구도 처음부터 성능 프로파일링을 실시하면 테스트 데이터셋에서는 보이지 않던 병목을 대규모 실제 데이터에서 미리 발견할 수 있다. 클라이언트 렌더링 병목은 가상화와 Web Worker 분리를 통해 메인 스레드 블로킹 문제를 구조적으로 해결할 수 있다.