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

Claude Desktop 다운로드하고 설치하기

Claude Desktop 다운로드하기

https://claude.com/download

빈 프로젝트 폴더 만들기

Claude Desktop에서 폴더 열기

Claude Desktop Code Local Select the project folder Open Trust Workspace

Higgsfield를 Claude에 연결

이렇게 하면 Claude가 웹사이트에 쓸 이미지와 영상을 만들 수 있습니다.

Higgsfield MCP 페이지 열기

https://higgsfield.ai/mcp

커넥터 URL을 복사하세요.

Claude Desktop Customize Connectors Add custom connector

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

웹사이트 맞춤 설정

몇 가지 옵션을 고르세요. 가장 중요한 것은 시그니처 스크롤 콘셉트, 즉 방문자가 스크롤할 때 일어나는 일입니다. “Let Claude Recommend”로 두면 고를 수 있는 아이디어 3개를 받습니다.

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

몇 가지 옵션을 고른 뒤 프롬프트 하나만 복사하세요. Claude가 콘셉트를 제안하고, 짧은 계획을 보여 주고, 비주얼을 만들고, 웹사이트를 구축합니다.

Build a premium cinematic scroll website in this project folder for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for all image and video generation. Do not use Higgsfield's website builder or hosting — build the website here, in this folder. Do not ask me to install creative tools. If you need an ordinary local tool while building, set it up yourself, and only when it is genuinely necessary. PROJECT - Niche: {{NICHE}} - Main website goal: {{PRIMARY_GOAL}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} CREATIVE DIRECTION - Visual direction: {{VISUAL_DIRECTION}} - Inspiration: {{INSPIRATION}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_EXPERIENCE}} GROUND RULES - Treat any inspiration I give you — above, or images in an "inspiration" folder in this project — as direction only: mood, pacing, composition and feel. Never copy its text, images, branding, logos, proprietary assets or overall identity. - If this is a real business, property, product, place or service, keep its real identity exactly as it appears in my material. Never invent features, specifications, rooms, facilities, business claims or product capabilities. My own media is the source of truth. - Keep everything focused on this niche and on moving visitors toward the main goal. WORK IN THIS ORDER 1. SIGNATURE SCROLL CONCEPT — what happens as the visitor scrolls: one memorable cinematic idea, not a generic fade, zoom or parallax effect. {{SCROLL_CONCEPT}} 2. PLAN — once the concept is settled, and before any paid Higgsfield generation Show me a short, plain-language plan: - The Signature Scroll Concept - The visual direction - The main cinematic visual and what happens in it as I scroll - The website sections around it - The Higgsfield images and video you will create, and how you will use my own media, if any - The expected Higgsfield usage, and my current balance, if you can check them Keep it short and non-technical. Then stop and wait for my approval. 3. MAIN CINEMATIC VISUAL After I approve, use Higgsfield to create ONE strong main cinematic sequence for the scroll experience — not a series of separate videos — plus still images only where they clearly improve the website. Save everything in this project. Then show me the main visual and ask me: Use It or Change It? If I ask for a change, regenerate only what needs changing and keep everything I already approved. Do not build the rest of the website until I choose Use It. 4. BUILD THE WEBSITE Then build the complete website around the approved visual: - A strong homepage structure for this niche — a real premium website, not just a video demo - The cinematic visual as the centrepiece, moving smoothly with scroll progress - Useful sections with finished, specific copy — no placeholder text - Working navigation and buttons, ending on the main call to action - Fully responsive, with a great experience on phones - Fast loading Choose the implementation yourself and handle the technical details without asking me technical questions. Then run the website locally and give me the preview address.

잘 모르겠다면 그대로 두세요.

프로젝트 또는 브랜드 이름

예: Ember Coffee

분야

분야 선택

웹사이트의 주요 목표

목표 선택

메인 이미지 소스

항목을 선택하세요

비주얼 방향

항목을 선택하세요

시그니처 스크롤 콘셉트

항목을 선택하세요

영감(선택 사항)

웹사이트 링크 또는 짧은 메모

메인 행동 유도 문구

항목을 선택하세요

모바일 환경

항목을 선택하세요

추가 지침

선택 사항 — Claude가 꼭 넣거나 피해야 할 내용

파일 추가(선택 사항)

직접 준비한 미디어를 선택했거나 참고하고 싶은 이미지가 있을 때만 해당됩니다.

Project folder reference-assets

