[출결 앱 개발 로그 06] 로그인 뒤 QR이 먼저 보이게 하기 #정보구조 #체감성능
기능이 늘어나면서 회원 대시보드에는 QR, 이번 달 수련, 출석 포인트, 주간 스트릭, 월간 배지, 히든 칭호, 최근 출석이 한꺼번에 들어갔다. 정보는 풍부했지만 로그인 버튼을 누른 뒤 화면이 나타날 때까지 오래 기다려야 했고, 정작 도장 입구에서 필요한 QR은 여러 정보 사이에 묻혔다.
해결 방향은 더 빠른 서버만 찾는 것이 아니라 먼저 보여줄 정보를 줄이는 것이었다.
앱의 첫 목적지를 QR로 정했다
회원이 앱을 여는 가장 빈번한 이유는 출석이다. 그래서 로그인 성공 뒤 대시보드가 아니라 /member/qr로 이동하게 했다.
QR 화면은 필요한 토큰과 회원 이름을 먼저 렌더링하고, 장착한 대표 칭호는 작은 별도 요청으로 뒤따라 불러온다. 내 기록 화면에서는 QR을 완전히 제거해 그 페이지를 열 때마다 새 QR을 만들지 않게 했다.
회원의 경로는 다음처럼 단순해졌다.
앱 실행 → 로그인 상태 확인 → 내 QR
↘ 내 기록
↘ 내 정보
↘ 홈홈과 앱 시작점을 분리했다
처음에는 /가 공개 홈이면서 앱의 시작점이었다. 로그인한 회원을 QR로 자동 이동시키자 월간 랭킹, 블로그, 밴드, 인스타그램이 있는 홈을 다시 볼 수 없다는 문제가 생겼다. 홈 자동 이동을 없애면 이번에는 앱 재실행 때 QR이 먼저 나오지 않았다.
두 요구를 하나의 주소로 해결하려다 생긴 충돌이었다.
최종적으로 역할을 분리했다.
/: 앱 시작점. 회원은 QR, 관리자는 관리자 메뉴, 비로그인은 공개 홈으로 이동/home: 로그인 여부와 관계없이 공개 홈 표시
PWA도 /로 시작하므로 한 번 로그인한 회원이 앱 아이콘을 다시 누르면 QR을 먼저 본다. 상단의 홈 버튼은 /home으로 이동해 월간 출석왕과 도장 소식을 보여준다.
중복 카드를 줄였다
기존 화면에는 이번 달 수련일과 내 이번 달 출석일이 별도 카드로 있었다. 출석 포인트도 수련 횟수와 같은 방식으로 움직여 정보 가치가 낮았다.
이를 네 영역으로 정리했다.
- 이번 달 수련: 횟수와 날짜 요약
- 주간 스트릭: 현재 연속 기록을 크게, 주간 진행도와 최고 기록을 작게
- 내 리워드: 월간 배지와 히든 칭호를 두 개의 행으로 통합
- 최근 출석: 최근 수업 시각과 처리 방식, 더보기
카드 수, 내부 여백, 제목 크기, 반복 아이콘도 줄였다. 정보량을 삭제한 것이 아니라 서로 같은 의미를 가진 표현을 합쳤다.
대표 칭호를 이름 아래에
대표 칭호를 장착하는 기능이 있었지만 장착 뒤 눈에 띄는 변화가 없었다. 대시보드의 내 출석 대시보드라는 일반 문구 대신 회원이 선택한 칭호를 이름 아래에 표시했다. QR 화면과 출석 성공 화면에도 같은 칭호가 나타난다.
칭호의 긴 설명은 QR에 넣지 않았다. 획득한 칭호 목록에서만 제목 아래에 작은 설명과 획득 날짜를 보여준다. 빠른 출석 화면과 자세히 읽는 리워드 화면의 정보 밀도를 다르게 한 것이다.
체감 속도는 순서의 문제이기도 했다
홈 데이터, 기록, 리워드, QR을 모두 기다린 뒤 화면을 보여주면 전체 응답이 조금만 느려도 사용자는 아무것도 할 수 없다. QR을 먼저 보여주고 나머지를 분리하자 서버 작업량뿐 아니라 “기다리는 느낌”도 줄었다.
현재 결론은 단순하다. 출석 앱의 로그인 완료 기준은 대시보드 전체가 로드되는 순간이 아니라, 회원이 태블릿에 보여줄 QR을 사용할 수 있게 되는 순간이다.