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