모바일 서비스에 전략적으로 햅틱 피드백 녹여내기

최근 ⏱️째깍악어🐊 서비스의 일부 인터랙션에 네이티브 햅틱 피드백을 적용했습니다. 이 글에서는 몇 편의 햅틱 관련 연구와 사용성 검증 사례를 소개드리며 ⏱️째깍악어🐊의 햅틱 피드백 설계 방식을 공유해보려 합니다(주의: 이전의 다른 글보다 인지-행동심리학 소스가 많습니다).

모바일 인터페이스는 오랫동안 시각을 중심으로 발전해오고 있습니다. 가장 보편적이고 본질적인 감각이기 때문이죠. 하지만 시각이라는 감각은 동시에 가장 큰 결함을 가지고 있는 감각이기도 합니다. 시각에는 다른 감각에 비해 큰 주의력이 수반되기 때문이죠. 우리는 무언가가 시야에 들어오기 전까지, 주의를 집중하기 전까지는 시각적으로 물체를 온전히 지각하고 인지하기 어렵습니다.

반면 청각과 촉각 등 다른 감각들은 어떤가요? 꼭 귀를 기울이지 않아도 큰 사이렌 소리는 들려오기 마련이고, 손가락에 집중하지 않아도 뜨거운 냄비를 만지면 뜨거워 손가락을 떼곤 하죠. 이처럼 청각과 촉각은 시각보다는 크지 않은 주의력을 요구한다고 할 수 있습니다.

최근에는 촉각의 이러한 감각적 특성을 활용해 몰입감을 높인 모바일 서비스들이 많이 등장하고 있는데요. 네비게이션 바의 메뉴 전환 버튼에 약한 진동을 부여하는 *[네이버 쇼핑]*을 그 예로 들 수 있습니다. 이런 의미에서 햅틱 피드백은 단순한 진동 효과라기보다는 인터페이스가 촉각을 통해 사용자에게 응답하는 방식으로 이해하는 것이 적절해보이기도 합니다.

최근 째깍악어 서비스의 일부 인터랙션에도 이 햅틱 피드백을 적용했습니다. 처음에는 단순히 조작감과 몰입감의 향상이라는 감각적인 판단에서 출발했지만 몇 편의 햅틱 관련 연구 분석을 통해 햅틱 설계를 촘촘하게 강화해 보았습니다. 이번 글에서는 서비스에 햅틱을 적용한 전략을 중심으로, 관련 연구들을 한 데 녹여 적어보려 합니다.

왜 햅틱 피드백인가?

앞서 소개드린 것처럼 햅틱 피드백의 가장 큰 특징은 다른 감각과 달리 사용자의 주의를 크게 점유하지 않는다는 점입니다. 촉각은 그 다양한 감각들 중에서도 가장 적은 능동적 주의를 요구합니다(Hoggan, 2008). 가장 효율적인 감각인 셈이죠. 그렇다면 촉각의 이러한 특징은 모바일 환경에서 어떤 효용과 함의를 가질 수 있을까요?

주의를 크게 점유하지 않는다는 것은 더 적은 인지 비용으로 정보를 전달할 수 있다는 것을 의미합니다. 사용자는 기기를 손에 쥐고 있기만 하고 실제 화면을 읽지 않아도 정보를 인지할 수 있는 것이죠. *[토스 뱅크]*에서 송금 완료 시 햅틱 피드백이 발생하는 것도, *[네이버 쇼핑]*의 화면 전환에서 약한 진동이 발생하는 것도 모두 시각적인 신호 없이 동작의 완료라는 정보를 전달하는 것이라고 볼 수 있습니다.

특히 모바일 환경에서는 사용자의 시각적인 인지 자원이 이미 과부화 상태인 경우가 많습니다. 서비스 내부적으로도 작은 화면에 많은 시각 정보들이 제공되고, 모바일 사용 환경 위의 외부적 정보들(이동하면서 핸드폰을 사용하는 상황을 생각해보세요!)로도 이미 사용자의 시각적 인지력은 포화된 상태입니다. 이러한 상황에서 햅틱 피드백은 비교적 낮은 인지 비용으로 상태 변화를 전달할 수 있는 모달리티가 되기 마련입니다.

