코트 옆에서 쓰는 앱의 입력 설계, 한 손 엄지 존에 다 넣기

농구 동호회 경기 날 벤치 옆에 서 보면 알게 돼요. 한 손에는 폰, 다른 손에는 팀 조끼나 물병이 들려 있고, 시선은 계속 코트를 향해 있죠. 두 손으로 폰을 잡고 차분히 입력할 틈이 없어요. 혹시 앱을 만들 때 책상에 앉은 사용자만 상상하고 있지 않나요?

코트 옆은 책상이 아니에요

농구 동호회 운영 매니저 플랜비(plan-b)의 출전 로테이션 기능을 직접 만들어 보니, 가장 큰 제약은 화면 크기가 아니라 손이었어요. 정식 규칙 기준으로 작전타임은 60초예요. 그 짧은 사이에 누가 나가고 누가 들어오는지 기록해야 하죠.

서 있는 자세, 한 손, 코트를 오가는 시선. 이 세 가지 조건에서도 실수 없이 입력되는 화면이 필요했어요.

폰을 한 손으로 잡고 엄지를 움직여 재 보니, 편하게 닿는 범위는 화면 아래쪽 절반 정도였어요. 그래서 원칙을 하나 정했어요. 조작 버튼은 전부 하단, 상단은 읽기만 하는 정보 영역.

점수나 쿼터 표시처럼 눈으로만 확인하는 정보는 위쪽에 두고, 손이 가야 하는 요소는 엄지 존 안으로 내렸어요. 적용해 봤더니 폰을 고쳐 잡는 횟수가 눈에 띄게 줄더라고요.

애플 가이드라인이 권하는 최소 터치 영역은 44pt예요. 코트 옆에서는 여기서 더 키워야 했어요. 경기 중엔 손에 땀도 나고 걸으면서 누르는 일도 많으니까요. 플랜비의 교체 버튼은 높이를 56px로 잡고, 버튼 사이 간격은 8px 배수로 넉넉하게 띄웠어요.

탭 수도 줄였어요. 나가는 선수 이름을 누르고, 들어오는 선수 이름을 누르면 끝. 탭 2번이면 교체 기록이 완료돼요.

나가는 선수 탭들어오는 선수 탭교체 완료

체육관에서 테스트해 보니 확인 단계가 하나 늘어날 때마다 입력을 포기하는 순간이 생겼어요. 잘못 눌렀을 때는 팝업으로 묻는 대신 되돌리기로 해결하는 쪽이 코트 옆 상황에는 맞았어요.

모든 기능을 엄지 존에 넣을 수는 없었어요. 전술보드는 손가락으로 동선을 그려야 해서 한 손 원칙과 처음부터 안 맞거든요. 이런 화면은 벤치에 앉아 두 손으로 쓰는 상황을 가정하고 분리했어요.

회비 정리처럼 타이핑이 필요한 일도 마찬가지예요. 경기 중에 급하게 할 일이 아니니 집에 가서 차분히 해도 늦지 않죠. 입력이 일어나는 장소를 기준으로 화면 성격을 나누니 설계가 한결 단순해졌어요.

책상에서만 테스트한 앱은 책상용 앱이 돼요. 저도 에뮬레이터로 돌려 보니 멀쩡했던 화면이 체육관에서는 자꾸 헛눌렸거든요. 여러분이 만드는 앱도 실제로 쓰일 장소에서 한 손으로 잡고 눌러 보세요. 설계가 달라 보일 거예요.

함께 보면 좋은 글