본문 바로가기

로딩 중...


키보드 테스트는 화면에 실제 키보드 자판을 띄워 놓고, 키를 누르면 그 키가 자판 위에서 눌린 것으로 표시해 주는 도구입니다. 어떤 키가 안 눌리는지, 새로 산 키보드의 모든 키가 제대로 동작하는지, 특정 키가 다른 키로 잘못 들어가지는 않는지 눈으로 바로 확인할 수 있습니다. 한 번 눌러 본 키는 색이 옅게 남아, 아직 확인하지 않은 키와 구분됩니다.

예전에 중고로 산 기계식 키보드를 받았는데, 오른쪽 Shift가 가끔 안 먹는 느낌이었습니다. 문서를 쓰다 보면 대문자가 안 눌리는데 그게 손 문제인지 키 문제인지 구분이 안 되더군요. 좌우 Shift는 브라우저가 event.code로 ShiftLeft·ShiftRight를 따로 잡기 때문에, 자판에서 왼쪽만 켜지고 오른쪽은 반응이 없는 걸 보고 나서야 오른쪽 Shift 접점이 나간 걸 확인했습니다. 그때부터 키가 의심되면 이 화면을 열어 하나씩 눌러 봅니다.

사용 방법

지원하는 형식

입력은 물리 키보드로 누르는 모든 키입니다. 문자·숫자·기능키(F1~F12)·방향키·넘패드는 물론, 좌우가 나뉜 Shift·Ctrl·Alt도 각각 구분해 표시합니다. 화면 자판이 실제 108키 배열과 같은 자리에 떠 있어, 어느 키가 눌렸는지 위치로 바로 알 수 있습니다.

  1. 페이지를 열면 바로 키 입력을 받습니다. 클릭할 필요 없이 아무 키나 누르면 그 키가 화면 자판 위에서 강조됩니다. Ctrl+Shift+S처럼 여러 키를 함께 눌러도 눌린 키가 모두 동시에 켜집니다.

    키보드 테스트-guide-1

  2. 키보드의 모든 키를 하나씩 눌러 보세요. 눌러 본 키는 옅은 색으로 남고, 끝까지 색이 바뀌지 않는 키가 고장 났거나 인식되지 않는 키입니다. 처음부터 다시 점검하려면 오른쪽 위 '다시 테스트'를 누르세요.

    키보드 테스트-guide-2

자주 묻는 질문

keyCode는 deprecated인데 왜 아직 보여주나요?

event.keyCode는 웹 표준에서 폐기(deprecated)됐지만, 오래된 라이브러리나 레거시 코드가 여전히 이 숫자값으로 키를 비교하기 때문에 디버깅할 때 확인이 필요합니다. 그래서 값은 보여주되 deprecated 표시를 달아 뒀습니다. 새로 짜는 코드라면 물리 키 위치를 나타내는 event.code나 입력 문자를 나타내는 event.key를 쓰는 게 맞습니다.

event.key와 event.code는 뭐가 다른가요?

event.key는 실제로 입력된 문자로, 자판 배열·Shift·입력 언어가 반영됩니다(같은 키라도 'a'와 'A'가 다르게 들어옴). event.code는 키의 물리적 위치라 자판 배열과 무관하게 항상 같은 값(예: 'KeyA')이 들어옵니다. 단축키 매칭에는 code, 텍스트 입력 처리에는 key가 보통 적합합니다.

Ctrl+S를 눌렀는데 브라우저 저장 창이 안 떠요.

가운데 캡처 영역에 포커스가 있는 동안에는 테스트하려는 단축키가 브라우저 기본 동작(저장·인쇄·페이지 스크롤 등)을 건드리지 않고 화면에만 기록되도록 막아 둡니다. 영역 바깥을 한 번 클릭해 포커스를 해제하면 모든 단축키가 원래대로 동작합니다. 특정 페이지 전체에서 키를 가로채는 방식이 아니라 이 테스트 영역에 한정됩니다.

휴대폰에서도 쓸 수 있나요?

블루투스·USB 등 물리 키보드를 연결하면 정상적으로 값이 잡힙니다. 다만 스마트폰 화면(가상) 키보드는 대부분의 브라우저에서 event.key가 'Unidentified', keyCode가 229로만 들어와 어떤 키를 눌렀는지 개별 구분이 되지 않는 한계가 있습니다. 이 도구를 포함한 모든 키 이벤트 뷰어에 공통되는 브라우저 제약입니다.