Uket

• 실시간 입장 내역, QR 리더 입장 처리 기능 구현
• 행사 등록/수정, 어드민 계정 관리 기능 구현
• 모바일/PC 분기 라우팅을 위한 Next.js 미들웨어 설계

• 랜딩, 공연 선택, 예매, 마이페이지 등 사용자 화면 UI 및 API 연동
• 회원가입 사용자 시나리오 설계
• 에러 중앙 제어 처리 설계

기존 Vite 기반 SPA 구조는 다음과 같은 문제가 있었습니다.

• SNS 공유 메타데이터 누락
• 공연 선택 페이지 초기 로딩 지연

SNS로 정보가 퍼지는 공연 서비스 특성을 고려했을 때, 이는 치명적인 문제라고 판단했습니다.

이에 따라, Next.js App Router 기반 SSR 구조로 마이그레이션을 진행했습니다.

빌드 시간은 증가했지만, 런타임 사용자 경험과 SEO 개선을 우선한 의사결정이었습니다.

Metadata API 기반 동적 SEO 처리를 통해, 메타데이터 누락 문제를 해결했습니다.

공연 목록 데이터를 서버에서 prefetch하고, HydrationBoundary로 클라이언트에 전달해 초기 렌더링 속도를 개선했습니다.

또한, 내장 라우트 단위 코드 스플리팅 및 동적 import 로 초기 JS 번들을 675KB → 140KB 감소 시켰고, Lighthouse 기반 성능 측정에서 FCP 4.1s → 1.1s, Performance 20% 개선을 이루었습니다.

페이지네이션 상태가 컴포넌트 메모리에만 존재해 새로고침 시 항상 1페이지로 초기화되는 문제가 있었습니다. 또한 브라우저 뒤로가기나 링크 공유 시 사용자가 보던 맥락이 유지되지 않아 탐색 경험이 단절되는 문제가 발생했습니다.

이 문제를 단순한 UI 상태가 아닌 네비게이션 상태로 판단했습니다. 페이지 번호는 사용자의 위치를 나타내는 정보이며, 복원 가능하고 공유 가능한 형태로 존재해야 한다고 보았습니다.

이에 페이지네이션 상태를 쿼리스트링 기반으로 관리하도록 구조를 변경했습니다.

Next.js의 useSearchParams와 useRouter를 활용해 URL과 컴포넌트 상태를 양방향으로 동기화하고, URL을 단일 상태 소스로 사용하는 방식으로 리팩토링했습니다.

쿼리스트링 기반 접근을 선택한 이유는 페이지네이션이 주소화 가능한 상태이기 때문입니다.

URL에 상태를 포함함으로써 새로고침 복원성, 브라우저 히스토리 일관성, 링크 공유 가능성을 자연스럽게 확보할 수 있었고, 결과적으로 사용자 탐색 흐름이 끊기지 않는 안정적인 리스트 경험을 제공할 수 있었습니다.

사용자 액션 이후 UI 반영이 서버 응답에 의존하는 구조로 인해, 등록·수정·삭제 작업 시 체감 지연이 발생하는 문제가 있었습니다. 특히 행사 등록 후 목록에 즉시 반영되지 않아 사용자가 작업 성공 여부를 다시 확인해야 하는 불필요한 인지 비용이 존재했습니다.

이 문제를 단순한 성능 문제가 아니라 피드백 지연 문제로 판단했습니다.

네트워크 왕복 시간에 UI 반응성이 종속되면 사용자 경험이 느려 보일 수 있으며, 인터랙션이 많은 관리형 화면에서는 즉각적인 피드백이 중요하다고 보았습니다.

이를 해결하기 위해 TanStack Query의 낙관적 업데이트를 도입했습니다. 서버 응답을 기다리지 않고 클라이언트 캐시를 먼저 업데이트해 UI를 즉시 반영하고, 요청 실패 시에는 기존 상태로 롤백하는 전략을 적용했습니다. 행사 등록 시 목록에 즉시 항목이 추가되도록 하고, 서버 에러가 발생한 경우에만 자동으로 원복되도록 구현했습니다.

낙관적 업데이트를 선택한 이유는 사용자 체감 속도를 개선하면서도 데이터 일관성을 유지할 수 있기 때문입니다.

UI 반응성을 네트워크 상태와 분리할 수 있었고, 실패 시 롤백 메커니즘을 통해 안정성을 확보할 수 있어 인터랙션 중심 화면에 적합한 방식이라고 판단했습니다.

소셜 로그인 도입 이후 access 토큰 만료 시 인증이 끊기거나, API 요청마다 토큰 갱신 로직을 개별적으로 처리해야 하는 문제가 있었습니다. 인증 로직이 화면 단위로 분산되면서 코드 중복이 발생했고, 토큰 만료 타이밍에 따라 예외 처리 누락 가능성도 존재했습니다.

이 문제를 단순한 인증 구현 문제가 아니라 인증 흐름의 구조화 문제로 판단했습니다. 인증 상태는 애플리케이션 전반에 영향을 미치는 횡단 관심사이기 때문에, 특정 화면이나 훅에 종속되지 않는 중앙 관리 구조가 필요하다고 보았습니다.

이를 해결하기 위해 Axios Interceptor 기반의 토큰 관리 구조를 설계했습니다. 요청 인터셉터에서 access 토큰을 자동 주입하고, 응답 인터셉터에서 401 발생 시 refresh 토큰을 이용해 access 토큰을 재발급받도록 구성했습니다. 재발급 성공 시 원 요청을 재시도하고, 실패 시에는 로그아웃 흐름으로 전환하는 방식으로 인증 흐름을 일관되게 처리했습니다.

Interceptor 기반 접근을 선택한 이유는 인증 로직 관심사를 분리하여 중앙에서 관리할 수 있기 때문입니다.

이를 통해 화면 단위의 인증 처리 코드를 제거하고 중복을 줄일 수 있었으며, 토큰 갱신과 예외 처리를 단일 지점에서 관리할 수 있어 안정성과 유지보수성을 동시에 확보할 수 있었습니다.