한글 IME 상태의 S/N 바코드 입력 보정 스크립트

바코드 리더기로 제품 S/N을 여러 건 입력하다 보면 한/영 입력 상태 때문에 값이 잘못 들어갈 때가 있다. 영문과 숫자로 된 S/N도 Windows IME가 한글 상태이면 한글 자모로 입력될 수 있다.

이 스크립트는 지정한 입력칸의 값을 영문 대문자와 숫자 규칙으로 보정한다. 화면 표시뿐 아니라 폼에 전달되는 input.value도 같은 규칙으로 바꾼다.

입력 보정이 필요한 상황

일반적인 USB·블루투스 바코드 리더기는 스캔한 값을 키보드 입력처럼 PC에 보낸다. 그래서 영문 ACE123이 찍혀야 할 칸에 Windows 입력기가 한글(두벌식)로 되어 있으면 ㅁㅊㄷ123처럼 자모가 그대로 찍히게 된다.

매번 입력 상태를 확인하고 다시 스캔하는 번거로움을 줄이려고 AI의 도움을 받아 스크립트를 작성했고, 실제로 사용했다. 제품 코드나 S/N처럼 영문·숫자 규칙이 분명한 입력칸에서 값이 들어오는 시점에 보정하는 방식이다.

보정 순서

• 한글 자모로 들어온 부분을 영문 키 조합으로 되돌린다.
• 영문 알파벳은 대문자로 통일하고 숫자는 유지한다.
• 공백과 특수문자는 지정한 허용 규칙에 따라 제거한다.
• 보정한 값을 input.value에 다시 넣어 제출값에도 적용한다.

물론 브라우저 스크립트는 사용자 입력 편의를 위한 것이므로, 실제 업무 시스템이라면 서버 쪽에서도 값 형식을 한 번 더 검증하는 게 안전하다.

파일 구성

핵심 로직은 sn-ime-auto-convert.js 파일 하나에 들어 있고, demo.html을 열면 보정 전후 동작을 바로 테스트해 볼 수 있다.

ko-sn-ime-auto-convert/
├─ sn-ime-auto-convert.js   # 입력 보정 핵심 코드
└─ demo.html                # 보정 전후 값을 직접 확인할 수 있는 샘플

배포 파일과 변경 이력은 GitHub 저장소에서 확인할 수 있다.

입력칸에 적용하기

스크립트를 불러온 뒤 바코드 입력칸의 selector를 지정한다.

<script src="./sn-ime-auto-convert.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    applySnImeAutoConvert('#Sno_001, #SnoChange_001');
  });
</script>

여러 입력칸에 적용할 때는 selector 범위를 넓힌다.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    applySnImeAutoConvert('input[id^="Sno_"], input[id^="SnoChange_"]');
  });
</script>

동적으로 만든 입력칸은 DOM에 추가된 뒤 applySnImeAutoConvert()를 다시 호출한다. 저장소 안내에 따르면 이미 적용된 입력칸에는 이벤트를 중복으로 연결하지 않는다.

실제 페이지에서는 직접 입력, 붙여넣기, 바코드 스캔을 각각 확인하고 제출값도 의도한 S/N과 같은지 비교하면 된다.

입력 예시

입력값: ㅁㅊㄷ123
저장값: ACE123

입력값: asdf123
저장값: ASDF123

입력값: A-C E 123
저장값: ACE123

허용 문자와 적용 범위 확인

이 보정기는 영문과 숫자가 기본인 입력칸을 위한 도구다. 일반 문장이나 한글 텍스트 입력칸에 적용하면 정상 한글 입력까지 바꿀 수 있다.

하이픈, 언더스코어, 공백이 S/N 규격에 필요하다면 허용 문자 규칙을 먼저 조정한다. 기본값에서는 필요한 문자가 제거될 수 있다.