담당 역할
- 리뉴얼 아키텍처 설계와 마이그레이션 순서 수립
- 서버 컴포넌트 기반 데이터 패칭과 로케일 라우팅 구조 구현
- PDF 뷰어의 반응형 조작 경험과 전용 상태 모델 설계
- 쿠키 동의와 GA Consent Mode 연동
- 배포와 pdf.js 자산 처리 구성 정리
리뉴얼 사례
HD 뉴스레터: 다국어 웹진과 PDF 경험을 다시 설계한 리뉴얼
전역 초기화와 여러 상태·스타일 도구가 한곳에 얽힌 구조를 운영 가능한 단위로 나눴습니다. 공개 수치 대신 저장소에서 확인되는 역할, 기술 선택과 산출물만 정리했습니다.
기술 구성
- Next.js App Router, React, TypeScript
- next-intl 기반 다국어 라우팅과 번역
- Tailwind CSS 디자인 토큰과 반응형 UI
- zustand 기반 PDF 뷰어 상태 관리
- react-zoom-pan-pinch, screenfull, pdf.js
- GA Consent Mode와 쿠키 동의 UI
핵심 산출물
- 로케일 세그먼트로 정리한 다국어 웹진 라우트
- 웹진 목록과 카테고리별 기사 화면의 서버 데이터 흐름
- 확대, 이동, 전체 화면을 지원하는 반응형 PDF 뷰어
- 브랜드 규칙을 모은 Tailwind 기반 디자인 체계
- 분석 동의를 제어하는 쿠키 배너와 공통 분석 연결
문제와 접근
- 전역 앱 초기화에 모여 있던 테마, 서버 상태와 번역 책임을 라우트와 기능 단위로 분리했습니다.
- 클라이언트에서 시작하던 데이터 요청을 서버 렌더링 흐름으로 옮겨 페이지 책임을 명확히 했습니다.
- 여러 스타일 도구를 Tailwind 규칙으로 통합하고 PDF에 필요한 상태만 별도로 유지했습니다.
- 언어별 URL과 분석 동의 처리를 공통 레이아웃에서 일관되게 적용했습니다.
관련 사례와 가이드
현재 상황과 필요한 범위부터 함께 정리합니다
가격이나 기간을 추측해 제시하지 않습니다. 목표, 준비된 자료와 필수 기능을 확인한 뒤 작업 범위와 견적 산정 근거를 설명합니다.
문의 내용 정리하기