클로드 3D 웹사이트 만들기 4단계, 힉스필드 MCP 연결까지

클로드(Claude)로 스크롤할 때마다 3D로 움직이는 웹사이트를 만드는 4단계를 정리했습니다. 힉스필드(Higgsfield) MCP 연결, 모델과 추론 수준 변경, 사이트 설명 프롬프트, Seedance 2.0 생성 명령까지 영상이 건너뛴 설정법과 바로 쓸 예시 문장을 채웠습니다. 클로드 3D 웹사이트 만들기를 처음 해보는 사람을 위해 준비물과 터미널 여는 법부터 적었습니다.

애플 홈페이지급 사이트, 프롬프트 한 줄이면 끝난다는 주장

출발점은 클로드 웹사이트 만들기를 다룬 쇼츠 영상 하나입니다. "클로드로 30초 만에 천만원씩 받고 파는 웹사이트를 만들 수 있다"는 문장으로 시작합니다. 화자가 내세우는 결과물은 흔한 AI 랜딩 페이지(제품 하나를 소개하는 한 장짜리 웹페이지)가 아니라, 스크롤할 때마다 3D로 움직이는 "영화 같은" 사이트입니다. "애플 홈페이지에서 봤던 딱 그 퀄리티"라는 말도 나옵니다.

먼저 짚고 갈 게 있습니다. "천만원 값"이라는 제목의 숫자는 화자 본인의 주관적 가격 평가입니다. 실제로 그 가격에 팔았다는 판매 사례나 근거는 영상에 없습니다. 다만 4단계 자체는 실제로 돌아가는 순서라서, 영상이 건너뛴 자리를 채워 아래에 다시 정리했습니다.

클로드 3D 웹사이트 만들기 전 준비물

영상은 아래 준비가 다 끝난 상태에서 시작합니다. 처음이라면 이것부터 챙깁니다.

• 클로드 계정과 요금제: 이 방식은 클로드 코드(Claude Code)를 씁니다. 클로드 코드는 터미널에서 대화하며 파일을 만들고 고치는 클로드입니다. 쓸 수 있는 요금제와 가격은 바뀌므로 앤트로픽 공식 요금 안내를 확인해야 합니다.
• 힉스필드(Higgsfield) 계정: 이미지와 영상을 AI로 만들어 주는 서비스입니다. 생성할 때마다 크레딧(서비스 안에서 쓰는 사용권 포인트)이 깎입니다.
• 터미널 여는 법: 터미널은 글자로 명령을 넣어 컴퓨터를 다루는 창입니다. 맥은 응용 프로그램 > 유틸리티 > 터미널, 윈도우는 시작 메뉴에서 PowerShell을 검색해 엽니다.
• 클로드 코드 설치: 설치 방법은 앤트로픽 공식 안내에 나옵니다. Node.js(자바스크립트 실행 프로그램)가 깔려 있다면 터미널에 아래 한 줄로도 설치할 수 있습니다.

npm install -g @anthropic-ai/claude-code

• 작업 폴더: 웹사이트 파일이 들어갈 빈 폴더를 하나 만들고, 터미널에서 그 폴더로 이동한 뒤 claude 를 입력하면 클로드 코드가 켜집니다.

1단계: 클로드에 Higgsfield MCP 연결하기

클로드에 Higgsfield MCP를 연결합니다. MCP는 클로드가 외부 서비스를 직접 쓰게 해주는 연결 규격입니다. 사이트에 들어갈 이미지와 영상을 클로드가 직접 만들어 오게 하는 것이 목적입니다.

영상은 연결 방법을 건너뛰는데, 실제로는 이렇게 합니다. Higgsfield는 원격 MCP 서버(인터넷 너머에서 기능을 제공하는 연결 지점)를 제공하므로 클로드 코드에서는 터미널에 한 줄을 넣어 등록합니다.

1. Higgsfield 계정 화면의 연동 안내에서 MCP 서버 주소를 확인합니다.
2. 터미널에 아래 명령을 넣습니다. 꺾쇠 부분을 확인한 서버 주소로 바꿉니다.

claude mcp add --transport http higgsfield <Higgsfield가 안내하는 MCP 서버 주소>

1. 클로드 코드를 켜고 /mcp 를 입력합니다. /로 시작하는 말은 클로드 코드 안에서 쓰는 명령입니다.
2. 서버 목록이 뜨면 Higgsfield를 골라 그 자리에서 로그인 승인을 합니다.
3. 상태가 connected로 바뀌면 준비가 끝난 것입니다.

이후에는 대화 중에 "이 장면 이미지 만들어줘"라고만 해도 클로드가 그 서버의 생성 기능을 직접 호출합니다.

데스크톱 앱을 쓴다면 터미널 대신 설정의 커넥터 화면에서 같은 서버를 추가하면 됩니다. 여러 프로젝트에서 함께 쓰려면 프로젝트 폴더의 .mcp.json (MCP 서버 목록을 적어 두는 설정 파일)에 서버 정보를 적어두는 방법도 있습니다.

2단계: 클로드 코드 모델과 추론 수준 올리기

클로드 코드에서 모델을 Fable 5로 바꾸고, 추론 수준을 최대로 올립니다. 모델은 클로드 안에서 고를 수 있는 AI의 종류이고, 추론 수준은 답하기 전에 얼마나 깊게 생각할지를 정하는 단계입니다.

모델 변경은 이렇게 합니다.

