제스처

마우스와 키보드로만 컴퓨터를 쓰던 시절에는 기능 하나마다 눌릴 것 하나가 따라붙었습니다. 메일을 지우려면 삭제 버튼이 어딘가에 보여야 했고, 목록의 항목마다 다른 처리를 하려면 항목마다 작은 아이콘을 달아야 했습니다. 화면이 넓은 데스크톱에서는 이 방식이 버텼습니다.

손에 쥐는 화면이 나오면서 셈이 무너졌습니다. 세로 700픽셀짜리 화면에 메일 스무 통을 띄우려면 한 통이 쓸 높이가 60픽셀쯤인데, 보낸 사람과 제목과 시각을 넣고 나면 삭제·보관·별표 아이콘이 들어갈 자리가 없습니다.

그래서 모바일 앱 시안 회의는 늘 "이 버튼을 어디 두죠" 에서 막혔습니다. 자리가 없으니 더 보기 메뉴로 밀어 넣고, 그 메뉴가 열두 줄이 되고, 하루에 스무 번 쓰는 기능이 일곱 번째 줄에 묻혔습니다.

제스처는 기능이 설 자리를 화면 밖에서 찾은 답입니다. 손가락은 이미 화면 위에 있으니 그 손가락이 어떻게 움직였는지에 뜻을 걸어 두면 됩니다. 항목을 왼쪽으로 밀면 삭제라고 정해 두면, 삭제 버튼은 사라져도 삭제 기능은 남습니다.

기기는 손가락이 닿은 지점과 뗀 지점, 움직인 방향과 거리, 닿아 있던 시간, 동시에 닿은 손가락 수를 잽니다. 이 값들의 조합이 미리 정해 둔 형태와 맞으면 거기 걸린 동작을 실행합니다.

자주 쓰이는 형태는 다섯 가지입니다.

1. 탭 — 한 지점을 짧게 누릅니다. 마우스 클릭이 하던 일을 그대로 받습니다.
2. 롱 프레스 — 같은 자리를 0.5초쯤 누르고 있습니다. 항목을 고르거나 숨은 메뉴를 여는 데 씁니다.
3. 스와이프 — 한 방향으로 빠르게 밀고 손을 뗍니다. 목록 항목에 보관이나 삭제를 거는 자리입니다.
4. 드래그 — 누른 채로 끌어 위치를 바꿉니다. 끌어다 놓아 순서를 바꾸는 드래그 앤 드롭이 여기서 나옵니다.
5. 핀치 — 두 손가락을 오므리거나 벌립니다. 지도와 사진을 키우거나 줄일 때 씁니다.

만드는 쪽이 씨름하는 것은 이 목록이 아니라 그 사이의 경계입니다. 닿았다 떨어지는 움직임 하나를 두고 기기는 탭인지 스와이프인지 롱 프레스인지를 정해야 하고, 그 판정은 숫자로 그어 둔 선이 합니다. 이동 거리가 10픽셀 안쪽이면 탭, 그보다 옆으로 더 갔으면 스와이프, 움직이지 않은 채 500밀리초를 넘기면 롱 프레스인 식입니다.

경계가 겹치면 판정이 흔들립니다. 세로로 넘기는 목록에 가로로 미는 제스처를 걸면 처음 움직인 몇 픽셀만 보고 둘 중 하나를 골라야 하고, 끝에 닿으면 내용을 이어 붙이는 무한 스크롤 위에서는 스크롤과 스와이프가 매번 다툽니다.

그래서 제스처에는 조작에 대한 반응을 그 자리에서 돌려주는 피드백이 붙습니다. 손가락을 미는 동안 항목이 따라 움직이고 그 뒤에서 붉은 삭제 아이콘이 드러나면, 사용자는 손을 떼기 전에 무엇이 걸렸는지 알고 멈출 수 있습니다. 반응이 손 뗀 뒤에만 오면 같은 기능이 도박이 됩니다.