햅틱은 단순한 효과가 아니다(1): 행동 강화

최근 연구들은 이 햅틱을 단순한 피드백 장치 그 이상으로 해석하고 있다는 점이 흥미로웠는데요. 햅틱을 정보 전달의 모달리티를 넘어 행동 강화의 관점으로 이해하기 시작했다는 점입니다!

작년 발표된 한 연구에서는 모바일 진동이 특정 행동과 반복적으로 결합되면 일종의 보상 자극처럼 작동할 수 있다고 설명합니다(Hampton, 2025). 햅틱 피드백과 보상(결과)이 반복적으로 결합되면서 형성되는 고전적 조건화와 유사한 구조인 것이죠. 나아가 서비스 인터랙션 관점에서는 보상 자극이 된 햅틱 피드백을 특정 행동 뒤에 제공하여 완료의 경험을 강화한다는 점에서 조작적 조건화와 유사한 측면도 존재한다고 볼 수도 있겠습니다.

실제로 해당 연구에서는 특정 길이의 모바일 진동 자체가 구매 행동의 증가와 같은 행동 변화에도 영향을 줄 수 있다고 분석했습니다. 햅틱 피드백이 일차원적인 조작감, 몰입감을 넘어 정보 전달의 매체로, 또 더 나아가 사용자의 행동을 강화하는 요소로까지 활용될 수 있다는 점, 꽤 놀랍지 않나요?

햅틱은 단순한 효과가 아니다(2): 부호화

이번 연구 분석에서 확인하지는 않았지만 개인적으로는 다양한 모달리티를 통해 정보를 제공하는 것이 정보의 부호화(기억)와 학습에 있어서도 유리한 점이 있을 것이라고도 생각합니다.

시각적 상태 변화와 촉각 자극이 함께 제공되면 사용자는 동일한 이벤트를 여러 감각을 통해 동시에 경험할 수 있습니다. 이러한 멀티 모달 경험은 변화에 대한 인지를 더 빠르게 만들 수 있고, 이러한 인터랙션 패턴 자체를 더 쉽게 학습하게 만들 가능성이 있다고 생각합니다.

예를 들어 특정 플로우가 완료되는 시점에 일관성 있게 짧은 진동 패턴을 제공한다면 플로우의 종결과 진동 패턴이 자연스럽게 결합되고, 나아가 사용자는 진동만으로도 플로우가 종결되었음을 쉽게 떠올릴 수 있을지도 모르겠습니다. PickerView에서처럼 반복적인 조작이 발생하는 엘리먼트에서도 분절적인 햅틱 피드백 자체가 엘리먼트의 동작 방식에 대한 이해를 높여 스키마를 형성하는 데 도움을 줄 수 있을 것 같다는 생각을 하기도 합니다.

그래서 모든 인터랙션에 햅틱을 넣지는 않았다

하지만 동시에 여러 연구들은 공통적으로 햅틱 피드백이 많을수록 항상 좋은 것은 아니다라는 점을 분명하게 하고 있었습니다. 과도한 피드백이 오히려 감각 과부하를 유발할 수 있다는 점을 강조하고 있었습니다.

한 연구에서는 진동 패턴의 길이, 반복, 간격이 사용자 경험에 직접적인 영향을 미칠 수 있다고 분석하기도 했습니다(Saket, 2013). 지나치게 긴 진동이나 잦은 반복은 피로감과 불쾌감을 유발할 가능성이 있으며, 명확하지 않은 진동 패턴들은 오히려 경고나 실패와 같은 신호로도 오해석될 수 있음을 짚고 있었습니다.

이러한 연구들을 기반으로 째깍 악어의 햅틱 피드백 전략을 다듬었습니다. 마구잡이로 햅틱 피드백을 넣는 것이 아니라 정말 결정적인 상태 변화에서만 사용하는 방향으로 제한했고, 다양한 상황에서 일관적이고 직관적인 진동 패턴을 제공할 수 있도록 디자인 팀과 함께 논의했습니다.

