관측할 수 있게 렌더링 방식을 두 번 바꿨다
Flutter Web은 Canvas로 그려서 화면 안에서 무슨 일이 일어나는지 볼 수 없었습니다. 관측 가능한 DOM으로 옮겨 이탈 구간을 드러냈고, 수단이 틀렸다는 걸 인정하고 한 번 더 되돌렸습니다.
상황
Canvas 렌더링이라 에러를 고객 문의로만 알았다
통합멤버십을 처음에 Flutter Web으로 만들었는데 Canvas 렌더링이라 Datadog SDK가 DOM 이벤트를 자동으로 수집하지 못했습니다. 에러가 나도 CS 문의가 들어와야 알 수 있었습니다.
본인인증⋅유저통합⋅매장연동 중 어느 구간에서 이탈하는지도 알 수 없었습니다. 전환율을 올리는 것보다 먼저 보이게 만드는 게 순서였습니다.
바꾼 것
DOM 기반으로 옮기고 퍼널 경계를 화면 단위로 드러냄
- SEO가 필요 없는 서비스라 DOM 기반이면 관측성이 생긴다고 판단해 React Native / Expo Web으로 이관
- 결과⋅로딩⋅에러 화면을 유스케이스별로 분리해 퍼널 경계가 화면 단위로 드러나게 구성
- 본인인증⋅유저통합⋅매장연동 퍼널, RUM 에러, LCP·INP·CLS, Frustration 세션을 하나의 대시보드로 모음
- 이상 징후가 생기면 Slack으로 알림이 가도록 모니터 구성
확인한 결과
문의가 오기 전에 에러를 먼저 보는 구조
2026년 5월 10일 기준으로 유저통합 완료 77%, 매장연동 완료 73%, 에러 세션 비율 1.85%, p75 LCP 636ms를 운영 지표로 보게 됐습니다.
다만 React Native Web 의존이 번들 크기와 빌드 설정을 키웠습니다. 웹만 서빙하는 앱에 네이티브 레이어를 얹은 셈이라 Vite 정적 React로 다시 옮겼고, 이후 신규 웹은 DOM 기반으로 통일했습니다.