실제 사진, 영상, 로고, 브랜드 문서입니다. Claude는 이것을 비즈니스에 대한 사실로 다룹니다.

Project folder inspiration

마음에 드는 스크린샷이나 이미지(스타일 참고용). Claude는 절대 복사하지 않습니다.

Claude에 프롬프트 보내기

프로젝트 폴더의 Claude에 붙여넣고 보내세요.

콘셉트 선택 및 계획 승인

Claude의 콘셉트 중 하나를 고르거나 직접 정한 콘셉트를 유지한 뒤, 짧은 계획을 읽고 승인하세요. 승인하기 전에는 유료 생성이 이루어지지 않습니다.

시네마틱 비주얼 검토

Claude가 Higgsfield로 메인 비주얼을 만들어 보여 줍니다. 계속하려면 “Use It”, 바꾸려면 “Change It”이라고 답하고 무엇을 바꿀지 말하세요.

Claude가 웹사이트 구축

Claude가 승인된 비주얼을 중심으로 전체 웹사이트를 구축합니다. 시간이 조금 걸릴 수 있으며, 따로 할 일은 없습니다.

로컬 미리보기 열기

웹사이트가 준비되면 Claude가 알려 주는 미리보기 주소를 여세요.

스크롤 효과 확인

위에서 아래로 천천히 스크롤하세요. 비주얼이 선명하고 부드럽게 움직여야 하며, 번쩍임, 튐, 어색한 컷, 이상한 변화가 없어야 합니다.

속도와 콘텐츠 확인

효과가 너무 빠르거나 느리지 않은지, 텍스트가 읽기 쉬운지, 콘텐츠가 비즈니스에 맞는지, 모든 버튼과 마지막 CTA가 작동하는지 확인하세요.

데스크톱과 모바일 확인

컴퓨터에서 전체 너비로 웹사이트를 본 다음 휴대폰에서 보세요. 비주얼, 텍스트, 버튼이 두 화면 모두에서 잘 맞고 사용하기 쉬워야 합니다.

수정 요청

특정 부분 수정 요청

프롬프트 맞춤 설정을 클릭하고 고칠 내용을 적은 뒤 프롬프트를 복사하세요.

Apply only these corrections: {{CORRECTIONS}} Keep everything else exactly as I approved it. Do not regenerate approved Higgsfield images or video unless a correction genuinely requires it. If a correction needs a new paid Higgsfield generation, first tell me what needs to be regenerated and wait for my approval. Then run the website locally again and tell me exactly what changed.

고칠 내용

예: 스크롤 효과를 느리게 하고 휴대폰에서 헤드라인을 더 크게

Hostinger 호스팅 준비

웹사이트가 준비되었습니다. 이제 온라인에 자리를 마련할 차례입니다.

Hostinger 호스팅 시작하기

추천 플랜: Unlimited (이전 이름 Business)

USED IN TUTORIAL

이미 Hostinger 호스팅이 있나요? 아래에서 계속하세요.

Hostinger를 Claude에 연결

이미 Hostinger를 Claude에 연결했나요? 다음 작업으로 넘어가세요.

Claude Desktop에서 이 프로젝트의 Code 세션에 그대로 머무르세요. 메시지 입력란 옆의 +를 클릭한 다음 플러그인을 여세요.

+ Plugins Add plugin

플러그인 목록에서 Hostinger를 찾아 설치하세요. Claude가 Hostinger를 처음 사용할 때 열리는 브라우저 창에서 Hostinger 계정에 로그인하고 액세스를 허용하세요.

API 토큰이나 설정 파일은 필요 없습니다. 로그인만 하면 됩니다.

웹사이트 배포

같은 Code 세션에서 이 프롬프트를 Claude에 보내세요. Claude가 사용할 Hostinger 웹사이트를 묻고, 웹사이트를 준비해 라이브로 게시합니다.

웹사이트를 Hostinger에 배포하기

승인한 웹사이트를 Hostinger에 게시하고 라이브 URL을 받으세요.

