[iOS] 애플의 햅틱(진동) 피드백은 어떻게 사용해야 할까? (Haptic Feedback, UX)

아이폰의 장점은 무엇일까요? 아이폰은 왜 사용할까요?

많은 사람들은 애플의 생태계, 연결성, 그리고 UX 를 꼽습니다.

UX 는 User Experience, 즉 사용자의 경험이라는, 굉장히 추상적인 가치입니다.

 

이렇게 추상적인 사용자 경험을 끌어올리는 방법은 여러 가지가 있겠지만

제가 아이폰을 처음 구입했을 때 가장 놀라웠던 점이 바로 햅틱 피드백이었거든요.

 

햅틱이라고 하면, '연아 햅틱' 을 떠올리시는 분도 있을 것 같습니다. (제가 그랬거든요.)

햅틱이라는 말이 어려우면, '진동'이라고 하면 이해가 쉽습니다.

추억의 '연아 햅틱'

햅틱(Haptic)이 뭘까?

위키백과에서 확인한 햅틱의 사전적 정의는 다음과 같습니다.

햅틱(haptic)은 사용자에게 힘, 진동, 모션을 적용함으로써 터치의 느낌을 구현하는 기술

 

그리고 이 햅틱을 작동시키기 위한 하드웨어로 애플은 탭틱 엔진(Taptic Engine)이란 것을 자체 개발해서 아이폰 6S 부터 탑재하고 있습니다.

 

아름다운 탭틱 엔진의 모습

 

근데 왜 햅틱 엔진이 아니라 탭틱 엔진일까요?

이 내용에 대해 구글링해보니, 탭틱(Taptic) = "Tap"과 "Haptic Feedback" 의 합성어라고 합니다.

애플이 탭틱 엔진을 개발하면서 만든 트레이드 마크와 같은 이름이라고 하네요. 출처

 

여기서 표현에 주의를 해야 한다면, 탭틱 엔진은 실제 진동을 발생시키는 하드웨어란 것이고

탭틱 엔진으로 인해 사용자가 경험하는 진동을 햅틱 피드백이라고 부른다는 것입니다.

 

즉, "탭틱 피드백" 이라고 하거나, "햅틱 엔진" 이라고 표현하는 건, 엄밀히는 잘못된 표현이라고 할 수 있겠죠.

 

햅틱 피드백의 중요성, 그리고 주의할 점

햅틱 피드백은 애플의 아이폰 뿐만 아니라, 애플워치, 맥북에도 들어갑니다.

그리고 사용자 경험(UX)을 만들어내는 일에 아주 큰 역할을 하고 있죠.

 

저는 첫 아이폰으로 8+ 를 구매했습니다. 홈 버튼이 남아있던 마지막 아이폰 세대였죠.

저 동그란 버튼을 눌렀을 때, 똑딱 거리는 느낌이 정말 좋았는데요.

 

아이폰 8 시리즈의 홈 버튼

 

아이폰을 한 1년쯤 사용했을 때쯤이었을까요, 홈 버튼이 '실제로 눌리는 게 아니'라는 걸 우연히 알아챘습니다.

오직 햅틱 피드백 만으로, 실제로 버튼이 눌리는 듯한 느낌을 준 것이더라구요.

 

그날은 애플이 정말 경이로울 정도로 사용자 경험에 신경을 쓰고 있다는 걸 강렬하게 느낀 날입니다.

(그날로 바로 iOS 개발자가 되기 위한 공부를 시작했다면, 지금은 뭘 하고 있을까 하는 아쉬움은 있네요.)

 

제 얘기는 그만하고, 이제 애플이 햅틱에 대해 만들어둔 공식 문서를 살펴봅시다.

[Human Interface Guidelines] 의 Haptics 부분입니다. 링크

 

Haptics engage people’s sense of touch to enhance the experience of interacting with onscreen interfaces.

 

첫 번째 줄부터 바로 나오죠. 햅틱은 화면 인터페이스와 인터랙팅할 때의 터치 경험을 향상시킨다구요.

 

 

역시나 애플은 개발자들을 위해, 주요한 햅틱 패턴을 미리 만들어두었습니다.(predefined haptic patterns)

