키보드 키 확인
누른 키의 key·code 값을 실시간으로 보여줘요.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
키를 눌러도 반응이 없어요
입력칸을 한 번 클릭한 뒤 키를 눌러보세요. 브라우저 단축키는 먼저 처리돼요.
한글 키가 이상해요
한글 입력 상태에서는 다른 값이 나와요. 영문 상태에서 확인해 보세요.
자주 하는 실수
- 숫자로 된 값은 이미 쓰지 않는 표준입니다. 오래된 인터넷 익스플로러에서 늘어진 값으로, W3C는 문자와 물리 위치를 나타내는 다른 두 값을 권장합니다. 숫자로 하드코딩한 이벤트는 지금도 종종 다른 값을 줍니다.
- 문자 값과 위치 값은 서로 다릅니다. 문자는 실제로 눌린 글자, 위치는 키보드에서 누른 자리의 이름입니다. 한영 전환 상태와 무관하게 같은 자리가 필요하면 위치 값을 쓰세요.
- 한글 조합 중에는 키 값이 229로만 올 때가 있습니다. 조합 중인 키 입력은 걸러야 합니다. 조합 상태를 확인하거나 키를 뗄 때의 값으로 처리하는 방식이 안전합니다.
- 본 숫자 키와 오른쪽 숫자 키패드는 다릅니다. 위쪽 1의 위치 값과 오른쪽 키패드 1의 위치 값이 구분됩니다. 이동이나 단축키를 만들 때 키패드를 구분하지 않으면 의도한 키가 눌리지 않습니다.
계산 근거
키보드 입력은 W3C UI Events 규격에서 여러 상태로 표현됩니다. key는 문자와 조작 키를 구분한 값, code는 물리적 키 자리(Digit1, Numpad1, KeyA), keyCode와 which은 레거시 값으로 감쇠 처리됐습니다. 한자판처럼 한영 전환이 걸리는 키보드에서는 code가 일정해 매핑 기준으로 삼기 좋습니다.
실제로 계산해 보면
A 키를 눌렀을 때 세 값은 어떻게 나오나요?
Shift 없이 누르면 문자는 소문자 a, 위치는 KeyA, 레거시 값은 65입니다. Shift를 함께 누르면 문자만 대문자로 바뀌고 나머지 둘은 그대로라 매핑이 흔들리지 않습니다.
한영 전환 키는 어떤 값이 나오나요?
한글 상태에서는 문자가 한, 영문 상태에서는 영이 되고 위치 값은 언제나 동일합니다. 문자로 쳐지지 않는 조작 키는 문자 값이 이름이라 단축키 목록에 그대로 쓸 수 있습니다.
왼쪽과 오른쪽 Shift를 구분하려면?
문자 값은 둘 다 같지만 위치 값이 왼쪽과 오른쪽으로 다릅니다. 두 손에 다른 동작을 배정하는 게임이라면 문자 값이 아니라 위치 값을 비교해야 합니다.
더 궁금한 것
입력창이 있는 화면에서 키가 잡히지 않는 이유는?
포커스가 입력 요소에 있으면 창이 아니라 그 요소가 키 이벤트를 먼저 처리합니다. 삭제와 문자 입력은 입력창의 기본 동작이라 창까지 오지 않습니다. 이벤트를 모두 받고 싶다면 해당 요소의 처리부터 살펴보세요.
터치 전용 화면에서는 이런 값을 어떻게 쓰나요?
터치 이벤트에는 키 값이 없어서 쓸 수 없습니다. 대신 화면 좌표와 터치 지점으로 처리합니다. 물리 키보드를 붙인 경우에는 키 값이 그대로 들어와 같은 방식으로 다룰 수 있습니다.
게임에서 같은 키가 여러 번 실행되나요?
누르고 있는 동안 같은 키가 반복해서 들어올 수 있습니다. 자기 반복을 막으려면 눌린 상태를 따로 저장하고, 상태가 바뀔 때만 한 번 처리하는 방식이 안전합니다. 그것이 없다면 한 번 눌렀는데 여러 번 움직이게 됩니다.
알아둘 경계값
- 패드에서 키를 누르면 기본 동작이 막혀 실제 입력 흐름과 다르게 느껴져요. 게임 매핑 확인용으로만 쓰세요.
- 화면에 마지막 키 하나만 남아 조합키 순서를 추적할 수 없어요. 순서를 볼 때는 누를 때마다 메모하세요.
- 운영체제나 브라우저 선점 키는 측정이 중단되거나 창이 바뀌어요. 기능키 검증은 별도 환경에서 하세요.
- 스페이스바는 키 이름이 공백 한 칸이라 복사하면 빈 값처럼 보여요. 판정은 물리 위치 칸으로 하세요.
- 누르는 순간만 잡히고 떼는 순간은 표시되지 않아요. 누름과 뗌 구분 로직은 별도 테스트가 필요해요.
- 패드를 클릭해 포커스가 빠져 있으면 아무 반응이 없어요. 반응이 없으면 패드를 먼저 클릭하세요.
결과를 믿기 전 확인 목록
- 패드 클릭 후 포커스가 있는지 눌러서 확인하세요.
- 문자 값과 물리 위치 값, 기존 숫자 값을 함께 기록하세요.
- 스페이스와 엔터는 물리 위치 칸으로 판정하세요.
- 떼는 동작 테스트가 필요하면 별도 코드를 작성하세요.
- 시스템 단축키와 겹치는 키는 목록에서 제외하세요.
- 조합 순서는 메모장에 적어가며 한 키씩 누르세요.
- 대소문자 구분이 필요하면 문자 값을 함께 보세요.
- 수식키는 단독 판정과 조합 판정을 나누어 기록하세요.
- 측정값을 상수에 넣기 전 같은 키를 세 번 눌러 일관성을 확인하세요.
자주 묻는 질문
한영키도 잡히나요?
브라우저가 전달하는 범위에서 표시합니다.
모바일에서도 되나요?
물리 키보드가 없는 기기에서는 키 이벤트가 오지 않아요. 블루투스 키보드를 연결하면 확인돼요.