리포트 준비 시간을 명확히 안내하고 앞당김
목차
체크아웃 완료 후 리포트 생성까지 걸리는 시간을 사용자에게 명확하게 전달하고, 그 시간 자체도 단축하는 작업을 했다.
문제 상황
이전엔 사용자가 결제를 완료하고 리포트 화면에 도착하면 "생성 중입니다" 정도의 문구만 보여줬다. 문제는 사용자가 실제로 얼마나 더 기다려야 하는지 예측할 수 없다는 것. 지금 결제를 완료한 상태에서 불확실한 대기 시간은 불안감으로 직결된다. "뭔가 잘못된 건 아닐까?", "정말 준비 중인 걸까?" 하는 의구심까지 생긴다.
아키텍처적으로도 비효율이 있었다. 체크아웃(결제 처리) 완료 후에 리포트 생성을 시작하니까, 사용자가 리포트 화면에 도착했을 때는 리포트 생성이 겨우 시작하는 단계였다. 결제 완료와 동시에 생성을 시작할 수 있다면 시간을 더 단축할 수 있었다.
수정 내용
두 가지를 함께 처리했다.
첫째, 체크아웃 시점 리포트 선생성
src/app/api/polar/checkout/route.ts에서 결제 처리 완료 직후 리포트 생성을 백그라운드에서 비동기로 트리거하도록 변경했다. 결제 API 응답을 즉시 반환하면서 동시에 리포트 생성 작업을 시작하는 방식:
// 결제 처리 완료
const checkoutResult = await processPayment(...);
// 응답은 먼저 반환, 생성은 백그라운드에서 병렬 진행
triggerReportGeneration(userId, checkoutId); // fire-and-forget
return { success: true, checkoutId: checkoutResult.id };
이렇게 하면 사용자가 리포트 화면에 도착했을 때 생성이 이미 상당 부분 진행 중일 수 있다.
둘째, 대기 시간 명시화
src/app/r/[uid]/reading-panel.tsx에서 대기 메시지를 "생성 중입니다"에서 "약 1~3분 정도 소요됩니다" 같은 구체적인 기대치로 변경했다. 사용자는 이제 "아, 이 정도 시간 기다리면 되는구나" 하고 이해할 수 있다.
변경 파일별 역할
| 파일 | 주 역할 | 이번 변경의 의미 |
|---|---|---|
src/app/api/polar/checkout/route.ts |
결제 처리 & API 응답 반환 | 리포트 생성을 결제 완료 직후 즉시 백그라운드에서 시작 |
src/app/r/[uid]/reading-panel.tsx |
리포트 준비 화면 UI | 대기 시간을 구체적으로 안내 ("~수분") |
회고 & 배운 점
1) 비동기 작업의 타이밍 설계
"리포트 생성은 오래 걸리니까 나중에 처리하자"라고 미루기 쉽다. 그런데 결제 완료 시점은 사실 가장 좋은 생성 시작점이다. 필요한 데이터가 모두 준비되어 있고, 사용자도 지금 당장 그 결과를 원하니까. 어떤 작업을 어느 시점에 병렬화할 수 있을지 항상 생각해야 한다.
2) 불확실성 제거 = UX 개선
사용자 입장에선 "정확히 얼마나 기다려야 하는가"가 명확한 것만으로도 신뢰감이 크게 올라간다. 특히 결제처럼 민감한 플로우에서는 더욱. 무한 로딩 상태보다 "약 1~3분"이라는 구체적 예상이 심리적 안정감을 준다.
3) 메시지와 현실의 일관성 중요
"~수분"이라고 안내했다면, 실제 생성 시간이 그 범위 내에 있어야 한다. 메시지가 기대를 잘못 설정하면 역으로 신뢰도가 떨어진다. 따라서 이 변경 후 실제 리포트 생성 시간을 계속 모니터링하고, 필요하면 안내 문구를 조정해야 한다.
4) 우선순위 판단
크리티컬 버그는 아니지만, 고객 피드백이나 모니터링에서 자주 언급되는 부분이라면 단순 "느낌"이 아니라 실제 비즈니스 영향이 있다는 신호. 코드 복잡도도 낮으면서 UX 개선폭이 크면, 우선순위를 더 높게 책정할 충분한 이유가 된다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.