SpaceTomato Cinema 시네마틱 게임형 홈페이지

AI 시네마틱 영상과 콘솔 게임 메인 화면 UX를 결합한 인터랙티브 홈페이지입니다. 일반적인 스크롤형 랜딩 대신, 사용자가 왼쪽 플로팅 메뉴에서 장면을 선택하면 전환 영상이 재생되고 이후 해당 장면의 루프 영상과 HUD UI가 이어지는 방식으로 설계했습니다. 핵심 구현 • GPT Image로 만든 우주 토마토 키비주얼을 첫 프레임 포스터와 히어로 무드로 사용 • Higgsfield 기반 루프 영상과 전환 영상을 Next.js App Router 화면 상태와 연결 • 메인 화면, 새로운 시작, 불러오기, 문의하기, 설정 메뉴를 게임 시퀀스처럼 탐색하도록 구성 • 전환 영상 첫 프레임이 로드되기 전 opacity를 제어해 깜빡임을 줄이고, 영상 종료 후 목표 장면으로 이동 • 문의하기 화면은 관제실 콘셉트의 콘솔 폼, 입력 필드, 송신 상태 피드백까지 구현 화면 구성 • 메인 화면: 거대한 우주 토마토와 함선이 등장하는 풀스크린 시네마틱 배경 • 새로운 시작: 브랜드 진입 동선과 첫 프레임 각인을 설명하는 미션 콘솔 • 불러오기: 제작 로그와 블로그/아카이브 진입을 위한 기록 보관소 콘셉트 • 문의하기: 전환 영상 이후 관제실 배경 위에 문의 콘솔 폼 표시 • 설정: 영상 루프 안정화, 접근성, 검색 신호 연결을 다루는 운영 패널 프로젝트 의미 AI 이미지/영상 제작 도구와 프론트엔드 상태 전환을 결합해, 브랜드 홈페이지도 게임 메인 화면처럼 기억에 남는 경험으로 만들 수 있음을 보여주는 데모입니다. 교육 콘텐츠에서는 GPT Image, Higgsfield, Next.js를 연결하는 제작 파이프라인 예제로 활용할 수 있습니다.