캐릭터 현황, 이번 달 흐름, 최근 기록을 한눈에 보여주는 메인 허브 화면입니다. 현재 플레이 상태와 핵심 지표를 빠르게 확인할 수 있습니다.
재획 기록을 날짜별로 정리하고, 사냥 시간과 수익을 한 번에 관리하는 사냥 화면입니다. 기록을 쌓을수록 누적 흐름을 보기 쉽게 구성했습니다.
아이템 구매나 강화비처럼 게임 내 지출을 따로 기록하는 지출 장부 화면입니다. 월별, 날짜별로 정리해 실제 순자산 흐름을 파악할 수 있습니다.
사냥, 보스, 보스 드랍템 수익을 기간별로 비교하고 통계로 확인하는 수익 분석 화면입니다. 주간, 월간 성과를 통해 플레이 패턴을 분석할 수 있습니다.
주간 보스와 월간 보스를 캐릭터별로 관리하고, 드랍템 수익까지 함께 기록하는 보스 관리 화면입니다. 일반 보스 수익과 물욕템 수익을 분리해 더 정확하게 볼 수 있습니다.
여러 목표를 등록하고 우선순위를 조절하면서 진행률을 관리하는 목표 관리 화면입니다. 목표가 앞에서부터 자동으로 채워지도록 설계해 흐름을 직관적으로 볼 수 있습니다.
//핵심 포인트8개
탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.
빈 화면이 아니라 정확한 데이터가 보이는 시간을 줄이다
레이아웃은 먼저 나타났지만 목표 진행률과 수익은 hydration 이후에야 로드되고, 일부 응답만 반영된 값이 잠시 노출됐습니다. 사용자가 원하는 것은 화면의 틀이 아니라 정확한 핵심 수치라고 판단해 서버 렌더링 단계에서 네 데이터를 병렬 조회하고 초기 HTML에 주입했습니다.
초기 화면의 ‘목표 미설정’, ‘0회’와 함께 목표 진행률이 0.7%에서 최종값 54.2%로 바뀌는 현상을 확인했습니다.
hydration, 세션 확인과 로컬 상태 초기화 이후 네 API가 호출되어 핵심 데이터 표시에 추가 왕복이 선행됨을 찾았습니다.
LCP 대신 navigationStart부터 최종 목표 진행률 54.2%가 표시될 때까지를 Dashboard Time to Data로 정의했습니다.
Server Component에서 목표·기록·지출·보스 데이터를 Promise.all로 조회하고 초기 HTML에 주입했습니다. 이후 Zustand 재검증과 실패 폴백은 유지했습니다.
실제 로그인 세션과 동일 데이터로 변경 전후 각 5회를 측정해 중앙값이 1,543.1ms에서 692.4ms로 줄어든 것을 확인했습니다.