스프린트 부트캠프는 단계별 프로젝트 중심의 커리큘럼과 팀 협업을 통해 실제 서비스에 가까운 결과물을 만들어낸다는 점이 큰 장점인데요.
이번에 소개할 RoamReady 프로젝트는 그 성과를 잘 보여주는 사례예요.
단 6주 만에 글로벌 액티비티 예약 서비스를 기획부터 개발, 배포까지 완성했어요.
지금 실제 수강생들의 프로젝트를 직접 확인해 보세요!
1. 어떤 프로젝트를 기획했나요?
프로젝트명: RoamReady
- 주제: Global Nomad
- 최근 여행·레저 시장에서 수요가 급격히 증가하고 있는 체험형 액티비티를 선정했어요.
- 전 세계 다양한 체험을 검색·예약·관리할 수 있는 플랫폼을 구현하는 것을 목표로 설정했어요.
- 목표 및 의의
- 4인 팀이 약 6주라는 기한동안 개발, 기획부터 배포까지 전 과정을 경험.
- MVP 수준의 기본 기능을 구현하면서도, 추후 시스템 확장으로 이어질 수 있도록 구조화.
- 성능 최적화와 보안 강화까지 포함해 실무에 가까운 경험을 제공.
- 팀 구성 및 역할 - FE 15기 1팀
이름 | 역할 |
유용민 (팀장) | CI/CD, 체험 등록·수정 페이지, 예약 현황 관리 |
박재현 | 프로젝트 초기화, 메인 페이지, 마이페이지 |
김서연 | 체험 상세 페이지, 실시간 알림 시스템 |
송시은 | 인증 시스템·페이지, 에러 처리 시스템 |
2. 서비스 주요 기능은 무엇인가요?
RoamReady는 여행 액티비티를 검색 → 예약 → 관리 → 알림 → 체험 등록/수정까지 한 번에 경험할 수 있는 플랫폼이에요. 단순한 CRUD가 아니라 실제 사용자의 여정을 따라 UX를 설계했어요.
(1) 메인 페이지
검색 기능 고도화로 탐색 경험 개선
- 키워드뿐만 아니라 날짜·위치·조건별로 세분화된 검색을 지원해요.
- 여러 API를 한 번에 묶어 처리하는 방식으로 검색 속도를 17초에서 0.9초로 줄였어요.
- 검색 조건이 URL에 반영돼서 결과 공유도 간편해요.
인기 체험 캐러셀로 시각적 탐색 강화
- 리뷰 수와 최신 등록 순으로 인기 체험을 정렬해 보여줘요.
- 어떤 기기에서도 자연스럽게 슬라이드 되도록 구현했어요.
TanStack Query를 활용해 초기 로딩 속도와 SEO 모두를 챙겼어요.
최적의 탐색 경험을 위한 리스트 구현
- 기기 크기에 따라 자동으로 레이아웃이 변하는 반응형 그리드를 적용했어요.
- 카테고리·가격·리뷰 기준으로 정렬과 필터링이 가능해요.
- 페이지 전환도 부드럽게 동작해 자연스러운 탐색 경험을 제공해요.
사용 기술 스택
Next.js 15, React 19, Cloudflare Worker, TanStack Query, Tailwind CSS, Framer Motion(2) 회원가입 & 로그인
유효성 검사로 가입 오류 최소화
- 이메일 형식, 닉네임 길이(10자 이하), 비밀번호 복잡도 등을 꼼꼼히 확인해요.
- 잘못된 입력이 있으면 버튼이 비활성화되고, 즉시 피드백을 줘서 오류를 바로잡을 수 있어요.
자동 로그인 가입 후 흐름 매끄럽게
- 회원가입이 완료되면 자동으로 로그인돼 메인 페이지로 이동해요.
- 토큰은 HTTP-only 쿠키에 저장해 보안을 강화했어요.
- 사용자 정보는
Zustand persist를 활용해 클라이언트에 저장했으며, 새로고침이나 이동 후에도 로그인 상태가 유지되도록 했어요.
카카오 로그인 연동으로 접근성 강화
- 계정이 없으면 자동 회원가입으로 이어지고, 조건을 만족하지 않으면 바로 피드백을 줘요.
- 가입이 완료되면 별도 입력 없이 바로 로그인 되어 서비스를 이용할 수 있어요.
사용 기술 스택
React Hook Form, Zod, Zustand persist, Next.js, 카카오 OAuth(3) 체험 상세 페이지
컴포넌트 분리로 렌더링 최적화
- Next.js 서버 컴포넌트를 사용해 초기 렌더링을 최적화했어요.
- 예약과 지도처럼 상호작용이 많은 영역은 클라이언트 컴포넌트로 분리해 성능과 유지보수성을 높였어요.
SSR·ISR·CSR 데이터 로딩 최적화
- 체험 상세는
ISR방식으로 최대 30분 주기로 캐싱해 서버 부하를 줄였어요.
- 리뷰는
SSR로 불러오고 클라이언트에서 페이지네이션하며 30분 주기로 캐싱해요.
- 예약 가능 날짜는
CSR로 처리해 사용자 요청에 빠르게 대응하고 10분 주기로 캐싱해요.
UI·기능 강화로 사용자 편의성 향상
- 이미지 확대/축소, 모달 뷰어, 키보드 탐색 등 세밀한 인터랙션을 지원해요.
- 리뷰 토글과 페이지네이션으로 탐색 편의를 높였어요.
사용 기술 스택
Next.js 15 (SSR·ISR·CSR), TanStack Query, React 19(4) 마이페이지
예약 내역 관리로 사용자 경험 강화
- 완료·승인·취소 상태별로 예약 내역을 필터링해 쉽게 확인할 수 있어요.
- 예약 취소 시 다이얼로그로 확인을 받고, 캐시를 무효화해 UI에 즉시 반영돼요.
- 체험이 끝난 후에는 바로 후기를 작성할 수 있고, 작성한 내용은 상세 페이지에서 곧바로 확인할 수 있어요.
체험 관리 기능으로 수정 편의성 제공
- 무한 스크롤러를 구현해 불필요한 리렌더링과 API 호출을 최소화했어요.
- 드롭다운 메뉴에서 즉시 삭제할 수 있고, 메인 페이지에도 바로 반영돼요.
사용 기술 스택
Next.js, React 19, TanStack Query, Zustand(5) 예약 현황 페이지 (관리자 기능)
예약 관리 기능으로 운영 효율 향상
- 등록한 체험에 대한 예약 신청을 한눈에 확인하고 관리할 수 있어요.
- SSR 방식으로 핵심 데이터를 미리 불러오고, 이후 조건부 API 요청으로 상세 정보를 로드해 성능과 효율을 모두 잡았어요.
승인·거절 자동화로 관리 편의성 강화
- 예약 승인 시 캐시를 무효화해 UI가 즉시 갱신 돼요.
- 동일 시간대에 중복 예약이 있을 경우, 하나를 승인하면 나머지는 자동으로 거절돼요.
- 달력과 바텀 시트 UI를 결합해 예약 관리 흐름을 직관적으로 만들었어요.
사용 기술 스택
Next.js (SSR), TanStack Query, React 19(6) 알림 시스템
폴링 기반 알림으로 실시간 경험 구현
- WebSocket이나 SSE를 지원하지 않는 환경에서 10초 간격의 폴링 방식을 적용했어요.
- Zustand로 이전 상태와 비교해 신규 알림을 감지하고, “새 알림 있음” 표시를 띄워줘요.
- 무한 스크롤을 적용해 과거 알림도 자연스럽게 탐색할 수 있어요.
사용 기술 스택
Zustand, React 19, Next.js(7) 사용자 정보 & 에러 처리
관리 기능으로 즉각적인 수정 가능
- 프로필 이미지는 기본 이미지로 복원하거나 사용자 지정 이미지 업로드가 가능해요.
- 업로드 전 이미지를 압축해 전송 효율을 높였고,
createObjectURL로 미리보기를 지원해요.
- 수정에 성공하면 Toast 알림을 띄우고 헤더에도 바로 반영되도록 처리했어요.
다층 에러 처리로 서비스 안정성 강화
- 글로벌 에러: 앱 전체를 지키는 최상위 방어선으로, 오류 시 홈으로 돌아가기 버튼을 제공해요.
- 세그먼트 에러: 페이지 그룹 단위에서 레이아웃은 유지하고 해당 콘텐츠만 대체해요.
- API 에러: 401/404/500 등을 중앙에서 표준화해 처리하고, 사용자에겐 Toast로 명확한 피드백을 줘요.
- 컴포넌트 에러 바운더리: 문제가 생긴 특정 컴포넌트 UI만 교체해 전체 앱에 미치는 영향을 최소화해요.
사용 기술 스택
Next.js, React 19, Zustand, Ky, Toast 라이브러리3. 프로젝트에 대해 팀 내에선 어떻게 평가했나요?
(1) 목표 달성도
달성률: 약 90%
달성 지표
- 모든 팀원이 고민을 통해 문제 해결하는 과정을 거쳤는가?
- 컨벤션을 잘 지켜 일관성 있는 코드를 작성했는가?
- 성실하게 팀원 PR에 코드 리뷰를 남겼는가?
- Next.js를 명확하게 이해하고 충분히 사용했는가?
- 프로젝트 과정을 문서화로 잘 남겼는가?
- 회고와 피드백을 통해 서로 도와 더 성장할 수 있도록 했는가?
- 본인이 생각한 결과물을 모두 완성했는가?
기술 역량
- 외부 SDK 연동과 복잡한 API 조합 처리,예외 대응 로직 구현을 통해 실전 중심의 웹 개발 경험과 문제 해결 능력이 향상됐어요.
- OAuth 및 BFF 구조 설계, 캐싱 전략 적용 등을 통해 보안과 성능을 고려한 전체 서비스 흐름을 주도적으로 설계했어요.
설계 및 아키텍처
- SRP, DRY, KISS 등 핵심 개발 원칙을 실제 설계와 구현에 일관되게 적용하며 책임 분리와 모듈화의 중요성을 체감했어요.
- 기능 구현에서 한 단계 더 나아가, 기술 도입의 목적과 맥락을 명확히 정의하며 아키텍처 의사 결정을 수행했어요.
태도 및 학습 방식
- AI 기반 코딩의 편의성은 활용하되, 이해 기반의 자가 피드백 루틴을 통해 실질적인 성장을 도모했어요.
- 바이브 코딩에 치우치지 않고, 기술에 대한 본질적 이해와 지속 가능한 학습 방식을 고민하며 균형을 유지했어요.
4. 프론트엔드 개발자 포트폴리오, 제대로 완성하고 싶다면?
스프린트는 이렇게 밀도 높은 경험을 통해, 실무 역량을 빠르게 키워가는 과정이에요.
진짜 프론트엔드 개발자로 성장하고 싶다면, 하단 링크를 클릭해 더 자세한 사항을 확인해 보세요⚡️
수강료 0원에 학습 내내 맥북 무상 지원까지!
- 체계적인 고퀄리티 교육 + 취업 지원을 전액 무료로 경험할 수 있어요.
- 학습 내내 맥북이 무상 지원되니, 최적의 환경으로 공부할 수 있어요.
1:1 취업 지원 프로그램과 인턴십 매칭까지 진행돼요!
- 이력서 작성부터 면접 대비까지 현직자 멘토의 1:1 코칭이 제공돼요.
- 참여 희망자에 한해서 인턴 지원 기업을 무한 매칭해 드려요.
Share article