앞 편에서 입력 특성 쿼리로 마우스와 손가락을 구분하는 법을 다루면서, 나는 화면 폭만 보던 시야가 입력 방식이라는 축으로 넓어지는 걸 경험했다. 그런데 손가락으로 쓰는 화면은 단순히 호버라는 중간 상태가 없다는 것만으로 끝나지 않는다. 누르는 정확도, 손끝이 화면에 닿는 면적, 눌렀을 때 돌아오는 반응까지, 마우스로 쓰던 화면과는 전혀 다른 세계였다. 나는 이 차이를 머리로만 알던 시절에 만든 화면들이 실제 휴대폰에서 얼마나 불편했는지를 뒤늦게 깨닫고 나서야 이 주제를 진지하게 파고들었다.
이번 편은 그 손가락의 세계를 위한 터치와 포인터 이야기다. 손끝에 맞는 누름 영역의 크기, 오터치를 막는 간격, 눌렀을 때 돌아오는 반응, 호버가 없는 환경을 위한 대체 방법, 그리고 마우스와 터치를 함께 쓰는 겸용 기기까지 내 경험과 함께 정리한다. 화면을 손가락으로 만진다는 감각을 이해하고 나면, 같은 화면 폭이라도 손끝에 훨씬 친절한 화면을 만들 수 있게 된다. 나는 이 감각을 갖춘 뒤로 데스크톱에서 완성했다고 여긴 화면도 반드시 손으로 만져보고 나서야 끝났다고 말하게 됐다.
1. 손끝에 맞는 누름 영역
마우스 커서는 화면의 한 점을 정확히 찍지만, 손가락은 그렇지 않다. 손끝이 화면에 닿는 면적은 생각보다 넓어서, 작은 버튼을 누르려다 옆의 것을 건드리기 일쑤다. 나는 데스크톱에서 예쁘게 다듬은 작은 아이콘 버튼이 휴대폰에서 자꾸 헛눌리는 걸 보고서야 이 차이를 실감했다. 커서로는 완벽히 조준되던 것이 손끝 앞에서는 번번이 빗나갔던 것이다.
그래서 터치로 누르는 요소에는 최소한의 크기를 보장해야 한다. 널리 통용되는 권장값은 한 변이 사십사 픽셀 정도인데, 이는 성인의 손끝이 무리 없이 조준할 수 있는 크기에서 나온 수치다. 나는 버튼과 링크에 이 최소 크기를 걸어두고, 아이콘 자체가 작더라도 그 주변의 누를 수 있는 영역만큼은 넉넉히 확보한다. 이 한 가지 습관만으로도 헛눌림이 눈에 띄게 줄었다.
접근성 기준에서도 이 크기를 다룬다. 어떤 지침은 한 변 이십사 픽셀을 최소로 보고, 그보다 작다면 요소들 사이에 충분한 간격을 두어 오조작을 막으라고 한다. 나는 이 기준을 바닥선으로 삼되, 실제로는 그보다 여유 있게 잡아 손이 큰 사람이나 흔들리는 버스 안에서도 편히 누를 수 있게 한다. 바닥선에만 딱 맞추면 이상적인 조건에서만 편한 화면이 되기 때문이다.
여기서 중요한 것은 보이는 크기와 누를 수 있는 크기를 구분하는 일이다. 아이콘 자체는 작게 두더라도, 그 아이콘을 감싸는 여백까지 포함한 누름 영역은 크게 잡을 수 있다. 나는 안쪽 여백을 넉넉히 주는 방식으로, 시각적으로는 아담하지만 손끝에는 관대한 버튼을 만든다. 이렇게 하면 화면은 깔끔하게 유지하면서도 조작은 편해진다.
글자 링크가 촘촘히 이어질 때도 이 원리를 적용한다. 본문 속 짧은 링크는 높이가 글자 한 줄밖에 안 돼 터치가 어려운데, 나는 이런 링크의 위아래 여백을 늘려 손끝이 닿을 면적을 키운다. 줄 간격이 촘촘한 목록에서는 각 항목의 높이 자체를 손가락에 맞춰 키우는 편이고, 그러면 원하는 항목을 한 번에 정확히 고를 수 있게 된다.
결국 누름 영역의 크기는 미관과 조작성 사이의 균형이다. 나는 화면이 좁을수록 요소를 더 촘촘히 넣고 싶은 유혹을 느끼지만, 손가락으로 쓸 화면이라면 그 유혹을 눌러야 한다는 걸 배웠다. 눌러지지 않는 예쁜 버튼보다, 조금 커도 확실히 눌리는 버튼이 언제나 낫다. 나는 이 저울질에서 늘 조작성 쪽으로 기울여 잡는다.
2. 오터치를 막는 간격
누름 영역을 키우는 것만으로는 부족하다. 아무리 각 버튼이 커도 서로 딱 붙어 있으면, 하나를 누르려다 옆의 것까지 건드리는 오터치가 난다. 나는 크기와 간격이 함께 가야 손가락이 안심하고 화면을 만질 수 있다는 걸 뒤늦게 깨달았다. 큰 버튼 여러 개를 빈틈없이 붙여둔 화면은 오히려 작은 버튼을 띄엄띄엄 둔 화면보다 더 헷갈렸다.
그래서 서로 다른 동작을 하는 버튼들 사이에는 최소한의 틈을 둔다. 특히 삭제나 결제처럼 되돌리기 어려운 동작의 버튼은, 자주 누르는 다른 버튼과 넉넉히 떨어뜨린다. 손끝이 살짝 빗나가도 엉뚱한 중대한 동작이 실행되지 않도록 물리적인 거리를 확보하는 것이다. 이 거리는 실수의 대가가 클수록 더 넉넉히 잡아야 한다.
아이콘이 한 줄로 늘어선 도구 막대는 오터치가 특히 잘 난다. 나는 이런 막대에서 아이콘들 사이에 일정한 간격을 주고, 각 아이콘의 누름 영역이 서로 겹치지 않게 한다. 간격을 벌리는 대신 도구의 개수를 줄여 꼭 필요한 것만 남기는 선택을 할 때도 많다. 좁은 화면에서는 도구를 늘어놓기보다 덜 중요한 것을 접어두는 편이 낫다.
목록에서 각 항목을 누르는 경우에도 간격은 중요하다. 항목 사이가 너무 촘촘하면 스크롤하려던 손짓이 실수로 항목을 눌러버린다. 나는 항목마다 충분한 높이를 주어, 스크롤하는 손과 선택하는 손이 서로를 방해하지 않게 한다. 스크롤과 선택이 같은 자리에서 벌어지는 만큼 이 여유는 생각보다 중요하다.
간격을 다룰 때 나는 바깥 여백보다 안쪽 여백을 즐겨 쓴다. 안쪽 여백으로 누름 영역 자체를 키우면 요소들 사이가 자연스럽게 벌어지면서, 동시에 각 요소가 눌리는 면적도 커진다. 바깥 여백만 늘리면 눌리지 않는 빈틈만 생기는 것과는 다른 결과다. 나는 같은 여백을 주더라도 어느 쪽에 주느냐가 조작감을 가른다는 걸 여러 번 확인했다.
이런 간격의 배려는 눈에 잘 안 띄지만 조작 실패율을 확 낮춘다. 나는 화면을 다 만들고 나면 실제로 손가락으로 이곳저곳을 눌러보며, 옆의 것이 건드려지지 않는지 확인한다. 마우스로 클릭해서는 결코 발견되지 않는 문제들이 손끝으로 만져보면 금세 드러난다. 그래서 나는 마지막 점검만큼은 커서가 아니라 손끝으로 한다.
3. 눌렀을 때 돌아오는 반응
손가락으로 무언가를 눌렀을 때, 아무 반응이 없으면 사용자는 눌렸는지 아닌지 확신하지 못한다. 마우스는 커서 모양이 바뀌거나 올려두었을 때의 강조로 상태를 미리 알려주지만, 터치에는 그런 예고가 없다. 그래서 눌리는 순간의 반응이 데스크톱보다 훨씬 중요해진다. 나는 이 되먹임 하나를 빠뜨렸다가 사용자들이 같은 곳을 여러 번 두드리는 걸 보고 그 무게를 알았다.
나는 눌리는 동안의 상태에 짧은 시각 변화를 준다. 배경색이 살짝 짙어지거나 요소가 미세하게 눌린 느낌을 주면, 사용자는 자기 손짓이 접수됐다는 걸 즉시 안다. 이 작은 되먹임 하나가 없으면 사용자는 반응이 늦는 줄 알고 같은 곳을 반복해서 두드리게 되고, 그 사이에 같은 동작이 두 번 실행되는 사고도 난다. 눌림 표시는 장식이 아니라 안전장치인 셈이다.
모바일 브라우저가 기본으로 씌우는 회색 하이라이트도 손봐야 한다. 링크나 버튼을 누르면 반투명한 회색 사각형이 잠깐 덧씌워지는데, 이것이 디자인과 어울리지 않으면 조잡해 보인다. 나는 이 기본 하이라이트를 -webkit-tap-highlight-color로 걷어내고, 대신 내 디자인에 맞는 눌림 반응을 직접 준다. 이 속성에 투명한 값을 주면 기본 회색 상자가 사라진다.
다만 기본 하이라이트를 없앨 때는 반드시 대체 반응을 마련한다. 아무 되먹임 없이 하이라이트만 지우면, 눌러도 감감무소식인 상태가 되어 오히려 더 나쁘다. 나는 기본 효과를 끄는 것과 내 효과를 켜는 것을 늘 한 쌍으로 다룬다. 눌린 상태를 뜻하는 :active 규칙을 함께 넣어, 손이 닿는 동안 요소가 반응하도록 짝지어 둔다.
손가락 제스처와 화면 동작의 충돌도 신경 쓴다. 어떤 요소 위에서는 화면을 밀어 스크롤해야 하고, 어떤 요소 위에서는 그 요소만의 동작이 일어나야 한다. 나는 touch-action 속성으로 요소가 어떤 제스처에 반응할지를 명시해, 스크롤하려던 손짓이 엉뚱하게 확대로 이어지거나 하는 혼선을 줄인다. 제스처가 겹치는 자리일수록 이 명시가 요긴하다.
반응 속도 자체도 중요한 요소다. 손끝은 즉각적인 되먹임을 기대하기 때문에, 아주 짧은 지연도 답답하게 느껴진다. 나는 눌림 반응만큼은 무거운 계산에 묶이지 않게 해서, 손이 닿는 순간 곧바로 화면이 응답하도록 유지한다. 데이터를 불러오는 작업이 뒤따르더라도 눌렸다는 표시는 먼저 보여주는 것이 원칙이다.
4. 호버가 없는 환경을 위한 대체
터치의 가장 큰 특징은 호버라는 중간 상태가 없다는 점이다. 마우스는 누르기 전에 올려두는 단계가 있지만, 손가락은 곧바로 누르거나 아예 닿지 않거나 둘 중 하나다. 그래서 호버에 얹어둔 기능은 터치에서 통째로 사라진다. 나는 이 사실을 몰라 데스크톱에서 완벽하던 기능이 휴대폰에서 존재조차 없는 것이 되는 경험을 여러 번 했다.
나는 호버에만 정보를 숨기지 않는 것을 원칙으로 삼는다. 마우스를 올려야만 보이는 설명이나 버튼이 있다면, 터치 사용자는 그 존재조차 모른 채 지나친다. 중요한 기능은 처음부터 눈에 보이게 두거나, 눌러서 펼치는 방식으로 바꾸는 것이 안전하다. 호버 뒤에 숨겨도 되는 것은 없어도 그만인 부가 정보뿐이다.
호버로 열던 메뉴는 대체 경로를 마련한다. 나는 hover: hover 조건 안에서만 올려서 열리게 하고, 그렇지 않은 환경에서는 눌러서 열리도록 두 갈래를 함께 둔다. 요소 안의 무언가에 초점이 들어왔을 때 펼쳐지게 하는 :focus-within 방식은 터치와 키보드 사용자를 함께 배려하는 좋은 대체가 된다. 이 둘을 겹쳐두면 어느 입력이든 메뉴에 닿을 수 있다.
호버 효과는 어디까지나 덤이라는 태도가 도움이 된다. 나는 호버로 색이 바뀌거나 그림자가 생기는 것은 있으면 좋은 장식으로 두고, 그것이 없어도 기능은 온전히 돌아가게 짠다. 그러면 호버가 없는 화면에서도 사용자가 잃는 것이 없다. 장식과 기능을 처음부터 분리해 생각하는 습관이 이 태도의 바탕이다.
눌린 상태와 선택된 상태를 명확히 보여주는 것도 호버의 빈자리를 메운다. 마우스라면 올려보며 어디가 눌릴지 짐작하지만, 터치는 그럴 수 없으니 현재 어떤 항목이 활성인지를 뚜렷한 표시로 알려야 한다. 나는 선택된 항목에 확실한 강조를 주어 사용자가 자기 위치를 잃지 않게 한다. 호버로 미리 살펴볼 수 없는 만큼 현재 상태의 표시는 더 또렷해야 한다.
이 모든 대체의 바탕에는 호버를 필수가 아닌 선택으로 본다는 생각이 깔려 있다. 나는 설계 초기부터 호버 없이도 모든 기능에 도달할 수 있는지를 점검하고, 그런 다음에야 호버 효과를 덧입힌다. 순서를 이렇게 잡으면 어떤 입력 방식에서도 빠지는 기능이 없다. 호버를 나중에 얹는 장식으로 두는 순간, 그것이 사라지는 환경도 자연스럽게 대비된다.
5. 마우스와 터치를 함께 쓰는 기기
세상이 마우스 기기와 터치 기기로 깔끔하게 나뉘면 편하겠지만, 현실은 그렇지 않다. 화면을 만질 수도 있고 마우스도 연결된 노트북, 펜과 손가락을 함께 쓰는 태블릿처럼 두 방식을 겸하는 기기가 점점 늘고 있다. 나는 이 겸용 상황을 놓쳐 낭패를 본 적이 여러 번이다. 한쪽만 가정하고 만든 화면이 다른 쪽을 쓰는 사용자 앞에서 어색해지는 것이다.
겸용 기기가 까다로운 이유는 대표 입력만 보는 판단이 어긋나기 때문이다. 터치가 되는 노트북을 대표 입력이 마우스라고만 보면, 손가락으로 만졌을 때의 배려가 빠진다. 반대로 터치를 대표로만 보면 마우스의 정밀함을 살리지 못한다. 어느 하나로 단정하는 순간 다른 한쪽이 불편해진다. 겸용 기기에서는 이 단정 자체가 함정이다.
그래서 나는 연결된 모든 입력을 통틀어 보는 any-hover와 any-pointer 쿼리를 함께 쓴다. 대표 입력만이 아니라 보조 입력까지 살피면, 마우스가 주 입력이어도 터치가 가능하다는 사실을 놓치지 않는다. 그런 기기에는 호버 효과를 주되 누름 영역도 넉넉히 잡아, 두 입력 모두를 배려한다. 두 쿼리를 함께 보는 것만으로 겸용 상황의 절반은 풀린다.
실행 중에 입력 방식이 바뀔 수 있다는 점도 염두에 둔다. 사용자가 조금 전까지 마우스를 쓰다가 갑자기 화면을 만질 수도 있다. 나는 어느 한 방식만 가정하고 다른 쪽을 막아버리는 설계를 피하고, 두 방식이 언제든 번갈아 들어와도 자연스럽게 받아들이도록 짠다. 입력은 기기 하나 안에서도 수시로 오가기 때문이다.
이런 겸용 대응의 핵심은 넉넉한 쪽으로 맞추는 태도다. 누름 영역은 손가락 기준으로 크게 잡고 호버 효과는 얹어두면, 마우스 사용자는 큰 버튼을 불편해하지 않으면서 호버의 이점도 누린다. 반대로 작게 잡으면 터치 사용자만 손해를 본다. 그래서 나는 애매할 때 늘 관대한 쪽을 택한다. 큰 버튼이 마우스를 방해하는 일은 거의 없지만, 작은 버튼은 손가락을 확실히 방해한다.
정리하면 터치와 포인터를 다루는 일은 손끝에 맞는 누름 영역을 확보하는 데서 시작하고, 오터치를 막는 간격과 눌림 반응으로 조작의 확신을 주며, 호버가 없는 환경에 대체 경로를 마련하고, 마우스와 터치를 겸하는 기기까지 넉넉하게 품는다. 화면을 만진다는 감각을 이해하면 같은 화면도 손끝에 훨씬 친절해진다. 다음 편에서는 그 손에 쥔 좁은 화면에서 글을 어떻게 읽기 좋게 다룰지, 모바일 타이포와 가독성을 살핀다.