손가락이 화면에 직접 닿는 모바일 앱이 제스처가 가장 많이 쓰이는 자리입니다. 메일 목록에서 항목을 왼쪽으로 밀면 보관되고, 맨 위에서 당기면 새로 고쳐지고, 사진을 두 손가락으로 벌리면 커집니다. 셋 다 버튼이 없습니다.

데스크톱에도 들어와 있습니다. 트랙패드에서 두 손가락으로 쓸어 올리면 스크롤됩니다. 다만 여기서는 기기와 브라우저와 페이지의 제스처가 층층이 겹쳐서, 왼쪽 가장자리에서 오른쪽으로 미는 동작은 대개 브라우저의 뒤로 가기가 먼저 가져갑니다.

이 갈래의 약점은 하나로 모입니다. 제스처는 화면에 흔적을 남기지 않습니다. 생김새만으로 무엇을 할 수 있는지 짐작하게 하는 성질인 어포던스가 애초에 없고, 조작할 수 있다고 알리려고 일부러 붙이는 표시인 시그니파이어도 걸 자리가 없습니다. 버튼은 보이니까 눌리지만 스와이프는 해 본 사람만 압니다.

그래서 실무의 판단은 대개 같은 모양입니다. 제스처는 빠른 길로 두고, 같은 일을 하는 버튼이나 메뉴를 함께 둡니다.

접근성도 같은 자리에서 걸립니다. 화면을 읽어 주는 보조 기술을 쓰거나 스위치 하나로 조작하는 사용자에게 두 손가락으로 벌리는 동작은 아예 닿지 않고, 손 떨림이 있으면 정해진 거리 안에서 멈추는 조작 자체가 어렵습니다. 제스처로만 닿는 기능은 그들에게 없는 기능입니다.

"이거 스와이프로만 숨기지 말고 버튼도 같이 두죠. 이대로면 아무도 못 찾습니다."

제스처를 빼자는 말이 아니라 같은 기능에 보이는 통로를 하나 더 내자는 제안입니다.

"가장자리에서 미는 건 뒤로 가기랑 겹쳐서 안 먹어요."

기기나 브라우저가 이미 쓰고 있는 자리라 앱이 그 동작을 가져갈 수 없다는 뜻입니다.

"롱 프레스를 700밀리초로 잡아 놨네요. 꾹 눌렀는데 반응이 없어서 고장인 줄 알았어요."

누르고 있어야 하는 시간이 길어 사용자가 기다리지 못하고 손을 뗀다는 지적입니다.

페이지덱 모바일 앱의 문서 목록이 이 이야기가 오가는 자리입니다. 민서가 항목을 왼쪽으로 밀면 보관, 오른쪽으로 밀면 즐겨찾기가 되는 시안을 올렸고 태오가 그대로 만들었습니다. 사용성 테스트에서 참가자 여덟 명 가운데 스와이프를 스스로 해 본 사람은 둘이었고, 나머지 여섯은 항목을 눌러 문서를 연 다음 보관 메뉴를 찾았습니다.

민서가 고친 방향은 제스처를 빼는 쪽이 아니었습니다. 항목 오른쪽에 점 세 개 버튼을 두어 같은 기능을 메뉴로 열게 하고 스와이프는 남겼습니다. 다음 테스트에서는 여덟 명 모두가 보관에 닿았습니다.

제스처를 늘리면 화면이 깨끗해지니 더 나은 디자인이 된다고 여기는 경우가 많습니다. 시안 위에서는 실제로 그렇게 보입니다. 버튼을 지운 화면은 여백이 넓고, 검토 자리에 앉은 사람들은 어디를 밀면 무엇이 되는지 설명을 듣고 보기 때문에 아무 불편도 느끼지 않습니다.

사라진 것은 기능이 아니라 기능이 있다는 안내입니다. 사용자는 설명을 듣지 않고 앱을 엽니다. 스와이프로만 닿는 보관 기능은 그것을 모르는 사람에게 없는 기능이고, 그 사람은 문의를 보내거나 그냥 다른 앱을 씁니다. 그대로 두면 사용 기록에 그 기능을 쓰는 사람이 늘 소수로 남고, 팀은 그 숫자를 보고 수요가 없다고 판단해 다음 분기에 기능을 접습니다.