펜 및 스타일러스 조작에 응답(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

펜 또는 스타일러스에 대한 지원을 추가하여 노트를 필기하고 그림을 그리고 주석을 추가할 수 있는 앱을 만들 수 있습니다.

팁  이 항목의 내용은 JavaScript를 사용한 Windows 스토어 앱 개발과 관련이 있습니다.

C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱에 대해서는 펜 및 스타일러스 조작에 응답(XAML)을 참조하세요.

 

사전 요구 사항: JavaScript로 작성한 Windows 스토어 앱을 처음 개발하는 경우 다음 항목을 검토하여 여기서 설명하는 기술에 대해 알아보세요.

JavaScript를 사용하여 첫 Windows 스토어 앱 만들기

JavaScript로 작성한 Windows 스토어 앱용 로드맵

이벤트에 대한 자세한 내용은 빠른 시작: HTML 컨트롤 추가 및 이벤트 처리를 참조하세요.

앱 기능 전체 프로세스: 앱 기능 전체 프로세스 시리즈의 일부로 이 기능을 자세히 살펴보세요.

사용자 조작 전체 프로세스(HTML)

사용자 조작 사용자 지정 전체 프로세스(HTML)

참고  

플랫폼 컨트롤 라이브러리(HTML 및 XAML)는 표준 조작, 애니메이션 물리적 효과 및 시각적 피드백을 비롯하여 Windows 사용자 조작 환경 전체를 제공합니다. 사용자 지정 조작 지원이 필요 없는 경우에는 이러한 기본 제공 컨트롤을 사용하세요.

플랫폼 컨트롤이 충분하지 않으면 다음 사용자 조작 지침을 통해 입력 모드 전체에서 멋진 몰입형 조작 환경을 일관되게 제공합니다. 이러한 지침은 주로 터치식 입력을 중심으로 다루지만 터치 패드, 마우스, 키보드 및 스타일러스 입력에도 관련이 있습니다.

• 일반적인 사용자 조작에 대한 지침
• 광학 줌 및 크기 조정에 대한 지침
• 이동에 대한 지침
• 회전에 대한 지침
• 시맨틱 줌에 대한 지침
• 시각적 피드백에 대한 지침

 

샘플: 이 기능의 작동 방식을 보려면 Windows 스토어 앱 샘플을 참조하세요.

사용자 조작 사용자 지정 전체 프로세스 샘플

입력: 장치 기능 샘플

입력: DOM 포인터 이벤트 처리 샘플

입력: 잉크 샘플

입력: 간단한 잉크 샘플

개요

펜/스타일러스는 정밀한 포인팅 장치로 사용할 수 있습니다. 또한 디지털 잉크와 연결된 그리기 장치가 될 수도 있습니다.

펜/스타일러스 장치와 함께 Windows 8 잉크 플랫폼은 필기 메모, 드로잉 및 주석을 만드는 자연스러운 방법을 제공합니다. 이 플랫폼은 디지타이저 입력에서 잉크 데이터를 캡처하고, 잉크 데이터를 생성하고, 해당 데이터를 출력 장치에 잉크 스트로크로 렌더링하고, 잉크 데이터를 관리하고, 필기 인식을 수행할 수 있도록 지원합니다.

앱은 사용자가 필기를 하거나 그림을 그릴 때 펜의 공간 움직임을 캡처하는 것 외에 압력, 셰이프, 색상 및 불투명도와 같은 정보를 수집하여 펜, 연필 또는 브러쉬로 종이에 그리는 것과 거의 비슷한 느낌의 사용자 환경을 제공할 수 있습니다.

참고  Windows 8의 잉크 플랫폼도 터치 디지타이저 및 마우스 장치를 비롯한 기타 포인터 장치의 입력을 지원합니다.

 

펜 입력의 고유 정밀도는 터치의 부정확한 특성에 최적화된 Windows 8의 UI에서 자연스럽게 지원됩니다. Windows 스토어 앱 디자인을 터치식 입력에 최적화하고 기본적으로 기본 펜 지원을 받으세요.

직접 조작을 강조하는 시나리오에서 펜 조작을 지원하려면 펜 관련 UI를 사용하여 사용자가 사용하는 장치에 관계없이 앱 사용자에 해당하는 기능을 제공합니다. 예를 들어 펜이 검색될 경우 스크롤 막대를 사용하여 이동을 에뮬레이트하거나, 이전 및 다음 단추를 사용하여 콘텐츠 페이지를 넘깁니다.

이 조항의 내용

항목	설명
빠른 시작: 잉크 데이터 캡처	이 빠른 시작에서는 입력 디지타이저에서 잉크 데이터를 캡처하는 과정을 소개합니다.
잉크 데이터 렌더링 방법	잉크 스트로크 세그먼트를 부드러운 3차원 곡선으로 렌더링하는 방법을 알아보세요.
잉크 데이터 저장 방법	이 항목에서는 잉크 데이터를 ISF 메타데이터로 직렬화한 다음 GIF(Graphics Interchange Format) 파일에 포함하여 잉크 데이터를 저장하는 방법을 보여 줍니다.
잉크 데이터 로드 방법	이 항목에서는 GIF(Graphics Interchange Format) 파일에 포함된 ISF 메타데이터에서 잉크 데이터를 역직렬화하여 로드하는 방법을 보여 줍니다.
잉크 스트로크 선택 방법	JavaScript를 사용하는 Windows 스토어 앱에서 잉크 스트로크를 선택하는 방법을 알아보세요.
잉크 스트로크를 지우는 방법	JavaScript를 사용하는 Windows 스토어 앱에서 잉크 스트로크를 지우는 방법을 알아보세요.
잉크 스트로크를 텍스트로 변환하는 방법	JavaScript를 사용하는 Windows 스토어 앱에서 필기 인식을 사용하고 잉크 스트로크를 텍스트로 변환하는 방법을 알아봅니다.

 

관련 항목

개념

사용자 조작에 응답