적용1: ChainPicker, 물리적인 조작감 제공하기

🔊 강도: 약함 ⏰ 시점: spin, snap 📈 패턴: 10~15ms의 짧은 1회 진동

휠을 돌려 값을 선택하는 컴포넌트는 근본적으로 물리적인 조작에 가까운 인터랙션입니다. 하지만 모바일의 기본 터치 인터페이스는 완전히 평평하기 때문에 사용자는 실제로 어떤 단계를 지나고 있는지 촉각적으로 인지하기는 어렵습니다. 따라서 이러한 컴포넌트에 햅틱 피드백을 제공하는 것은 사용자에게 물리 버튼을 조작하는 익숙한 경험을 제공하는 것이고, 나아가 더 좋은 사용자 경험에 기여할 수 있습니다. 실제로 iOS, AOS 등 대다수의 모바일 기기의 유사 네이티브 엘리먼트에서도 이러한 햅틱 피드백을 제공하고 있기도 합니다.

카이스트에서 진행한 GUI 햅틱 연구를 참고하여 물리 버튼과 가장 유사한 감각을 제공할 수 있도록 패턴을 설계했습니다(Shin, 2014). 해당 연구에서는 사용자들이 터치 시작과 릴리즈 양쪽에서 발생하는 짧은 진동을 가장 물리 버튼과 유사하다고 평가했다고 밝혔는데요, 째깍악어의 ChainPicker에서도 유사한 형태의 진동 패턴을 사용했습니다: 10~15ms 수준의 매우 짧고 약한 진동

그렇다면 휠을 돌리는 인터랙션에서 이 짧은 진동을 발생시킬 최고의 시점은 언제일까요? 째깍악어의 ChainPicker 컴포넌트에서는 이 시점을 **(1)가운데 표시된 값이 변경되는 시점(spin 이벤트 발생 시점)과 (2)휠의 속도가 줄어들어 최종값이 선택되는 시점(snap 이벤트 발생 시점)**으로 잡았습니다. 두 시점 모두 휠의 단계감을 제공하는 가장 적절한 시점이며, 터치와 릴리즈라는 물리적인 감각과 가장 맞닿아 있는 시점이기 때문이었습니다.

ChainPicker 컴포넌트에서는 두 시점에 대한 콜백 이벤트 핸들러를 프로퍼티로 넘길 수 있도록 구성해두었었기 때문에 쉽게 사용이 용이했습니다. 아래 코드에서처럼 말이죠!

// ChainPicker에 onSpin, onSnap 콜백 핸들러를 넘길 수 있습니다.
interface ChainPickerProps
 extends GeneralComponentProps<Omit<HTMLAttributes, 'onChange'>> {
 ...
 onSpin?: (selectedValue: number) => void;
 onSnap?: (selectedValue: number) => void;
 ...
}

/*
 웹뷰와 플러터 사이 브릿지 API 규칙에 맞춰 햅틱 피드백을 실행합니다.
 햅틱 피드백은 ChainPicker의 onSpin, onSnap 이벤트 발생시마다 발생합니다.
*/
async function hapticFeedbackSpin() {
 hapticFeedback({ intensity: 'selection' });
}
...
<ChainPicker
 onSpin={hapticFeedbackSpin}
 onSnap={hapticFeedbackSpin}
/>

적용2: 완료 상태, 다른 방식으로 정보 전달하기

🔊 강도: 중간 ⏰ 시점: [완료] 화면 진입 📈 패턴: 200ms 간격으로 2회 발생하는 진동

