마우스 오버 시 툴팁 표시하는 법

소개

툴팁은 일반적으로 인터페이스 디자인에서 추가적인 맥락을 제공하고 사용자가 맥락에 맞는 작업을 하도록 안내하는 데 사용하는 짧은 메시지입니다. 이러한 툴팁은 버튼, 아이콘 등과 같은 특정 UI 요소 위에 마우스를 올리면 표시할 수 있습니다. 이 효과는 ProtoPie에서 특정 Mouse Over 및 Mouse Out 트리거와 특정 opacity 응답을 사용해 쉽게 구현할 수 있습니다. 이 튜토리얼에서는 프로토타입에서 툴팁이 자연스럽게 작동하도록 만드는 더 많은 팁을 알려드리겠습니다.

배울 내용

이 레슨에서는 다음을 배우게 됩니다:

1. 물음표 버튼의 마우스 오버 상태 만들기

2. 물음표 버튼의 마우스 아웃 상태 만들기

마지막에는 이런 결과물을 만들 수 있게 됩니다!

[시작 Pie 파일] [완성된 Pie 파일]

단계별 안내

1. 물음표 버튼에 마우스 오버 상태 만들기

　1. Tooltip 레이어를 선택하고 opacity를 0으로 설정합니다.

Tooltip 레이어를 마우스를 Button 레이어 위에 올렸을 때만 표시하려면, 마우스가 벗어나 있을 때 초기 상태에서 Tooltip 레이어를 보이지 않게(opacity를 0) 설정해야 합니다.

　2. Question mark button 레이어에 Mouse Over 트리거를 추가합니다.

마우스 커서가 Button 레이어 위로 올라가면 그 아래의 응답이 실행됩니다.

사용자가 특정 UI 요소 위에 마우스를 올렸을 때 응답이 실행되도록 추가하는 것입니다.

　3. Mouse Over 트리거에 Opacity 응답을 추가합니다. Opacity 응답에서 Tooltip 레이어의 opacity를 100.으로 설정합니다.

물음표 버튼 레이어 위에 마우스를 올리면 Tooltip 레이어가 표시되도록 트리거됩니다.

　4. Mouse Over 트리거에 Shadow 응답을 추가합니다. 그리고 이를 사용해 Button 레이어 아래의 BG 레이어를 변경합니다. 여기서는 Fill 값을 20, Y 값을 20, Blur 값을 40으로 설정합니다. (이 값들은 언제든지 조정할 수 있습니다)

사용자가 물음표 버튼 위에 마우스를 올릴 때마다 버튼을 강조하기 위해 Shadow 응답을 사용합니다.

　5. 미리보기 창에서 확인해 봅시다. 이제 마우스를 물음표 버튼 레이어 위에 올리면 툴팁이 나타납니다.

2. 물음표 버튼에 마우스 아웃 상태 만들기

하지만 마우스를 밖으로 옮겨도 툴팁이 사라지지 않습니다. 따라서 이를 해결하려면 Mouse Out 트리거가 필요합니다.

　1. Question mark button 레이어에 Mouse Out 트리거를 추가합니다.

마우스 커서가 Button 레이어 밖으로 나가면 그 아래의 응답이 실행됩니다.

　2. Mouse Out 트리거에 Reset 응답을 두 개 추가합니다. 하나는 Tooltip 레이어에, 다른 하나는 BG 레이어에 사용합니다.

💡 왜 Reset을 사용할까요?

Reset 응답을 사용하면 레이어나 변수를 정확한 초기 상태로 되돌릴 수 있습니다. Button 레이어에서 Mouse Out될 때 모든 것을 초기 상태로 되돌리고 싶습니다. 그래서 이번에는 Reset 트리거를 사용하면 됩니다.

Tooltip 레이어의 Reset 응답은 툴팁의 opacity를 0으로 되돌려 사라지게 하고, BG 레이어의 다른 Reset은 버튼의 그림자를 초기화합니다.

　3. 이제 직접 해 보세요! 툴팁처럼 동작합니다! 하지만 물음표 버튼 레이어의 위쪽 부분에 마우스를 올리면, 적용된 레이어의 차이 때문에 툴팁이 이상하게 보입니다.

💡 왜 이런 일이 발생할까요?

tooltipBG 레이어(툴팁 레이어 안에 있습니다)를 선택해 보면, Question mark button과 겹치는 부분이 있다는 것을 볼 수 있습니다.

겹치는 부분에 마우스를 올리면 두 가지 동작이 발생합니다:

• 물음표 버튼 위에 마우스를 올렸기 때문에 툴팁이 나타납니다.

• 툴팁이 나타나면 물음표 버튼 위의 마우스를 가로막게 되고, 그러면 Mouse Out이 트리거됩니다.

　4. Tooltip 레이어를 선택하고 속성 패널에서 Make Lower Layers Touchable 옵션을 선택해 이 문제를 해결합니다.

　5. 미리보기 창에서 확인해 봅시다. 이제 Tooltip 레이어의 아래 레이어를 터치할 수 있습니다. 즉, Tooltip 레이어가 나타나고 마우스가 자동으로 Tooltip 레이어 위에 올라가더라도 Mouse Out은 트리거되지 않습니다.

축하합니다!

마침내 Mouse over, Mouse out 트리거와 Opacity 응답을 사용해 작동하는 툴팁을 만드는 방법을 배웠습니다. 또한 ProtoPie에서 이 효과를 구현하는 데 유용한 몇 가지 팁과 요령도 배웠습니다. 수고하셨습니다! 이 튜토리얼의 끝까지 오셨습니다!

이 내용을 바탕으로 자유롭게 실험해 보면 더 흥미로운 인터랙션도 만들 수 있습니다! 여러분의 멋진 실험도 꼭 보고 싶습니다. 직접 프로토타입을 만들어 Twitter 또는 Instagram에 #MadeWithProtoPie 해시태그와 함께 공유해 주세요.

[도움이 되었나요? 알려 주세요!]