Ari.dev

2025.07 - 2026.04

B2C 리뉴얼 — 멤버십 인증·분석 재설계

Pages Router·Recoil 기반 레거시 B2C를 App Router로 전면 리뉴얼하며 임직원·법인 인증, 분석, 다국어 영역을 담당.

역할
영역 담당 (임직원·법인 인증 / GA·GTM / i18n / 바우처 필터)
  • Next.js
  • Zustand
  • React Query
  • Tailwind CSS

문제

임직원·법인 회원은 별도 인증과 만료 관리가 필요했고, 이커머스 이벤트가 GTM에 정합성 없이 수집되고 있었다. 전역 스피너가 모든 로딩을 블로킹해 체감 성능이 나빴다.

해결

  • 회사명·도메인 검색 기반 인증 모달과 서버 만료일 기준 만료 판정, 재인증/일반회원 전환 플로우 구현
  • GTM dataLayer 헬퍼를 작성해 view_item, add_to_cart, begin_checkout, purchase 이벤트 정합성 수정
    • 결제 수단이 사용자가 화면에서 고른 값으로 수집되고 있었다. 결제창에서 수단을 바꾸면 분석 데이터와 실제 승인 결과가 어긋난다 — PG 승인 완료 시점의 실제 값으로 교체했다
    • 접속 환경 변수가 로그인 시점에만 선언돼 비로그인 진입 데이터가 통째로 누락되던 것을 상시 수집으로 변경
  • 다국어 기준 시트를 단일 마스터 키 구조로 재편하고 언어별 시트 생성을 스크립트로 자동화, 공통 라벨 훅을 분리해 신규 화면이 재사용하도록 정리
  • 메인 5개 섹션의 전역 스피너를 섹션 스켈레톤으로 분리하고, 뷰포트 진입 전까지 자리를 잡아두도록 처리

그 밖에 발견한 것

계정 수정 흐름에서 비밀번호를 화면 간에 잠깐 넘기려고 만든 상태 저장소에 저장 방식이 명시돼 있지 않아, 기본값대로 브라우저 localStorage에 비밀번호가 영속 저장되고 있었다. 의도는 임시 보관인데 구현은 영속 저장이었던 셈이다.

저장 자체를 제거하고, 이미 사용자 브라우저에 남아 있을 수 있는 값까지 초기 로드 시 삭제하도록 했다. 앞으로 안 쌓이게 하는 것만으로는 이미 나간 데이터가 정리되지 않는다.

효과

  • 이커머스 이벤트 정합성 확보로 분석 데이터 신뢰도 개선
  • 인증 만료 관리 자동화로 수동 운영 부담 제거
  • 민감정보의 클라이언트 영속 저장 제거

바우처 노출 조건 정리는 별도 문서로 정리했다.

관련 글