⭐ 프로젝트 개요 - 배포 링크
- 진행 기간: 2025/08/20 ~ 2025/09/30
- 영화, 드라마 등 문화 관련 카테고리의 작품 중 두 개씩 골라 A/B 비교하고, 리뷰·별점·후기 데이터를 합쳐 랭킹/추천을 제공하는 플랫폼입니다. Next.js의 렌더링 전략(SSR/SSG/CSR) 을 페이지 특성에 맞게 혼합 적용하고, 무한 스크롤·SEO·공유·검색/정렬을 지원합니다.
- 영화·드라마 같은 콘텐츠 도메인과 비교 기능 구현에 팀원들의 공통 관심이 있었습니다.
- 리뷰, 별점, 찜 같은 참여 기능을 통해 데이터를 모으고, 그 데이터를 활용해 랭킹과 추천으로 이어지는 선순환 구조를 설계해보고자 했습니다.
- Next.js App Router로 SSR, ISR, CSR을 혼합해 적용하며 이론으로만 알던 렌더링 방식을 직접 경험해보고 싶었습니다.
- 비교 페이지 같은 복잡한 화면에서 전역 상태 관리가 필수적이기에 Zustand와 React Query를 분리해 활용해보는 시도를 했습니다.
- Jira 티켓의 제목과 설명을 템플릿화하여, 팀원들이 일관된 형식으로 티켓을 작성
- 개인 일정뿐만 아니라 팀 전체의 진행 상황도 한눈에 파악
| 메인 페이지 | 로그인 | 회원가입 |
|---|---|---|
 |
 |
 |
| 콘텐츠 상세페이지 | 프로필 페이지 | 콘텐츠 비교 페이지 |
|---|---|---|
 |
 |
 |
-
무한스크롤 적용 – 사용자 경험 개선 및 메모리 사용 최적화 - PR #66 (이관현)
-
wsrv.nl 적용 – 이미지 최적화 방식 변경 및 LCP 개선 - PR #144 (이관현)
-
이미지 최적화 – 불필요한 이미지 로드 최소화 및 페이지 로딩 속도 향상 - PR #148 (이관현)
-
Dynamic Import 적용 – 초기 로드 시 불필요한 JS 제거, 번들 크기 감소 - PR #156 (이관현)
-
카카오 SDK 동적 로딩 최적화 – 서드파티 쿠키 로딩 지연 및 Lighthouse 점수 향상 - PR #157 (이관현)
-
이미지 최적화 – Top3 이미지를 우선 로딩, 나머지는 lazy + Skeleton 적용으로 LCP 개선 - PR #158 (이유진)
-
스켈레톤 도입 – 공용 Skeleton 컴포넌트를 적용해 로딩 UX 강화 - PR #129 (이유진)
-
카테고리 단순화 – 상태 관리 제거 후 URL 쿼리 기반으로 구조 단순화 및 접근성 개선 - PR #68 (이유진)
-
웹폰트 최적화 – woff2 포맷 변경 및
preload: false적용으로 성능 개선 - PR #147 (김인) -
웹폰트 파일 정리 – 불필요한 폰트 제거 및 fallback 처리로 번들 크기 약 2MB 감소 - PR #153 (김인)
-
불필요한 소스 정리/ 이미지 최적화 성능 개선 이미지 최적화/ 불필요한 자바스크립트 제거 - PR #200 (배혜민)
-
비교 기능 강화 – 콘텐츠 개수에 따라 다른 모달 제공 및 중복 방지 처리로 직관적 비교 경험 제공 - PR #86, PR #113 (이관현)
-
토스트 알림 – 사용자 행동에 따른 성공/실패/정보 피드백을 즉시 제공 - PR #71 (이관현)
-
Top-Button 추가 – 스크롤 시 최상단으로 쉽게 이동할 수 있는 편의 기능 제공 - PR #67 (이관현)
-
홈 쿼리 정규화 – 비표준 쿼리는 서버에서 즉시 리다이렉트, 클라이언트는
HomeQueryGuard로 자동 교체해 일관된 탐색 UX 제공 - PR #132 (이유진) -
빈/에러 상태 UI –
ContentEmpty컴포넌트 도입으로 콘텐츠 리스트·리뷰어 랭킹에 명확한 피드백 제공 - PR #132 (이유진) -
토스트 UX 개선 –
toastId를 부여해 동일 에러가 중복 노출되지 않도록 사용자 경험 최적화 - PR #132 (이유진) -
동일 콘텐츠 비교 불가 수정 – 동일 항목을 중복 비교할 수 없도록 개선 - PR #77 (김인)
-
정렬 드롭다운 접근성 개선 – 키보드 접근 가능하도록 수정 - PR #89 (김인)
-
유저 로컬스토리지 저장 문제 해결 – 사용자 데이터 보존 플로우 개선 - PR #120 (김인)
-
결과창 UX 개선 – 비교 결과에서 콘텐츠 상세 페이지 링크 연결 - PR #122 (김인)
-
콘텐츠 입력 UX 개선 – 입력 시 카테고리 정보 제공 수정 - PR #155 (김인)
-
카카오 소셜 로그인 구현 - 카카오 로그인 연동으로 사용자 접근성 확장 - PR #63 (윤정환)
-
로그인 후 기존 페이지 리다이렉트 로직 구현 - 사용자가 로그인 후 원래 머물던 페이지로 오도록 사용자 경험 개선 - PR #72 (윤정환)
-
동적 메타 데이터 적용 - 상세 페이지 SEO와 동적 미리보기를 제공하기 위한 접근성 확장 - PR #123 (윤정환)
-
디자인 수정 클릭 가능한 요소에 cursor pointer 적용 - PR #140 (배혜민)
-
낙관적 업데이트 팔로우/언팔로우에 낙관적 업데이트 적용으로 즉각적 반응 - PR #114 (배혜민)
-
탭메뉴 제작 탭 메뉴 추가로 정보 탐색 편의성 향상 - PR #124 (배혜민)
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 김인 | 배혜민 | 윤정환 | 이관현 | 이유진 |
| • 비교하기 페이지 • 비교 콘텐츠 전역 상태 관리 • 공용 드롭다운, 아이템 카드 |
• 프로필 페이지 • gnb , 아바타 카드 UI |
• 로그인, 회원가입 페이지 • 공용 버튼, 인풋, 모달 제작 • 메타데이터 • 프로젝트 세팅, CI/CD 구축 |
• 라벨, 카드 공통 컴포넌트 • 상세 페이지 제작 • 카카오 / 클립보드 공유 • 무한스크롤 & 탑 버튼 • 토스트 |
• 메인 페이지 / 404 • 바텀시트 제작 • 스켈레톤 UI • 콘텐츠 추가 모달 • 검색 기능 |