3가지 카테고리가 있어요. notification, impact, selection 입니다.

이건 조금 이따 하나씩 살펴보기로 하구요!

 

먼저, 햅틱 피드백을 디자인할 때 중요한 원칙들이 있습니다.

중요한 것들만 쏙쏙 뽑아서 살펴보겠습니다.

 

1. 인과관계가 명확하게 만들자.

사용자가 앱의 버튼을 누르거나, 경고창이 뜨는 경우에 햅틱 피드백이 들어오는 건 자연스러워요.

 

원인(버튼을 누른다 / 오류가 발생한다) -> 결과(버튼이 눌렸다는 느낌을 주는 햅틱 / 오류 발생에 대해 인지시키는 햅틱)

 

이렇게, 원인과 결과를 쉽게 알 수 있으니까요!

근데 앱을 사용하다가 햅틱이 뜬금없이 튀어나오면, 사용자는 혼란스러워할 겁니다.

원인이 명확하고, 필요한 경우에만 햅틱 피드백을 작동시키도록 디자인하면 좋아요.

 

2. 앱의 다른 피드백(시각적/청각적)과 조화롭게 만들자.

소리는 작게 "톡" 하고 나오는데, 햅틱 피드백이 강하게 울리면 어색하겠죠?

반대로, 소리는 엄청 크게 "쿵" 나오는데, 햅틱 피드백이 약하게 오는 것도 이상해요.

 

촉각을 자극하는 햅틱 피드백을 시각적/청각적 피드백을 함께 사용할 때는 조화롭게(in harmony) 어울릴 수 있도록 디자인하는 게 중요해요.

 

3. 일관성 있게 만들자.

예를 들어, 어떤 게임 캐릭터가 미션 달성에 실패했을 때 A 라는 햅틱 패턴의 피드백이 들어온다면, 사용자는 A 피드백은 부정적인 결과와 관계가 있다고 생각하겠죠?

 

근데 내 캐릭터가 미션 달성을 성공하거나, 레벨업을 하는 것처럼 긍정적인 결과가 생겼을 때도 A 햅틱 피드백을 틀어준다면요? 그러면 사용자는 혼란스러울 거예요.

 

즉, 성공과 실패 같이, 각기 다른 상황에 대한 햅틱 패턴을 구분하는 게 좋아요.

 

4. 햅틱 피드백을 과하게 사용하지 말자.

적절한 순간에 발생하는 햅틱 피드백은 좋지만, 너무 시도 때도 없이 햅틱 피드백을 주면, 사용자가 피로감을 느끼겠죠.

예를 들어서, 화면을 이동하거나 버튼 하나를 누를 때마다 강력한 햅틱이 발생한다면, 앱의 사용자 경험이 악화될 거예요.

 

최고로 잘 디자인된 햅틱 경험은, 너무나 자연스러워서 사용자가 햅틱의 존재를 인지하지 못할 정도라고 합니다.

그러다가 햅틱이 사라지면, 사용자가 햅틱을 갑자기 그리워하게 될 정도로요.

 

5. 햅틱 피드백을 끌 수 있는 선택권을 주자.

어떤 사용자들은 햅틱 자체를 싫어할 수도 있겠죠.

앱의 사용자 설정에다 햅틱 피드백을 전부 꺼버릴 수 있는(turn off) 선택권을 주세요.

 

6. 햅틱 피드백이 의도하지 않은 불편함을 줄 수 있다는 점에 신경 쓰자.

햅틱은 필연적으로 진동(vibration)을 통해 이뤄져요.

만약에 우리가 카메라를 사용하거나, 아이폰에 내장된 마이크로 섬세한 녹음을 하고 있는데, 햅틱 피드백이 징징거리면서 울리면 어떨까요? 짜증 나지 않을까요?

 

이런 의도하지 않은 불편함을 주지 않도록 신경 쓰면서 햅틱 피드백을 언제 작동시킬 것인지 신경 써야 해요.

---

햅틱 피드백을 코드로 만들어보자!

위에서, 애플이 개발자들을 위해 3가지 햅틱 패턴을 미리 만들어두었다고 했는데요.

