자바스크립트에서 포인터 이벤트를 사용하는 방법

주요 내용

웹 기반 애플리케이션은 폭넓은 사용자층을 수용하기 위해 마우스에만 의존하지 않고 다양한 입력 장치를 염두에 두고 설계해야 합니다.

자바스크립트 내에서 포인터 이벤트를 활용하면 마우스 기반 입력과 터치 기반 입력을 동시에 처리할 수 있으므로 별도의 구현 절차가 필요하지 않습니다.

최신 웹 개발 시스템의 포인터 이벤트 설계는 기존 마우스 기반 이벤트 처리와 매우 유사하여 터치스크린 및 스타일러스 입력 장치를 모두 수용하는 방향으로 원활하게 전환할 수 있습니다. 이러한 호환성을 통해 개발자는 상당한 수정이나 재작성 없이도 다양한 형태의 사용자 상호 작용을 위해 기존 코드베이스를 손쉽게 조정할 수 있습니다.

터치스크린 기술의 보급으로 디지털 콘텐츠를 탐색하고 상호 작용할 때 마우스 대신 손가락에 의존하는 사람들이 증가하고 있습니다. 따라서 최신 웹 개발 관행에서는 가능한 한 많은 잠재 사용자를 수용하기 위해 더 다양한 입력 방식을 수용하는 것이 중요합니다.

자바스크립트의 최신 표준인 ‘포인터 이벤트’를 활용하는 이 접근 방식은 마우스 기반 및 터치 기반 상호 작용을 모두 원활하게 관리하므로 이러한 이벤트 유형을 별도로 구현할 필요가 없습니다.

포인터 이벤트란 무엇인가요?

포인터 이벤트 API는 마우스 클릭, 터치 제스처, 스타일러스 상호작용을 포함하는 웹 브라우저 내의 다양한 입력 모드를 관리하기 위한 범용 표준입니다. 이 표준은 온라인 자료에 액세스하기 위한 일관되고 기기에 구애받지 않는 접근 방식을 제시함으로써 다양한 기기 간의 원활한 상호 작용을 보장합니다.

간단히 말해, 포인터 이벤트를 사용하면 다양한 소스에서 사용자 상호 작용을 하나의 일관된 방식으로 처리할 수 있습니다.

포인터 이벤트의 유형

포인터 이벤트의 명명 규칙은 자바스크립트의 마우스 이벤트와 유사하므로 ‘마우스’를 ‘포인터’로 대체하여 기존 코드와 원활하게 통합할 수 있습니다. 이러한 조정을 통해 개발자는 터치 및 펜 입력 장치를 보다 효과적으로 지원할 수 있습니다.

앞서 언급한 표는 포인터 이벤트와 해당 마우스 이벤트 간의 차이점을 다음과 같이 설명합니다:

포인터 이벤트 수와 해당 마우스 이벤트 사이에 불일치가 존재하는 것이 분명합니다, 세 번의 불일치가 발생합니다. 이 문제에 대한 더 많은 통찰력을 제공하기 위해 이 현상에 대한 추가 조사가 적절한 시기에 수행될 예정입니다.

자바스크립트에서 포인터 이벤트 사용하기

마우스 이벤트와 유사한 방식으로 포인터 이벤트를 활용할 수 있으며, 일반적인 작업 순서는 미리 정해진 패러다임을 준수합니다. 이 접근 방식은 다양한 이벤트 처리 메커니즘에서 흔히 볼 수 있으며 일반적으로 다음 단계를 포함합니다:

DOM 쿼리 메커니즘을 활용하여 지정된 HTML 요소를 검색하는 것은 웹 개발의 일반적인 관행입니다. 이 기법에는 문서 객체 모델(DOM) 계층 구조 내에서 특정 요소를 식별하고 분리하는 코드 문자열을 제공하여 JavaScript 또는 기타 프로그래밍 언어를 통해 해당 속성과 동작을 조작하거나 수정할 수 있도록 하는 것이 포함됩니다.

`addEventListener` 메서드를 사용하면 모니터링하려는 특정 이벤트와 해당 이벤트 발생 시 실행할 해당 콜백 함수를 지정할 수 있습니다.

이벤트 객체인 콜백 함수에 전달된 인수와 관련된 속성 및 메서드를 활용합니다.

