핵심 설명
키보드 문제를 재현할 때는 화면에 나온 문자와 실제 키 위치를 구분해야 합니다. key는 현재 배열과 보조키의 영향을 받은 값이고, code는 키의 물리적 위치를 나타내는 식별자입니다. 예를 들어 같은 위치를 눌러도 언어 배열에 따라 key가 달라질 수 있습니다. 이 도구는 구식 숫자 keyCode 대신 현대적인 이벤트 속성을 보여 줍니다.
- keydown과 keyup의 key 및 code
- 일반·왼쪽·오른쪽·숫자패드 위치
- Shift·Ctrl·Alt·Meta와 반복 플래그
- 이벤트 타임스탬프
사용 방법
- 테스트 영역을 클릭하고 확인할 키를 한 번 누른 뒤 놓습니다. 암호나 개인정보는 입력하지 마세요.
- 이벤트 표의 keydown과 keyup을 비교하고 key와 code가 예상한 값인지 확인합니다.
- 왼쪽·오른쪽 Shift와 숫자패드를 각각 눌러 위치 값을 비교합니다. Shift, Ctrl, Alt, Meta 조합도 별도로 확인합니다.
- 키 하나를 길게 눌러 repeat가 바뀌는지 확인합니다. 최신 이벤트 40개만 화면에 남습니다.
- 필요할 때 현재 JSON 복사를 누르세요. 이벤트 기록 지우기로 초기화하고 Escape 또는 영역 밖 클릭으로 수집을 멈춥니다.
결과 해석
key가 예상과 다르면 운영체제의 입력 언어, 배열과 보조키를 먼저 확인하세요. code가 KeyQ처럼 표시되어도 출력 문자가 반드시 Q인 것은 아닙니다. 위치 값은 일반 0, 왼쪽 1, 오른쪽 2, 숫자패드 3에 대응합니다. 타임스탬프는 브라우저 이벤트의 시간 값이며 실제 시계 시각이나 키보드의 전체 입력 지연이 아닙니다.
측정의 한계
- 브라우저나 운영체제가 가로채는 단축키와 특수 미디어 키는 페이지에 도달하지 않을 수 있습니다.
- 이벤트 기록만으로 전기적 스위치 상태나 펌웨어 결함을 확정할 수 없습니다. IME 조합 중의 key는 평소와 다를 수 있습니다.
문제 해결
아무 기록도 없으면 테스트 영역을 다시 클릭하고 일반 문자 키부터 확인하세요. 문자가 다르면 입력 언어를 확인한 뒤 다른 앱과 비교하세요. 특정 조합만 보이지 않으면 시스템 단축키 예약 여부를 확인하세요. 복사가 차단되면 브라우저의 클립보드 권한과 HTTPS 연결을 확인하거나 화면의 값을 직접 기록하세요.
개인정보 처리
키와 이벤트 기록은 현재 페이지에서 처리되며 서버나 분석 도구로 보내지 않습니다. JSON 복사를 누를 때만 사용자가 선택한 이벤트가 클립보드에 복사됩니다. 복사한 값에는 누른 키가 포함되므로 공유 전에 확인하세요.
브라우저 지원
JavaScript와 KeyboardEvent를 지원하는 현대적인 브라우저에서 사용하세요. 물리 키보드가 가장 비교하기 쉽습니다. 모바일 키보드, IME와 원격 데스크톱은 일부 속성을 다르게 전달할 수 있습니다.
기술 참고 자료
자주 묻는 질문
key와 code는 왜 다른가요?
key는 입력 배열과 보조키를 반영하고, code는 물리적 키 위치를 나타냅니다. 다른 언어 배열에서 두 값이 다른 것은 정상일 수 있습니다.
숫자 keyCode는 왜 없나요?
더 이상 권장되지 않는 속성이기 때문입니다. 새 코드에서는 목적에 맞게 key 또는 code를 사용하고 실제 대상 브라우저에서 확인하세요.
복사한 JSON이 자동으로 전송되나요?
아니요. 복사 버튼은 현재 이벤트를 로컬 클립보드에 넣기 위한 기능입니다. 다른 사람에게 보내려면 사용자가 직접 붙여 넣고 전송해야 합니다.