1. Hammer.js 설치하기

   npm install hammerjs
   

2. Hammer.js를 HTML 문서에 추가하기

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

3. 서명 영역 생성하기

   <canvas id="signatureCanvas"></canvas>
   

4. JavaScript 코드 작성하기

   // 서명 영역과 관련된 변수 초기화
   var canvas = document.getElementById('signatureCanvas');
   var context = canvas.getContext('2d');
   var signature;
      
   // Hammer.js 인스턴스 생성
   var hammer = new Hammer(canvas);
      
   // 서명 영역이 터치되었을 때 이벤트 핸들러 등록
   hammer.on('touch', function(e) {
     var touch = e.changedTouches[0];
      
     // 터치 이벤트 위치를 서명 영역의 좌표로 변환
     var x = touch.pageX - canvas.offsetLeft;
     var y = touch.pageY - canvas.offsetTop;
      
     // 서명 영역에 점 그리기
     context.beginPath();
     context.arc(x, y, 1, 0, 2 * Math.PI);
     context.fill();
     context.closePath();
      
     // 서명 데이터 저장
     signature = {
       x: x,
       y: y
     };
   });
   

5. 서명 데이터 사용하기

   // 저장된 서명 데이터를 서버로 전송하거나 다른 처리를 수행하는 코드 작성
   function submitSignature() {
     // 서명 데이터 사용 예시
     console.log('서명 위치:', signature.x, signature.y);
        
     // 서버로 데이터 전송 등 필요한 작업 수행
   }
   

위의 예제 코드를 참고하여 Hammer.js를 사용하여 모바일 서명 기능을 구현할 수 있습니다. 서명 영역에 터치 이벤트가 발생하면, 해당 위치에 점을 그리고 서명 데이터를 저장합니다. 저장된 데이터는 서버로 전송하거나 필요한 작업을 수행할 때 사용할 수 있습니다.

참고 자료:

• Hammer.js 공식 문서
• Canvas API 공식 문서

※ 문의하신 질문은 JavaScript 기반으로 작성되어있어 한글로 답변드렸습니다.