포인터이동 이벤트는 사용자가 컴퓨터 시스템과 상호 작용하는 동안 마우스나 터치패드를 움직일 때 발생하는 이벤트 유형으로, 커서를 이동하거나 화면에서 다른 작업을 수행하려는 의도를 나타냅니다. 이 이벤트는 웹 브라우저 또는 포인터 입력을 지원하는 기타 환경에서 실행되는 JavaScript 코드에서 캡처하여 처리할 수 있습니다.포인터무브 이벤트는 트리거된 시점의 포인터의 위치와 속도에 대한 정보를 제공하여 개발자가 페이지의 요소의 시각적 상태를 적절히 업데이트할 수 있도록 합니다.

 // Get the target element
const target = document.getElementById('target');

// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);

// Function to handle pointer move event
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}
 

본 코드 구성은 포인터 이동 발생을 관리하기 위한 지정 객체와 스크립트 함수를 포함하고, 이후 자바스크립트로 구현된 이벤트 리스너를 활용하여 포인터 이벤트와 함수를 지정 객체에 부착합니다.

마우스 커서, 터치 스크린 제스처 또는 스타일러스 등 어떤 형태의 입력 장치가 표면 위로 움직일 때 대상 식별자를 가진 요소와 관련된 좌표 값을 표시할 수 있는 코드입니다.

비슷한 맥락에서 나머지 포인터 이벤트도 비슷한 방식으로 활용할 수 있습니다.

포인터 취소 이벤트

포인터 취소 이벤트는 포인터 이벤트가 예정된 종료 전에 중단될 때마다 시작됩니다. 일반적으로 브라우저는 취소 프로세스를 시작하기 위해 진행 중인 모든 포인터 이벤트를 무효화합니다. 다음을 포함하되 이에 국한되지 않는 다양한 요인이 이 이벤트의 활성화를 유발할 수 있습니다:

디스플레이에서 물체를 움직이는 등 터치 기반 상호 작용을 통해 전자 장치를 적극적으로 조작하는 동안 사용자는 현재 작업을 방해하는 수신 통신 또는 경고를 수신할 수 있습니다.

위치 또는 각도가 이동하여 공간에서 방향이 변경되는 경우.

브라우저 창이 강조 표시되지 않거나 더 이상 활성 창이 아닌 경우 초점 손실이라는 상황이 발생합니다.

사용자가 브라우저 내에서 다른 옵션을 클릭하거나 새 프로그램을 완전히 실행하여 현재 탭 또는 애플리케이션에서 벗어나 이동하려는 경우, 이러한 동작을 다른 탭 또는 애플리케이션으로 전환이라고 합니다.

“포인터 취소” 이벤트를 활용하여 원하는 방식으로 특정 상황을 해결할 수 있습니다. 아래에 예시적인 그림이 나와 있습니다:

 const target = document.getElementById('target');

target.addEventListener('pointercancel', (event) => {
    // Handle the situation where the pointer cancels. For example, you
    // can release the pointer capture
    target.releasePointerCapture(event.pointerId);
});
 

포인터 캡처

지정된 포인팅 장치에서 생성된 모든 유형의 포인터 기반 이벤트를 등록하고 해당 이벤트가 해당 구성 요소의 한계를 초과하여 발생하는지 여부에 관계없이 반응하는 개별 HTML 구성 요소의 용량이 포인터 캡처의 본질을 정의합니다.

특정 요소에 대한 포인터 캡처를 설정하기 위해 `setPointerCapture()` 함수를 사용할 수 있고, 이러한 캡처를 해제하기 위해 `releasePointerCapture()` 함수를 사용할 수 있습니다.

포인터 캡처는 이와 관련하여 유용한 도구 역할을 하는 GotPointerCapture 및 LostPointerCapture 포인터 이벤트에 의해 용이하게 이루어집니다.

gotpointercapture 이벤트

엘리먼트가 포인터 캡처를 달성할 때마다 gotpointercapture 이벤트가 호출됩니다. 이 이벤트는 HTML 요소 내에서 포인터 이벤트를 처리하기 위한 상태를 설정하는 역할을 합니다. 그리기 애플리케이션에서와 같은 상황에서 gotpointercapture 이벤트를 활용하면 커서의 시작 위치를 초기화할 수 있습니다.

잃어버린 포인터 캡처 이벤트

잃어버린 포인터 캡처 이벤트가 시작되면 요소가 마우스 포인터를 놓으면 이에 대한 응답으로 이벤트가 발생합니다. 이 이벤트는 해당 요소가 포인터 캡처를 획득한 후 활성화된 이전에 설정된 모든 상태를 취소하거나 제거할 수 있는 기회로 사용됩니다. 그리기 프로그램과 같은 그래픽 애플리케이션의 맥락에서 이 이벤트는 커서의 존재를 숨기는 데 활용될 수 있습니다.

