UI & UX, UX & Design

픽셀에서 느껴지는 촉감, 햅틱

인터페이스 디자인은 흔히 시각적인 영역으로 정의된다. 화면 레이아웃과 텍스트, 컬러, 아이콘, 버튼 등 사용자와 기기의 접점 대부분이 시각 요소로 구성됐기 때문이다. 하지만 몇 년 사이 AI 스피커의 등장으로 음성 인터페이스에 대한 관심이 커진 것처럼, 비시각적 영역에서의 인터랙션도 중요하다. 특히 햅틱, 촉각적 피드백은 사용자와 화면의 상호작용을 극대화할 수 있는 도구다.

햅틱(Haptic)은 ‘만지다’라는 뜻의 그리스어 Haptesthai에서 유래됐다. ‘햅틱 인터페이스’는 우리 몸으로 느낄 수 있는 물리적인 ‘진동 피드백’이라 할 수 있다. 휴대폰에 탑재한 햅틱 인터페이스는 모토롤라에서 처음 제작했다. 모토롤라는 스타텍을 개발하면서 진동 모터를 휴대폰에 도입했다. 벨소리를 듣지 못할 수도 있기 때문에 진동으로 한 번 더 알려주기 위함이었다.

▲ 모토롤라 스타텍(1996)

햅틱, 몰입감을 선사하다

햅틱엔 오랜 기술의 역사가 녹아있다. 햅틱은 게임에서 가장 많이 활용되는데, 휴대폰에는 2000년대부터 적용됐다면 게임에는 1970년대부터 적용됐다. 윌리엄스 일레트로닉스는 햅틱이 접목된 핀볼 게임기 ‘Earthshaker’를 선보였고, 1990년대엔 콘솔 게임 제조사들이 햅틱 전용 게임기를 대거 출시했다. 너무나도 유명한 닌텐도 Wii, 플레이스테이션 등 대부분의 게임 콘솔에 햅틱이 적용돼 있다.

▲ PS5 홍보영상

들고 있는 무기의 반동을 느끼게 하거나, 거친 도로를 달린다거나, 비가 오는 듯한 느낌까지 섬세한 진동 피드백을 햅틱으로 느낄 수 있다. 원래 탑재돼 있지 않은 XBOX 콘솔에 햅틱을 넣어달라는 게이머들의 원성이 자자한 것을 보면, 햅틱이 게임에 얼마나 중요한 요소인지 알 수 있다.

▲ 비 오는 상황을 담은 햅틱

모바일 게임에서도 캐릭터가 달릴 땐 작게, 나무 위로 점프한다거나 하는 동작에서는 크게 햅틱을 준다면 몰입도가 높아진다. 단순히 보면 4DX 영화관에서 체험하는 것과 비슷한 셈이다. 게임 영역에서의 햅틱은 더욱 미래적인 발전을 이루고 있다. 천이나 돌, 금속과 같은 다양한 재료의 촉감 구현이나 손보다 더 넓은 신체를 커버하는 햅틱 제작, 자이로 센서를 활용하는 등 몰입감을 극대화할 수 있도록 다양한 시도가 이뤄지고 있다.

햅틱은 시각과 청각으로 충족할 수 없는 현실감을 제공하기도 한다. 대표적인 예로는 물리 버튼이 사라진 아이폰 7이다. 아이폰 7의 홈 버튼은 실제 버튼이 아니라 눌린 것 같은 진동을 주는 방식으로 설계됐다. 탭틱 엔진이 실제 버튼을 누른 것처럼 정교한 진동을 주는 역할을 한다. 지금은 버튼이 아예 없어지긴 했지만 햅틱이 실제 하드웨어를 대체할 수 있는 가능성을 확인한 사례다.

명확한 상태 표현을 위한 햅틱

마우스 오버했을 때나 클릭했을 때 버튼 컬러가 어두워진다거나, 입력창에 타이핑할 때 글자 컬러가 바뀌는 등 시각적 피드백은 UI의 당연한 부분이 됐다. 인터랙션의 본질은 피드백이다. 인간과 기계가 교감하는 것처럼 스마트폰은 끊임없이 피드백을 보낸다. 선택, 완료, 취소, 알림 등 UI 디자인에서 고려하는 기본적인 상태 모두 피드백에 해당한다.

▲ 머테리얼 디자인 Text Field

도널드 노먼의 인간 행위 모형에 따르면 사람은 시스템이나 제품을 사용할 때 7개의 단계를 거친다고 한다. 목적, 의도, 행동, 실행, 지각, 해석, 평가인데, 좋은 인터랙션 디자인을 위해서는 목적과 행위 사이, 목적과 결과 사이의 차이가 작아야 한다. 예를 들어 로그인 목적이 있다고 해보자. 이 목표를 달성하기 위해 우리는 비밀번호를 입력하려는 의도를 만들어 낸다. 이는 비밀번호를 타이핑하는 행위가 되고, 입력하는 동작을 실행했을 때 다음 화면이 뜨면서 그 결과를 인지하게 된다. 화면이 정상적으로 뜬 것으로 해석되면 우리는 로그인 됐다고 평가한다. 햅틱을 적절히 사용한다면 실행과 평가 사이의 단계를 줄일 수 있다.

