AI로 시네마틱 스크롤 웹사이트 만들기

Claude Desktop 다운로드 및 설치

Claude Desktop 다운로드하기

https://claude.com/download

빈 프로젝트 폴더 생성

Claude Desktop에서 폴더 열기

Claude Desktop Code Local Select the project folder Open Trust Workspace

Scroll World 스킬 설치

Scroll World

/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world

Higgsfield를 Claude에 연결

Higgsfield MCP 페이지 열기

https://higgsfield.ai/mcp

커넥터 URL을 복사하세요.

Claude Desktop Customize Connectors Add custom connector

이름을 “Higgsfield”로 지정하고 URL을 붙여넣은 뒤 연결해 로그인하세요.

Hostinger를 열고 계정 준비

Hostinger 열기

Claude에서 직접 배포할 수 있도록 호스팅을 설정하세요.

https://www.hostg.xyz/SHJoR

Hostinger를 Claude Code에 연결

이 명령을 Terminal에 붙여넣고 Enter를 누르세요.

claude mcp add hostinger -- npx -y hostinger-api-mcp

브라우저 로그인 완료

Claude Code로 돌아가 Hostinger 연결을 사용하세요. 브라우저가 열리면 로그인하고 접근을 승인합니다.

웹사이트 프로젝트 커스터마이즈

시네마틱 스크롤 웹사이트 빌드

Use the installed Scroll World skill to plan and build a cinematic scroll-controlled website for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for visual generation. Before beginning the production workflow, inspect the installed Scroll World skill and handle only the local dependencies that are genuinely required for this project. Do not ask the user to install optional tools or duplicate Higgsfield integrations. If a local CLI is absolutely required for a specific Scroll World operation that cannot be completed through the connected MCP, explain the reason before installing or using it. PROJECT - Niche: {{NICHE}} - Main visitor goal: {{PRIMARY_GOAL}} - Context or location: {{PROJECT_CONTEXT}} - Visual direction: {{VISUAL_DIRECTION}} - Number of main scenes: {{SCENE_COUNT}} - Scene journey: {{SCENE_JOURNEY}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_STRATEGY}} Everything you decide — the scene ideas, the content sections, the wording, and the call to action — must fit this niche and move the visitor toward that one goal. Keep the real identity of any property, product, architecture, or brand exactly as it appears in the material I give you, and never present an invented room, feature, specification, or business claim as factual. FIRST, PRODUCE A PRODUCTION PLAN — do not generate any paid asset yet. Cover: 1. The art direction, and how you will hold visual consistency across every scene. 2. The ordered scene journey and the camera movement for each scene. 3. The transition strategy between neighbouring scenes. 4. The desktop assets, and the mobile assets if a dedicated sequence is required. 5. The estimated Higgsfield generation usage and cost. 6. The website content and the call to action. Stop there and wait for my explicit approval. AFTER I APPROVE Generate the scene images and camera clips through the authenticated Higgsfield account connected to Claude, and save or download every generated asset into the project as the website workflow requires. Extract or create the boundary frames and the connectors between neighbouring scenes, then integrate the finished sequence into the Scroll World website engine. Build the website around it with content this niche actually needs, working navigation and buttons, and a final call to action that matches the goal above. Then run the site locally and give me the preview address.

프로젝트 또는 브랜드 이름

프로젝트 또는 브랜드 이름

분야

비즈니스, 제품 또는 포트폴리오 카테고리

웹사이트의 주요 목표

방문자의 주요 행동

프로젝트 배경

장소 또는 중요한 배경

메인 이미지 소스

항목을 선택하세요

비주얼 방향

원하는 아트 및 디자인 방향

주요 장면 수

주요 비주얼 장면의 수

장면 흐름

항목을 선택하세요

모바일 비주얼 전략

항목을 선택하세요

메인 행동 유도 문구

마지막 행동 유도 문구

추가 지침

선택 사항 — 필요한 스타일 또는 콘텐츠 제약

필요하면 참고 에셋 추가

직접 준비한 미디어를 사용하기로 했다면, 프롬프트를 보내기 전에 여기에 추가하세요.

Project folder reference-assets

이미지, 동영상, 로고, 렌더링, 브랜드 문서를 추가하세요.

생성된 프롬프트를 Claude Code에 전송

제작 계획 검토 및 승인

장면 순서, 비주얼 일관성, 카메라 흐름, 모바일 전략, 예상 생성 비용을 확인한 뒤 계획을 승인하세요.

로컬 미리보기 열기

빌드가 완료되면 Claude가 제공한 미리보기 주소를 여세요.

장면 전환 점검

번쩍임, 튀는 현상, 급격한 방향 전환, 일관성 없는 프레임, 눈에 띄는 컷이 있는지 확인하세요.

속도와 콘텐츠 검토

스크롤 속도, 텍스트 배치, 콘텐츠 섹션, 버튼, 마지막 행동 유도 문구를 확인하세요.

모바일 레이아웃 테스트

좁은 화면에서 비주얼, 텍스트, 버튼이 올바르게 표시되는지 확인하세요.

최종 수정 요청

특정 부분 수정 요청

Apply only these corrections: [YOUR_CORRECTIONS] Change nothing else. Keep every unrelated scene, approved visual asset, transition, and content section exactly as it is, including anything I did not mention, and keep the responsive behaviour unchanged. Then run the website locally again and tell me precisely what changed.

웹사이트를 Hostinger에 배포

웹사이트를 Hostinger에 배포하기

Deploy this project to my connected Hostinger account. Preserve the approved cinematic experience exactly as it is, and do not regenerate any approved visual asset. First confirm that every required asset exists and that the desktop and mobile asset references resolve correctly. Then optimize the site for production, run the production build, and inspect and fix any build error that would block deployment. Choose the deployment method that fits this project through the connected Hostinger account, and publish to a temporary live URL first when that is supported. Report the build result, the deployment result, and the live URL.

운영 중인 웹사이트 검토

시네마틱 시퀀스, 콘텐츠, 버튼, 행동 유도 문구, 모바일 레이아웃을 확인하세요.

최종 도메인 연결

웹사이트가 승인되면 선택한 도메인을 Hostinger를 통해 연결하도록 Claude에 요청하세요.

이후 업데이트 게시

변경 사항을 설명한 뒤, Claude에게 웹사이트를 다시 빌드해 재게시하도록 요청하세요.