포인터 이벤트의 속성

포인터 이벤트의 구현은 고유한 속성을 통해 상호작용성과 반응성이 향상된 웹사이트를 제작할 수 있는 플랫폼을 제공합니다. 이러한 속성은 마우스 이벤트에서 볼 수 있는 속성과 매우 유사하지만 몇 가지 보완적인 특성도 포함합니다. 이 글에서는 이러한 추가 기능에 대해 자세히 살펴봅니다.

pointerId 속성

`pointerId`는 스타일러스, 손가락, 마우스 등 다양한 포인터를 구별할 수 있게 해주는 포인터 이벤트의 필수적인 특성입니다. 브라우저에서 모든 개별 포인터 입력에 대해 제공하는 이 자동 생성 식별자를 통해 포인터와 관련된 특정 작업을 효과적으로 모니터링하고 실행할 수 있습니다.

다양한 포인터에서 여러 개의 손가락 및/또는 스타일러스 입력을 동시에 사용하는 게임 애플리케이션에서 `pointerId` 속성을 활용하면 그 실용성을 확인할 수 있습니다. 포인터아이디` 속성을 사용하면 각 포인터에 대해 고유한 식별자를 제공하여 서로 다른 포인터 표면을 구분할 수 있습니다. 일반적으로 기본 식별 코드는 초기 터치 입력에 기인합니다.

이 속성의 유용성은 터치 기반 기기와 관련하여 특히 높아지는데, 이러한 기기는 일반적으로 추가 주변 장치가 부착되지 않는 한 단일 포인터 입력을 동시에 수신하는 것으로 제한되기 때문입니다. 반면 마우스 포인터를 사용하는 기기는 이러한 제약을 극복해야 합니다.

화면의 모든 포인터 입력의 식별자를 표시하는 간단한 그림이 제공됩니다:

 const target = document.getElementById('target');

target.addEventListener('pointerdown', (event) => {
    console.log(`Pointer ID: ${event.pointerId}`);
    // Handle the pointer down event for the specific pointerId
});
 

포인터 유형 속성

“마우스”, “펜” 또는 “터치”.사용법을 설명하기 위해 다음과 같은 간단한 예를 고려하세요:

 function handlePointerEvent(event){
    // Using the pointerType property
    switch (event.pointerType) {
    case 'mouse':
        // Handle the situation where the pointing device is a mouse
        console.log(`Mouse Pointer ID: ${event.pointerId}`);
        break;
    case 'pen':
        // Handle the situation where the pointing device is a stylus
        console.log(`Stylus Pointer ID: ${event.pointerId}`);
        break;
    case 'touch':
        // Handle the situation where the pointing device is a finger touch
        console.log(`Touch Pointer ID: ${event.pointerId}`);
        break;
    default:
        // Handle other pointer types or cases
        console.log(`pointerType ${event.pointerType} is not supported`);
        break;
    }
}

// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);
 

너비 및 높이 속성

포인터의 접촉 영역의 치수는 밀리미터 단위로 표시되며 너비와 높이를 포함합니다. 그러나 특정 웹 브라우저에서는 이러한 속성을 인식하지 못하므로 특정 브라우저 내에서 해당 값이 1로 상수로 렌더링됩니다.

이러한 특성은 정확한 입력이 필요하거나 다양한 입력 치수를 구분하는 것이 중요한 경우에 특히 적합합니다. 그래픽 프로그램에서 높이와 너비 모두 크기가 커지면 아티스트가 더 넓은 브러시 스트로크를 사용하고 있음을 의미하고, 반대로 측정값이 작으면 그렇지 않음을 의미하므로 실용적인 일러스트레이션을 찾을 수 있습니다.

일반적으로 웹 개발에서 터치 이벤트로 작업할 때 너비 및 높이 속성을 사용하여 치수를 지정합니다.

포인터 이벤트를 사용하여 포괄성 향상

애플리케이션 개발에서 포인터 이벤트를 활용하면 개발자의 부담을 최소화하면서 광범위한 장치 및 입력 방식과의 호환성을 높일 수 있습니다. 이러한 이벤트를 통합함으로써 최신 벤치마크를 준수하고 웹 경험 향상에 기여할 수 있습니다.