햅틱 피드백을 적용한 두번째 구간은 모두 예상하셨다싶이 긴 플로우가 종료되는 지점이었습니다. 구체적으로는 (1)결제 완료, (2)공고 신청 완료, (3)회원 가입 완료였는데요, 모두 3 depth 이상의 긴 호흡을 가지고 있는 플로우였습니다. 이러한 플로우들은 일반적으로 입력-검증-로딩-상태전환 등의 긴 인지 과정을 포함하고 있기 때문에 이 플로우의 종료 시점에 이르러서 사용자는 이미 상당한 집중력을 소비한 상태일 것입니다. 그렇기 때문에 더 적은 주의력으로도 소화가 가능한 햅틱 피드백은 사용자에게 더 쉽게 인지될 수 있습니다.

특이한 점은 2회 연속으로 발생하는 진동 패턴을 채택한 점인데요, 이는 테크 그룹 내부적으로 진행한 햅틱 피드백 패턴 검토의 결과였습니다.

📳 사용성 테스트

정식적인 사용성 테스트 수준의 실험 설계를 갖춘 것은 아니긴 합니다만 실제 사용자 관점에서의 지각 차이를 확인하기 위해 약식 검토를 진행했습니다.

첫번째 검토에서는 피험자 4인에게 햅틱 피드백의 존재 자체를 설명하지 않은 상태에서 특정 완료 플로우를 경험하게 했습니다. 이는 사용자가 피드백을 의식적으로 분석하기보다 실제 서비스 환경처럼 부수적인 신호로 자연스럽게 지각하는지 확인하기 위함이었습니다(피험자 별 진동 패턴의 순서를 달리하여 두 차례 플로우 통과). 이후 두번째 검토에서는 동일한 피험자들에게 두 패턴을 의식적으로 비교 평가하도록 했습니다. 비교 패턴은 크게 (1)단일 진동, (2)200ms 간격으로 2회 발생하는 진동 두 가지였으며, 완료 화면 전환과 함께 햅틱 피드백을 반복적으로 경험하게 한 뒤 그 인상과 해석을 수집하는 방식으로 진행했습니다.

소규모 인원에 대한 검토였지만 단일 진동이 오류나 경고로 오해석되는 경우가 발견되었습니다. 심지어 해당 피드백이 완료의 신호로 발생한 것인지 혹은 다른 별개의 상황에서 임의적으로 발생한 것인지 명확하게 지각되지 않는 경우가 확인되기도 했습니다(모바일 기기에서 앱 푸시가 온 것으로 혼동하는 상황 발생). 반대로 짧은 간격을 두고 발생하는 진동은 비교적 안정적으로 지각되었고, 단일 진동에 비해서 좀더 종료 신호로서 안정적으로 해석되는 경향이 있었습니다.

긴 플로우의 종결 상황에서는 사용자에게 전달해야 하는 핵심 정보가 작업이 확정적으로 끝났다는 상태 전환 그 자체이기 때문에 오히려 인공적인 리듬감이 완료의 신호로 더 적절할 수 있다고 판단, 2회 연속으로 발생하는 진동 패턴을 채택했습니다.

적용3: 이달의 보너스, 보상과 결합하기

🔊 강도: 강함 ⏰ 시점: [보너스 받기] 버튼을 누른 시점 📈 패턴: 단일 진동

째깍악어의 교사 앱에는 특정 조건을 달성하면 포인트를 획득할 수 있는 [이달의 보너스] 섹션이 존재하는데요(🤗 교사 리텐션을 견인한 기능이기도 합니다!), 사용자가 보상(보너스)을 수령하는 순간에 강한 햅틱 피드백을 결합하는 방식으로 햅틱을 활용했습니다.

앞서 소개했던 것처럼 최근 연구들은 햅틱 피드백이 단순한 상태 전달을 넘어 보상 자극과 결합될 수 있는 감각 신호라고 설명하고 있습니다(Hampton, 2025). 특히 사용자의 행동 직후 제공되는 촉각 자극은 완료 경험과 보상 경험을 더욱 강하게 연결할 가능성이 있습니다.

