Google 지도에서 상징적인 페그맨을 재현하는 방법

오랫동안 해보고 싶었던 작은 단편입니다. 마침내 Google 지도의 상징적인 기능인 페그맨으로 알려진 이 작은 녀석을 드래그 앤 드롭하여 스트리트 뷰로 전환할 수 있는 기능을 다시 구현하게 되었습니다.

TL;DR
지도 위 오른쪽 하단에 있는 작은 아이콘을 클릭하여 드래그하세요.

HTML

구조는 간단합니다. 나는:

• 컨테이너 역할을 하는 #map(배경 이미지 적용).
• 오른쪽 하단에 위치한 #페그맨 컨테이너.
• 드래그 가능한 캐릭터에 대한 #pegman 요소 자체입니다.

<div>



<h2>
  
  
  CSS
</h2>

<p>Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">#pegman {
  /* other styles */
  rotate: var(--r);
}

회전 값은 사용자 상호작용에 따라 변경되며 이에 대해서는 다음에 자세히 살펴보겠습니다.

자바스크립트

여기서 모든 것은 사용자 상호작용을 중심으로 이루어집니다. JavaScript 핸들:

• 마우스 이벤트를 수신합니다.
• 페그맨의 위치와 회전을 동적으로 업데이트합니다.
• 더 나은 UX를 위해 부드러운 애니메이션을 추가합니다.

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

각 기능을 세분화해 보겠습니다.

onMouseDown

초기 마우스 위치를 기록하고 isDragged 플래그를 전환하여 드래그를 시작합니다.

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

onMouseMove

드래그 중 페그맨의 움직임과 회전을 처리합니다. 다음을 보장합니다:

• 회전은 일정 범위 내에서 유지됩니다(슈퍼맨이 날아다니는 것처럼 극단적인 각도를 피하기 위해).
• 회전 값은 --r을 사용하여 동적으로 업데이트됩니다.

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

onMouseUp

사용자가 드래그를 중지하면 Pegman의 상태가 재설정됩니다.

• 회전이 0으로 재설정됩니다.
• 페그맨은 순조롭게 원래 위치로 돌아옵니다.

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

최종 생각

이 스니펫은 간단한 애니메이션과 상호작용이 어떻게 상징적인 사용자 경험을 재현할 수 있는지 강조합니다. 주요 내용:

• CSS 사용자 정의 속성(예: --r)을 사용하면 스타일을 동적으로 유지하고 관리하기 쉽게 할 수 있습니다.
• 회전 제한은 사용자 상호 작용에 세련되고 자연스러운 느낌을 보장합니다.
• 타임아웃과 애니메이션 완화로 모션에 사실감을 더해줍니다.

CodePen을 자유롭게 포크하여 변경하고 여러분의 생각을 알려주세요! ??️

그런데...

여기에서 보고 실험해 볼 수 있는 Google의 원본 스프라이트를 사용하고 있습니다.

• 활주로 상태
• 드롭 상태
• 매달린 상태

아시나요? ✨ 제가 사용한 구글맵 위치는 실제 산타클로스 마을이에요!
재밌는 사실: 산타의 핀란드 이름은 Joulupukki이고 원래 핀란드 출신이에요 ???