Finale+

**Finale+**는 디즈니+/넷플릭스 스타일의 OTT 메인 화면을 클론 코딩하며, HTML/CSS/JavaScript 연습을 위한 정적 웹 프로젝트입니다.
단일 페이지가 아니라, 홈 / 영화·시리즈 / 취향별 / 시간별 4개의 화면으로 구성되어 있고, 각 화면이 서로 다른 인터랙션과 레이아웃을 담고 있습니다.

---

주요 화면 구성

• 홈 (index.html)

  • 상단 공통 내비게이션 바: Finale+ 로고, 검색창, 프로필 아이콘.
  • 상단 히어로 배너 캐러셀
    • script_main.js에서 자동 슬라이드, 도트 네비게이션, 클릭 이동 구현.
  • 여러 개의 가로 캐러셀 섹션
    • 오늘 저녁 밥 친구, 시청중인 콘텐츠, 본격적인 액션!, 새로 추가된 콘텐츠, 한국의 TOP 10 등.
    • 반응형 카드 개수, 좌우 이동 버튼, 페이지 인디케이터 구현.
    • 시청중인 콘텐츠 카드에는 랜덤 진행률(progress bar)을 표시.
    • 한국의 TOP 10 섹션 카드에는 순위 배지(1~10)가 자동으로 붙습니다.

• 영화·시리즈 (movies_series/movies_series.html)

  • 메인 영역은 #app 하나로 구성하고, SPA 스타일로 JS에서 화면을 교체합니다.
  • script.js
    • renderHome() : 추천/지금 뜨는 콘텐츠 2개 캐러셀 섹션을 이미지 리스트로 렌더링.
    • showCategory(name) : 카테고리 그리드 화면(색상 카드) 렌더링.
    • showDetail(title) : 상단 히어로 + 상세 정보 영역이 있는 디테일 화면 렌더링.
    • history.pushState, onpopstate를 사용해 브라우저 뒤로가기/앞으로가기 시에도 상태가 유지되도록 처리.
  • style.css
    • 공통 내비게이션 스타일, 캐러셀(가로 스크롤), 카드, 상세 페이지(파란 테마) 스타일 정의.

• 취향별 (taste/taste.html)

  • 지니(Genie) 캐릭터가 질문을 던지는 Q&A 인터랙션 페이지.
  • 총 8개의 질문(questions 배열)으로 액션/감성/판타지/스릴러 점수를 집계.
  • handleAnswer()에서 yes/no에 따라 장르별 점수를 누적 후, 최종 점수가 가장 높은 장르를 선택.
  • renderResult()에서
    • “당신은 ○○파군요!” 문구와 함께 결과 메시지를 보여주고,
    • 선택된 장르(action, mood, fantasy, thriller)에 맞는 이미지 15장을 캐러셀 형태로 렌더링.
  • 좌우 네비게이션 버튼 클릭 시 부드럽게 스크롤되는 캐러셀과 페이지 인디케이터(도트) 제공.

• 시간별 (time/time.html, time/detail.html)

  • time.html
    • 상단 공통 내비게이션.
    • 4개의 시간대 섹션
      • 1020분대 / 30분1시간 / 1시간대 / 2시간 이상
    • 각 섹션은 content-grid에 카드들이 채워지는 구조.
  • time.js
    • contentsData 배열에 썸네일 이미지 URL을 모아두고,
    • createCards()로 네 개의 섹션(shortContent, mediumContent, longContent, epicContent)에 동일 데이터 카드 생성.
    • 카드 클릭 시 detail.html로 이동.
    • detail.html에서 탭 전환(상세 정보 / 커뮤니티), 뒤로가기 버튼(goBack()) 동작 정의.
  • time.css
    • 시간대별 그리드 레이아웃, 카드 hover 효과, detail.html의 히어로 영역/탭/리뷰 스타일 등 정의.

---

공통 자산

• 이미지 (/images, taste/images)
  • main*.jpg/png, mood*.jpg, action*.jpg, romance*.jpg, running*.jpg 등 OTT 포스터/썸네일용 이미지.
  • taste/images에는 취향 테스트 결과에 사용하는 action1~15.jpg, fantasy1~15.jpg, thriller1~15.jpg, mood1~15.jpg 등이 포함.
• 폰트
  • 디즈니풍 로고 폰트 waltograph-2.otf를 로컬에서 로드해 Finale+ 로고에 사용.

---

실행 방법

• 로컬에서 바로 열기

  • 파일 브라우저에서 index.html을 더블 클릭하거나, 브라우저(Chrome 등)에서 index.html을 열면 됩니다.
  • 서브 페이지는 내비게이션 메뉴(영화·시리즈 / 취향별 / 시간별)를 통해 이동할 수 있습니다.

• 간단한 정적 서버로 실행 (권장)

  • 일부 브라우저의 CORS 정책 때문에, 추후 Ajax 등을 추가할 경우를 대비해 간단한 서버를 사용하는 것을 권장합니다.
  • 예시 (파이썬 3 기준):
    • 프로젝트 루트(Finale+ 폴더)에서:

      python -m http.server 8000

    • 브라우저에서 http://localhost:8000/index.html 접속.

---

기술 스택 및 학습 포인트

• HTML

  • 시맨틱 태그(nav, section, footer, main 등)를 활용한 레이아웃 구성.
  • 여러 페이지 간 동일한 내비게이션 구조를 유지하여 일관된 UX 설계.

• CSS

  • flex, grid, aspect-ratio, object-fit 등을 활용한 카드/캐러셀 UI.
  • @font-face로 커스텀 폰트 로드, OTT 스타일의 다크 테마, hover/transition 효과.
  • 반응형 카드 개수 및 레이아웃 조절(clamp, window.innerWidth 활용).

• JavaScript

  • DOM 조작을 통한 캐러셀 구현(슬라이드 이동, 도트 인디케이터, 자동 재생).
  • history.pushState, onpopstate를 활용한 간단한 SPA 내비게이션.
  • 퀴즈(취향 테스트) 로직, 점수 계산, 결과 기반 추천 리스트 렌더링.
  • 탭 전환, 뒤로가기, 랜덤 진행률(progress bar) 등 다양한 인터랙션 구현.

---

폴더 구조 요약

• index.html / style_main.css / script_main.js : 메인 홈 화면
• movies_series/ : 영화·시리즈 페이지(SPA 스타일, 캐러셀/그리드/디테일)
• taste/ : 취향별 Q&A 및 지니 추천 캐러셀
• time/ : 시간대별 추천 리스트 및 상세 화면
• images/, taste/images/ : 각 페이지에서 사용하는 포스터/썸네일 이미지들
• waltograph-2.otf : 로고용 커스텀 폰트