작년 Mobile UX Summit 에서 Josh Clark 이 발표한 터치기기를 위한 모바일 팁 9가지에 관한 내용이 재미있어 공유합니다. 발사믹에서 세미나 발표 내용을 스케치 노트로 정리했네요. 다른 발표들도 있는데 이 그림을 비롯한 스케치 형태의 요약 자료는 발사믹 블로그 에서 보실 수 있습니다.

터치기기 디자인 9가지 팁

1. 가장 중요한 터치 영역을 확인하라

• 손으로 기기를 잡는 모양에 따라 중요한 터치 영역이 달라집니다.
• 한 손 사용 (49%): 한 손 엄지가 닿는 영역이 중요합니다.
• 양손 사용 (51%): 한 손으로 잡고 다른 손 검지로 터치(36%), 양손 엄지로 터치(15%)하는 경우가 있습니다.

2. 콘텐츠를 컨트롤 위에 배치하라

• iOS: 화면 아래에 컨트롤을 배치합니다.
• 안드로이드: 화면 위에 컨트롤을 배치합니다. (시스템 메뉴 위에 다시 앱 메뉴가 배치되지 않도록 주의)
• 모바일 웹: 페이지 아래에 컨트롤을 배치하고, 필요시 해당 위치로 이동하도록 구성합니다.

3. 선례에 따르는 것이 좋다

• 태블릿은 아래에 메뉴를 배치하는 것이 좋지 않습니다.
• 태블릿은 위 또는 잡았을 때 엄지가 닿는 좌우 측면이 유용합니다.
• 터치 랩탑의 경우는 다릅니다.
  • 좌우 영역이 유용한 점은 비슷합니다.
  • 위 영역보다 아래가 낫습니다. 세워진 화면에서 위까지 손을 들기 번거롭기 때문입니다.

4. 화면 크기만 보고 터치 특성이 같다고 생각하면 안 된다

• 포인팅 장치의 정확도는 기기마다 다릅니다.
• 정확도에 따라 컨트롤 크기를 다르게 설정할 필요가 있습니다.
• CSS4의 pointer 미디어 쿼리를 참고할 수 있습니다.
  • Coarse: 정확도가 낮은 포인터 (스마트폰 터치, Wii 리모컨, 키넥트 등)
  • Fine: 정확도가 높은 포인터 (스타일러스, 마우스, 터치패드 등)

5. 모든 데스크탑 디자인도 터치를 고려해서 만들어야 한다

• 마우스 오버(Hover) 효과는 터치스크린에서 작동하지 않습니다.
• 따라서 사용자가 터치로 사용할 가능성이 있는 제품에는 마우스 오버 효과를 사용하지 말아야 합니다.

6. 터치 영역은 최소 44×29 픽셀 이상으로 하라

• 최소 7mm는 확보해야 엄지손가락으로 쉽게 터치할 수 있습니다.
• 7mm ≈ 44px ≈ 2.75em (44×29 픽셀이 실질적인 최소 크기)
• 웹은 44px, iOS 앱은 44pt, 안드로이드 앱은 48dp로 맞추면 무난합니다. (안드로이드 공식 가이드는 48dp 권장)

7. 수직으로 44픽셀의 리듬을 만들어라

• (콘텐츠 요소를 44픽셀의 배수 간격에 맞춰 디자인하라는 의미입니다.)

8. 아이콘이 클수록, 가까이 있을수록 터치가 쉽다 (Fitts의 법칙)

• (예: 스마트워치를 멀리서 보고 조작해야 한다면 버튼이 커야 합니다.)

9. 스크린만 생각하지 말고, 센서를 생각하고 디자인하라

• (최근 '모바일 퍼스트' 원칙이 강조되지만, 이제는 '센서 퍼스트'를 고민할 시대가 오고 있습니다. 화면 UI를 설계하기 전에 기기가 가진 다양한 센서를 어떻게 활용할지 먼저 생각하라는 의미로 해석됩니다.)