1. Hammer.js 라이브러리를 웹 페이지에 추가합니다. <script> 태그를 사용하여 외부 스크립트를 가져옵니다. 아래는 예시입니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

1. 타이머와 관련된 DOM 요소를 선택합니다. 예를 들어, <div id="timer">로 표시된 요소를 선택합니다.

const timerElement = document.getElementById('timer');

1. Hammer.js를 사용하여 터치 인식 기능을 타깃 요소에 바인딩합니다. Hammer 인스턴스를 생성하고, 인식할 동작을 설정합니다. 아래는 예시입니다:

const hammer = new Hammer(timerElement);
hammer.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

위 코드에서는 swipe 동작을 사용하고, 수직으로 스와이프할 수 있도록 설정하였습니다.

1. 타이머 시작 및 정지와 같은 기능을 구현합니다. Hammer.js 이벤트 리스너를 사용하여 원하는 동작을 수행합니다.

hammer.on('swipeup', startTimer);
hammer.on('swipedown', stopTimer);

function startTimer() {
  // 타이머 시작 로직
}

function stopTimer() {
  // 타이머 정지 로직
}

위 코드에서는 스와이프 업(swipeup) 동작을 감지하여 타이머를 시작하고, 스웨이프 다운(swipedown) 동작을 감지하여 타이머를 정지합니다.

이제 Hammer.js를 사용하여 터치 인식 기능을 타이머에만 적용하는 방법을 알게 되었습니다. 터치 동작을 사용자 정의하고, 이를 원하는 기능에 연결할 수 있습니다.

참고 자료:

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