[출결 앱 개발 로그 07] 웹을 설치형 도장 앱으로 다듬기 #PWA #모바일UX

회원이 매번 브라우저를 열고 주소를 입력하게 만들고 싶지 않았다. TEAM PASSION 출결 앱은 웹으로 배포하되 휴대폰 홈 화면에서 일반 앱처럼 열 수 있는 PWA로 구성했다.

설치 버튼 하나를 만드는 일처럼 보였지만 iPhone, Android, PC의 설치 방식은 서로 달랐다.

브라우저마다 다른 설치 흐름

Android Chrome과 PC의 Chrome·Edge에서는 설치 조건이 갖춰지면 브라우저의 설치 프롬프트를 호출한다. 사용자가 취소하더라도 오류로 취급하지 않고 다음에 다시 선택할 수 있게 한다.

iOS Safari에는 같은 설치 프롬프트가 없다. 버튼을 누르면 다음 순서를 안내한다.

1. Safari의 공유 버튼을 누른다.
2. 홈 화면에 추가를 선택한다.
3. 오른쪽 위의 추가를 누른다.

삼성 인터넷처럼 환경에 따라 메뉴 이름이 다른 경우에는 홈 화면 추가 안내를 보여준다. 이미 설치 앱으로 실행 중이면 설치 버튼을 숨긴다.

시작 주소가 사용자 경험을 바꿨다

한때 설치 앱이 마지막으로 보던 관리자 스캔 화면에서 다시 열려 다른 메뉴로 갈 수 없는 문제가 있었다. PWA의 시작 주소와 앱 내부 진입 규칙을 정리해 해결했다.

현재 설치 앱은 /에서 시작한다. 남아 있는 로그인 상태에 따라 회원은 자신의 QR, 관리자는 관리자 메뉴, 비로그인은 공개 홈으로 간다. 어느 화면에서도 홈과 계정 메뉴로 이동할 수 있다.

웰컴 영상은 로딩과 달랐다

앱을 처음 열 때 브랜드 영상을 재생했는데, 모든 페이지 로딩마다 영상이 다시 나타나는 버그가 있었다. 로딩보다 영상 길이가 길어 화면 이동이 느려 보였다.

영상은 같은 앱 실행 중 최초 한 번만 재생하도록 제한했다. 처음에는 전체 4초 재생을 원했지만 이후 운영 흐름을 고려해 2.5초로 조정했다. 영상 비율은 화면 안에 모두 들어오는 contain 방식으로 바꾸고, 남는 부분은 영상 배경과 같은 흰색으로 채웠다.

이 과정에서 “브랜드 인트로”와 “데이터 로딩 표시”를 구분했다. 인트로는 연출이고, 로딩은 사용자가 기다리는 이유와 진행 상태를 알려야 한다.

모바일 메뉴는 줄바꿈 대신 스크롤

회원 메뉴에는 홈, 내 출석 QR, 내 기록, 내 정보가 있고 관리자 메뉴에는 홈, 출석 스캔, 출석 현황, 회원 관리, 리워드 도감이 있다. 작은 화면에서 모두 한 줄에 억지로 넣으면 글자가 찌그러지고, 여러 줄로 접히면 헤더 높이가 계속 달라졌다.

모바일에서는 가로 스크롤 탭으로 바꿨다.

• 탭은 한 줄을 유지한다.
• 현재 페이지는 빨간 테두리와 배경으로 구분한다.
• 각 항목은 손가락으로 누르기 충분한 높이를 가진다.
• 로그아웃처럼 보조 기능은 시각적 비중을 줄인다.

홈의 앱 설치 버튼도 QR 버튼과 같은 폭으로 재배치해 작은 모바일에서 잘리거나 한쪽만 좁아지지 않게 했다.

정적 자산과 최신 데이터

서비스 워커는 앱의 JS, CSS, 로고, 영상 같은 정적 자산을 저장해 두 번째 실행을 빠르게 만든다. 반면 출석 상태, 회원 정보, 리워드처럼 바뀌는 데이터는 오래된 값이 남지 않도록 같은 방식으로 저장하지 않는다.

홈 로고도 실제 표시 크기에 비해 지나치게 큰 원본을 사용하고 있어 138KB에서 약 14KB로 줄였다. 이미지의 가로·세로 크기를 명시해 로딩 중 레이아웃이 움직이는 현상도 줄였다.

현재 결론

PWA는 웹사이트에 아이콘을 추가하는 작업이 아니었다. 설치, 재실행, 화면 이동, 업데이트, 캐시가 하나의 앱처럼 느껴져야 했다. 특히 설치한 뒤 어디서 시작하는지가 출석 앱의 핵심 행동과 맞아야 했다.