Spoting - 건강한 만남, 함께 운동 하세요

🔗 프로젝트 링크

Spoting 프로젝트는 2024 블레이버스 해커톤에서 초기 창업 팀의 아이디어를 기반으로 한 MVP 및 랜딩 페이지 개발 프로젝트입니다. 82명의 참가자 14개의 팀이 참가하였고, 우수상을 수상하였습니다.
Home, Company, Customer Center 섹션에 맞춰 각기 다른 콘텐츠를 Framer를 활용하여 동적으로 구성하였으며, 직관적이고 유려한 사용자 경험을 제공하는 데 중점을 두었습니다.
데스크톱뿐만 아니라 모바일 환경에서도 완벽하게 반응형으로 작동하도록 구현되어, 다양한 디바이스에서 원활하게 접근이 가능합니다. 또한, 프로젝트 전반에 걸쳐 성능 최적화와 사용자 인터페이스(UI) 디자인에도 세심한 주의를 기울였습니다.

이번 Spoting 프로젝트에서는 기획부터 디자인까지의 전 과정을 짧은 시간 내에 완성하여 랜딩 페이지를 개발하는 경험을 쌓았습니다. CI/CD 파이프라인을 구축하고 Vercel을 사용해 빌드 및 도메인 연결 작업을 수행하여, 자동화된 배포 환경을 구현했습니다.
프로젝트의 핵심 과제 중 하나는 단일 페이지 내에서 여러 탭 상태(Tap State)에 따라 화면이 동적으로 변경되는 구조였습니다. 초기 진입 시, 모든 탭 상태에 따른 코드를 한 번에 렌더링하면서 성능 문제가 발생하고 사용자 경험이 저하되는 이슈가 있었습니다. 이를 해결하기 위해 Next.js의 Dynamic Import를 활용하여 Lazy Loading을 구현, 뷰포트에 들어오는 콘텐츠만 렌더링하도록 개선했습니다.
Next.js의 Next Image 기능을 활용해 이미지 최적화를 수행하여, 빠른 로딩 속도와 최적화된 사용자 경험을 제공했습니다. 새로고침 시 탭 상태가 초기화되는 문제도 있었지만, Zustand Persist를 사용하여 페이지를 새로고침해도 탭 상태가 유지되도록 하여 사용자 경험을 향상시켰습니다.
랜딩페이지 특성 상 첫 화면에 유저를 사로잡는 디자인이 필요하다고 생각되어, Framer Motion과 Swiper를 적용하여 동적인 컴포넌트를 제작했고, Tailwind를 이용하여 간단하게 모바일 반응형 디자인을 대응했습니다.

앱 실행

$ npm run build
$ npm run dev