[keydown과 keyup 이벤트] 데모·과제 파일 번역과 본문 퇴고 반영

Violet-Bora-Lee · claude · Violet-Bora-Lee · commit e010575549f4 · 2026-07-19T03:02:22.000+09:00
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK
diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md
@@ -1,6 +1,6 @@
 
-We should use two handlers: `document.onkeydown` and `document.onkeyup`.
+`document.onkeydown`과 `document.onkeyup` 두 핸들러를 사용해야 합니다.
 
-Let's create a set `pressed = new Set()` to keep currently pressed keys.
+현재 눌려 있는 키를 담아 둘 셋 `pressed = new Set()`을 만듭니다.
 
-The first handler adds to it, while the second one removes from it. Every time on `keydown` we check if we have enough keys pressed, and run the function if it is so.
+첫 번째 핸들러는 셋에 키를 추가하고 두 번째 핸들러는 셋에서 키를 제거합니다. `keydown`이 발생할 때마다 필요한 키가 전부 눌렸는지 확인하고 전부 눌렸다면 함수를 실행합니다.
diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html
@@ -2,7 +2,7 @@
 <html>
 <body>
 
-  <p>Press "Q" and "W" together (can be in any language).</p>
+  <p>"Q"와 "W"를 동시에 눌러 보세요(언어 설정과 관계없이 동작합니다).</p>
 
   <script>
     function runOnKeys(func, ...codes) {
@@ -11,19 +11,19 @@
       document.addEventListener('keydown', function(event) {
         pressed.add(event.code);
 
-        for (let code of codes) { // are all keys in the set?
+        for (let code of codes) { // 모든 키가 셋에 들어 있는지 검사합니다.
           if (!pressed.has(code)) {
             return;
           }
         }
 
-        // yes, they are
+        // 모든 키가 눌린 상태입니다.
 
-        // during the alert, if the visitor releases the keys,
-        // JavaScript does not get the "keyup" event
-        // and pressed set will keep assuming that the key is pressed
-        // so, to evade "sticky" keys, we reset the status
-        // if the user wants to run the hotkey again - let them press all keys again
+        // 얼럿 창이 떠 있는 동안 사용자가 키에서 손을 떼면
+        // 자바스크립트는 keyup 이벤트를 받지 못합니다.
+        // 이때 pressed 셋은 키가 계속 눌려 있다고 착각하게 됩니다.
+        // 키가 눌린 상태로 '고정'되는 문제를 피하려면 상태를 초기화해야 합니다.
+        // 단축키를 다시 실행하고 싶다면 모든 키를 다시 누르면 됩니다.
         pressed.clear();
 
         func();
@@ -36,7 +36,7 @@
     }
 
     runOnKeys(
-      () => alert("Hello!"),
+      () => alert("안녕하세요!"),
       "KeyQ",
       "KeyW"
     );
diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Extended hotkeys
+# 단축키 확장하기
 
-Create a function `runOnKeys(func, code1, code2, ... code_n)` that runs `func` on simultaneous pressing of keys with codes `code1`, `code2`, ..., `code_n`.
+`code1`, `code2`, ..., `code_n` 코드에 해당하는 키를 동시에 누르면 `func`를 실행하는 함수 `runOnKeys(func, code1, code2, ... code_n)`를 만들어 보세요.
 
-For instance, the code below shows `alert` when `"Q"` and `"W"` are pressed together (in any language, with or without CapsLock)
+예를 들어 아래 코드는 `"Q"`와 `"W"`를 동시에 누르면 `alert` 창을 띄웁니다(언어 설정과 CapsLock 여부와 관계없이 동작합니다)
 
 ```js no-beautify
 runOnKeys(
-  () => alert("Hello!"),
+  () => alert("안녕하세요!"),
   "KeyQ",
   "KeyW"
 );
diff --git a/2-ui/3-event-details/7-keyboard-events/article.md b/2-ui/3-event-details/7-keyboard-events/article.md
@@ -2,19 +2,19 @@
 
 키보드 이야기를 시작하기 전에 먼저 알아 둘 점이 있습니다. 모던 디바이스에선 키보드 말고도 '무언가를 입력'하는 다양한 수단이 있습니다. 음성 인식(특히 모바일 기기)이나 마우스를 사용한 복사·붙여넣기가 그 예입니다.
 
-따라서 `<input>` 필드에 들어오는 입력 전부를 추적하려면 키보드 이벤트만으론 부족합니다. 입력 수단과 관계없이 `<input>` 필드의 변경을 추적하는 `input`이라는 이벤트가 따로 존재합니다. 입력 추적이 목적이라면 `input` 이벤트가 더 나은 선택일 수 있습니다. `input` 이벤트는 <info:events-change-input> 챕터에서 다루겠습니다.
+따라서 `<input>` 필드에 들어오는 입력 전부를 추적하려면 키보드 이벤트만으론 부족합니다. 이를 보완하는 수단으론 입력 수단과 관계없이 `<input>` 필드의 변경을 추적하는 `input`이라는 이벤트가 따로 존재합니다. 입력 추적이 목적이라면 `input` 이벤트가 더 나은 선택일 수 있습니다. `input` 이벤트는 <info:events-change-input> 챕터에서 다루겠습니다.
 
 키보드 이벤트는 키보드 동작 자체를 다루고 싶을 때 사용해야 합니다(가상 키보드 포함). 방향키 `key:Up`·`key:Down` 입력이나 단축키(키 조합 포함)에 반응하는 경우가 그 예입니다.
 
 
-## 테스트 스탠드 [#keyboard-test-stand]
+## 실험용 미니 데모 [#keyboard-test-stand]
 
 ```offline
-키보드 이벤트를 더 잘 이해하고 싶다면 [테스트 스탠드](sandbox:keyboard-dump)를 사용해 보세요.
+[실험용 미니 데모](sandbox:keyboard-dump)를 돌려보면 키보드 이벤트를 더 잘 이해할 수 있습니다.
 ```
 
 ```online
-키보드 이벤트를 더 잘 이해하고 싶다면 아래 테스트 스탠드를 사용해 보세요.
+실험용 미니 데모를 돌려보면 키보드 이벤트를 더 잘 이해할 수 있습니다.
 
 텍스트 필드에 다양한 키 조합을 입력해 봅시다.
 
@@ -24,15 +24,15 @@
 
 ## keydown과 keyup
 
-키를 누르면 `keydown` 이벤트가 발생합니다. 눌렀던 키에서 손을 떼면 그때 `keyup` 이벤트가 발생합니다.
+키를 누르면 `keydown` 이벤트가 발생합니다. 눌렀던 키에서 손을 떼면 `keyup` 이벤트가 발생합니다.
 
 ### event.code와 event.key
 
 이벤트 객체의 `key` 프로퍼티로는 입력된 글자를, `code` 프로퍼티로는 '물리적인 키 코드'를 알아낼 수 있습니다.
 
-예를 들어 같은 키 `key:Z`라도 `key:Shift`와 함께 누르는지에 따라 소문자 `z`와 대문자 `Z`라는 서로 다른 두 글자가 입력됩니다.
+같은 키 `key:Z`를 눌러도 `key:Shift`와 함께 누르는지에 따라 소문자 `z`와 대문자 `Z`라는 서로 다른 두 글자가 입력됩니다.
 
-`event.key`는 입력된 글자 그 자체라서 두 경우에 값이 다릅니다. 반면 `event.code`는 같습니다.
+`event.key`는 입력된 글자 그 자체를 파악하기 때문에 두 경우에 값이 다릅니다. 반면 `event.code`는 같습니다.
 
 | 키          | `event.key` | `event.code` |
 |--------------|-------------|--------------|
@@ -52,7 +52,7 @@
 
 널리 쓰이는 키보드 자판 배열이 여러 종류 있는데 명세는 배열별 키 코드를 제공합니다.
 
-더 많은 코드가 궁금하다면 [명세의 알파벳·숫자 절](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section)을 읽거나 위 [테스트 스탠드](#keyboard-test-stand)에서 직접 키를 눌러 보세요.
+더 많은 코드가 궁금하다면 [명세의 알파벳·숫자 절](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section)을 읽거나 위 [실험용 미니 데모](#keyboard-test-stand)에서 직접 키를 눌러 보세요.
 ```
 
 ```warn header="대·소문자 구분: `\"keyZ\"`가 아니라 `\"KeyZ\"`"
diff --git a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html
@@ -10,26 +10,26 @@
 
   <form id="form" onsubmit="return false">
 
-    Prevent default for:
+    기본 동작 막기:
     <label>
       <input type="checkbox" name="keydownStop" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;
     <label>
       <input type="checkbox" name="keyupStop" value="1"> keyup</label>
 
     <p>
-      Ignore:
+      무시하기:
       <label>
         <input type="checkbox" name="keydownIgnore" value="1"> keydown</label>&nbsp;&nbsp;&nbsp;
       <label>
         <input type="checkbox" name="keyupIgnore" value="1"> keyup</label>
     </p>
 
-    <p>Focus on the input field and press a key.</p>
+    <p>아래 입력 필드에 포커스를 두고 키를 눌러 보세요.</p>
 
-    <input type="text" placeholder="Press keys here" id="kinput">
+    <input type="text" placeholder="여기에 키를 눌러 보세요" id="kinput">
 
     <textarea id="area"></textarea>
-    <input type="button" value="Clear" onclick="area.value = ''" />
+    <input type="button" value="지우기" onclick="area.value = ''" />
   </form>
   <script src="script.js"></script>
 