그 햅틱 패턴은 모두 UIFeedbackGenerator 라는 superclass 안에 포함되어 있습니다.

 

* 햅틱 피드백을 사용하기 위해선 import UIKit 필요합니다!

 

 

다만 이 클래스를 상속하거나, 인스턴스를 만드는 게 아니라는 점을 주의해야 합니다.

 

이 UIFeedbackGenerator 는 3개의 subclass 를 제공해요.

그 3개 중에서 원하는 햅틱 패턴을 선택해서 인스턴스로 만들어야 합니다.

어떤 특징을 갖고 있는지 하나씩 살펴볼게요.

 

 

UIImpactFeedbackGenerator

임팩트 피드백은 '충돌'에 대한 시각적 경험을 보충하기 위한 물리적인 메타포(은유)를 제공합니다.

예를 들면, 2개의 무거운 물체가 충돌했을 때의 "쿵" 느낌을 표현할 때처럼 말이죠.

 

 

임팩트 피드백을 사용하기 위해, 인스턴스를 만들 때 이니셜라이저로 FeedbackStyle 을 지정할 수 있습니다.

열거형으로 5가지가 존재합니다.

 

- light : 작거나 가벼운 UI objects 간의 충돌을 표현할 때

- medium : 중간 사이즈 UI objects 간의 충돌을 표현할 때

- heavy : 크거나 무거운 UI objects 간의 충돌을 표현할 때

- rigid : 딱딱하거나 유연하지 않은 UI objects 간의 충돌을 표현할 때 (돌멩이끼리 부딪히는 느낌을 상상해보세요.)

- soft : 부드럽거나 유연한 UI objects 간의 충돌을 표현할 때 (주먹으로 부드러운 베개를 툭 때리는 느낌을 상상해보세요.)

 

* rigid, soft 는 iOS 13.0 이상부터 사용 가능합니다.

 

 

인스턴스를 만들었다면, impactOccurred 인스턴스 메서드로 햅틱 피드백을 작동시킬 수 있습니다.

 

파라미터 intensity 를 넣고 0.0 ~ 1.0 사이의 숫자로 햅틱의 강도 또한 조절할 수 있습니다.

빠르게 날아온 물체끼리 부딪히는 것과, 천천히 부딪힌 물체의 햅틱 강도를 다이나믹하게 조절할 수 있다면, 사용자 경험이 훨씬 좋아지겠죠?

 

 

UINotificationFeedbackGenerator

노티피케이션 피드백은 작업이나 액션의 '결과'에 대한 햅틱 피드백을 제공합니다.

예를 들면, 돈을 성공적으로 송금하거나, 자전거의 잠금을 해제하는 것처럼요.

 

 

해당 클래스의 인스턴스를 만들고, notificationOccured 라는 인스턴스 메서드를 호출합니다.

이 인스턴스 메서드는 argument 로 열거형을 받아요. 마찬가지로 햅틱 피드백의 '종류'인데요. 3가지가 있습니다.

 

- success : 작업이나 액션이 성공했다는 걸 표현할 때

- warning : 작업이나 액션에서 문제가 생겼다거나 주의를 표현할 때 (Alert 와 함께 쓰기 적합)

- error : 작업이나 액션이 실패했다는 걸 표현할 때

 

 

결제가 성공하거나, 잠금이 성공적으로 풀리는 것처럼 긍정적인 결과에는 success 스타일

경고 Alert 가 뜨거나, 사용자에게 어떤 주의를 줘야 하는 경우엔 warning 스타일

결제가 실패하거나, 비밀번호가 잘못 입력돼서 잠금해제에 실패한 것처럼 부정적인 결과에는 error 스타일의 노티피케이션 피드백을 사용하면 되겠죠? 😄

 

UISelectionFeedbackGenerator

셀렉션 피드백은 UI 요소의 값이 '변경'되는 상황에 대한 햅틱 피드백을 제공합니다.

 

 

아마 아이폰을 사용해보셨던 분은 아실 거예요.

아래와 같이 자물쇠를 돌리는 듯한 선택 화면을요!

 

