Cinever
맞춤형 영화 추천 및 실시간 박스오피스 정보 플랫폼
나의 역할
Frontend
구성원
Backend 2명 Frontend 3명
작업기간
2025.07.10 - 2025.07.23 (2주)
프로젝트 개요
Cinever는 팔로잉 리뷰 피드와 리뷰어 탐색 경험을 중심으로, 영화 소비의 흐름을 자연스럽게 이어주는 플랫폼입니다. 저는 피드페이지의 날짜 그룹핑·무한 스크롤·스티키 날짜 UI를 설계해 스크롤 맥락을 유지하고, 리뷰페이지에서는 랭킹 슬라이드/테이블/모바일 카드형 UI를 분기 구성해 기기별 최적화된 탐색 경험을 구현했습니다. 이를 통해 사용자가 리뷰를 더 쉽고 빠르게 탐색하고, 신뢰할 수 있는 리뷰어를 발견할 수 있도록 UX를 고도화했습니다.
주요 화면
담당 역할 / 업무
피드페이지 설계 및 데이터 렌더링 구조 구현
팔로잉 리뷰 데이터를 날짜 단위로 그룹핑하고, 최신순 정렬 + 그룹 내 역정렬까지 포함한 피드 렌더링 파이프라인을 직접 구성했습니다. (grouped computed 설계)
피드페이지 무한 스크롤 및 스티키 날짜 UI 구현
PAGE_SIZE 기반 페이지네이션과 IntersectionObserver를 활용해 무한 스크롤을 구현했고, 현재 보고 있는 날짜를 좌측에 고정 표시하는 스티키 날짜 UI까지 연결했습니다.
리뷰페이지 반응형 레이아웃 분기 및 섹션 조합 주도
리뷰페이지에서 PC/모바일 뷰를 분기하고, BestReviewer(랭킹 슬라이드), ReviewerTable(테이블+페이지네이션), MobileReviewer(모바일 무한스크롤) 섹션 구성을 주도했습니다.
리뷰어 랭킹/목록 UI 구현 및 역할 뱃지 시스템 연동
리뷰어 역할 메타(`getReviewerRoleMeta`)를 기반으로 뱃지/카드/테이블 스타일을 일관되게 연결하고, 프로필 이미지 fallback 처리까지 포함해 안정적인 랭킹/목록 UI를 구축했습니다.
주요 성과
- 피드페이지에서 날짜 그룹핑 + 스티키 날짜 UI를 결합해 스크롤 맥락 유지 경험을 개선
- IntersectionObserver 기반 무한 스크롤로 대량 리뷰에서도 초기 로딩 부담을 줄이고 체감 성능을 향상
- 리뷰페이지를 PC(랭킹+테이블) / 모바일(카드형 무한스크롤)로 분리해 기기별 UX 완성도 확보
- 리뷰어 랭킹 슬라이드(Swiper) + 테이블 페이지네이션을 함께 구성해 정보 탐색 흐름을 선명하게 설계
트러블슈팅
피드 스크롤 시 날짜 맥락이 끊기는 문제
이슈: 리뷰가 길어질수록 사용자가 현재 어떤 날짜 구간을 보고 있는지 파악하기 어려웠음.
해결: 날짜 그룹 DOM을 대상으로 IntersectionObserver를 적용하고, 교차 시점에 현재 날짜를 갱신해 좌측 스티키 날짜 UI로 표시함.
💡 배운 점: 단순 데이터 출력이 아니라 '스크롤 맥락 유지' 같은 UX 레이어를 별도로 설계해야 체감 완성도가 올라간다는 점을 배움.
무한 스크롤에서 중복 로딩/끝 감지 처리 불안정
이슈: 무한 스크롤 구현 시 동일 데이터 중복 append, 혹은 끝까지 내려가도 로딩이 계속 도는 문제가 발생할 수 있었음.
해결: PAGE_SIZE + page 인덱스 기반으로 slice 범위를 명확히 하고, visible 길이와 전체 길이를 비교해 endReached를 명시적으로 관리함.
💡 배운 점: 무한 스크롤은 '언제 더 불러올지'보다 '언제 멈출지'를 먼저 설계해야 안정적으로 동작한다는 걸 체득함.
리뷰페이지에서 기기별 UI 복잡도 증가
이슈: 랭킹/테이블 중심의 데스크톱 UI를 모바일까지 그대로 가져가면 가독성과 조작성이 크게 저하됨.
해결: 리뷰페이지에서 뷰포트 기준으로 PC는 랭킹+테이블, 모바일은 카드형 무한스크롤 섹션으로 명확히 분기함.
💡 배운 점: 반응형은 '같은 UI의 축소'가 아니라 '같은 목적의 재구성'이라는 관점이 더 효과적임을 배움.