모바일 앱에서 터치 이벤트를 사용하여 화면 전환을 구현하고 싶다면, Hammer.js를 사용하는 것이 좋습니다. Hammer.js는 터치 이벤트를 간편하게 처리할 수 있는 자바스크립트 라이브러리입니다. 아래는 Hammer.js를 사용하여 터치 이벤트를 모바일 앱 화면 전환에 적용하는 방법입니다.

1. Hammer.js 라이브러리 추가하기

먼저, Hammer.js 라이브러리를 다운로드하고 HTML 파일에 추가합니다. 다운로드 링크는 다음과 같습니다.

• Hammer.js 다운로드 링크

다운로드 받은 파일을 원하는 위치에 저장한 후, HTML 파일에 아래와 같이 스크립트 태그를 추가합니다.

<script src="path/to/hammer.min.js"></script>

2. 터치 이벤트 핸들러 추가하기

HTML 파일에서 터치 이벤트를 처리할 요소(element)를 선택하고, Hammer.js를 이용해 터치 이벤트 핸들러를 추가합니다. 예를 들어, 화면 전환을 위해 swipe(스와이프) 이벤트를 사용하고자 한다면 다음과 같이 작성할 수 있습니다.

const element = document.getElementById("your-element-id");

const swipeHandler = new Hammer(element);
swipeHandler.on("swipe", function(event) {
    // 화면 전환 로직을 작성합니다.
    console.log("Swipe event occurred!");
    // 화면 전환 로직에 따라 원하는 동작을 수행합니다.
});

위 코드에서 your-element-id는 터치 이벤트를 처리할 요소의 ID입니다. 이 요소에 스와이프 이벤트가 발생하면, 화면 전환 로직을 작성하는 부분에 원하는 동작을 추가하면 됩니다.

3. 추가적인 터치 이벤트 사용하기

Hammer.js는 swipe 이외에도 다양한 터치 이벤트를 지원합니다. 예를 들어, 터치로 드래그해서 요소를 이동시키고 싶다면 pan 이벤트를 사용할 수 있습니다.

swipeHandler.on("pan", function(event) {
    // 드래그 이벤트 로직을 작성합니다.
    console.log("Pan event occurred!");
    // 드래그 이벤트에 따라 요소를 이동시키는 로직을 추가합니다.
});

위와 같이 pan 이벤트를 등록하고, 이벤트 핸들러 함수에서 드래그 이벤트에 대한 로직을 작성하면 됩니다.

참고 자료

• Hammer.js 공식 문서
• Hammer.js 예제 코드