키보드 이벤트 로거.
브라우저의 원시 키보드 이벤트를 보여주는 진단 대시보드입니다. 이벤트 핸들러를 디버깅하거나 특정 키 속성을 확인하려는 개발자에게 유용합니다.
실시간 이벤트
| 이벤트 | Key | Code | KeyCode | Location | 보조키 | 타임스탬프 |
|---|---|---|---|---|---|---|
| 아직 기록된 키보드 이벤트가 없습니다. 캡처 대상에 포커스를 맞추고 키를 눌러보세요. | ||||||
기록하기 전에 확인하세요
- 캡처 상자에 포커스 맞추기먼저 클릭하거나 Tab을 눌러 포커스를 맞추세요 — 포커스가 맞춰지기 전에는 어떤 이벤트도 기록되지 않습니다.
- 테스트마다 로그 지우기새로운 키를 테스트하기 전에 로그를 초기화하면 중복 이벤트를 확인하기 쉬워집니다.
- 타임스탬프 확인하기한 번 눌렀는데 keydown이 몇 밀리초 간격으로 두 번 발생한다면, 실수가 아니라 채터링을 일으키는 스위치를 가리킵니다.
이벤트 로거는 어떻게 작동하나요
- 1
캡처 영역에 포커스를 맞추세요. 위 상자를 클릭하거나 Tab을 눌러 포커스를 맞추세요. 키보드 이벤트를 수신 대기 중임을 알리는 상태 텍스트로 바뀝니다.
- 2
아무 키나 눌러보세요. 모든 keydown과 keyup 이벤트가 key, code, keyCode, location, 보조키, 타임스탬프 등 원시 속성과 함께 기록됩니다. 표는 실시간으로 업데이트되며, 새 이벤트가 맨 위에 추가됩니다.
- 3
로그를 관리하세요. "로그 지우기" 버튼으로 표를 초기화하거나, "CSV로 내보내기"로 모든 이벤트를 다운로드해 스프레드시트나 디버깅 도구에서 분석해 보세요.
키보드 이벤트 속성 이해하기
key는 키가 실제로 생성하는 문자입니다(예: "a", "A", "1"). 이는 키보드 레이아웃과 Shift, Alt 같은 보조키의 활성화 여부에 따라 달라집니다. 프랑스어 AZERTY 키보드에서는 맨 왼쪽 문자 키가 "q" 대신 "a"를 생성합니다.
code는 레이아웃과 무관한 물리적 키입니다(예: "KeyA", "Digit1", "Enter"). 같은 물리적 키를 누르면 레이아웃이나 보조키 상태와 관계없이 항상 동일한 code가 반환됩니다.
keyCode는 현대적인 key와 code 속성이 등장하기 전에 사용되던 레거시 숫자 코드입니다(예: A 키는 65). 브라우저마다 값이 일관되지 않고 국제 키보드나 특수 키에서 신뢰할 수 없었기 때문에 현재는 사용이 권장되지 않습니다. 대신 code나 key를 사용하세요.
location은 키보드에서 중복되는 키를 구분합니다. 표준 키는 location 0을, 왼쪽 보조키(Shift, Ctrl, Alt)는 1을, 오른쪽 보조키는 2를, 숫자패드 키는 3을 보고합니다. 로거는 이를 "Standard", "Left (Mod)", "Right (Mod)", "Numpad"라는 알기 쉬운 레이블로 표시합니다.
보조키 플래그는 이벤트가 발생할 때 Ctrl, Shift, Alt, Command/Windows가 눌려 있었는지를 나타내는 불리언 속성입니다 — ctrlKey, shiftKey, altKey, metaKey. 이들은 자유롭게 조합됩니다: Ctrl+Shift+A를 누르면 ctrlKey와 shiftKey가 모두 true로 설정됩니다.
repeat은 키를 누르고 있을 때 반복되는 keydown 이벤트(자동 반복)가 발생하면 true가 됩니다. 첫 번째 keydown은 repeat: false이며, 키를 계속 누르고 있으면 이후의 keydown들은 repeat: true가 됩니다. 이 로거는 keydown과 keyup만 표시하므로, 동일한 항목이 연달아 몰려 있는 것을 보고 반복 입력되는 키를 확인할 수 있습니다.
누구를 위한 이벤트 로거인가요
키 핸들러 디버깅
커스텀 키보드 인터랙션을 만드는 웹 개발자는 어떤 이벤트가 어떤 순서로 발생하는지 정확히 확인하고, 전체 이벤트 객체 속성을 검사해 사용자가 누르는 키에 핸들러가 올바르게 반응하는지 확인할 수 있습니다.
키 채터링 감지
고장 난 스위치는 한 번의 입력으로 두 개의 keydown 이벤트를 발생시키기도 합니다(채터링). 타임스탬프를 지켜보면 빠르게 중복되는 입력을 발견하고 이를 특정 물리 키로 추적할 수 있습니다 — 이는 하드웨어 마모나 점검이 필요한 스위치의 신호입니다.
알 수 없는 키 식별
키보드에서 낯선 레이블이나 미디어 기호가 붙은 키를 발견했나요? 여기서 눌러보고 code와 key 속성을 확인해 어떤 이벤트가 발생하는지 알아보거나, 이를 애플리케이션이나 게임 설정에 매핑해 보세요.
리매핑과 보조키 확인
키보드 리매핑 소프트웨어나 OS 수준의 키 바인딩을 테스트해 눌린 키가 예상한 code와 보조키 조합을 생성하는지 확인하세요. AltGr 등 국제 보조키가 올바르게 인식되는지도 확인할 수 있습니다.
키보드 이벤트 용어집
key- 키 입력으로 생성되는 문자로, 키보드 레이아웃과 보조키의 영향을 받습니다 — 예: "a", "A", "1", "!", "é".
code- 레이아웃과 무관한 물리적 키 위치입니다 — 예: "KeyA", "Digit1", "Enter", "Space". 레이아웃이나 보조키와 관계없이 항상 동일합니다.
keyCode(사용 중단)- 레거시 숫자 코드입니다(예: A 키는 65). 브라우저마다 값이 일관되지 않고 국제 키보드에서 신뢰할 수 없으므로 새 코드에서는 사용하지 마세요.
location- 키의 물리적 위치입니다: 0 = 표준, 1 = 왼쪽 보조키, 2 = 오른쪽 보조키, 3 = 숫자패드. 왼쪽 Shift와 오른쪽 Shift, 숫자패드 키와 일반 키를 구분합니다.
repeat- 키를 누르고 있을 때 반복되는 keydown 이벤트(자동 반복)가 발생하면 true가 되는 불리언 플래그입니다. 첫 번째 keydown은 false이며, 키가 계속 눌려 있으면 이후 값은 true가 됩니다.
- 보조키 플래그 (
ctrlKey,shiftKey,altKey,metaKey) - 이벤트가 발생할 때 Ctrl, Shift, Alt, Command/Windows가 눌려 있었는지를 나타내는 불리언 플래그입니다. 키 조합의 경우 여러 플래그가 동시에 true가 될 수 있습니다.
키보드 이벤트 로거 FAQ
key와 code의 차이는 무엇인가요?
key는 키보드가 실제로 생성하는 문자입니다(예: 'a', 'A', '1', '!'). 이는 키보드 레이아웃과 Shift 같은 보조키가 눌려 있는지에 따라 달라집니다. code는 레이아웃과 보조키에 무관한 키의 물리적 위치입니다(예: 'KeyA', 'Digit1') — 지역이 달라도 같은 물리적 키를 누르면 항상 동일한 code가 반환됩니다. 국제 키보드에서는 code는 그대로 유지되지만 key는 달라집니다.
keyCode란 무엇이고 왜 사용이 중단되었나요?
keyCode는 각 키에 할당된 레거시 숫자 코드입니다(예: A 키는 65). 현대적인 key와 code 속성이 등장하기 전에 사용되었으며, 브라우저마다 값이 일관되지 않고 국제 키보드나 특수 키에서 신뢰할 수 없었기 때문에 사용이 중단되었습니다. 물리적 키 위치에는 code를, 생성되는 문자에는 key를 대신 사용하세요.
키 채터링(한 번 눌렀는데 두 번 입력되는 현상)은 어떻게 감지하나요?
키 채터링은 한 번의 키 입력이 중간에 keyup 없이 두 개 이상의 keydown 이벤트를 발생시킬 때 일어납니다. 로거에서 같은 code를 가지고 매우 짧은 시간 차(보통 50ms 미만)로 발생하는 중복 keydown 항목을 확인하세요. 키가 지속적으로 채터링을 일으킨다면 해당 스위치의 하드웨어 문제일 수 있습니다. 일부 키보드나 드라이버는 디바운스를 설정할 수 있으니 키보드의 펌웨어나 소프트웨어를 확인해 보세요.
로거가 제 키 입력을 저장하거나 업로드하나요?
아니요. 모든 기록은 브라우저 안에서만 이루어집니다. 입력한 내용은 서버로 전송되거나 업로드, 저장, 기록되는 일이 기기 밖에서는 전혀 없습니다. 페이지를 새로고침하면 로그가 완전히 사라집니다. 이 로거는 개발자를 위한 진단 도구이며, 사용자의 개인정보와 데이터는 전송되지 않습니다.
Fn 키나 미디어 키 같은 일부 키가 로그에 나타나지 않는 이유는 무엇인가요?
Fn 키와 미디어·볼륨·밝기 전용 키의 상당수는 브라우저가 이벤트를 받기 전에 키보드 펌웨어나 운영체제가 처리합니다. 그래서 로거가 기록할 것이 없습니다. 이는 결함이 아니라 정상입니다. 캡처 상자를 클릭해 포커스를 준 뒤에도 일반 키에서 keydown이 전혀 발생하지 않는다면, 오히려 스위치 고장이나 연결 단선을 의심해야 합니다.