1. 클로드 코드 세션(켜 둔 대화 화면) 안에서 /model 을 입력합니다.
2. 지금 계정에서 쓸 수 있는 모델 목록이 뜹니다.
3. 방향키로 골라 엔터를 누르면 그 자리에서 바뀝니다.

목록에 없는 이름은 요금제가 지원하지 않는 것이므로 억지로 적어 넣을 필요가 없습니다.

추론 수준은 두 갈래로 올립니다. 하나는 /model 이나 /config 화면에서 제공되는 추론 강도 옵션을 높은 쪽으로 두는 것이고, 다른 하나는 프롬프트에 직접 지시를 넣는 것입니다. 클로드 코드는 "깊게 생각하고 답해줘", "ultrathink" 같은 표현을 생각을 더 오래 하라는 신호로 받아들입니다. 3D 스크롤 연출처럼 파일이 여러 개로 갈라지는 작업은 이 차이가 결과에 그대로 드러납니다.

모델 이름과 강도 단계 이름은 버전이 올라갈 때마다 바뀝니다. 영상 속 표기를 그대로 찾기보다, 지금 목록에 뜨는 것 중 가장 상위 모델을 고르는 편이 확실합니다.

3단계: 만들 웹사이트를 한 줄로 설명하기

원하는 웹사이트를 한 줄로 적어 클로드에 넣습니다. 영상은 예시를 보여주지 않으니, 여기서 직접 만들어 보겠습니다.

한 줄짜리라도 들어가야 하는 정보는 네 가지입니다. 무엇을 다루는 사이트인지, 누구에게 보여주는지, 어떤 분위기인지, 화면이 어떤 순서로 흐르는지. 이걸 다 담으면 이런 문장이 됩니다.

스페셜티 원두를 파는 1인 로스터리 브랜드 소개 페이지를 만들어줘.
어두운 배경에 크림색 글씨, 스크롤을 내리면 원두 봉투가 회전하면서
다음 섹션으로 넘어가는 3D 연출.
섹션은 히어로, 원두 3종 소개, 로스팅 과정, 구독 안내, 문의 폼 순서.
모바일 화면까지 무너지지 않게 반응형으로.

히어로는 사이트에 들어가자마자 보이는 첫 화면의 큰 영역이고, 반응형은 휴대폰과 컴퓨터 화면 크기에 맞춰 배치가 알아서 바뀌는 방식입니다. 정말 한 줄로 줄이면 이 정도까지 압축됩니다.

어두운 톤에 스크롤 3D 연출이 들어간 1인 로스터리 원두 소개 페이지,
히어로부터 문의 폼까지 5개 섹션, 반응형으로 만들어줘.

짧게 넣을수록 클로드가 알아서 정하는 부분이 늘어납니다. 색과 섹션 순서를 스스로 정해 보게 하려면 짧은 쪽이 낫고, 이미 머릿속에 그림이 있다면 위쪽처럼 길게 적는 편이 고쳐 쓰는 횟수를 줄입니다.

4단계: Seedance 2.0으로 이미지·영상 생성 명령

"Seedance 2.0으로 전부 생성해 줘"라는 한 마디를 더 넣습니다. Seedance 2.0은 영상 생성 모델이고, Higgsfield를 통해 부를 수 있는 모델 중 하나입니다. 앞 단계에서 잡힌 화면 구조에 들어갈 소재를 이 모델로 뽑으라는 지시입니다.

이 문장을 3단계 뒤에 바로 이어 붙일지, 따로 보낼지는 영상에 나오지 않습니다. 따로 보내는 쪽을 권합니다. 화면 구조가 한 번 나온 다음에 생성을 시켜야 어느 자리에 어떤 소재가 필요한지 확정된 상태에서 만들게 되고, 생성은 크레딧을 쓰기 때문에 다시 만드는 횟수가 곧 비용입니다. 두 번째 메시지는 이렇게 씁니다.

방금 만든 구조에서 필요한 이미지와 영상을 Higgsfield로 생성해줘.
영상은 Seedance 2.0으로, 히어로 배경은 5초 루프.
원두 3종 컷은 정지 이미지로 충분해.
생성한 파일은 assets 폴더에 넣고, 코드가 그 경로를 보도록 같이 고쳐줘.

5초 루프는 5초짜리 영상이 끊김 없이 계속 반복 재생되게 한다는 뜻입니다. 마지막 줄이 중요합니다. 파일만 만들어 놓고 코드에 연결하지 않으면 화면에는 아무것도 뜨지 않습니다. 여기까지 하면 브라우저에서 결과를 열어 확인하는 단계로 넘어갑니다. 클로드에게 "만든 페이지를 브라우저에서 열어볼 수 있게 해줘"라고 하면 여는 방법까지 알려줍니다.

"천만원" 가격 근거와 자료 배포 조건

화자는 이 세팅과 프롬프트를 "복붙해서 30초 만에 실행하는" 문서를 따로 정리했다고 안내합니다. 채널을 팔로우하고 댓글에 "웹사이트"라고 남기면 보내준다는 조건이 붙습니다. 그 문서의 내용은 공개되지 않았습니다. 다만 위의 네 단계는 팔로우 없이도 그대로 따라 할 수 있게 적어두었으니, 문서를 받는 목적이 순서를 아는 것이라면 이 글로 대체됩니다.

남는 의문은 가격 쪽입니다. 30초 만에 나온 결과물이 실제로 천만원에 거래된 사례는 영상에 제시되지 않았습니다.

원본 영상: youtube.com/…