언니의파우치

URL - 언니의파우치 (웹, iOS, Android)

주요 담당 업무

• 멀티 테넌트(순수 웹·앱 웹뷰·타사 앱 웹뷰) 환경의 Next.js 서비스에서 이벤트 트래킹 체계를 전면 리팩토링
• 커머스 진입 구조 개편·리뷰 기능 고도화
• 웹뷰 버그 원인 분석
• SSR 성능 개선을 수행
• 사내 운영 CMS 신규 기능 구현 및 유지보수

트러블 슈팅

CDN 캐시로 발생한 툴팁 상태 불일치 해결

문제

• 홈에서 혜택 툴팁을 닫아도 커뮤니티 탭으로 이동하면 다시 노출되는 문제가 있었습니다.
• 상태를 URL 쿼리로 전달하는 과정에서, CDN(CloudFront)가 쿼리를 구분하지 않고 캐시한 301 리다이렉트를 재사용해 닫힘 상태(false)가 과거의 노출 상태(true)로 바뀌었습니다.
• 송신·수신·로그인 중계 코드에서 원인을 찾지 못해 실제 요청과 응답을 대조했고, 응답 헤더(Age)와 캐시 미스(x-cache: Miss) 시 정상 동작하는 차이를 통해 원인을 확인했습니다.

해결

• 두 앱이 같은 오리진·같은 탭에서 sessionStorage****를 공유할 수 있다는 점을 활용해, 상태를 URL로 전달하는 구조를 제거했습니다.
• 세 레포의 혜택 툴팁 상태를 하나의 저장 키로 통일했습니다. 키가 없으면 노출하고, 닫을 때 'false'를 기록해 같은 탭 세션에서 이동·새로고침해도 닫힌 상태가 유지되도록 했습니다.

깨달은 점

• 코드가 정상이어도 인프라 단에서 문제가 발생할 수 있다. 로직뿐 아니라 리다이렉트와 CDN 캐시까지 실제 데이터 흐름을 확인해야 합니다.
• 상태를 나르는 경로가 길수록 바꿔치기될 지점이 늘어난다. 인프라 설정 대신 상태 전달 경로 자체를 것이 재발 방지 방법이 될 수 있다.

SSR·CSR 환경 차이로 발생한 웹뷰 설정 오류 해결

문제

• SEO 리포트에서 viewport 위반이 잡혔다. user-scalable=no, maximum-scale=1.0으로 모바일 핀치 줌을 막고 있었다.
• 웹뷰에서는 줌이 되면 안 돼서 웹뷰일 때만 줌 잠금을 유지하도록 조건 분기를 넣었는데, 앱에서 다른 페이지로 이동하면 잠금이 풀리는 문제가 생겼다.
• 웹뷰 첫 진입에서는 줌 잠금이 적용됐지만, CSR 페이지 이동 이후에는 설정이 풀렸다.
• 서버 쿠키에서 읽은 웹뷰 정보를 pageProps로 판별하고 있었는데, 클라이언트 라우팅 시 getInitialProps가 쿠키를 읽지 못해 pageProps가 빈 값으로 초기화되면서 웹뷰 판별이 유지되지 않았기 때문이다.

해결

• 웹뷰 판별 기준을 pageProps 대신 최초 SSR 시점에 저장한 스냅샷을 기준으로 웹뷰 여부를 판별 수정했습니다.

깨달은 점

• SEO·접근성 수정은 앱 웹뷰라는 다른 실행 환경에 부작용을 낸다. 웹 기준 규칙을 적용할 때 웹뷰에서의 동작도 고려해야 한다.
• Next.js Pages Router에서 SSR에만 존재하는 값(쿠키, 헤더)을 pageProps로 넘기면 CSR 이동 때 사라지므로, 세션 동안 변하지 않는 값은 최초 SSR에서 한 번 스냅샷으로 고정해야 한다.