남해독일마을 리뉴얼
남해독일마을 리뉴얼
프로젝트 소개
기존 카페24 기반의 이미지 형식 웹사이트를 Next.js를 활용하여 지역 축제, 호텔, 펜션 홍보와 파독근로자들의 스토리텔링을 담은 브랜드 홈페이지로 리뉴얼하였으며, 관리자 시스템과의 데이터 연동, revalidate 및 ISR을 통한 전략적 캐싱, PC 버전의 상호작용 가능한 지역 지도 개발, 그리고 반응형 이미지와 Skeleton UI 적용을 통해 다량의 이미지로 구성된 홍보 사이트의 성능과 사용자 경험을 최적화하였습니다.
프로젝트 기여도
백엔드(2명) 디자이너(2명) 프론트엔드(1명)
사용 기술
- Next.js
- React
- TypeScript
- Tailwind CSS
- Zustand
- Google Analytics
- Google Search Console
- AWS Amplify
사용 기능
Next.js Server Action
-Next.js Server Action을 사용하여 서버에서 데이터를 가져오는 기능을 추가하였습니다.
Google Analytics
-Google Analytics를 사용하여 사용자 데이터를 수집하였습니다.
Google Search Console
-Google Search Console을 사용하여 SEO 최적화를 하였습니다.
AWS Amplify
-AWS Amplify를 사용하여 배포하였습니다.
프로젝트 후기
카페24 기반 이미지 웹사이트를 Next.js로 리뉴얼하여 지역 축제, 호텔, 펜션 홍보 및 파독근로자 스토리텔링을 포함한 브랜드 홈페이지로 전환하는 과정에서 관리자 데이터 연동, ISR을 활용한 전략적 캐싱, PC 버전 지역 지도 개발, 반응형 이미지와 Skeleton UI 적용을 통해 성능과 사용자 경험을 최적화했으며, 특히 대부분의 콘텐츠가 공유 가능한 특성을 고려하여 클라이언트 상태 관리 대신 URL의 search params를 활용한 상태 관리 방식을 채택함으로써 페이지 공유성을 높이고 SEO를 개선했고, 이 과정에서 Next.js의 고급 기능 활용, 효율적인 데이터 구조 설계, 웹 성능 최적화, 그리고 레거시 시스템과의 호환성 유지에 대한 기술적 역량을 향상시키는 경험이었습니다.