[global-nomad - 6] 글로벌 노마드 프로젝트 회고
판매자와 체험자가 공존하는 체험 예약 플랫폼인 '글로벌 노마드' 프로젝트를 완료했다. Next.js App Router 환경에서 캘린더와 지도 뷰 SDK를 활용하는 것을 목표로 시작한 프로젝트다. 개발을 진행하며 직면했던 문제와 해결 과정을 START 기법으로 정리한다.
Situation (상황)
4명의 프론트엔드 개발자가 협업하여 플랫폼을 구축했다. GitHub Projects를 통해 일정을 관리하고, 엄격한 코드 리뷰(PR 2인 승인)와 개발 컨벤션(ESLint, Prettier)을 설정하여 코드 품질을 유지하고자 했다. Next.js, TypeScript, Tailwind CSS, Zustand를 기술 스택으로 채택했다.
Task (과제)
개발 과정에서 크게 세 가지 문제를 마주했다.
- 역행하는 시선 흐름(인지적 마찰): 체험 신청 내역 모달에서 하단의 시간을 변경하면 상단 탭의 데이터가 변했다. 사용자의 시선이 아래에서 위로 역행하여 자연스럽지 못했다.
- 복잡한 폼 검증과 분산된 로직: TypeScript만으로는 런타임 타입 검증이 불가능했다. 복잡한 필드에 대한 검증 로직이 여러 곳으로 분산되어 관리가 어려웠고, 에러 메시지도 일관성이 부족했다.
- SSR 환경의 인증 한계(화면 깜빡임): 브라우저 전용인 LocalStorage에 토큰을 저장하다 보니, 서버 컴포넌트나
getServerSideProps에서 토큰에 접근할 수 없었다. 이로 인해 초기 렌더링 시 사용자를 식별하지 못해 '비로그인' 화면이 먼저 노출되고, 이후 클라이언트에서 '로그인' 화면으로 전환되는 깜빡임(Flickering) 현상이 발생했다.
Action (행동)
문제 해결을 위해 다음과 같은 기술적 의사결정을 내렸다.
- UX 개선을 위한 UI 구조 변경: 상단에서 설정을 변경하면 하단에 결과가 나타나는, 즉 위에서 아래로 흐르는 자연스러운 시선 흐름에 맞게 모달 구조를 완전히 뒤집었다.
- Zod와 React Hook Form 도입: 분산된 폼 검증 로직을 스키마 레벨로 중앙 집중화했다.
- 인증 아키텍처 개편
- 토큰을 서버와 브라우저 양쪽에서 읽을 수 있는 HttpOnly Cookie로 이관했다.
- Next.js Middleware를 통제 센터로 구축하여 모든 API 요청을 가로채고
Authorization헤더에 토큰을 자동 주입하도록 처리했다. - 만료된 토큰을 갱신하는 Silent Refresh 로직을 클라이언트의 Axios 인터셉터에서 서버의 Middleware로 이관했다.
Result (결과)
이러한 결정은 확실한 사용성 및 유지보수성 향상으로 이어졌다.
모달 구조 개선으로 사용자가 겪는 인지적 마찰을 없앴고, Zod 도입을 통해 복잡한 필드 관리 단순화와 일관된 에러 메시지 제공이 가능해졌다.
가장 큰 성과는 인증 아키텍처 개편에서 나왔다. Request Header에 쿠키가 자동 포함되면서 SSR 시점에 즉시 유저를 식별해 올바른 화면을 제공하게 되어 초기 화면 깜빡임을 완벽히 제거했다. 부수적으로 HttpOnly 쿠키 사용에 따라 XSS 취약점을 원천 차단했고, 통신 계층을 Middleware로 중앙화하면서 83줄에 달하던 Axios 설정 코드를 단 9줄로 축소하는 등 유지보수성을 개선했다.
Taken (배운 점)
성과도 있었지만 아쉬운 점도 있다. 알림 API를 1분 주기의 숏 폴링(Short Polling) 방식으로 구현했는데, 이는 트래픽 발생 시 DB에 심각한 병목을 유발할 수 있는 비효율적인 구조다. 대규모 트래픽을 다루는 서비스의 네트워크 최적화 아키텍처에 대한 깊이 있는 분석이 다소 부족했음을 느꼈다.
결과적으로, 제한된 개발 시간 안에서 이상적인 코드 구조를 고집하는 것과 비즈니스 목표를 달성하는 것 사이에서 어떻게 타협점을 찾아야 할지에 대해 깊이 고민하게 된 프로젝트였다. 추후 비슷한 요구사항을 마주한다면 웹소켓 등을 활용한 최적화 방안을 우선적으로 고려해 볼 것이다.