처음 마주한 지도는 접혀 있습니다. 화면 가운데의 접힌 지도에 마우스를 올린 뒤 드래그해서 오른쪽으로 펼치면 인터랙션이 시작됩니다. 지도는 세 장의 패널이 서로 맞물려 있는 형태로, GSAP Draggable의 드래그 값으로 왼쪽과 오른쪽 패널이 자연스럽게 벌어지고 가운데 패널이 밝아집니다.
인터랙션 포인트
- 펼치기 힌트: 처음에는 "지도를 오른쪽으로 드래그하면 펼쳐집니다"라는 안내가 나타나, 어느 방향으로 드래그해야 하는지 바로 이해할 수 있습니다.
- 보물 위치 지정: 지도가 완전히 펼쳐지면 클릭 가능한 상태가 되고, 원하는 곳을 클릭하면 해당 위치에 반짝이는 보물 마커가 생성됩니다.
- 점선 길 안내: 지도 하단의 기준점에서 방금 지정한 지점까지 점선 경로가 그려져, 보물까지의 길을 시각적으로 보여줍니다.
- 키네틱(Kinetic) 피드백: 마커 주변에 노란빛 스파크와 그림자가 함께 나와, 정적인 지도 위에서 마커에 생동감을 더합니다.
이 인터랙션은 보물 찾기뿐 아니라, 특정 지점을 선택하게 하거나 위치 기반 경험을 소개할 때에도 활용할 수 있는 패턴입니다. 접히고 펼쳐지는 움직임과 점선 경로 애니메이션이 결합되어, 지도 위에서 탐험하는 경험을 풍부하게 만들어줍니다.