키 코드 체커

키 코드 체커(Keycode Checker)는 브라우저에서 누른 키보드 키가 JavaScript 내에서 어떤 이벤트 데이터로 인식되는지 즉시 확인할 수 있는 개발자용 도구입니다.

프론트엔드 개발에서는 사용자의 키 입력에 대한 단축키 구현이나 게임 조작 처리 등에서 정확한 키 판정이 요구됩니다. 본 도구를 사용하면 누른 키의 event.key, event.code, event.keyCode 등 주요 속성 값을 한눈에 확인하고 클릭 한 번으로 복사할 수 있습니다. 키보드 배열(JIS나 US 등)에 따른 값의 차이나 Shift, Ctrl과 같은 수식 키 조합 시의 동작도 쉽게 테스트할 수 있습니다.

키보드 입력 기록 확인이나, e.preventDefault()를 활성화했을 때 브라우저 기본 액션(Tab 이동이나 Space 스크롤 등)의 억제 테스트도 브라우저에서 안전하게 실행할 수 있습니다.

event.key

사용자가 실제로 누른 키가 입력하는 문자나 역할을 나타내는 속성입니다. 예를 들어 US 키보드에서 Shift + 1을 누르면 출력되는 문자인 !가 event.key로 가져와집니다. 논리적인 입력 값을 판정할 때 현재 가장 권장되는 속성입니다.

event.code

물리적인 키보드에서 '어느 위치에 있는 키를 눌렀는지'를 나타내는 속성입니다. 키보드의 언어 배열에 관계없이 'A의 키보드 물리 위치'에 있는 키를 누르면 항상 KeyA가 반환됩니다. 게임의 WASD 이동처럼 물리적 배치에 의존하는 조작을 구현할 때 매우 유용합니다.

event.keyCode / event.which

눌린 키에 할당된 시스템 고유의 숫자 코드(예: A라면 65)를 반환하는 속성입니다. 오랫동안 JavaScript 개발에서 사용되어 왔지만, 현재는 권장하지 않는 속성(Deprecated)이 되었습니다. 호환성 확인용으로만 사용해 주세요.

event.location

눌린 키가 키보드의 어느 물리적 영역에 있는지 나타내는 수치입니다. 표준 키(0), 왼쪽 수식 키(1), 오른쪽 수식 키(2), 숫자 패드(3) 등을 구별할 수 있습니다. 좌우 Shift 키를 구별하고 싶을 때 유용합니다.

preventDefault()

이벤트가 발생했을 때 브라우저가 원래 가지고 있는 기본 동작(예: Space 키로 화면을 아래로 스크롤하는 것 등)을 취소하기 위한 JavaScript 메서드입니다.

Q.스마트폰이나 태블릿에서도 사용할 수 있나요?

물리 키보드가 연결되어 있는 경우 정상적으로 작동합니다. 하지만 화면의 소프트웨어 키보드일 경우, OS나 브라우저 구현에 따라 keydown 이벤트가 제대로 발생하지 않거나 모두 같은 키 코드(예: 229)로 반환될 수 있으므로 본 도구는 물리 키보드에서의 사용을 전제로 합니다.

Q.event.key 와 event.code 중 어느 것을 사용해야 하나요?

용도에 따라 다릅니다. 'Enter 키를 눌러서 제출'과 같이 키의 의미나 입력되는 문자 자체를 판단하려면 event.key를 사용합니다. 반면 'W, A, S, D 키로 캐릭터를 이동'처럼 키보드의 물리적인 위치를 기준으로 삼으려면 event.code를 사용하는 것이 베스트 프랙티스입니다.

Q.F5 키나 Ctrl+W 같은 단축키를 막을 수 있나요?

JavaScript의 e.preventDefault()를 사용하더라도 탭 닫기, 창 새로고침, 브라우저 개발자 도구 실행 등 보안이나 OS/브라우저 레벨에서 예약된 강력한 단축키는 완전히 막을 수 없는 경우가 있습니다.

Q.event.keyCode 는 왜 권장되지 않나요?

브라우저나 OS, 키보드 배열에 따라 반환되는 숫자 값이 다를 수 있어 호환성 문제를 일으키기 쉽기 때문입니다. 현재는 event.key 또는 event.code의 사용이 권장됩니다.

Q.입력된 키 정보는 서버로 전송되나요?

전송되지 않습니다. 모든 처리는 브라우저의 JavaScript로 완료되며, 키 입력 기록이 외부 서버로 전송되거나 저장되는 일은 절대 없습니다.

키 코드 확인이 필요한 대표적인 개발 사례를 소개합니다.