소개
모바일 애플리케이션에서는 공간이 제한되어 있기 때문에 때때로 여러 메뉴를 하나의 버튼 안에 숨겨야 합니다.
이 글에서는, Range 트리거를 사용해 버튼을 길게 눌렀을 때 플로팅 메뉴 버튼을 숨기고 보여 주는 멋진 인터랙션을 만드는 방법을 알아보겠습니다.
배울 내용
길게 누르기 인터랙션 만들기
터치 시 플로팅 버튼 크기 조절하기
마지막에는 이런 것까지 만들 수 있게 됩니다!
단계별 안내
1. 길게 누르기 인터랙션 만들기
1. "plus" 버튼 레이어를 선택하고 Long Press 트리거를 추가합니다.
2. Live 메뉴 버튼을 선택하고, Long Press 트리거에 Move 응답을 추가합니다. Move 응답의 값으로 현재 X 및 Y 위치를 사용합니다.
X 값은 114로, Y 값은 685로 설정합니다.
💡 Live 버튼의 현재 위치를 사용하는 이유는 이미 올바른 "표시" 위치에 있기 때문입니다.
3. 다른 2개의 플로팅 메뉴 버튼도 같은 방식으로 합니다. 메뉴 버튼을 선택하고 Long Press 트리거 아래에 move 응답을 추가한 뒤, 각각의 X 및 Y 위치를 move 응답 값으로 사용합니다.
💡 더 흥미로운 인터랙션을 만들고 싶다면 Move 응답의 타임라인을 다양하게 조정해 보세요. 이징, 시작 지연, 지속 시간을 바꿔 보면서 마이크로 인터랙션에 어떤 영향을 주는지 확인할 수 있습니다.
4. Plus 버튼에 길게 누르기가 적용되었을 때 3개의 플로팅 메뉴 버튼이 표시되도록 설정했습니다. 하지만 처음에는 이 버튼들이 숨겨져 있어야 합니다.
이 3개의 버튼을 Plus 버튼 아래에 숨겨 봅시다. 직접 드래그해서 Plus 버튼 뒤로 보내거나 X를 188, Y 값을 753으로 설정할 수 있습니다.
이 작업을 마치면 프로토타입에서 길게 눌러 숨겨진 플로팅 메뉴 버튼을 표시할 수 있습니다. 하지만 손가락을 떼면 다시 숨겨야 하므로, 아직 인터랙션의 절반만 완성된 상태입니다.
5. 플로팅 메뉴 버튼을 숨기려면 Plus 버튼 레이어를 선택하고 Touch Up 트리거를 추가합니다. 이 트리거는 프로토타입에서 손가락이 터치를 뗐을 때를 감지하는 데 도움이 됩니다.
6. 그런 다음, 플로팅 메뉴 버튼의 위치를 초기화해 봅시다. 이를 위해 각 버튼을 선택하고 Reset 응답을 추가합니다.
Reset 응답은 요소에 적용된 모든 변경 사항을 초기화할 수 있는 유용한 응답이므로, 직접 일일이 되돌릴 필요가 없습니다. 꼭 기억해 두세요!
7. 이제 완료되었습니다! 이제 long-press 트리거를 사용해 구성 요소를 숨기고 보여 줄 수 있습니다. 다음 단계로 넘어가서 인터랙션을 더 흥미롭게 만들어 봅시다!
2. 터치 시 버튼 크기 조절하기
손가락을 버튼 위에서 움직일 때 플로팅 메뉴 버튼에 크기 조절 인터랙션을 추가해 보겠습니다:
1. 먼저, 손가락 위치를 저장할 두 개의 변수를 만들어 봅시다. 이름은 touchX와 touchY로 합시다. 두 변수 모두 두 번째 옵션을 선택하고, 변수 범위를 For This Scene으로 설정합니다.
2. ProtoPie 5.5에서는 변수 안에 수식을 사용할 수 있습니다. 터치 위치를 캡처한 뒤, 방금 만든 변수에 저장할 것입니다.
touchX 변수를 선택하고 오른쪽 패널에서 Use Formula 체크박스를 선택합니다. 수식 입력란에 $touchX를 입력합니다. touchY도 같은 방식으로, 수식 입력란에 $touchY를 입력합니다.
터치 위치를 캡처한 뒤 변수에 저장하기
3. 변수 옆의 "디버그" 아이콘을 눌러 touchX와 touchY의 값을 확인할 수 있게 하세요.
4. 프로토타입에서 이 작업을 직접 해 보세요. plus 버튼을 길게 누른 상태에서 손가락을 움직여 보면 드래그할 때 X 및 Y 값이 변경되는 것을 확인할 수 있습니다.
다음으로, 손가락을 버튼 위에서 움직일 때 플로팅 메뉴 버튼의 크기를 확대해 보겠습니다. 이를 위해 버튼의 X 및 Y "범위"를 알아야 합니다.
X 및 Y 범위는 버튼이 차지하는 화면 영역입니다. 버튼의 위치에서 버튼의 높이/너비를 기준으로 계산할 수 있습니다. 다음 Live 버튼 예시를 보세요:
위 이미지에서 Live 버튼의 크기는 60px x 60px이고, 위치는 (114,685)입니다.
하지만 (114,685)는 사실 버튼 중앙의 단일 픽셀만 가리키고 있습니다. 손가락을 버튼 위로 움직일 때는 중앙만이 아니라 버튼 전체 영역을 포함해야 합니다.
그래서 range 트리거를 사용하는 것입니다. 전체 버튼 영역을 포함해야 하므로 "중앙" 영역을 확장해야 합니다.
중앙에서 시작하므로 시작 값을 얻기 위해서는 X에서 30을 빼고, 끝 값을 얻기 위해서는 X에 30을 더하면 됩니다. Y 값도 마찬가지입니다.
5. 이제 개념을 이해했으니, 프로토타입에 트리거를 추가해 봅시다. touchX 값을 감지하려는 것이므로 range 트리거 아래에서 touchX 변수를 선택합니다.
"range between" 아이콘(세 번째 아이콘)을 선택하고 시작 값에 84, 끝 값에 144를 입력합니다. 이렇게 하면 Live 버튼의 올바른 X 영역을 포함하게 됩니다.
6. 이제 버튼의 올바른 Y 범위도 포함되도록 해야 합니다. 방금 추가한 range 트리거 아래에, 속성으로 touchY 변수를 사용하여 두 가지 조건을 추가해 봅시다:
첫 번째 조건은 touchY 값이 655보다 큰지 확인하는 것입니다. 655는 Live 버튼의 시작 범위입니다.
두 번째 조건은 touchY 값이 끝 범위인 715보다 작은지 확인하는 것입니다.
7. 조건 아래에 Scale 응답을 추가합니다. 손가락이 Live 버튼 위에 있을 때 버튼을 확대하려는 것입니다. live 버튼 레이어를 선택하고 scale 응답을 추가합니다. 값을 factor 기준으로 120%로 설정합니다. 하지만 원하는 대로 크기를 조정해도 좋습니다.
💡 여기서는 AND 논리를 사용합니다: IF X의 범위가 일치하고 AND Y의 범위도 일치하면 THEN, 버튼을 120%로 확대합니다.
즉, 두 조건이 모두 충족될 때에만 버튼을 120%로 확대합니다.
8. 프로토타입을 실행해 보면, long-press로 plus 버튼을 누른 상태에서 손가락을 Live 버튼으로 드래그할 때 크기 조절 인터랙션이 보입니다. 하지만 손가락을 버튼에서 떼면 다시 축소되지는 않습니다.
축소하려면 다른 range 트리거를 추가해야 합니다. 이번에는 방금 했던 것과 반대로 해 봅시다. Range 트리거를 추가하고 touchX 변수를 속성으로 선택합니다.
"smaller and larger than" 범위를 선택하세요. 이는 오른쪽에서 4번째 아이콘입니다. 시작 값은 84, 끝 값은 144로 설정합니다.
9. Live 버튼 레이어를 선택하고 Range 트리거 아래에 Scale 응답을 추가합니다. 값을 factor 기준으로 100%로 설정합니다. 즉, 손가락이 버튼의 터치 영역에서 벗어나면 다시 100% 크기로 되돌립니다.
10. touchY도 같은 방식으로 합니다. range 트리거를 추가하고 touchY 변수를 속성으로 선택한 뒤 "smaller and larger than" 범위를 선택합니다. 시작 범위를 655, 끝 범위를 715로 설정합니다. 방금 touchX에 대해 만든 scale 응답을 복사하여 touchY의 range 트리거 아래에 붙여넣습니다.
💡 손가락이 버튼 밖에 있는지 감지할 때는 OR 논리를 사용합니다. 즉, IF X의 범위가 일치하지 OR Y의 범위가 일치하지 않으면 THEN, 버튼을 100%로 축소합니다.
즉, 두 조건 중 하나라도 충족되면 scale 응답이 실행됩니다.
11. 나머지 2개의 플로팅 메뉴 버튼에도 같은 논리를 적용해야 합니다. 직접 해 보세요! 다음 X 및 Y 범위 값을 참고하세요:
Post 메뉴 버튼
X 범위 시작: 158
X 범위 끝: 218
Y 범위 시작: 619
Y 범위 끝: 679
Story 메뉴 버튼
X 범위 시작: 230
X 범위 끝: 290
Y 범위 시작: 655
Y 범위 끝: 715
12. 마지막 부분까지 모두 끝냈다면.. 짠! 이제 자신만의 길게 누르기 메뉴 인터랙션을 만들었습니다!
완성입니다!
long-press와 range 트리거를 사용해 자신만의 플로팅 메뉴 버튼 인터랙션을 만들었습니다. 프로토타입을 직접 만져 보면서 얼마나 멋지게 보이는지 확인해 보세요!
여러분의 기발한 실험도 꼭 보고 싶습니다. 자신만의 프로토타입을 만들어 Twitter 또는 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요.