이러한 관점을 서비스에서 조금 더 직접적으로 적용(실험)해보고 싶었습니다. 완료 상태에서 사용했던 인공적인 진동 패턴과는 다르게 여기 [이달의 보너스] 섹션에서는 더 강하고 즉각적인 단일 진동을 채택했습니다. 플로우가 종결되었다는 안정적인 정보 식별이 중요한 상황이라기보다는 사용자에게 강렬한 감각을 제공하는 것이 더 중요한 상황이기 때문입니다. 더 강렬한 감각은 긍정적인 보상과 더 강렬하고 끈끈하게 결합될 수 있거든요. 게다가 🎉컨페티까지 떨어진다니!

아직 지표로 결과가 확인된 것은 아니지만 조금더 사용자가 보상에 몰입할 수 있는 역동적인 경험을 제공했다는 것만으로도 개인적으로는 만족하고 있습니다. [이달의 보너스]를 개발하면서 이러한 게이미피케이션 요소들을 많이 고려했었거든요. 물론 긍정적인 데이터 지표가 나온다면 더욱 좋겠네요!

햅틱 피드백을 릴리즈하며

사실 햅틱 피드백을 위해 이렇게 많은 시간을 투자하게 될 줄 몰랐습니다. 하단 메인 네비게이션바를 통해 화면이 전환되는 구간에만 햅틱을 넣을 생각이었거든요. 디자인 팀과 이 햅틱 피드백을 검토하면서 ChainPicker 컴포넌트와 완료 플로우로 범위를 조정할 수 있었고, 관련 연구들을 확인하면서 [이달의 보너스]의 보상 구간에까지 햅틱을 확장할 수 있었습니다. 역시 다양한 사람들과 교류하면서 연구개발하는 것이 즐겁고 소중한 것 같다는 생각을 다시금 합니다.

나아가 앞으로의 인터랙션 설계가 시각적인 완성도뿐 아니라 다양한 모달리티를 어떻게 조화롭게 활용할 것인가에 대한 고민으로 점차 확장될 수도 있겠다는 생각이 들기도 했습니다. 에이전트의 등장으로 전통적인 설계도형 UI에서 벗어나 새로운 대화형 UI가 떠오르고 있는 것처럼 기존의 시각 중심 UI에서 벗어나 다양한 모달리티가 결합된 새로운 형태의 UI가 탄생할 수도 있지 않을까, 하는 생각이 문득 들었습니다.

그렇게 된다면 그 시점에는 사용자의 의도가 UI의 최소 단위가 되지 않을까 싶습니다. 지금처럼 시각 모달리티 중심의 디자인 시스템 컴포넌트가 아닌 의도가 중심이 되고 다양한 모달리티로 의도를 감싼 형태의 새로운 UI같은 것 말이죠. 화면을 스크롤한다는 의도만 남기고, 눈을 위아래로 내리는 행위, 바람을 불어 화면을 미는 행위, 손가락으로 직접 화면을 스크롤하는 등의 다양한 모달리티로 실제 UI 인터랙션을 구체화하는 방식인 셈이죠.

그런 관점에서 보면 이번 햅틱 피드백 작업은 인터랙션을 인간의 감각과 행동 단위로 바라보게 만든 경험에 가까울 수도 있겠습니다. 앞으로도 프론트엔드와 UX 엔지니어링이 단순히 화면을 그리는 역할을 넘어 인간의 감각,인지,행동을 함께 설계하는 방향으로 조금씩 확장되어 갈 수 있기를 기대해봅니다. 긴 글 읽어주셔서 감사합니다.

References

Hampton, W. H., & Hildebrand, C. (2025). Haptic rewards: How mobile vibrations shape reward response and consumer choice. Journal of Consumer Research, 52(5), 1043–1070.

Hoggan, E., Brewster, S. A., & Johnston, J. (2008). Investigating the effectiveness of tactile feedback for mobile touchscreens. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1573–1582.

Saket, B., Prasojo, C., Huang, Y., & Zhao, S. (2013). Designing an effective vibration-based notification interface for mobile phones. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 149–150.

Shin, H., Lim, J.-M., Lee, J.-U., Lee, G., & Kyung, K.-U. (2014). Effect of tactile feedback for button GUI on mobile touch devices. ETRI Journal, 36(6), 979–987.