Publish this approved cinematic website to my Hostinger account with the Hostinger tools. BEFORE PUBLISHING - Use the Hostinger tools from the Hostinger plugin. If they are not available, or I am not signed in to Hostinger, stop and tell me how to connect Hostinger. Never ask for my password, and never write a token or key into any file. - Inspect this project first: how it builds, and which folder holds the finished website. - If .hostinger/site.json exists in this project, publish to the website it names. - Otherwise, list my Hostinger websites and ask me which one to use, or offer to set up a new website on a free temporary Hostinger domain. Never guess. Tell me that publishing replaces everything on that website, and only continue once I have confirmed it. BUILD AND PACKAGE - Keep the website and all of its visuals exactly as I approved them. Do not regenerate any Higgsfield images or video, and do not redesign or rewrite anything. - Run the production build. If it fails, fix only the build error — never publish a website that does not build. - Check that the finished website includes every image, video and other media file it uses, and that none of them points to a file elsewhere on my computer or to a temporary link. - Package the CONTENTS of the finished website folder as one archive, with index.html at the top level — never the project source, node_modules, or any .env file. PUBLISH AND CHECK - This website runs in the browser, so deploy the archive to the confirmed website as a static website. If the project genuinely needs a server to run, stop and tell me before publishing. - Open the live address and check that it shows this cinematic website — its real content, main visual and scroll effect — not a placeholder page. - If the deployment fails or the live website is wrong, check the deployment details with the Hostinger tools, fix the cause in this project, build again, and ask me before publishing again. - Save the website's domain in .hostinger/site.json, so later updates go to the same website. Save only the domain — never a token or a key. When it is live, give me the live address and tell me about any change you had to make for deployment.

게시하면 선택한 Hostinger 웹사이트의 모든 내용이 교체됩니다. 새 웹사이트나 교체해도 되는 웹사이트를 사용하세요.

운영 중인 웹사이트 검토

라이브 URL을 열고 시네마틱 스크롤 효과, 이미지와 영상, 콘텐츠, 모든 버튼과 메인 CTA를 데스크톱과 모바일에서 확인하세요.

도메인 연결하기

선택 사항입니다. 이미 도메인이 있나요? Claude가 웹사이트에 연결해 줍니다. 여기에 입력하고 프롬프트를 보내세요.

내 도메인 연결

프롬프트 맞춤 설정을 클릭하고 도메인을 입력한 뒤 프롬프트를 복사하세요.

Connect my domain {{DOMAIN}} to the website you just published, using the Hostinger tools. - The website is the one saved in .hostinger/site.json. If that file is missing, or you are not sure which domain I mean, ask me — never guess which website or domain to change. - First check that the domain is in my Hostinger account. If it is not, or the connection needs something only I can do, tell me exactly what to do and wait. - Change only what is needed to point the domain at this website. Leave the website itself unchanged, and do not touch any other domain settings, such as email records. - Only give me manual DNS steps if the Hostinger tools genuinely cannot make the change. - If the website's main domain changes, update .hostinger/site.json so later updates still go to this website. When finished, tell me whether the domain is connected, which address to open, and anything I still need to do, such as waiting for the change to take effect everywhere.

도메인

예: mybrand.com

이후 업데이트 게시

변경 내용을 적고 이 프롬프트를 보내세요. Claude가 변경한 뒤 먼저 로컬 미리보기를 보여 줍니다. 괜찮으면 “Publish”라고 답하세요. 그때에만 Claude가 Hostinger 웹사이트에 게시합니다.

업데이트 게시

프롬프트 맞춤 설정을 클릭하고 변경 내용을 적은 뒤 프롬프트를 복사하세요.

Update my website in three stages. Stop after stage 2 and wait for my approval. 1. CHANGE Make only this change: {{CHANGE}} Keep everything else exactly as it is, especially the approved cinematic visuals. Do not regenerate any Higgsfield images or video unless this change genuinely requires it. If it needs a new paid Higgsfield generation, tell me what you would regenerate and wait for my approval first. 2. LOCAL REVIEW - Run the production build and fix any error the change caused. - Run the website locally, give me the preview address, and tell me in one or two lines what you changed. - Then stop. Do not publish anything until I reply Publish. If I ask for adjustments instead, make them and show me the preview again. 3. APPROVED PUBLISH — only after I reply Publish - Publish to the same Hostinger website as before: the domain saved in .hostinger/site.json. If it is missing, ask me which website to use — never guess. - Publish exactly what I approved. Do not make any other change first. - Run the production build again. If it fails, stop and tell me why instead of publishing — never fix it on the way. - Check that the finished website includes every image, video and other media file it uses, then package the CONTENTS of the finished website folder as one archive, with index.html at the top level — never the project source, node_modules, or any .env file. - Deploy it to that website as a static website with the Hostinger tools. - Open the live address, check that it shows the approved change, and give me the live URL.

변경 내용

예: 헤드라인을 “매일 아침 갓 볶은 원두”로 변경