소개
요즘에는 위치 기반 기능이 모바일 애플리케이션 전반에서 흔히 볼 수 있습니다. 내비게이션 앱이든 관심 지점(POI) 스타일 기능이든, 인터랙티브 지도 요소는 언제나 빠지지 않습니다.
이 튜토리얼에서는 ProtoPie에서 간단한 트리거들을 활용해 이러한 인터랙티브 지도 중 하나를 만들어 보겠습니다.
학습 내용
이 레슨에서는 다음을 배우게 됩니다:
Pinch 트리거로 요소/지도를 확대 및 축소하기
Rotate 트리거를 사용해 지도를 회전하기
드래그 가능한 지도 프로토타입 만들기
트리거와 응답에 적절한 제한 설정하기
이 튜토리얼을 마치면, 이런 것을 만들 수 있게 됩니다!
단계별 안내
시작하기 전에
미리보기를 휴대폰으로 미러링하려면 ProtoPie 모바일 애플리케이션이 있는지 확인하세요. 특히 pinch 및 rotate 트리거가 추가되면 테스트가 훨씬 쉬워집니다.
지도 화면 위에 직접 배치된 요소가 있다면, 선택한 레이어 하단의 "하위 레이어를 터치 가능하게 설정" 체크 박스를 선택해야 한다는 점도 중요합니다.
지도 이동(패닝) 인터랙션
1. 먼저, 가장 일반적인 인터랙티브 지도 동작인 패닝을 만들어 보겠습니다. 이를 위해 먼저 Drag 트리거를 추가하고 이를 Map 요소에 연결합니다. 그다음에는 Move 응답을 추가해 역시 Map에 연결합니다.
이 작업이 끝나면 한 손가락으로 지도를 패닝할 수 있어야 합니다.
지도를 확대 및 축소하기
다음으로, 거의 모든 인터랙티브 지도에 있는 또 다른 일반적인 상호작용인 확대/축소를 만들어 보겠습니다.
1. 이 기능을 프로토타이핑하려면 먼저 Pinch 트리거를 추가하고 Map 요소에 연결합니다.
2. 이전과 마찬가지로 Map 요소에 연결된 응답을 추가하되, 이번에는 Scale 응답을 추가합니다. 화면을 핀치할 때 지도의 크기가 변경되도록 하려는 것입니다.
이제 작업이 끝나면 확대/축소 가능한 지도가 완성되어야 합니다.
지도 회전하기
세 번째 인터랙션으로는 지도를 회전하는 방법을 살펴보겠습니다. 이것도 앞의 두 방법과 정확히 같은 방식을 사용합니다.
1. 먼저 Map 요소에 Rotate 트리거를 추가한 다음, 그 아래에 Rotate 응답을 연결합니다.
이 간단한 단계만으로도 손가락을 비틀어 지도를 회전할 수 있어야 합니다.
자기 위치 마커
방금 구현한 트리거로는 마커가 움직이지 않는다는 것을 알 수 있을 것입니다.
1. 이 문제를 해결하려면 지도와 새 위치 마커를 모두 내부에 넣은 새 container를 만들어야 합니다. 이 튜토리얼에서는 이를 Map Container라고 이름 짓겠습니다.
2. 이전에는 트리거와 응답을 지도 레이어에 연결했지만, 이러한 트리거는 지도에만 영향을 줍니다. 이를 마커에도 적용하려면:
Shift 키를 누른 채 모든 트리거를 선택하세요. 이렇게 하면 여러 트리거를 동시에 선택할 수 있습니다
영향을 받는 레이어를 Map Container로 변경하세요
응답은 Shift 클릭으로 서로 다른 트리거 아래의 응답을 선택할 수 없으므로, 응답의 레이어를 하나씩 Map Container로 변경해야 합니다
이 작업을 마치면, 지도와 위치 마커 모두 트리거에 따라 함께 움직여야 합니다.
하지만 크기를 조절할 때 지도와 마커가 모두 왼쪽 상단 모서리로 사라지는 것을 보게 될 것입니다. 이는 제약 조건 때문에 발생합니다.
제약 조건
지도가 크기 조절을 하지 못하는 이유는 지도에 Fixed Width와 Fixed Height 제약 조건이 설정되어 있기 때문입니다. 이로 인해 이미지가 부모 컨테이너 안에서 고정된 크기로 유지됩니다.
1. 이를 해결하려면 지도 레이어로 들어가 제약 조건을 확인한 뒤 Fixed Width 옵션의 선택을 해제하세요. 그러면 지도가 부모 컨테이너와 함께 크기 조절될 수 있습니다.
💡 이렇게 하면 Fixed Height의 선택도 자동으로 해제되며, 그 반대도 마찬가지입니다.
이는 레이어의 크기가 잠겨 있기 때문입니다. 이렇게 하면 모든 변형에서 이미지의 가로세로 비율이 동일하게 유지됩니다. 이 지도의 경우에는 지도가 원래의 가로세로 비율을 유지하도록 이 잠금을 해제하지 않은 채 두고자 합니다.
2. 위치 마커는 크기가 변하지 않도록 너비와 높이의 제약 조건을 fixed로 유지하겠습니다.
3. 마커가 지도와 함께 움직이고 컨테이너 내에서 상대적인 위치를 유지하도록 하려면, 가장자리 제약 조건을 모두 선택 해제하기만 하면 됩니다. 이제 지도가 올바르게 패닝, 확대/축소, 회전될 것입니다!
제한
지도 애플리케이션을 사용하다 보면, 무한정 확대하거나 축소할 수는 없다는 것을 종종 알게 됩니다.
1. ProtoPie에서도 이러한 제한을 설정할 수 있습니다! 확대/축소 제한을 설정하려면:
Scale 응답으로 이동합니다.
Limit 섹션을 찾습니다
최소 및 최대 픽셀 너비와 높이를 설정합니다. 이 튜토리얼에서는 최소값을 1000x1000px, 최대값을 5000x5000px로 설정하겠습니다.
최소값을 1000x1000px로, 최대값을 5000x5000px로 설정하세요
이제 지도를 확대하거나 축소해 보면, 일정 수준에서 더 이상 확대되지 않도록 막히는 것을 확인할 수 있습니다.
2. Move 응답의 패닝 효과에도 비슷한 제한을 설정할 수 있습니다! 컨테이너 크기로 제한하는 쉬운 방법은 제한을 Limit to Screen으로 설정하는 것입니다. 그러면 컨테이너 경계를 넘어 넘치지 않게 됩니다. 또는 이미지의 특정 부분을 패닝에서 제외하고 싶다면 Custom Limits 옵션을 자유롭게 활용해 보세요!
축하합니다!
완료했습니다! 확장되는 이미지 미리보기를 만들었습니다! 이 내용을 여러분의 디자인 콘셉트에 적용해 보고 어떤 아이디어를 실현할 수 있는지 확인해 보세요!