UIPickerView 라는 건데요. 돌릴 때마다, 아주 미세하고 간지러운 햅틱 피드백이 연속적으로 발생하죠.

마치 실제 자물쇠를 대굴대굴 굴리는 것 같은 느낌을 줘요. 강렬한 사용자 경험이죠.

 

그리고 그 오른쪽에, 숫자 10 아래에 있는 건 UIStepper 라는 겁니다.

딱 봐도, [-] 버튼 누르면, 위의 숫자가 감소할 거 같고, [+] 버튼으로 누르면 커질 거 같죠?

 

근데 버튼이 굉장히 작아요. 엄지손가락으로 누르면, 버튼을 완전히 가릴 수 있을 정도예요.

그러면 버튼이 눌렸거나, 눌리고 있다는 사실을 어떻게 표현할 수 있을까요?

 

시각적으로 숫자가 빠르게 변하는 거로 표현할 수도 있겠지만

그런 시각적 피드백과 셀렉션 피드백을 조화롭게(in harmony) 사용하면 사용자 경험이 향상될 거예요. (enrich the user experience)

 

UIPickerView 그리고 UIStepper

 

셀렉션 피드백은, 위에서 다뤘던 임팩트, 노티피케이션 피드백과 다르게 햅틱 스타일이 오직 하나밖에 없어요.

아주 얇은 진동이 빠르게 한 번 발생하는 게 끝입니다.

 

그게 자연스럽겠죠? UIPickerView 를 굴리는 데, 강력한 햅틱이 나오면 어색하잖아요. 😅

UIStepper 에서도 마찬가지로, 값이 변경되는 메서드에 셀렉션 피드백 코드를 한 줄 넣어두면 됩니다.

 

---

시뮬레이터에서는 햅틱 피드백 테스트를 할 수 없다.

Xcode 의 아쉬운 점 중 하나인데요, 우리가 빌드한 앱을 돌려볼 수 있는 시뮬레이터는 진동을 표현하지 못해요.

따라서 햅틱 피드백이 제대로 구현이 됐는지도 시뮬레이터만 갖고는 알 수가 없어요.

 

아이폰을 맥북과 연결해서, 아이폰으로 직접 앱을 시뮬레이팅 해야 햅틱 피드백을 경험할 수 있습니다!

 

햅틱 피드백 요약

- 임팩트 피드백 (UIImpactFeedbackGenerator 타입)

'물리적 충돌'에 대한 시각적 표현을 보충하기 위한 햅틱 패턴

5가지 피드백 스타일 존재 (light, medium, heavy, rigid, soft)

 

- 노티피케이션 피드백 (UINotificationFeedbackGenerator 타입)

작업이나 액션의 '결과'를 표현하는 햅틱 패턴

3가지 피드백 스타일 존재 (success, warning, error)

 

- 셀렉션 피드백 (UISelectionFeedbackGenerator 타입)

UI 요소의 '값이 변경'되는 걸 표현하는 햅틱 패턴

오직 1가지 피드백 스타일 존재

 

* 다양한 햅틱 피드백 스타일을 직접 경험하고 싶다면, HIG - Haptics 링크에 방문해보세요!

 

개발자가 원한다면 물론, 커스텀 햅틱 패턴 또한 만들 수 있어요.

하지만 일단 애플이 기본적으로 제공하는 3가지 햅틱 패턴에 대해서 제대로 이해하고, 활용할 줄 안다면, 충분히 사용자 경험을 끌어올릴 수 있을 거라 생각합니다. 😊

 

포켓몬 마을에서 스타팅 포켓몬으로 이상해씨, 파이리, 꼬부기 중에서 한 마리를 고르듯이

우리 iOS 개발자들도 햅틱 패턴 3가지 중에서 자신에게 필요한 패턴을 잘 골라서 사용해봅시다!

(물론 3가지 햅틱 패턴을 모두 활용할 수도 있습니다.)

 

 

참고 링크

[Human Interface Guidelines] Haptics

[애플 공식 문서] UIFeedbackGenerator

[WWDC2021] Practice audio haptic design

[Zedd 블로그] Haptic Feedback