결제 시스템은 서비스에서 가장 중요한 부분 중 하나입니다. 사용자가 결제를 진행할 때 문제가 발생하면 직접적인 매출 손실뿐만 아니라 신뢰도에도 큰 영향을 미칩니다. 최근 글로벌 확장을 대비하여 기존 PHP 기반의 모놀리식 결제 시스템을 Java Spring + Next.js 아키텍처로 마이그레이션하면서, AWS SQS 기반의 이벤트 드리븐 시스템을 도입했습니다. 하지만 새로운 아키텍처에서도 예측하지 못한 모니터링 문제들이 발생했습니다.

이 글에서는 결제 시스템의 모니터링을 개선하기 위해 어떤 시도를 했고, 어떤 문제를 해결했으며, 현재까지의 회고를 공유하려 합니다.

결제 모니터링의 핵심 도전 과제

새로운 결제 시스템을 운영하면서 직면한 문제들은 다음과 같았습니다.

이벤트 전파 실패 감지 어려움

AWS SQS를 통해 결제 이벤트를 처리했지만, 특정 시나리오에서 메시지가 정상적으로 발행되지 않는 문제가 발생함.
일부 유저가 결제 완료 후에도 상태가 갱신되지 않는 사례가 보고됨.

프론트엔드에서 원인을 추적하기 어려움

API 요청이 정상적으로 전송되었지만, 백엔드에서 정상적으로 처리되지 않은 경우 클라이언트에서 이를 인지하기 어려움.
Datadog RUM과 DD Trace를 적용했지만, 사용자 플로우 전반을 한눈에 파악하기 어려웠음.

Slack 알림을 통한 실시간 모니터링 부족

문제 발생 시 빠르게 감지하고 대응하기 어려웠음.
기존에는 오류 발생 시 Datadog을 통해 모니터링했지만, Slack을 활용한 실시간 추적이 필요했음.

유저의 비정상적인 행동과 엣지 케이스 대응 부족

실제로 Slack 로그를 통해 유저가 결제 시도 후 빠르게 브라우저를 종료하면서 SQS 요청이 가지 않은 사례를 발견함.
이로 인해 결제는 완료되었지만, 수강권 발급이 실패하는 문제가 발생함.
이러한 엣지 케이스를 감지하고 대응할 수 있는 시스템이 필요했음.

개선을 위한 접근법

Slack 기반의 결제 흐름 추적 시스템 도입

결제 플로우를 더 명확하게 모니터링하기 위해 Slack Webhook을 활용한 결제 추적 시스템을 구축했습니다.

프론트엔드에서 결제 요청을 보낼 때, 해당 데이터를 Slack으로 전송
SQS 이벤트 발행전 메시지 바디 데이터를 Slack으로 전송
SQS 이벤트 발행후 메시지의 상태를 Slack으로 전송
이후 상황은 프론트엔드가 아닌 백엔드 개발자가 추적하여 문제 해결
이를 통해 각 결제의 흐름을 한눈에 파악할 수 있도록 구성

결제 상태 로그 예시

{
  "userId" : 1234567890,
  "amount" : 500,
  "paymentMethodType":"KAKAO_PAY",
  "useragent" : 앱내 브라우저 or 웹에서 구매했는지, 혹은 외부 인앱 브라우저에서 구매했는지 등등
}

이 방식 덕분에 결제 요청이 프론트엔드 → 백엔드 → SQS → 최종 반영까지 정상적으로 처리되었는지 실시간으로 확인할 수 있게 되었습니다.

또한, 비정상적인 유저 행동(예: 결제 후 브라우저 종료)도 감지할 수 있도록 로깅을 강화했습니다. 이를 통해 특정 유저가 결제 요청 후 SQS 메시지를 보내지 못한 경우를 빠르게 파악할 수 있었습니다.

Datadog RUM과 DD Trace 개선

Datadog RUM과 DD Trace를 적용했지만, 처음에는 단순한 이벤트 로깅 수준이었습니다. 이를 개선하기 위해 다음과 같은 접근법을 시도했습니다.

사용자 세션을 추적하여 특정 사용자와 관련된 결제 요청을 필터링 가능하도록 개선
프론트엔드와 백엔드 로그를 하나의 트레이스로 연결하여 흐름을 쉽게 분석할 수 있도록 설정

UI 피드백과 로딩 인디케이터 개선

이벤트 드리븐 아키텍처를 사용하면서, 사용자에게 실시간으로 상태를 제공하는 것이 중요하다는 점을 깨달았습니다. 이를 위해 다음과 같은 접근법을 시도했습니다.

결제 요청 후 즉시 낙관적 업데이트를 적용하지 않고, 이벤트가 정상적으로 처리될 때까지 로딩 인디케이터 제공
SQS 메시지가 일정 시간 내에 수신되지 않으면 오류 메시지를 표시하고, 재시도 버튼 제공
사용자 인터페이스에서 결제 진행 상태를 명확하게 보여줄 수 있도록 Splash 화면 적용
숏폴링(short polling) 기법을 활용하여 일정 주기마다 결제 상태를 확인하고, 사용자가 페이지를 새로고침하지 않아도 결과를 즉시 알 수 있도록 개선

이 방식 덕분에, 유저가 결제 버튼을 여러 번 클릭하는 문제를 방지하고, 신뢰할 수 있는 결제 경험을 제공할 수 있었습니다.

결제 시스템의 현재 상태

이벤트 드리븐 아키텍처를 사용하면서 결제 시스템의 현재 상태는 다음과 같습니다.

결제 요청 후 즉시 낙관적 업데이트를 적용하지 않고, 이벤트가 정상적으로 처리될 때까지 로딩 인디케이터 제공
숏폴링(short polling) 기법을 활용하여 일정 주기마다 결제 상태를 확인하고, 사용자가 페이지를 새로고침하지 않아도 결과를 즉시 알 수 있도록 개선
결제 요청 후 즉시 낙관적 업데이트를 적용하지 않고, 이벤트가 정상적으로 처리될 때까지 로딩 인디케이터 제공
숏폴링(short polling) 기법을 활용하여 일정 주기마다 결제 상태를 확인하고, 사용자가 페이지를 새로고침하지 않아도 결과를 즉시 알 수 있도록 개선

결론과 앞으로의 방향

이번 프론트엔드 모니터링 작업을 통해 얻은 교훈은 다음과 같습니다.

실시간 모니터링이 중요하다: 결제 흐름을 추적할 수 있는 Slack 알림 시스템을 도입하면서 문제를 빠르게 인지할 수 있었음.
엔드투엔드 추적이 필요하다: Datadog RUM과 DD Trace를 개선하여 결제 요청부터 최종 처리까지 한눈에 볼 수 있도록 구성함.
사용자 피드백을 강화해야 한다: UI에서 결제 진행 상태를 명확하게 제공하여 사용자 불편을 최소화함.

앞으로는 AI 기반 이상 감지 시스템을 도입하여 비정상적인 결제 패턴을 자동 감지하고, 보다 정교한 모니터링 체계를 구축해볼 계획입니다. 또한, 프론트엔드에서 A/B 테스트를 적용하여 최적의 결제 UI를 찾아가는 과정도 추가로 진행할 예정입니다.

프론트엔드에서의 모니터링은 단순한 에러 로깅을 넘어 사용자 경험을 개선하는 핵심 요소라는 점을 다시 한번 깨닫게 된 경험이었습니다. 앞으로도 더 나은 모니터링 환경을 고민해 나가겠습니다.

DEV-BBAK 블로그

프론트엔드 모니터링 회고