[keydown과 keyup 이벤트] 표현 다듬기와 맞춤법 교정

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK

Author: Violet-Bora-Lee

2-ui/3-event-details/7-keyboard-events/article.md

@@ -40,17 +40,17 @@
 | `key:Shift+Z`|`Z` (대문자)          |`KeyZ`        |
 
 
-여러 언어를 오가며 작업하는 사용자라면 다른 언어로 전환했을 때 `"Z"`와 전혀 다른 글자가 입력됩니다. 이렇게 입력된 글자가 `event.key` 값이 됩니다. 반면 `event.code`는 언제나 `"KeyZ"`로 같습니다.
+여러 언어를 오가며 작업하는 사용자라면 다른 언어로 전환하고 `key:Z`를 누르면 `"Z"`와 전혀 다른 글자가 입력됩니다. 이때는 실제 입력된 글자가 `event.key` 값이 됩니다. 반면 `event.code`는 언제나 `"KeyZ"`로 같습니다.
 
 ```smart header="\"KeyZ\"와 그 밖의 키 코드"
-모든 키에는 키보드 위 위치에 따라 정해지는 코드가 있습니다. 키 코드는 [UI 이벤트 코드 명세](https://www.w3.org/TR/uievents-code/)에 기술되어 있습니다.
+모든 키에는 키보드 위치에 따라 정해지는 코드가 있습니다. 키 코드는 [UI 이벤트 코드 명세](https://www.w3.org/TR/uievents-code/)에 기술되어 있습니다.
 
 예시를 살펴봅시다.
 - 글자 키의 코드는 `"Key<글자>"` 형태입니다. `"KeyA"`, `"KeyB"` 등이 있습니다.
 - 숫자 키의 코드는 `"Digit<숫자>"` 형태입니다. `"Digit0"`, `"Digit1"` 등이 있습니다.
 - 특수 키의 코드는 키 이름 그대로입니다. `"Enter"`, `"Backspace"`, `"Tab"` 등이 있습니다.
 
-널리 쓰이는 키보드 자판 배열이 여러 종류 있는데 명세는 배열별 키 코드를 제공합니다.
+널리 쓰이는 키보드 자판 배열 몇 가지에 대한 키 코드는 명세에서 확인할 수 있습니다.
 
 더 많은 코드가 궁금하다면 [명세의 알파벳·숫자 절](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section)을 읽거나 위 [실험용 미니 데모](#keyboard-test-stand)에서 직접 키를 눌러 보세요.
 ```
@@ -71,7 +71,7 @@
 
 `event.code`는 정확히 어떤 키가 눌렸는지 특정한다는 점에 주목하세요. 예를 들어 대부분의 키보드엔 `key:Shift` 키가 왼쪽과 오른쪽에 하나씩 있습니다. `event.code`는 둘 중 어느 쪽이 눌렸는지 알려주고 `event.key`는 그 키의 '의미'('Shift'라는 사실)를 담당합니다.
 
-단축키 `key:Ctrl+Z`(Mac에선 `key:Cmd+Z`)를 처리하고 싶다고 가정하겠습니다. 대부분의 텍스트 에디터는 이 조합에 '실행 취소' 동작을 연결해 놓았습니다. `keydown`에 리스너를 설정하고 어떤 키가 눌렸는지 검사하면 단축키를 처리할 수 있습니다.
+단축키 `key:Ctrl+Z`(Mac에선 `key:Cmd+Z`)를 처리하고 싶다고 가정하겠습니다. 대부분의 텍스트 에디터는 이 단축키를 누르면 '실행 취소'가 되게 해줍니다. `keydown`에 리스너를 설정하고 어떤 키가 눌렸는지 검사하면 우리도 단축키를 처리해 실행 취소 기능을 구현할 수 있습니다.
 
 여기서 고민이 하나 생깁니다. 리스너에서 검사해야 할 값은 `event.key`일까요, `event.code`일까요?
 
