iOS HIG 독서모임 Gesture & Haptics

Gesture란?

• 터치 스크린에서 iOS와 직접적으로 상호작용 할 수 있게끔 도와주는 기능.
• 앱 컨텐츠의 기능들을 사용자의 손가락으로 직접 조작함으로써 훌륭한 User 경험을 제시할 수 있음!

Gesture를 사용할 때 주의할 점 ⭐️⭐️

1. 표준 Gesture를 사용하자. ⭐️⭐️

   • 애플에서 사용하는 Gesture 방법을 그대로 따르는 것이 좋다. 커스텀 Gesture를 되도록 만들지 마라.
     • 예를 들어, 두 손가락을 모으면 화면을 축소하고, 펴면 화면을 확대하는 것이 애플이 지정한 Standard Gesture인데, 두 손가락을 모았는데 뭔가를 취소시키거나 하는 커스텀 Gesture를 만들지 말라는 것이다. ⭐️⭐️
     • 앱 게임이나 다른 몰입형 앱 (넷플릭스나 영상을 보는 앱 등)에서는 커스텀 Gesture가 재미있는 부분이 될 수는 있음. (그런데 되도록이면 그냥 표준 Gesture 사용하자)

2. 표준 Gesture 내에 완전히 다른 Gesture 기능을 넣지 마라. ⭐️⭐️

   • 1번과 비슷한 내용인데 표준 Gesture에다가 전혀 다른 Gesture 기능을 넣지 말자.

3. SystemWide Screen-Edge Gesture를 사용할 수 있게끔 하자.

   • SystemWide Screen-Edge Gesture란 다음과 같은 것들이다.
     • 디바이스의 화면을 위에서 아래로 Swipe 했을 때 나오는 Notification Center
     • 디바이스의 화면을 아래에서 위로 Swipe 했을 때 나오는 설정 화면
     • iPhone X 이상 부터 사용할 수 있으며 디바이스의 아래 화면을 길게 터치한 후 위로 Swipe 할 때, 앱의 Background 단에 존재하는 모든 앱을 확인할 수 있는 화면 등
   • 사람들은 이러한 Gesture가 “모든 앱에서 작동하기를 기대한다.“
   • 더 자세한 내용은 UlViewController의 preferredScreenEdgesDeferringSystemGestures() 메소드를 참조하자.

4. 단축 Gesture를 제공하되, UI의 어떤 기능을 대체하지 말고 보완해야 한다.

   • 왼쪽에서 오른쪽으로 Swipe 하여 뒤로 가기 기능을 구현할 수 있다고 하더라도, Back Button이라는 UI를 없애서는 안 된다.
   • 즉, 단축 Gesture를 제공할 수는 있지만 그 Gesture가 UI의 어떤 기능을 대체해서는 안 된다는 것이다.

5. 다양한 유저 경험을 제공하기 위해 다중 손가락 Gesture를 사용하자.

   • 여러 손가락을 사용하는 Gesture가 모든 상황에 적합하지는 않지만 적절히 사용했을 때엔 좋은 유저 경험을 제공할 수 있음.
   • 더 자세한 내용은 UlGestureRecognizer를 참조하자.

Gesture의 종류

1. Tap

   • 화면을 한 번 터치하여 선택 기능을 사용되는 Gesture

2. Drag

   • TableView(List) 같은 데이터들의 순서를 바꿀 때 사용되는 Gesture

3. Flick

   • 사진이나 Page 같은 다수의 화면들을 넘길 때 사용되는 Gesture

4. Swipe

   • 이전 화면으로 돌아가거나
   • TableView 행에서 삭제 버튼을 보여주거나
   • 아이패드에서 네 손가락으로 Swipe를 할 경우, 앱들 사이를 전환할 수 있게 해주는 Gesture

5. Double Tap

   • 화면을 두 번 터치하여 화면 축소 및 확대 기능을 사용하는 Gesture

6. Pinch

   • 손가락 두 개로 화면을 축소하고 확대하는 기능을 사용하는 Gesture

7. Three-Finger Pinch

   • Text를 선택한 후에, 손가락 세 개를 모으면 복사, 손가락 세 개를 바깥 방향으로 피면 붙여넣기 기능을 사용하는 Gesture

