한글 입력 방식의 유연성을 높인 검색 시스템 구현하기

한글 입력 방식의 유연성을 높인 검색 시스템 구현하기

검색 시스템을 개발할 때 가장 중요한 것 중 하나는 사용자의 다양한 입력 방식을 얼마나 잘 커버할 수 있느냐입니다. 특히 한글의 경우, 두 가지 주요 입력 방식(한글/영문)이 존재하기 때문에 이를 적절히 처리하는 것이 중요합니다. 이번 글에서는 hangul-js를 활용하여 검색 시스템의 유연성을 높인 구현 방법을 소개하고자 합니다.

문제 상황

사용자들은 한글을 입력할 때 다음과 같은 두 가지 방식을 사용할 수 있습니다

1. 한글 모드로 직접 입력: "안녕하세요"
2. 영문 모드로 입력: "dkssudgktpdy"

대부분의 검색 시스템은 이 중 한 가지 방식만을 지원하거나, 두 가지를 별도로 처리해야 했습니다. 이는 사용자 경험을 저하시키는 요인이 되었죠.

해결 방안

우리는 이 문제를 다음과 같은 방식으로 해결했습니다

1. 키보드 매핑 구현

먼저, 영문자를 한글 자모음으로 변환하는 매핑 시스템을 구현했습니다

class SimpleKoreanConverter {
  private charMap: CharacterMap;

  constructor() {
    this.charMap = {
      r: 'ㄱ',
      R: 'ㄲ',
      s: 'ㄴ',
      // ... 기타 매핑
    };
  }

  public convert(input: string): string[] {
    return Array.from(input).map((char) => this.charMap[char] || char);
  }
}

2. 이중 검색 쿼리 구현

사용자가 입력한 검색어에 대해 두 가지 방식으로 검색을 시도합니다:

1. 원본 검색어로 먼저 검색
2. 결과가 없는 경우, 변환된 검색어로 재검색

const {
  data: originalData,
  isLoading: isOriginalLoading,
} = useQuery({
  queryKey: ['search', debounceValue],
  queryFn: () => getSearchResults(formatNoSpecialChar(debounceValue)),
  enabled: !!debounceValue && !isDebouncing,
});

const convertedSearch = debounceValue
  ? Hangul.assemble(converter.convert(debounceValue))
  : '';

const {
  data: convertedData,
  isLoading: isConvertedLoading,
} = useQuery({
  queryKey: ['search', convertedSearch],
  queryFn: () => getSearchResults(formatNoSpecialChar(convertedSearch)),
  enabled: !isOriginalLoading && !!convertedSearch && originalData?.length === 0,
});

3. 최적화 적용

검색 성능 향상을 위해 다음과 같은 최적화를 적용했습니다:

• debounce를 통한 API 호출 최적화
• 캐싱 전략 적용 (staleTime: 10000, cacheTime: 1000 * 60)
• 불필요한 API 호출 방지 (2글자 미만 검색어 제외)

구현의 장점

1. 향상된 사용자 경험
   • 사용자가 어떤 입력 모드로 검색하든 원하는 결과를 얻을 수 있습니다
   • 입력 모드 전환 없이도 검색이 가능합니다
2. 효율적인 리소스 사용
   • 첫 번째 검색에서 결과가 있으면 추가 검색을 하지 않습니다
   • 캐싱을 통해 서버 부하를 줄입니다
3. 유지보수 용이성
   • 명확한 코드 구조로 추후 수정이 용이합니다
   • 타입스크립트를 활용한 타입 안정성 확보

향후 개선 방향

1. 더 많은 입력 패턴 지원
   • 자음만 입력한 경우의 처리
   • 오타 교정 기능 추가
2. 성능 최적화
   • 서버 사이드 검색 로직 개선
   • 클라이언트 캐싱 전략 세분화

결론

hangul-js를 활용한 유연한 검색 시스템 구현을 통해, 우리는 사용자 경험을 크게 개선할 수 있었습니다. 특히 한글의 특성을 고려한 이중 검색 전략은 검색의 정확도와 편의성을 모두 향상시켰습니다. 앞으로도 지속적인 개선을 통해 더 나은 검색 경험을 제공할 수 있도록 노력하겠습니다.