@@ -95,7 +95,7 @@ document.addEventListener('keydown', function(event) {
 
 ![](german-layout.svg)
 
-같은 키인데 미국식 배열에선 'Z'가, 독일식 배열에선 'Y'가 입력됩니다(두 글자의 위치가 서로 바뀌어 있습니다).
+같은 키인데 미국식 배열에선 'Z'가, 독일식 배열에선 'Y'가 입력됩니다(각 배열에서 두 글자의 위치가 서로 바뀌어 있습니다).
 
 말 그대로 독일식 배열 사용자가 `key:Y`를 누르면 `event.code`가 `KeyZ`가 됩니다.
 
@@ -122,19 +122,19 @@ document.addEventListener('keydown', function(event) {
 
 ## 기본 동작
 
-키보드로 시작할 수 있는 일이 아주 많은 만큼 기본 동작도 다양합니다.
+키보드는 그 조합이 다양한 만큼 기본 동작도 다양합니다.
 
 예시를 살펴봅시다.
 
-- 화면에 글자가 나타납니다(가장 대표적인 결과입니다).
-- 글자가 삭제됩니다(`key:Delete` 키).
-- 페이지가 스크롤됩니다(`key:PageDown` 키).
-- 브라우저가 '페이지 저장' 대화상자를 엽니다(`key:Ctrl+S`).
--  이 외에도 다양합니다.
+- 글자 키를 누르면 화면에 글자가 나타납니다(가장 대표적인 결과입니다).
+- `key:Delete` 키를 누르면 글자가 삭제됩니다.
+- `key:PageDown` 키를 누르면 페이지가 스크롤됩니다.
+- `key:Ctrl+S`를 누르면 브라우저가 '페이지 저장' 대화상자를 엽니다.
+- 이 외에도 브라우저가 기본적으로 지원하는 기능은 다양합니다.
 
-`keydown`에서 기본 동작을 막으면 OS 기반 특수 키를 제외한 대부분의 기본 동작을 취소할 수 있습니다. 예를 들어 Windows에선 `key:Alt+F4`가 현재 브라우저 창을 닫는데 자바스크립트에서 기본 동작을 막는 방법으론 이를 멈출 수 없습니다.
+`keydown` 핸들러를 통해 기본 동작을 막으면 OS 기반 특수 키를 제외한 대부분의 기본 동작을 취소할 수 있습니다. 예를 들어 Windows에선 `key:Alt+F4`를 누르면 현재 브라우저 창이 닫히는데 자바스크립트에서 기본 동작을 막게 코딩해도 창을 닫는 것을 막을 수 없습니다.
 
-예를 들어 아래 `<input>`은 전화번호를 입력받는 필드라서 숫자와 `+`, `()`, `-` 이외의 키는 받아들이지 않습니다.
+또 다른 예시를 살펴봅시다. 아래 `<input>`은 전화번호를 입력받는 필드라서 숫자와 `+`, `()`, `-` 이외의 키는 받아들이지 않습니다(다만 한글은 입력기(IME, Input Method Editor)가 여러 키를 조합해 글자를 만들어 넣기 때문에 `keydown`에서 기본 동작을 막아도 입력됩니다 - 옮긴이).
 
 ```html autorun height=60 run
 <script>
@@ -145,7 +145,7 @@ function checkPhoneKey(key) {
 <input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="전화번호를 입력해 주세요" type="tel">
 ```
 
-이 필드에선 `key:Backspace`·`key:Left`·`key:Right`·`key:Ctrl+V` 같은 특수 키도 동작하지 않는다는 점에 주목하세요. 필터 `checkPhoneKey`가 지나치게 엄격해서 생긴 부작용입니다.
+그런데 이 예시는 `key:Backspace`·`key:Left`·`key:Right`·`key:Ctrl+V` 같은 특수 키도 동작하지 않는다는 점에 주목하세요. 필터 `checkPhoneKey`가 지나치게 엄격해서 생긴 부작용입니다.
 
 필터를 조금 느슨하게 만들어 봅시다.
 
@@ -162,19 +162,19 @@ function checkPhoneKey(key) {
 
 이제 화살표 키와 삭제 키가 잘 동작합니다.
 
-그런데 여전히 마우스 우클릭과 '붙여넣기'를 사용하면 아무 값이나 입력할 수 있습니다. 필터가 100% 신뢰할 만한 수단은 아닌 셈이죠. 대부분의 경우엔 잘 동작하니 이대로 둬도 괜찮습니다. 다른 방법으론 어떤 수정이든 일어난 뒤에 트리거되는 `input` 이벤트를 추적하는 접근이 있습니다. `input` 이벤트 핸들러에선 새 값을 검사해 유효하지 않을 때 강조 표시하거나 고칠 수 있습니다.
+그런데 여전히 마우스 우클릭과 '붙여넣기'를 사용하면 아무 값이나 입력할 수 있습니다. 필터가 100% 신뢰할 만한 수단은 아닌 셈이죠. 이 코드는 대부분의 경우엔 잘 동작하니 이대로 둬도 괜찮습니다. 하지만 좀 더 보완하고 싶다면 어떤 수정이든 일어난 뒤에 트리거되는 `input` 이벤트를 추적하는 방식을 쓰면 됩니다. `input` 이벤트 핸들러에선 새 값을 검사해 유효하지 않은 값일 때 강조 표시하거나 고칠 수 있습니다.
 
 ## 레거시
 
 과거엔 `keypress`라는 이벤트가 있었고 이벤트 객체엔 `keyCode`·`charCode`·`which` 프로퍼티도 있었습니다.
 
-이 이벤트와 프로퍼티를 다룰 땐 브라우저 간 비호환 문제가 아주 많았습니다. 그래서 명세 개발자들은 전부를 폐기(deprecate)하고 새로운 모던 이벤트(위에서 설명한 이벤트)를 만드는 것 외엔 다른 도리가 없었습니다. 브라우저가 계속 지원하고 있어 옛 코드도 여전히 동작하지만 이제 옛 이벤트와 프로퍼티를 사용할 필요는 전혀 없습니다.
+이 이벤트와 프로퍼티는 브라우저 간 비호환 문제가 아주 많았습니다. 그래서 레거시 이벤트와 프로퍼티를 전부 폐기(deprecate)하고 새로운 모던 이벤트(위에서 설명한 이벤트)에 대한 명세를 만드는 것 외엔 다른 도리가 없었습니다. 레거시 이벤트도 브라우저가 계속 지원하고 있어 옛 코드도 여전히 동작하지만 지금은 옛 이벤트와 프로퍼티를 사용할 필요가 전혀 없습니다.
 
 ## 요약
 
-글자 키든 `key:Shift`·`key:Ctrl` 같은 특수 키든 키를 누르면 항상 키보드 이벤트가 발생합니다. 유일한 예외는 노트북 키보드에 종종 있는 `key:Fn` 키입니다. `key:Fn`은 OS보다 낮은 레벨에서 구현될 때가 많아 키보드 이벤트가 발생하지 않습니다.
+글자 키를 비롯해 `key:Shift`·`key:Ctrl` 같은 특수 키를 누르면 항상 키보드 이벤트가 발생합니다. 유일한 예외는 노트북용 키보드에 종종 있는 `key:Fn` 키입니다. `key:Fn`은 OS보다 낮은 레벨에서 구현될 때가 많아 키보드 이벤트가 발생하지 않습니다.
 
-키보드 이벤트는 다음 두 가지입니다.
+키보드 이벤트는 두 가지가 있습니다.
 
 - `keydown` -- 키를 누를 때 발생(키를 오래 누르고 있으면 자동 반복)
 - `keyup` -- 키에서 손을 뗄 때 발생
@@ -184,6 +184,6 @@ function checkPhoneKey(key) {
 - `code` -- 키보드에서 키가 자리한 물리적 위치에 따라 정해지는 '키 코드'(`"KeyA"`, `"ArrowLeft"` 등)
 - `key` -- 입력된 글자(`"A"`, `"a"` 등). `key:Esc`처럼 글자가 없는 키에선 대개 `code`와 값이 같음
 
-과거엔 폼 필드의 사용자 입력을 추적할 때 키보드 이벤트를 쓰기도 했습니다. 하지만 입력은 다양한 경로로 들어올 수 있어 이 방법은 신뢰하기 어렵습니다. 모든 입력을 다루는 `input`·`change` 이벤트가 있습니다(<info:events-change-input> 챕터에서 다룹니다). 두 이벤트는 복사·붙여넣기나 음성 인식을 포함해 어떤 종류의 입력이든 일어난 뒤에 트리거됩니다.
+과거엔 폼 필드의 사용자 입력을 추적할 때 키보드 이벤트를 쓰기도 했습니다. 하지만 입력은 다양한 경로로 들어올 수 있어 이 방법은 신뢰하기 어렵습니다. 모든 입력을 다루는 `input`·`change` 이벤트를 사용하는 게 더 신뢰하기 좋습니다(<info:events-change-input> 챕터에서 다룹니다). 두 이벤트는 복사·붙여넣기나 음성 인식을 포함해 어떤 종류의 입력이든 일어난 뒤에 트리거됩니다.
 
 키보드 이벤트는 정말로 키보드를 다루고 싶을 때 사용해야 합니다. 단축키나 특수 키에 반응해야 하는 경우가 그 예입니다.