공인인증서 비밀번호 키패드 입력과 같은 극악의 상황을 가정해보면, 버튼 크기도 작고 시각적 피드백이 없다면 제대로 터치한 것인지 알기 어렵다. 하지만 버튼을 터치할 때 약한 진동을 느낄 수 있다면 어떨까. 태어난 해를 입력할 때도 1900년부터 100개 넘는 스크롤 중에 선택해야 하지만 ‘도로록’하며 올라가는 스피너 햅틱이 있어 정확하게 선택했다는 느낌을 받을 수 있다. 따라서 햅틱은 정확성을 높여주기 위한 장치로 사용되며 사용자의 실수나 오작동을 줄이는 데 기여한다.

▲ 보안키패드와 iOS Date Picker

생동감을 더하는 햅틱

게임과 일반적인 서비스 사이에는 큰 괴리가 있어 어디에 적용해야 할지 상상이 쉽지 않을 때가 있다. 하지만 기본 원리는 동일하다. 인터페이스에 생동감을 더하는 역할이다.

▲ 젠리 다음으로 미국에서 유행한다는 앱 poparazzi

Poparazzi 앱은 설치 후 열자마자 시작되는 온보딩 플로우가 인상적이다. 속도감 있는 영상과 함께 화면이 전환될 때, 사진을 찍는 모션이 연속적으로 반복될 때 햅틱을 풍성하게 넣어 절대 온보딩 영상을 벗어날 수 없게 디자인했다. 최근에 경험한 온보딩 중 가장 강렬했던 경험이다.

젠리에서는 이모지를 주고받을 때 혹은 POPS의 구슬이 굴러다닐 때, 사운드와 함께 햅틱이 나온다. 디바이스를 흔들면 흔드는 것에 맞춰 구슬이 굴러다니고 구르는 애니메이션에 맞춰 햅틱을 느낄 수 있다. UI를 생동감 있게 느낄 수 있는 요소다. 이 효과 때문에 한 번 더 경험하고 싶은 기능이 됐다.

앱스토어에서 앱을 다운로드할 때 완료 표시와 함께 울리는 묵직한 햅틱도 인상적인 피드백 중 하나다. 청량한 완료 사운드와 함께 체크 표시되는 애니메이션까지 맞춰져 매끄러운 경험을 제공한다.

햅틱 설계하기

iOS는 Core Haptic으로 7가지 옵션을 제공하고 있다. 성공, 에러, 실패 알림과 강-중-약 3단계의 진동, 선택할 때의 진동이다. 진동은 세기, 주기, 길이로 이뤄져 있고 선명도(Sharpness)도 조절할 수 있다.

햅틱이 눈에 보이지 않기 때문에 설계하기 어렵다고 느낄 수 있다. 하지만 흔히 우리가 아는 애니메이션, 혹은 사운드 디자인과 유사하다. 성공했을 땐 점점 커지는 피드백, 실패했을 땐 한 번 꺾이는 듯한 혹은 하강하는 듯한 피드백, 일반적인 이벤트가 지속될 땐 뉴트럴하게 반복되는 피드백 등이 자연스럽다.

▲ 애플워치의 Notification 햅틱

피드백도 너무 많으면 피로해진다. 자주 발생하는 햅틱에서는 강도를 낮춰 더 부드러운 느낌으로 반영하고, 에러처럼 반드시 알려야 하는 중요한 정보에 대해서는 강도를 높이되 짧고 굵게 표현해야 한다. 애플의 휴먼 인터페이스 가이드라인(Human Interface Guideline)에서는 반드시 햅틱을 켜고 끌 수 있는 옵션을 넣어야 하고, 햅틱을 일관되게 적용해야 하며, 인과 관계가 명확하게 설계하라고 안내하고 있다.

더 중요한 것은 햅틱은 무조건 프로토타이핑과 디바이스 테스트가 필요하다는 점이다. iOS와 안드로이드 햅틱 엔진 자체가 다르기 때문에 동일한 햅틱을 반영한다고 해도 다르게 느껴질 수 있다. 프로토파이에는 iOS, 안드로이드 햅틱 옵션이 들어있고, 햅틱을 정교하게 테스트할 수 있는 앱도 있으니 직접 느껴보며 테스트할 것을 권장한다.

▲ (좌)프로토파이 / (우) iOS 앱 Interact

햅틱은 충분히 익숙한 기술이지만 그만큼 잊기 쉬운 디테일이기도 하다. 햅틱을 적용했다고 해서 다이내믹하게 사용자가 알아차리는 것도 아니다. 하지만 디자이너의 본질이 인간의 본능을 이해하고, 더 쉽고 유려한 인터페이스를 설계하는 일인 만큼 햅틱에 대한 이해는 가치 있는 일이다. 인과관계가 명확하고, 사운드와 비주얼 인터랙션까지 더해져 풍성하게 전달되는 햅틱. 물리적인 현상과 메타포를 적절히 반영해 설계한다면 사용성을 높이는 것을 넘어 서비스를 각인할 수 있는 강렬한 경험을 디자인할 수 있을 것이다.

Comments
  • digital-insight-202102-offline-ads-theuber
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts