[UI/UX] 1. 디자인 공통 요소 (3)

6. 터치 타겟(Touch Target)

터치가 되는 영역.

사람마다 손가락 끝이 화면에 닿는 면적이 다름. 제대로 터치를 하게 하려면 충분히 넓은 유효한 터치 영역을 제공해야 함. 너무 좁은 터치 타겟(=잘 안눌림)은 안좋은 UX를 제공하게 됨.

안드로이드의 경우 48x48dp, iOS의 경우 44x44pt를 기준으로 함.

7. 썸존(Thumb Zone)

말그대로, 엄지손가락이 닿는 부분을 뜻함.

많은 사용자들이 한 손으로 핸드폰을 사용하기 때문에, 주요한 기능들이 이 썸존안에 있는 것이 더 좋은 UX를 제공함.

엄지로부터 거리에 따라

Natural - 닿기 편한 영역

Stretch - 닿기 불편한 영역

Hard - 닿기 어려운 영역

로 나뉨.

썸존을 잘 반영한 UI로 삼성 One UI를 들 수 있음. (상단은 Viewing Area, 하단은 Interaction Area로 구분하여 디자인 하였음.)

이젠 폴더블 폰에 대한 썸존도 고려할 필요가 있음.

8. 제스처

이미 상당히 유명한 제스처들이 있고 (핀치로 줌아웃 등), 사용자는 의도한 대로 동작할 것이라 믿고 있음. 이러한 믿음이 깨지면(= 구현이 안되어 있으면) 나쁜 UX로 이어짐.

• 탭(Tap) - 누르기 >> 해당 기능을 동작함. (예시: 페이지 이동, 선택/해제 등)
• 더블 탭(Double Tap) - 빠르게 두번 누르기 >> 정해진 동작 없음. (예시: 인스타그램 하트, 지도 확대 등)
• 롱 프레스(Long Press) - 길게 누르고 있기 >> 숨은 기능을 활성화함. (예시: 삭제 가능 리스트에서 삭제 기능 활성화 등)
• 스크롤(Scroll) - 손가락으로 화면을 쓸어올리/내리는 행위 >> 화면 내에 더 많은 컨텐츠를 확인함. (예시: 리스트 페이지에서 컨텐츠를 추가로 탐색 등)
• 핀치(Pinch) - 두 손가락을 동시에 화면에 대고 손가락 간격을 벌리거나(Pinch Open) 좁히는(Pinch Closed) 행위 >> 주로 확대/축소에 이용됨. (예시: 지도 확대/축소 등)
• 드래그(Drag) - 손가락을 화면에 대고 천천히 움직이는 행위 >> 화면 내에 특정 물체를 이동시킴. (예시: 메뉴 내 앱 아이콘 이동)
• 스와이프(Swipe) - 좌->우, 우->좌로 화면을 넘기는 행위 >> 같은 레벨 탭간 이동함. (예시: 메뉴에서 좌-우 전환)
• 플링(Fling) - 손가락을 빠르게 휙 문지르는 행위. 속도가 일정 임계값을 넘어야 함. >> 무언가를 제거함.
  • * 드래그, 스와이프, 플링은 비슷하지만 속도에 대한 기준이 다름.
• 팬(Pan) - 한 손가락을 떼지 않고 이동하는 제스처 (사실상 드래그랑 동일)
• 회전(Rotate) - 두 손가락을 동시에 터치한 상태에서 회전시켜 원하는 방향으로 기준을 변경 >> 화면을 회전 시킴. (예시: 지도 방향 전환)

✓ 제스처 주의사항

특정 제스처로만 기능에 접근할 수 있으면 안됨 >> 직관적이지 못하기 때문임.

    ex. 인스타그램 좋아요를 하트 버튼 없이 만들어놨다면 사용자가 몰라서 좋아요를 못 누르는 경우 발생함.

익숙한 제스처를 사용해야 함. 제스처에 기대하는 동작을 구현해놓는 것이 좋음. OS별 가이드라인 참고.