Claude Fable 5 + Gemini Omni = Beautiful Cinematic Websites (Complete Tutorial)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Fable 5와 Gemini Omni를 결합하면 영상 생성과 웹 구현을 분리한 네 개의 프롬프트만으로 부드러운 스크롤과 영상 배경을 갖춘 시네마틱 웹사이트를 제작할 수 있다.

📌 핵심 요점

1. 전체 작업은 Gemini Omni용 영상 프롬프트 세 개와 Claude용 웹사이트 구현 프롬프트 한 개로 분리되며, 영상 소재와 구현 지시를 구분하는 것이 핵심이다.
2. PDF 프롬프트 공식에 웹사이트 종류와 브랜드명을 입력하면 히어로·중간·푸터 영상 프롬프트와 전체 구현 프롬프트를 생성할 수 있다.
3. Gemini Omni Flash에서는 세 영상을 각각 8초, 16:9로 생성하고, Claude Code가 배치 순서를 이해하도록 한 폴더에서 1·2·3으로 구분한다.
4. 최종 프롬프트에 영상별 배치 영역뿐 아니라 Lenis와 GSAP, 로딩 화면, 글자 애니메이션, 색상, 분위기, 글꼴까지 지정하면 스크롤 끊김과 Claude의 임의 추측을 줄일 수 있다.
5. 완성 결과에는 영상 전환, 마우스 조명 효과, 푸터 애니메이션이 구현됐지만, 구체적으로 지시하지 않은 상품 영역은 실제 제품 이미지 대신 공 모양 요소가 생성돼 추가 수정이 필요했다.

🧩 배경과 문제 정의

• 영상 배경과 스크롤 애니메이션을 결합한 시네마틱 웹사이트는 시각적 몰입감이 높지만, 무거운 동영상 때문에 스크롤이 끊기거나 사용자 경험이 나빠질 수 있다.
• 생성형 AI로 웹사이트를 제작하려면 영상 소재용 프롬프트와 전체 구현용 프롬프트를 분리하고, 각 파일의 용도를 코딩 모델이 정확히 이해하도록 구성해야 한다.
• Claude로 프롬프트와 웹사이트를 만들고 Gemini 계열 모델로 배경 영상을 생성하면, 복잡한 디자인과 애니메이션을 적은 입력만으로 구현할 수 있다.

🕒 시간순 섹션별 상세정리

1. 완성 결과와 네 개의 프롬프트 구조

• 완성된 사이트는 히어로·중간·상품·푸터 영역을 부드러운 스크롤 애니메이션으로 연결하고, 마우스 위치에 반응하는 조명 효과까지 제공한다. [01:12]
• 작업에 필요한 네 개의 프롬프트 중 앞의 세 개는 Gemini Omni용 영상 클립을 만들고, 마지막 하나는 Claude에서 전체 웹사이트를 구현하는 데 사용한다. [01:27]

2. 템플릿 입력과 프롬프트 자동 생성

• 제공된 PDF의 프롬프트 공식을 Claude에 붙여 넣은 뒤 웹사이트 종류와 브랜드명만 입력하며, 예시에서는 초콜릿 아이스크림 사이트와 ‘Choco Ice’를 지정한다. [02:11]
• 입력값을 바탕으로 히어로·중간·푸터용 영상 프롬프트 세 개와 전체 웹사이트 제작용 최종 프롬프트 하나가 생성된다. [02:51]

3. 세 개의 배경 영상 제작

• 첫 번째 영상 프롬프트를 Higgsfield의 Gemini Omni Flash에 입력하고, 웹사이트의 가로형 배경에 맞춰 길이 8초와 화면비 16:9를 선택한다. [03:27]
• 동일한 설정으로 두 번째와 세 번째 프롬프트도 처리하며, 생성 결과는 각각 사이트의 중간 영역과 푸터 영역에 들어갈 애니메이션이 된다. [04:21]

4. 영상 파일 정리와 Claude Code 연결

• 생성한 영상 세 개를 하나의 전용 폴더에 내려받고 1·2·3으로 구분하면, Claude Code가 각 파일의 배치 순서를 쉽게 파악할 수 있다. [05:25]
• Claude Code에서 해당 폴더를 신뢰 작업공간으로 열고 최종 프롬프트를 붙여 넣은 다음, 히어로·중간·푸터 순서에 맞춰 영상 파일 세 개를 첨부한다. [06:40]

5. 스크롤 성능과 디자인을 통제하는 최종 프롬프트

