AlloyFinger는 웹 환경에서 다양한 멀티터치 제스처를 손쉽게 구현할 수 있도록 돕는 경량 JavaScript 라이브러리입니다. 이 라이브러리는 핀치(pinch), 회전(rotate) 등 복잡한 사용자 인터랙션을 간편하게 처리할 수 있는 기능을 제공합니다.
1. 라이브러리 구성 및 포함
AlloyFinger 라이브러리는 주로 단일 JavaScript 파일로 구성되어 있습니다. 프로젝트에 포함시키는 방법은 다음과 같습니다.
주요 파일:
alloy_finger.js: 라이브러리의 전체 소스 코드입니다.alloy_finger.min.js: 생산 환경에 최적화된 압축 버전입니다.
HTML 파일의 <head> 또는 <body> 태그 내에서 <script> 태그를 사용하여 라이브러리를 포함시킬 수 있습니다. 일반적으로 alloy_finger.min.js 파일을 사용하는 것이 권장됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AlloyFinger 예제</title>
<!-- AlloyFinger 라이브러리 포함 -->
<script src="path/to/alloy_finger.min.js"></script>
</head>
<body>
<div id="gestureTarget" style="width: 300px; height: 300px; background-color: lightblue;">
이 영역에서 제스처를 시도하세요.
</div>
<script>
// JavaScript 코드
</script>
</body>
</html>
2. 제스처 이벤트 리스너 등록
AlloyFinger 인스턴스를 생성할 때, 제스처 이벤트를 처리할 DOM 요소를 지정하고 콜백 함수들을 설정합니다. 생성자 함수는 첫 번째 인자로 제스처를 감지할 DOM 요소를, 두 번째 인자로 설정 객체를 받습니다.
기본 이벤트 콜백:
touchStart: 터치가 시작될 때 호출됩니다.touchMove: 터치된 손가락이 움직일 때 호출됩니다.touchEnd: 터치가 종료될 때 호출됩니다.touchCancel: 터치 이벤트가 시스템에 의해 취소될 때 호출됩니다.
var targetElement = document.getElementById('gestureTarget');
var gestureManager = new AlloyFinger(targetElement, {
touchStart: function(event) {
console.log('터치 시작:', event);
},
touchMove: function(event) {
console.log('이동 중:', event);
},
touchEnd: function(event) {
console.log('터치 종료:', event);
},
touchCancel: function(event) {
console.log('터치 취소:', event);
}
});
3. 고급 제스처 설정
AlloyFinger는 기본적인 터치 이벤트 외에도 다음과 같은 고급 제스처들을 지원합니다. 이 제스처들은 설정 객체의 콜백 함수를 통해 등록할 수 있습니다.
tap: 탭 제스처doubleTap: 더블 탭 제스처longTap: 롱 탭 제스처swipe: 스와이프 제스처 (방향 정보 포함)pinch: 핀치 제스처 (확대/축소)rotate: 회전 제스처
핀치(Pinch) 제스처 예제:
두 손가락으로 화면을 확대하거나 축소하는 제스처를 감지하고, 확대/축소 비율(`scale`)을 콘솔에 출력하는 예제입니다.
var targetElement = document.getElementById('gestureTarget');
var gestureManager = new AlloyFinger(targetElement, {
// ... 다른 콜백 함수들 ...
pinch: function(event) {
// event.scale은 현재 핀치 비율을 나타냅니다. (1.0은 초기 상태)
console.log('핀치 비율:', event.scale);
// 예: event.scale 값에 따라 이미지 크기 조정
// targetElement.style.transform = 'scale(' + event.scale + ')';
}
});
회전(Rotate) 제스처 예제:
두 손가락을 이용해 요소를 회전시키는 제스처를 감지하고, 회전 각도(`rotate`)를 콘솔에 출력합니다.
var targetElement = document.getElementById('gestureTarget');
var gestureManager = new AlloyFinger(targetElement, {
// ... 다른 콜백 함수들 ...
rotate: function(event) {
// event.rotate는 현재 회전 각도를 라디안 단위로 나타냅니다.
console.log('회전 각도 (라디안):', event.rotate);
// 각도를 도로 변환하여 적용할 수 있습니다.
// var degrees = event.rotate * 180 / Math.PI;
// targetElement.style.transform = 'rotate(' + degrees + 'deg)';
}
});
AlloyFinger 라이브러리를 사용하면 웹 애플리케이션에서 사용자 경험을 향상시키는 다양한 인터랙티브 제스처를 쉽게 구현할 수 있습니다. 더 자세한 정보는 공식 프로젝트 저장소를 참조하시기 바랍니다.