8. Three-Finger Swipe

   • 세 손가락을 왼쪽으로 Swipe하면 Undo (사용자의 작업을 아무것도 변경하지 않은 원본 상태로 되돌리는 것), 오른쪽으로 Swipe하면 Redo (원본으로 되돌아온 상태에서 Undo로 인해 사라진 부분을 다시 복구하는 것) 기능을 사용하는 Gesture

9. Touch and Hold

   • 주로 Text 위에서 수행하는 경우에 한 번 터치한 후, 다시 길게 터치하면 Text를 편집할 수 있는 기능이 생성되는 Gesture

10. Rotate

    • 손가락 두 개를 이용해서 화면을 회전시킬 수 있는 Gesture

11. Shake

    • 디바이스를 흔들면 Undo나 Redo 기능을 사용할 수 있는 Gesture

Haptics란?

• Haptics란 “촉각” 을 뜻한다. 즉, 사용자의 촉각을 자극하여 피드백을 주는 방식을 의미함.
• iPhone에는 내부적으로 Taptic Engine이 존재하며 Taptic Engine이 Haptics 라는 유저 경험을 제공함. (iPad에는 Haptics 기능이 존재하지 않는다. )
• Haptics 기능의 예시는 다음과 같다.
  • Apple Pay에서 결제를 성공적으로 마쳤을 경우 시각적인 효과와 디바이스의 진동으로 결제가 성공적으로 이루어졌다는 것을 사용자에게 알릴 수 있음.
  • 혹은 와이파이를 On / Off 할 때 디바이스의 진동으로 와이파이가 On 되었는지 Off 되었는지를 좀 더 상세하게 피드백 받을 수 있다.

Haptics를 사용할 때 주의할 점

1. 애플에서 사용하는 표준 UI를 사용하자 ⭐️⭐️

   • 애플이 제공하는 UISwitch, UISlider, Picker 등에는 Haptics 기능을 사용할 수 있도록 제작되었다.
   • 만일 커스텀으로 이러한 UI를 제작한다면 Haptics 기능을 사용하기 어려울 수 있음.

2. UIFeedbackGenerator를 알림이나 선택, 중요한 공지 등을 제공할 때에 함께 사용하는 것이 좋다.

   • 자세한 내용은 UIFeedbackGenerator를 참조하자.

3. 물론 상황에 따라서 커스텀 Haptics 기능을 구현할 수도 있다.

   • 예를 들면, 어떤 앱에서 “새해 복 많이 받으세요” 라는 문구를 띄우고자 할 때 폭죽이 터지는 UI와 함께 Haptic Feedback을 여러 번 동작하게 하는 방식으로 구현할 수 있긴 하다.
   • 자세한 내용은 Playing haptics와 Playing a Custom Haptic Pattern from a File을 참조하자.
   • Playing haptics에 들어가면 여러 가지 다양한 종류의 Haptics가 존재한다는 것을 확인할 수 있다. 참고할 것.

4. Haptics와 특정 결과 사이에 명확한 인과관계를 구축해야 한다.

   • 예를 들어, 화면에는 아무런 변화도 없는데 갑자기 뜬금없는 Haptics가 울린다던지 등으로 Haptics가 사용되면 안 됨.
   • 명확한 인과관계를 구축한 Haptics 구현은 사용자가 앱 내에서 “어떤 기능을 실행했을 때 변화가 일어나면서 Haptics가 일어나는 것”이다.

5. Haptics는 앱 내에서 다른 피드백을 보완하는 데에 사용되는 것이다.

   • 화면 내에서 어떤 결과가 일어나는 UI Feedback이 구현될 때, Haptics는 이 UI Feedback을 보완해주는 역할을 한다.
     • 예를 들면, 토스 뱅크에서 송금되었습니다! 라는 UI Feedback이 구현되었을 경우 Haptics가 같이 실행되면서 송금되었습니다! 라는 UI Feedback을 더 풍요롭게 해주는 역할을 한다는 의미.

6. Haptics를 신중하게 사용하자.

   • Haptics를 사용할 때에는
     • 정말 중요한 알림을 띄워야 하거나
     • 어떤 결과에 상호작용할 때이다. (Wi-fi 버튼을 눌렀을 때 나오는 Haptics, 5번의 예시 등) ⭐️⭐️
   • 만일 별 것 아닌 것에 일일이 다 Haptics를 적용하려 한다면 사용자가 해당 앱을 사용하지 않게 될 수 있다.