• 최종 프롬프트는 세 영상을 각 영역의 배경으로 배치하고 Lenis와 GSAP을 적용해, 동영상으로 무거워진 페이지에서도 스크롤 끊김을 줄인다. [07:35]
• 로딩 화면, 초콜릿 영상 위에서 글자가 단계적으로 완성되는 시그니처 장면, 색상·분위기·글꼴까지 미리 지정해 Claude의 임의 추측을 최소화한다. [08:15]

6. 완성 사이트 검토와 비용 변수

• 로컬호스트 결과물에는 영상 전환, 마우스 조명 효과, 푸터 애니메이션이 구현되지만, 세부 지시가 없었던 상품 영역에는 실제 제품 이미지 대신 공 모양 요소가 생성되어 추가 수정이 필요하다. [09:10]
• 같은 템플릿에 사이트 종류와 이름을 바꾸면 다른 주제로 확장할 수 있으며, 사용 가능한 제작 횟수와 크레딧은 Claude의 작업 강도·모델·구독 플랜에 따라 달라진다. [11:28]

🧾 결론

• 시네마틱 웹사이트 제작의 핵심은 한 번에 모든 것을 요청하는 것이 아니라 영상 생성과 웹 구현을 역할별 프롬프트로 분리하는 데 있다.
• 영상 파일의 이름과 배치 순서를 명확히 하고 디자인 세부 조건을 최종 프롬프트에 포함할수록 코딩 모델의 추측과 후속 수정 범위를 줄일 수 있다.
• Lenis와 GSAP은 여러 배경 영상으로 무거워진 페이지에서 부드러운 스크롤 경험을 구현하기 위한 주요 구성 요소로 제시된다.
• 동일한 템플릿에서 사이트 종류와 브랜드명만 바꾸면 다른 주제의 시네마틱 웹사이트로 확장할 수 있다.

📈 투자·시사 포인트

• 생성형 영상 모델과 코딩 모델을 결합한 제작 방식은 복잡한 모션 웹사이트의 초기 구현에 필요한 입력과 반복 작업을 줄일 가능성을 보여준다.
• 범용 프롬프트 템플릿은 브랜드명과 사이트 유형만 교체해 재사용할 수 있어, 반복적인 웹 제작 업무의 표준화 가능성을 시사한다.
• 결과물의 완성도는 모델 자체뿐 아니라 파일 구조, 프롬프트 분리, 디자인 명세의 구체성에 크게 좌우되므로 프롬프트 설계 역량이 중요한 생산 요소가 된다.
• 실제 제작 비용과 처리량은 Claude의 작업 강도, 선택 모델, 구독 플랜과 사용 가능한 크레딧에 따라 달라지므로 도입 전에 반복 생성 비용을 확인해야 한다.

⚠️ 불확실하거나 확인이 필요한 부분

• 영상은 로컬호스트 결과를 중심으로 설명하므로 실제 배포 환경, 다양한 기기, 브라우저에서 Lenis와 GSAP이 동일한 스크롤 성능을 제공하는지는 확인되지 않았다.
• 세 개의 8초 영상이 페이지 용량, 초기 로딩 시간, 모바일 데이터 사용량에 미치는 영향은 구체적인 수치로 제시되지 않았다.
• 사용 가능한 제작 횟수와 크레딧은 Claude의 작업 강도, 모델, 구독 플랜에 따라 달라지며 정확한 비용은 명시되지 않았다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 히어로·중간·푸터 영상 프롬프트와 전체 구현 프롬프트를 분리한 네 단계 템플릿을 작성한다.
• 세 개의 배경 영상을 8초, 16:9 조건으로 생성하고 한 폴더에서 배치 순서대로 명확히 구분한다.
• 최종 구현 프롬프트에 각 영상의 영역, Lenis와 GSAP 적용, 로딩 화면, 색상, 분위기, 글꼴을 구체적으로 지정한다.
• 상품 이미지처럼 정확성이 중요한 요소는 실제 자산과 배치 방식을 별도로 명시하고 생성 결과를 수정한다.

❓ 열린 질문

• 세 개의 배경 영상을 실제 서비스에 배포했을 때 모바일 환경에서도 부드러운 스크롤과 빠른 초기 로딩을 함께 유지할 수 있는가?
• Lenis와 GSAP 외에 영상 압축, 지연 로딩, 대체 이미지 같은 성능 대책이 추가로 필요한가?
• 사이트 종류와 브랜드명만 교체하는 방식으로 확장할 때 어느 수준까지 디자인 일관성과 제품 표현의 정확성을 유지할 수 있는가?