문제

주요 페이지들은 로그인 여부를 클라이언트 쿼리로 판단했고, 정산달력은 모바일과 데스크톱 레이아웃도 브라우저에서만 구분했습니다. 그래서 서버 HTML에는 스켈레톤과 GNB, 푸터만 담겼고, 구조화 데이터를 갖춘 페이지인데도 크롤러가 읽을 본문이 없었습니다.

선택

SEO가 중요한 주요 페이지들에는 인증 분기를 서버에서 미리 판단해야 했습니다. 처음에는 공식 문서의 표준 방식인 HydrationBoundary로 넘기려 했습니다. 하지만 사용자 정보는 상위 레이아웃에서 먼저 구독되고, HydrationBoundary는 이미 있는 쿼리의 반영을 effect로 미루기 때문에 서버 렌더에 반영되지 않았습니다. 경계를 루트 레이아웃으로 올리면 쿠키를 읽는 호출 때문에 모든 페이지가 동적 렌더로 바뀌고, 상위 소비자를 모두 서버 렌더에서 빼면 하나라도 빠뜨리는 순간 아무 경고 없이 스켈레톤으로 돌아가는 구조였습니다. 그래서 기존 쿼리에 값을 바로 넣는 initialData를 택했습니다. 인증을 확정한 뒤에도 정산달력은 뷰포트 분기 때문에 여전히 비어 있었습니다. 두 벌을 그리고 CSS로 감추는 방식은 감춰진 HTML 렌더링 비용 문제와 접근성 측면에서 목적을 이루지 못했습니다. 세 페이지는 이미 인증 때문에 동적 렌더여서 요청 헤더를 읽어도 추가 비용이 없었으므로 UA로 한 벌만 내보내는 쪽을 택했습니다.

실행

• 요청 쿠키와 UA를 서버에서 읽어 사용자 정보와 뷰포트를 Context로 전역에 공유함

• 세션 만료나 서버 장애 때는 기존 클라이언트 조회로 폴백해 만료 세션이 비로그인으로 굳지 않게 하고, UA가 실제와 다른 기기는 마운트 뒤 matchMedia가 바로잡게 함

• 정적 렌더를 포기하는 비용이 있어 적용 범위를 사이트맵 등록과 인증 분기가 겹치는 세 페이지로 한정하고, 헤더는 루트 레이아웃이 아니라 페이지 단위에서 읽음

결과

• 주요 페이지들의 본문이 첫 HTML에 실려 검색 엔진이 읽을 콘텐츠가 생김

• 인증 결과를 기다리던 첫 화면이 사라져 상품마진 기준 비로그인 LCP 2,042ms → 401ms, 80% 단축

문제

사용자 액션 없이 조건에 따라 자동 노출되는 오버레이가 늘면서, 조건이 동시에 충족되면 겹쳐 떴고 반드시 처리해야 하는 안내가 다른 오버레이에 묻혔습니다. 쌓임 맥락과 z-index를 오버레이마다 개별 대응했고, 무엇이 우선인지가 어디에도 정의되어 있지 않았습니다. 기획 방향상 이런 오버레이는 계속 늘어날 것이 분명해, 요소가 늘 때마다 재발할 문제였습니다.

선택

직접 만들 가치부터 확인했습니다. 쿼리 응답이나 페이지 진입 같은 조건 노출을 한 번에 관리하는 라이브러리는 없어서 개발 비용이 높은 작업으로 판단되었으나 기획팀과 디자인팀에 확인하니 이런 오버레이는 계속 늘어날 것이 분명했습니다. 개발을 진행하기로 한 뒤 필요한 사항들을 정리했습니다. 모달 큐, 전역 스토어 플래그, 페이지별 개별 처리로 흩어져 있던 기존 모달 방식을 어디서나 쓸 수 있는 범용 훅 하나로 모아야 했고, shadcn 컴포넌트가 기반으로 쓰는 radix-ui Dialog와의 호환도 고려해야 했습니다. 방식은 셋을 비교했습니다. 기존처럼 전역 스토어의 플래그로 관리하면 오버레이가 생길 때마다 스토어를 고쳐야 하고 노출 조건이 흩어져 누락되기 쉽습니다. 큐로 순차 노출하면 네트워크 응답 같은 조건이 충족되는 순서가 매번 달라 중요한 안내가 뒤로 밀립니다. 문제의 본질이 '한 번에 하나만, 그중 가장 중요한 것'이라, 조건 충족 순서와 무관하게 늘 최상위 하나만 띄우는 우선순위 기반 단일 노출을 골랐습니다.

실행

• 우선순위는 배열 하나로 관리하고, 각 오버레이는 훅으로 노출 조건만 선언하면 조건이 참인 것 중 배열에서 가장 앞선 하나만 활성이 되도록 설계

• 오버레이를 중앙에서 렌더하는 방식과 활성 여부만 받아 직접 렌더하는 방식을 함께 두어, 중앙 렌더는 radix-ui Dialog의 진입, 퇴장 애니메이션을 유지하고 사이드바나 온보딩처럼 자체 렌더 구조를 가진 컴포넌트는 직접 렌더를 제어하게 함

• 모달 큐 항목, 사이드바, 온보딩, 페이지 지역 모달까지 기존 유스케이스를 모두 이 훅으로 옮기고, 이를 위해 두던 전역 스토어 두 개를 제거

결과

• 조건이 동시에 충족돼도 우선순위가 가장 높은 오버레이 하나만 노출되어 겹침과 필수 안내 묻힘이 해소됨

• 쌓임 맥락과 z-index 개별 대응이 사라지고, 노출 순서는 배열 순서만으로 결정됨

• 이후 진행된 VIP 제도의 오버레이 두 가지는 배열 추가만으로 빠르게 구현이 가능했음