2.3.6 pointer-events 번역문 표현 및 용어 수정

Author: Chaejy

2-ui/3-event-details/6-pointer-events/article.md

@@ -4,23 +4,23 @@
 
 ## 간략한 역사
 
-포인터 이벤트가 다른 이벤트 유형 사이에서 어떤 위치에 있는지 전체 그림을 이해할 수 있도록 간략히 살펴보겠습니다.
+포인터 이벤트가 다른 이벤트 유형 사이에서 어떤 위치에 있는지 이해할 수 있도록 간략히 살펴보겠습니다.
 
 - 오래전에는 마우스 이벤트만 있었습니다.
 
     그러다 터치 기기, 특히 휴대 전화와 태블릿이 널리 보급되었습니다. 기존 스크립트가 동작하도록 터치 기기는 마우스 이벤트를 생성했고 지금도 생성합니다. 예를 들어 터치스크린을 탭 하면 `mousedown`이 발생합니다. 덕분에 터치 기기는 웹 페이지와 잘 동작했습니다.
 
     하지만 터치 기기는 마우스보다 더 많은 기능을 제공합니다. 예를 들어 여러 지점을 동시에 터치하는 '멀티 터치'가 가능합니다. 하지만 마우스 이벤트에는 이런 멀티 터치를 처리하는 데 필요한 프로퍼티가 없습니다.
 
