한글 자동완성을 위한 정규식

October 09, 2020

한글 자동완성을 단순 문자열 비교로 구현하면 다음과 같이 검색어를 입력하면 검색 결과가 반복적으로 나타나고 사라지는 것을 볼 수 있습니다.

t.indexOf('') !== -1

t.search(/(?:)/) !== -1

한글은 자음, 중성, 종성의 조합으로 구성되어 있어 사용자가 입력하는 동안 완성될 문자가 무엇인지 알 수 없기 때문에 위와 같은 현상이 발생합니다.

korean-regexp 라이브러리

자연스러운 한글 자동완성을 쉽게 적용하기 위해 한글 정규식 생성 라이브러리를 만들었습니다. 위 예제의 오른쪽 데모는 이 라이브러리로 동작합니다.

사용법은 다음과 같습니다.

npm install korean-regexp

import { getRegExp } from 'korean-regexp';
// '개울가'를 입력하는 과정 중 정규식의 변화
getRegExp('ㄱ');  // /[가-깋]/i
getRegExp('개');  // /[개-갷]/i
getRegExp('갱');  // /(갱|개[아-잏])/i
getRegExp('개우');  // /개[우-윟]/i
getRegExp('개울');  // /개(울|우[라-맇])/i
getRegExp('개욹');  // /개(욹|울[가-깋])/i
getRegExp('개울가');  // /개울[가-갛]/i

구현 방법 설명

모든 경우에 적용 가능한 정규식은 만들 수 없었습니다. 대신 사용자가 입력한 마지막 문자가 한국어인 경우 마지막 문자를 초성, 중성, 종성로 분리하여 각 시나리오에 대한 정규식을 만들 수 있습니다.

초성, 중성, 종성으로 분리하는 방법은 이름 궁합 계산기 게시물을 참고하세요.

1. 초성으로 끝나는 경우

초성으로 끝나는 경우는 마지막 글자를 초성 검색으로 간주하여 처리합니다.

// 예시) 어학연ㅅ → 어학연[사-싷] : 어학연수

2. 중성으로 끝나는 경우

중성으로 끝나는 경우는 초성 검색과 비슷하지만 이미 입력한 모음으로 범위가 좁혀집니다.

// 예시) 아이언매 → 아이언[매-맿] : 아이언맨

단 모음 중에서도 ㅗ, ㅜ, ㅡ는 복합 모음이 될 수 있으므로 각각 ㅗ ~ ㅚ, ㅜ ~ ㅟ, ㅡ ~ ㅢ까지 범위를 넓혀서 작성합니다.

// 예시) 유학우 → 유학[우-윟] : 유학원

3. 종성으로 끝나는 경우

종성은 마지막 글자의 종성이거나 다음 글자의 초성일 수 있습니다.

// 예시) 민 → (민|미[나-닣]) : 민주주의, 미네랄

또한 종성이 복합 자음인 경우는 종성과 다음 문자의 초성으로 사용될 수도 있습니다.

// 예시) 해맑 → 해(맑|말[가-깋]) : 해맑은, 해마고기

위의 구현 방법으로 정규식을 생성하는 실제 코드는 여기에서 확인할 수 있습니다.