[HTML/JS] input 태그 한글/영문 입력 제어하기 (ime-mode의 몰락과 최신 자바스크립트 대체 방법)

회원가입 폼에서 사용자 입력 제어의 필요성
웹 사이트에서 회원가입 폼이나 로그인 화면을 만들 때 프론트엔드 개발자가 반드시 신경 써야 하는 부분이 있습니다. 바로 사용자의 키보드 입력 상태(한글/영문)를 제어하는 것입니다.

예를 들어 '아이디'를 입력하는 칸에는 영문과 숫자만 들어가야 하고, '이름'을 입력하는 칸에는 한글이 바로 입력되는 것이 사용자 경험(UX) 측면에서 훨씬 편리합니다. 사용자가 일일이 '한/영' 키를 누르는 수고를 덜어줄 수 있기 때문이죠.

과거에는 이를 CSS 속성 하나로 아주 쉽게 제어했지만, 웹 표준이 발전하면서 그 방법이 크게 달라졌습니다. 오늘은 과거의 방식이었던 ime-mode에 대해 알아보고, 현대 웹 브라우저(크롬, 사파리 등)에서 이를 대체할 수 있는 최신 자바스크립트 구현 방법까지 상세히 알아보겠습니다.

---

1. 과거의 영광: CSS ime-mode 속성 (현재는 사용 금지 🚨)
2010년대 초반, 인터넷 익스플로러(IE)가 시장을 장악하던 시절에는 CSS의 ime-mode 속성만으로 키보드의 한/영 상태를 쥐락펴락할 수 있었습니다.

과거에 주로 사용되었던 옵션은 다음과 같습니다.

style="ime-mode: active" : 인풋 창에 포커스가 가면 디폴트로 '한글'이 먼저 입력되도록 강제하는 모드입니다. (이름 입력칸에 주로 사용)

style="ime-mode: inactive" : 디폴트로 '영문'이 먼저 입력되도록 하는 모드입니다. (아이디, 이메일 입력칸에 주로 사용)

style="ime-mode: disabled" : 한글 입력을 아예 막아버리고 무조건 영문(또는 숫자)만 입력되도록 강제합니다.

style="ime-mode: auto" : 현재 사용자의 키보드 세팅 상태를 그대로 유지합니다.

[과거 사용 예시]

아이디: <input type="text" name="login_id" style="ime-mode:disabled" />

왜 지금은 쓰면 안 될까요?
ime-mode는 마이크로소프트가 IE를 위해 만든 비표준 속성이었습니다. 세월이 흘러 웹 표준(W3C)이 확립되면서, 사용자의 시스템(키보드)을 웹 브라우저가 강제로 제어하는 것은 보안과 호환성 측면에서 좋지 않다는 판정을 받았습니다.
결국 현재 크롬(Chrome), 엣지, 맥OS 사파리 등 대부분의 모던 브라우저에서는 이 속성을 완전히 무시(Deprecated)하므로 코드를 넣어도 전혀 작동하지 않습니다.

 

---

2. 현대의 해결책: JavaScript 정규표현식(Regex) 활용하기
그렇다면 최신 웹 환경에서는 아이디 칸에 한글이 입력되는 것을 어떻게 막을 수 있을까요? 정답은 자바스크립트(JavaScript)의 이벤트 리스너와 정규표현식을 사용하여, 사용자가 허용되지 않은 문자를 입력하는 순간 즉시 지워버리는 방식을 사용하는 것입니다.

아래는 실무에서 가장 많이 쓰이는 '영문과 숫자만 입력 가능하도록' 강제하는 최신 코드입니다.

[최신 적용 코드]

<input type="text" id="userId" placeholder="영문과 숫자만 입력하세요"> <script> // 인풋 요소를 가져옵니다. const inputId = document.getElementById('userId'); // 'input' 이벤트: 사용자가 타이핑을 할 때마다 실시간으로 작동합니다. inputId.addEventListener('input', function(event) {          // 정규표현식: 영문 소문자(a-z), 대문자(A-Z), 숫자(0-9)가 '아닌' 모든 문자([^...])를 찾습니다.     const regex = /[^a-zA-Z0-9]/g;          // 입력된 값 중에 정규식에 해당하는 문자(한글, 특수기호 등)가 있다면 빈 문자열('')로 교체하여 지워버립니다.     if (regex.test(event.target.value)) {         event.target.value = event.target.value.replace(regex, '');     } }); </script>

코드 상세 분석
2-1 사용자가 <input> 창에 타이핑을 합니다.

2-2 addEventListener('input', ...)이 글자가 입력되는 매 순간(실시간)을 캐치합니다.

2-3 /^[a-zA-Z0-9]/g 정규식을 통해 방금 입력된 글자가 영문이나 숫자인지 검사합니다.

2-4 만약 사용자가 한글을 입력했다면, .replace() 함수가 이를 감지하여 한글을 텍스트 창에서 즉시 삭제해 버립니다. 결과적으로 사용자 눈에는 영문과 숫자만 입력되는 것처럼 완벽하게 통제됩니다.

 

---

3. 보너스 팁: 모바일 환경을 위한 HTML5 pattern 속성
자바스크립트 외에도, 최신 HTML5에서 제공하는 속성을 활용하면 모바일 스마트폰 환경에서 아주 유용합니다. 스마트폰은 인풋 타입에 따라 올라오는 키보드 자판의 종류(숫자패드, 영문패드 등)가 달라지기 때문입니다.

 

<input type="text" pattern="[A-Za-z0-9]+" title="영문과 숫자만 입력하세요.">

이렇게 pattern 속성을 함께 걸어두면 폼 전송(Submit) 시 자체적으로 유효성 검사까지 해주어 더욱 안전한 웹페이지를 만들 수 있습니다.