웹 서비스
CinEver
여러 팀원이 나눠 만든 화면이 하나의 서비스처럼 보이도록, 공통 컴포넌트와 화면 규칙을 정하고 통합한 프론트엔드 리드 프로젝트입니다.
- 구현 · 설계한 주요 화면
- 약 10개
- 관리한 재사용 UI 컴포넌트
- 20~30개
- 팀 구성
- 5명
업무 배경과 해결 과정
- 배경
영화 정보 탐색과 리뷰 작성을 카드·슬라이더, YouTube 트레일러로 연결한 서비스입니다. 현대오토에버 SW 스쿨에서 Vue·Vite로 개발했으며, 프론트엔드 리더로 Figma 디자인부터 반응형 화면, 리뷰 기능과 영상 연동까지 진행했습니다.
- 어려웠던 점
화면을 팀원마다 따로 만들면 디자인과 사용 경험이 제각각이 되고, 같은 UI가 화면마다 중복 구현됩니다.
- 이렇게 풀었습니다
공통 컴포넌트 중심으로 구조를 잡고 컴포넌트 작성 방식, 폴더 구성, API 호출 로직 분리, Props·이벤트 기준을 맞췄습니다. API 응답 데이터와 UI 상태를 구분해 로딩·오류·빈 데이터 상황이 어느 화면에서나 같은 모습으로 보이게 했고, 기능 단위 브랜치로 작업을 통합했습니다.
리드로서 가장 신경 쓴 것은 각자 만든 기능이 하나의 서비스처럼 자연스럽게 이어지게 하는 것이었습니다.
직접 만든 것
Figma 디자인과 프론트엔드 개발을 이끌며 반응형 카드·슬라이더, 리뷰 CRUD, 트레일러 재생을 구현했습니다.
- 01
Figma 디자인과 Vue 반응형 화면
Figma로 다크 테마와 포스터 중심 카드 UI의 방향을 정하고 Vue·Vite로 메인, 영화 탐색·상세, 리뷰 작성·목록, 프로필, 리뷰어 랭킹, 위시리스트, 관리자 리뷰 관리 등 약 10개 주요 화면을 구현하거나 설계했습니다. 반응형 레이아웃, 이미지 오류 시 기본 이미지 대체, 로딩·빈 데이터 상태 화면까지 다뤘습니다.
- 02
Swiper 카드 탐색과 hover 인터랙션
영화 카드를 슬라이더로 구성하고 포인터를 올리면 카드가 확장되는 인터랙션을 구현했습니다. 확장된 카드에 어두운 오버레이와 CTA 버튼을 적용해 영화 탐색 화면을 구성했습니다.
- 03
영화 API와 리뷰 CRUD
SW 스쿨에서 제공한 영화 API(Autoever OpenAPI)로 제목·포스터·장르·줄거리를 보여 줬습니다. 리뷰는 리뷰 ID·영화 ID·작성자 ID·별점·내용·작성일·수정일을 기준으로 작성·조회·수정·삭제와 좋아요를 구현하고, 내 리뷰와 다른 사용자의 리뷰를 구분했습니다. 관리자 화면에서는 리뷰 상태를 조회하고 여러 항목을 한 번에 관리할 수 있게 했습니다.
- 04
YouTube 트레일러와 Box Office
YouTube Iframe API를 연동해 영화 트레일러를 서비스 화면에서 재생하도록 구현했습니다. Box Office 섹션에는 영상과 영화 카드 슬라이더를 함께 배치했습니다.
- 05
리뷰 키워드 워드클라우드
Flask 서버에서 KeyBERT·HuggingFace로 리뷰의 주요 키워드를 추출하고, 그 결과를 워드클라우드로 시각화했습니다. 별점 분포와 함께 보여 줘 다른 사용자의 리뷰 경향을 한눈에 파악할 수 있게 했습니다.
사용 기술Vue · Vite · Tailwind CSS · Firebase Firestore · Swiper.js · YouTube Iframe API · Flask · KeyBERT · Ark UI · Figma
화면
담당 범위
- Figma 기반 전반적인 화면 디자인과 프론트엔드 개발 진행
- 영화 API 연동, 리뷰 관리와 YouTube 트레일러 재생 기능 구현
- 카드·슬라이더 인터랙션과 모바일 반응형 화면 개발
다시 만든다면 (개선 설계안)
구현 내용을 바탕으로 확장해 검토한 설계안입니다.
- 카드 접근 방식과 영상 요청 시점
hover로 드러나는 카드 기능을 터치와 키보드에서도 실행할 수 있도록 명시적인 버튼과 포커스 동작을 제공하는 개선안을 검토할 수 있습니다. 카드 탐색과 영상 요청을 분리해 재생 버튼을 눌렀을 때 영상을 불러오는 방식도 함께 검토할 수 있습니다.