픽셀에서 느껴지는 촉감, 햅틱
인터페이스 디자인은 흔히 시각적인 영역으로 정의된다. 화면의 레이아웃과 텍스트, 컬러, 아이콘, 버튼 등 사용자와 기기의 접점 대부분이 시각 요소로 이뤄져있기 때문이다. 하지만 근 몇 년 사이 AI 스피커의 등장으로 음성 인터페이스에 대한 관심이 커진 것처럼, 비시각적인 영역에서의 인터렉션도 더욱 중요해질 것이다. 특히 햅틱, 촉각적 피드백은 사용자와 화면의 상호작용을 극대화할 수 있는 도구이다.
햅틱 Haptic은 '만지다'라는 뜻의 그리스어 Haptesthai에서 유래한다. '햅틱 인터페이스'라 함은 우리 몸으로 느낄 수 있는 물리적인 '진동 피드백'이라 할 수 있다. 처음으로 핸드폰에 탑재된 햅틱 인터페이스는 모토롤라에서 만들어졌는데, 모토롤라는 스타텍을 개발하면서 진동 모터를 휴대폰에 도입하게 된다. 벨소리를 듣지 못할 수도 있기 때문에 진동으로 한 번 더 알려주기 위해서였다.
모토톨라 스타텍(1996)몰입감을 주는 햅틱
햅틱은 생각보다 역사가 오래된 기술이다. 핸드폰에 적용된 것은 2000년대지만 게임에는 1970년대부터 사용됐다. 윌리엄스 일레트로닉스는 햅틱이 접목된 핀볼 게임기 Earthshaker를 선보였고, 1990년대엔 콘솔 게임 제조사들이 햅틱을 사용한 게임기를 대거 출시했다. 닌텐도 Wii, 플레이스테이션 등 왠만한 게임 콘솔엔 햅틱이 적용되어 있다.
PS5 홍보영상여러 게임들에서 캐릭터가 들고있는 무기의 반동을 느끼게 하거나, 거친 도로를 달린다거나, 비가 오는 것까지 섬세한 진동 피드백을 준다. XBOX 콘솔에 햅틱을 넣어달라는 게이머들의 원성이 자자한 것을 보면 햅틱이 얼마나 게임에 중요한 요소인지 간접적으로 느낄 수 있다.
비오는 상황을 담은 햅틱모바일 게임에서도 캐릭터가 달릴 땐 작게, 나무 위로 점프한다거나 하는 동작에서는 크게 햅틱을 준다면 몰입도가 당연히 높아질 것이다. 단순하게 보자면 4DX 영화관에서 체험하는 것과 비슷하다. 게임 영역에서의 햅틱은 좀 더 미래적인 발전을 이루고 있는데, 천이나 돌, 금속과 같은 다양한 재료의 촉감을 구현하거나 손보다 더 넓은 신체를 커버하는 햅틱을 만들거나, 자이로 센서를 활용하는 등 몰입감을 극대화할 수 있는 다양한 시도가 이뤄지고 있다.
햅틱은 시각과 청각으로 충족시킬 수 없는 현실감을 주기도 한다. 대표적인 예는 물리 버튼이 사라진 아이폰 7이다. 아이폰 7의 홈 버튼은 진짜 버튼이 아니라 눌린 것 같은 진동을 주도록 설계되었다. 택틱 엔진이 진짜 버튼을 누른 것과 같은 정교한 진동을 주는 것이다. 지금은 버튼이 아예 없어지긴 했지만 햅틱이 실제 하드웨어를 대체할 수 있는 가능성을 확인한 사례라고 할 수 있다.
명확한 상태 표현을 위한 햅틱
마우스 오버했을 때, 클릭했을 때 버튼 컬러가 어두워진다거나, 입력창에 타이핑할 때 글자 컬러가 바뀌는 등, 시각적 피드백은 UI의 당연한 부분이 되었다. 인터렉션의 본질은 피드백이다. 인간과 기계가 정말 교감하는 것처럼 보이기 위해 스마트폰은 끊임없이 피드백을 보낸다. 선택, 완료, 취소, 알림 등 UI 디자인에서 고려하는 기본적인 상태 모두 피드백에 해당한다.
머테리얼 디자인 Text Field도널드 노먼의 7단계 인간 행위 모형에 따르면 사람은 시스템이나 제품을 사용할 때 7개의 단계를 거친다고 한다. 목적, 의도, 행동, 실행, 지각, 해석, 평가인데, 좋은 인터렉션 디자인을 위해서는 목적과 행위 사이, 목적과 결과 사이의 차이가 작아야 한다. 예를 들어 로그인하려는 목적이 있다고 해보자. 이 목표를 달성하기 위해 우리는 비밀번호를 입력하려는 의도를 만들어 낸다. 이는 비밀번호를 타이핑하는 행위가 되고, 입력하는 동작을 실행 했을 때 다음 화면이 뜨면서 그 결과를 지각하게 된다. 화면이 정상적으로 뜬 것으로 해석되면, 우리는 로그인이 됐다고 평가하게 된다. 햅틱이 적절히 사용된다면 실행과 평가 사이의 단계들을 줄여 줄 수 있다.
공인인증서 비밀번호 키패드 입력 같은 극악의 상황을 가정해보자. 버튼 크기도 작고 시각적 피드백이 없다면 제대로 눌린 건지 알기도 어렵다. 버튼이 눌릴 때 약한 진동을 준다면 이게 눌렸는지 안 눌렸는지 불안해하며 누르는 상황이 완화될 것이다. 태어난 해를 입력할 때도 1900년부터 100개 넘는 항목 중에 선택해야하지만 도로록 올라가는 스피너 햅틱이 있어 정확하게 선택했다는 느낌을 받을 수 있다. 햅틱은 이렇게 정확도를 높여주기 위한 장치로 사용되며 사용자의 실수나 오작동을 줄이는데 기여한다.
생동감을 더하는 햅틱
게임과 일반적인 서비스 사이에는 큰 괴리가 있어 어디에 적용해야할지 상상이 안될 때가 있다. 하지만 기본 원리는 똑같다. 인터페이스에 생동감을 더하는 역할이다.
젠리 다음으로 미국에서 유행한다는 앱 poparazziPoparazzi는 앱을 설치하고 열자마자 시작되는 온보딩 플로우가 인상적이다. 속도감 있는 영상과 함께 화면이 전환될 때, 사진을 찍는 모션이 연속적으로 반복될 때 햅틱을 풍성하게 넣어 절대 온보딩 영상을 벗어날 수 없게 디자인 했다. 최근에 경험한 온보딩 중 가장 강렬했던 경험이다.
젠리에서는 이모지를 주고 받을 때, 혹은 POPS의 구슬들이 굴러다닐 때 사운드와 함께 햅틱이 나온다. 디바이스를 흔들면 흔드는 움직임에 맞춰 구슬들이 굴러다니고 구르는 애니매이션에 맞춰 햅틱을 느낄 수 있다. UI를 정말 생동감 있게 느낄 수 있는 요소다. 이 효과 때문에라도 한 번 더 경험하고 싶은 기능이 된다.
앱스토어에서 앱을 다운 받을 때 완료 표시와 함께 울리는 묵직한 햅틱도 인상적인 피드백 중 하나다. 청량한 완료 사운드와 함께 체크가 그려지는 애니메이션까지 맞춰져 있어 너무나도 매끄러운 경험을 제공한다.
햅틱 설계하기
iOS는 Core Haptic으로 7가지 옵션을 제공하고 있다. 성공, 에러, 실패 알림과 강-중-약 3단계의 진동, 선택할 때의 진동이다. 진동은 세기, 주기, 길이로 이뤄져있고 선명도(Sharpness)도 조절할 수 있다. 사실 이 코어햅틱만 잘 사용해도 풍성한 경험이 된다.
햅틱이 눈에 보이지 않는 요소이기 때문에 설계하기 어렵다고 느낄 수 있다. 하지만 흔히 우리가 아는 애니메이션, 혹은 사운드 디자인과 유사하다고 보면 된다. 성공했을 땐 점점 커지는 피드백, 실패했을 땐 한 번 꺾이는 듯한 혹은 하강하는 듯한 피드백, 일반적인 이벤트가 지속될 땐 뉴트럴하게 반복되는 피드백 등이 자연스럽다.
애플워치의 Notification 햅틱피드백도 너무 많으면 피로해진다. 자주 발생하는 햅틱에서는 강도를 낮추어 좀 더 부드러운 느낌으로 반영하고, 에러처럼 반드시 알려야하는 중요한 정보에 대해서는 강도를 높이되 짧고 굵게 표현해야한다. 애플의 Human Interface Guideline에서는 반드시 햅틱을 켜고 끌 수 있는 옵션을 넣어야 하고, 햅틱을 일관되게 적용해야하며, 인과 관계가 명확하게 설계하라고 안내하고 있다.
더 중요한 것은 햅틱은 무조건 프로토타이핑과 디바이스 테스트가 필요하다는 점이다. iOS와 안드로이드의 햅틱 엔진 자체가 다르기 때문에 동일한 햅틱을 반영한다고 해도 다르게 느껴질 수 있다. 프로토파이에는 iOS, 안드로이드 햅틱 옵션이 들어 있고, 햅틱을 정교하게 테스트해볼 수 있는 앱도 있으니 직접 느껴보며 테스트해보는 것을 권장한다.
햅틱은 익숙한 기술이지만 너무 익숙해서 잊기 쉬운 디테일이다. 햅틱을 적용했다고 해서 다이나믹하게 사용자가 알아차릴 수 있는 것도 아니다. 하지만 디자이너의 본질이 인간의 본능을 이해하고, 더 쉽고 유려한 인터페이스를 설계하는 일인 만큼 햅틱에 대해 이해하는 것은 정성적으로 매우 가치 있는 일이다. 인과관계가 명확한 햅틱, 사운드와 비주얼 인터렉션까지 더해져 풍성하게 전달되는 햅틱, 물리적인 현상과 메타포를 적절히 반영한 햅틱을 설계한다면 사용성을 높이는 것을 넘어 서비스를 각인시킬 수 있는 강렬한 경험을 디자인할 수 있을 것이다.