-- 그래서 `touchstart`, `touchend`, `touchmove`처럼 터치에 특화된 프로퍼티를 가진 터치 이벤트가 도입되었습니다. 포인터 이벤트가 더 나은 방식이므로 여기서는 자세히 다루지 않겠습니다.
+- 그래서 `touchstart`, `touchend`, `touchmove`처럼 터치에 특화된 프로퍼티를 가진 터치 이벤트가 도입되었습니다. 포인터 이벤트가 더 나은 대안이므로 여기서는 자세히 다루지 않겠습니다.
 
     하지만 그것만으로는 부족했습니다. 펜처럼 저마다 고유 기능을 가진 다른 기기도 많았기 때문입니다. 터치 이벤트와 마우스 이벤트를 모두 수신하는 코드를 작성하는 일도 번거로웠습니다.
 
 - 이런 문제를 해결하기 위해 새로운 표준인 포인터 이벤트가 도입되었습니다. 포인터 이벤트는 모든 종류의 포인팅 기기에 대해 하나의 이벤트 집합을 제공합니다.
 
 현재 [Pointer Events Level 2](https://www.w3.org/TR/pointerevents2/) 명세는 모든 주요 브라우저에서 지원됩니다. 더 최신 버전인 [Pointer Events Level 3](https://w3c.github.io/pointerevents/)는 작업 중이며 Pointer Events Level 2와 대부분 호환됩니다.
 
-Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원해야 하는 경우가 아니라면, 이제 마우스 이벤트나 터치 이벤트를 사용할 이유가 없습니다. 포인터 이벤트로 전환하면 됩니다.
+Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원해야 하는 경우가 아니라면 이제 마우스 이벤트나 터치 이벤트를 사용할 이유가 없습니다. 포인터 이벤트로 전환하면 됩니다.
 
 그러면 터치 기기와 마우스 기기 모두에서 코드가 잘 동작합니다.
 
@@ -67,7 +67,7 @@ Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원
 
 - `width` - 포인터, 예를 들어 손가락이 기기에 닿은 영역의 너비입니다. 마우스처럼 지원되지 않을 때는 항상 `1`입니다.
 - `height` - 포인터가 기기에 닿은 영역의 높이입니다. 지원되지 않을 때는 항상 `1`입니다.
-- `pressure` - 포인터 끝의 압력으로, 범위는 0부터 1까지입니다. 압력을 지원하지 않는 기기에서는 `0.5`(눌림) 또는 `0`이어야 합니다.
+- `pressure` - 포인터 끝의 압력으로, 범위는 0부터 1까지입니다. 압력을 지원하지 않는 기기에서는 값이 `0.5`(눌림) 또는 `0`입니다.
 - `tangentialPressure` - 정규화된 접선 방향 압력입니다.
 - `tiltX`, `tiltY`, `twist` - 펜이 표면을 기준으로 어떻게 놓였는지 설명하는 펜 전용 프로퍼티입니다.
 
@@ -79,7 +79,7 @@ Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원
 
 포인터 이벤트는 `pointerId`와 `isPrimary` 프로퍼티를 활용해 멀티 터치를 처리할 수 있습니다.
 
-사용자가 터치스크린의 한 곳을 터치한 다음 다른 손가락을 다른 곳에 올리면 다음과 같은 일이 발생합니다.
+사용자가 터치스크린의 한 지점을 터치한 뒤, 다른 손가락을 다른 지점에 올리면 다음과 같은 일이 발생합니다.
 
 1. 첫 번째 손가락이 터치될 때
     - `isPrimary=true`와 어떤 `pointerId`를 가진 `pointerdown`이 발생합니다.
@@ -107,7 +107,7 @@ Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원
 원인은 다음과 같습니다.
 - 포인터 기기 하드웨어가 물리적으로 비활성화된 경우
 - 기기 방향이 바뀐 경우(태블릿 회전)
-- 브라우저가 상호작용을 마우스 제스처나 확대·이동 동작 등으로 보고 직접 처리하기로 한 경우
+- 브라우저가 상호작용을 마우스 제스처나 확대축소 및 화면 이동 동작 등으로 보고 직접 처리하기로 한 경우
 
 `pointercancel`이 어떤 영향을 주는지 실제 예시로 확인해 보겠습니다.
 
@@ -144,14 +144,14 @@ Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원
     - CSS에서 `#ball { touch-action: none }`을 설정해 막습니다.
     - 그러면 코드가 터치 기기에서도 작동하기 시작합니다.
 
-이렇게 하면 이벤트가 의도대로 동작하고, 브라우저가 과정을 가로채거나 `pointercancel`을 발생시키지 않습니다.
+이렇게 하면 이벤트가 의도대로 동작하고, 브라우저가 상호작용을 가로채거나 `pointercancel`을 발생시키지 않습니다.
 
 ```online
 이 데모는 위 코드를 추가한 버전입니다.
 
 [iframe src="ball-2" height=240 edit]
 
-확인할 수 있듯이 더 이상 `pointercancel`은 발생하지 않습니다.
+보시다시피 더 이상 `pointercancel`은 발생하지 않습니다.
 ```
 
 이제 실제로 공을 움직이는 코드를 추가할 수 있고, 드래그 앤 드롭이 마우스 기기와 터치 기기에서 모두 동작합니다.
@@ -194,9 +194,9 @@ Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원
 
 마우스 이벤트를 유사한 포인터 이벤트로 바꾼 뒤의 동작 로직은 다음과 같습니다.
 
-1. 사용자가 슬라이더 `thumb`를 누르면 `pointerdown`이 발생합니다.
+1. 사용자가 슬라이더 `thumb`을 누르면 `pointerdown`이 발생합니다.
 2. 그런 다음 포인터를 움직이면 `pointermove`가 발생하고, 코드가 `thumb` 요소를 함께 움직입니다.
-    - ...포인터가 움직이다 보면 슬라이더 `thumb` 요소를 벗어나 위아래로 이동할 수 있습니다. 그래도 `thumb`는 포인터에 맞춰 정확히 수평 방향으로만 이동해야 합니다.
+    - 포인터가 움직이다 보면 슬라이더 `thumb` 요소를 벗어나 위아래로 이동할 수 있습니다. 그래도 `thumb`은 포인터에 맞춰 정확히 수평 방향으로만 이동해야 합니다.
 
 마우스 이벤트 기반 해결책에서는 포인터가 `thumb` 위아래로 이동하는 경우까지 포함해 모든 포인터 움직임을 추적하려고 전체 `document`에 `mousemove` 이벤트 핸들러를 할당해야 했습니다.
 
@@ -205,7 +205,7 @@ Internet Explorer 10이나 Safari 12 이하 같은 구형 브라우저를 지원
 이럴 때 `setPointerCapture`가 등장합니다.
 
 - `pointerdown` 핸들러에서 `thumb.setPointerCapture(event.pointerId)`를 호출합니다.
-- 이후 `pointerup·pointercancel`까지의 포인터 이벤트는 `thumb`로 재지정됩니다.
+- 이후 `pointerup·pointercancel`까지의 포인터 이벤트는 `thumb`으로 재지정됩니다.
 - `pointerup`이 발생하면, 즉 드래그가 완료되면 바인딩은 자동으로 해제되므로 신경 쓸 필요가 없습니다.
 
 따라서 사용자가 문서 전체에서 포인터를 움직이더라도 이벤트 핸들러는 `thumb`에서 호출됩니다. 그럼에도 `clientX·clientY` 같은 이벤트 객체의 좌표 프로퍼티는 여전히 올바릅니다. 캡처링은 `target·currentTarget`에만 영향을 줍니다.
@@ -219,7 +219,7 @@ thumb.onpointerdown = function(event) {
 
   // 포인터 이동 추적을 시작합니다.
   thumb.onpointermove = function(event) {
-    // 슬라이더 이동: 모든 포인터 이벤트가 thumb으로 재지정되므로 thumb에서 처리합니다.
+    // 슬라이더 조작: 모든 포인터 이벤트가 thumb으로 재지정되므로 thumb에서 처리합니다.
     let newLeft = event.clientX - slider.getBoundingClientRect().left;
     thumb.style.left = newLeft + 'px';
   };
@@ -228,11 +228,11 @@ thumb.onpointerdown = function(event) {
   thumb.onpointerup = function(event) {
     thumb.onpointermove = null;
     thumb.onpointerup = null;
-    // ...필요하다면 "드래그 종료"도 처리합니다.
+    // 필요하다면 '드래그 종료'도 처리합니다.
   };
 };
 
-// thumb.releasePointerCapture를 호출할 필요는 없습니다.
+// thumb.releasePointerCapture를 호출할 필요는 없고,
 // pointerup에서 자동으로 처리됩니다.
 ```
 
@@ -258,12 +258,12 @@ thumb을 드래그하는 동안 이 요소 위로 마우스를 올려도 핸들
 
 ### 포인터 캡처링 이벤트
 
-완전성을 위해 한 가지 더 언급하겠습니다.
+빠짐없이 설명하기 위해 한 가지 더 언급하겠습니다.
 
 포인터 캡처링과 관련된 이벤트는 두 가지입니다.
 
 - `gotpointercapture`는 요소가 `setPointerCapture`를 사용해 캡처링을 활성화할 때 발생합니다.
-- `lostpointercapture`는 캡처가 해제될 때 발생합니다. 해제는 releasePointerCapture를 직접 호출해서 이루어질 수도 있고, `pointerup`·`pointercancel` 시 자동으로 이루어질 수도 있습니다.
+- `lostpointercapture`는 캡처가 해제될 때 발생합니다. 해제는 `releasePointerCapture`를 직접 호출해서 이루어질 수도 있고, `pointerup`·`pointercancel` 시 자동으로 이루어질 수도 있습니다.
 
 ## 요약
 
@@ -279,4 +279,4 @@ thumb을 드래그하는 동안 이 요소 위로 마우스를 올려도 핸들
 - `pressure`, `width·height` 등 기기별 프로퍼티
 - 포인터 캡처링: `pointerup`·`pointercancel`까지 모든 포인터 이벤트를 특정 요소로 재지정할 수 있습니다.
 
-현재 포인터 이벤트는 모든 주요 브라우저에서 지원되므로, 특히 IE10 이하와 Safari 12 이하를 지원할 필요가 없다면 안전하게 전환할 수 있습니다. 해당 브라우저에서도 포인터 이벤트 지원을 가능하게 해주는 폴리필이 있습니다.
+현재 포인터 이벤트는 모든 주요 브라우저에서 지원되므로, 특히 Internet Explorer 10 이하와 Safari 12 이하를 지원할 필요가 없다면 안전하게 전환할 수 있습니다. 해당 브라우저에서도 포인터 이벤트 지원을 가능하게 해주는 폴리필이 있습니다.