[출결 앱 개발 로그 02] 태블릿을 출석 키오스크로 바꾸기 #카메라UX #반응형
QR 스캐너를 처음 만들었을 때 화면에는 카메라 시작과 중지 버튼, 오늘 관원 목록, 수동 입력창이 모두 있었다. 기능은 많았지만 도장 입구에 태블릿을 고정해 두는 실제 상황에는 오히려 불편했다.
이 화면은 관리 페이지가 아니라 사람들이 줄을 서서 몇 초씩 사용하는 키오스크였다.
버튼을 추가하는 대신 없앴다
처음에는 카메라 시작 버튼을 누르고, 필요하면 중지하고, 스캔이 안 될 때 직접 입력하도록 만들었다. 실제 흐름을 따라가 보니 시작과 중지는 매일 반복되는 불필요한 단계였다.
최종 흐름은 다음처럼 단순해졌다.
- 스캔 화면에 들어오면 카메라를 자동으로 준비한다.
- 회원은 휴대폰 QR을 카메라에 보여준다.
- 처리 결과와 이름을 크게 보여준다.
- 잠시 뒤 다음 회원을 받을 상태로 돌아간다.
시작·중지 버튼은 제거하고 작은 전면/후면 카메라 전환만 남겼다. 카메라가 동작하지 않을 때만 PIN 입력을 보조 기능으로 펼칠 수 있게 했다.
오류는 설명보다 다음 행동이 중요했다
“카메라를 시작할 수 없습니다”라는 한 문장만으로는 사용자가 무엇을 해야 할지 알 수 없었다. 오류를 다음 상황으로 나눴다.
- 권한이 꺼져 있으면 브라우저 설정에서 허용하도록 안내
- 카메라가 없으면 PIN 입력으로 전환
- 다른 앱이 카메라를 쓰고 있으면 해당 앱을 종료한 뒤 재시도
- 원인을 알 수 없으면 다시 시도와 대체 경로를 함께 제공
권한을 거절한 뒤 같은 화면에서 계속 팝업을 띄우는 것도 피했다. 한 번 차단하면 새로고침 전까지 다시 묻지 않아 사용자가 화면과 싸우지 않게 했다.
세로 화면을 키운 것이 가로형 태블릿은 아니었다
초기 태블릿 가로 화면은 모바일 레이아웃을 넓힌 형태였다. 버튼이 아래로 밀리고 스크롤이 생겼다. 그래서 가로 모드에서는 구조 자체를 두 열로 바꿨다.
- 왼쪽: 로고, 사용 안내, 이달의 출석왕
- 오른쪽: 카메라, 현재 상태, 카메라 전환
출석왕은 홈 화면의 데이터를 그대로 재사용했다. 별도 계산을 만들지 않았고, 정보가 없을 때도 왼쪽 영역의 높이가 무너지지 않도록 빈 상태를 준비했다. 모바일과 세로 모드에서는 이 패널을 숨겨 카메라가 주인공으로 남게 했다.
검증은 iPad와 Galaxy Tab의 세로·가로 크기, 모바일 390×844, 태블릿 1024×1366 등을 오가며 진행했다. 목표는 특정 기기에서만 딱 맞는 화면이 아니라, 화면 높이가 조금 달라져도 카메라와 핵심 조작이 한눈에 들어오는 구성이었다.
전면 카메라의 작은 함정
전면 카메라는 사용자와 태블릿이 서로 마주 보는 설치에 편했다. 그러나 미리보기가 좌우 반전돼 있지 않으면 사용자가 QR을 어느 방향으로 움직여야 할지 직관적으로 맞추기 어렵다.
그래서 전면 미리보기만 거울처럼 좌우 반전했다. 후면 카메라는 그대로 유지했고, 화면 표시만 바꿔 QR 판독 동작에는 영향을 주지 않았다.
현재 결론
좋은 키오스크 화면은 기능이 많은 화면이 아니다. 별도 설명 없이 카메라를 향해 QR을 보여주고, 성공했는지 확실히 알 수 있으며, 문제가 생겼을 때 다음 행동이 한 가지로 보이는 화면이다.
이 작업에서 가장 효과적인 개선은 새 버튼을 만든 것이 아니라 시작·중지·관원 목록처럼 현장 흐름을 방해하던 요소를 제거한 일이었다.