AI로 웹사이트를 만들 때 가장 채우기 어려운 곳은 브랜드에 맞춘 영상일 수 있습니다. Claude Code는 웹사이트의 프런트엔드 코드를 한 번에 써 낼 수 있지만, 영상을 직접 만들지는 못해 영상 자리를 비워 둡니다. 이 빈칸을 Higgsfield MCP와 영상 생성 모델 Seedance 2.5로 채우면, 대화 한 곳에서 브랜드 영상을 만들고 그 영상을 중심으로 사이트 코드를 짓는 흐름을 꾸릴 수 있습니다. 개발자를 고용하거나 디자인 소프트웨어를 쓰지 않고 고급스러운 마케팅 사이트를 만드는 순서와, 결과물의 품질을 가르는 prompt(AI에게 주는 지시문) 작성법을 정리합니다.
Claude Code에 영상 생성 도구를 붙이는 이유
Claude Code는 UI 구성 요소를 만들고 스타일 규칙을 쓰는 데는 능숙하지만, 미디어를 생성하는 기능은 없습니다. 그래서 보통은 영상 생성 서비스를 다른 브라우저 탭에서 열고, 결과물을 내려받고, 코드 프로젝트에 손으로 넣는 과정을 되풀이해야 합니다.
MCP(Model Context Protocol, AI 모델이 외부 도구를 불러 쓰게 하는 연결 규격)로 Higgsfield를 연결하면 이 과정이 사라집니다. Claude가 영상·이미지 생성 모델을 직접 호출하고, 만든 영상을 대화 화면 안에서 보여 준 뒤 사이트에 넣습니다. 한 번 연결해 두면 이후 모든 프로젝트에서 그대로 쓸 수 있어, 자연어 지시만으로 제작 전 과정을 이어 갈 수 있습니다. 카메라 장비, 촬영팀, 장비 대여나 웹 개발 지식이 없어도 된다는 점이 이 방식의 장점입니다.
연결 순서는 다음과 같습니다.
- Claude 데스크톱 앱에서 Connectors 메뉴로 들어갑니다.
- 사용자 지정 connector를 추가하고 이름을 Higgsfield로 정합니다.
- Higgsfield가 제공하는 원격 MCP 주소를 입력하고 Add를 누릅니다.
- 브라우저에 열린 승인 창에서 Claude가 Higgsfield 계정에 접근하도록 허용합니다.
- Claude 설정에서 연결됨으로 표시되면 Seedance 2.5 영상 생성, 4K 업스케일(영상 해상도를 4K로 높이는 처리), 이미지 생성 같은 도구를 쓸 수 있습니다.
Seedance 2.5에서 달라진 세 Ghazi
이 조합에서 Seedance 2.5를 고르는 까닭은 웹사이트용 영상을 만들 때 자주 부딪히던 문제를 덜어 주는 기능이 있기 때문입니다.
| 기능 | 내용 | 웹사이트 제작에서의 의미 |
|---|---|---|
| 부분 수정(region edit) | 깨진 로고나 일그러진 글자처럼 문제가 생긴 영역만 골라 고치고 나머지는 그대로 둠 | 전체를 다시 만들다 새 오류가 생기는 일을 피하고 생성 크레딧을 아낌 |
| 참조 일관성 | 참조 이미지 하나로 여러 카메라 각도와 조명에서 같은 제품·인물 모습을 유지 | 메인 배너, 제품 카드, 기능 소개 영상의 모습이 어긋나지 않음 |
| 생성 길이 | 한 번에 최대 30초 생성(Seedance 2.0은 15초) | 짧은 클립을 이어 붙이지 않고 긴 스크롤 장면을 한 번에 만듦 |
화질 면에서도 움직임, 질감, 조명의 사실감이 뛰어나 현재 영상 생성 모델 가운데 최상위권으로 평가할 만해 보입니다. 다만 기본 출력 해상도가 720p라는 한계가 있습니다. 고급 사이트에 쓰려면 Claude에게 4K로 업스케일하라고 따로 지시해야 고해상도 화면에서도 선명하게 보입니다.
prompt는 네 블록으로 나눈다
결과물의 품질을 가르는 것은 prompt의 구조입니다. 사이트 전체를 지시하는 prompt를 다음 네 블록으로 나눠 씁니다.
| 블록 | 담을 내용 | 예시 |
|---|---|---|
| Brand | 브랜드 정체성과 미적 방향을 한 줄로 | 차가운 강철, 따뜻한 금색, 잡지풍 serif 글꼴 |
| Site | 사이트를 이루는 구역 목록 | Hero, Craft, Film, Specs, Waitlist |
| Films | 영상마다 카메라 움직임, 렌즈 초점거리, 조명 각도 | 35mm 같은 렌즈 초점거리 |
| Greenlight | 영상을 확인하고 승인하기 전에는 코드를 쓰지 말라는 규칙 | 승인 전에는 사이트 코드 작성 금지 |
▲ 네 블록으로 나눈 prompt 구조
특히 Films와 Greenlight 블록이 중요합니다. AI 영상 생성이 실패하는 경우는 대부분 ’고급스러운 분위기’처럼 막연한 느낌을 지시했기 때문으로 보입니다. 카메라가 어떻게 움직이는지, 어떤 초점거리의 렌즈로 찍는지, 빛이 어느 각도에서 들어오는지처럼 촬영 현장에서 쓰는 구체적인 말로 지시해야 의도에 가까운 영상이 나옵니다.
Greenlight 규칙이 없으면 Claude가 검토하지 않은 영상이나 엉뚱하게 생성된 영상을 그대로 사이트 코드에 넣는 일이 잦아, 수정 작업을 여러 번 되풀이하게 됩니다. 영상을 먼저 보고 승인한 뒤에 코드를 쓰게 하면 이런 낭비를 줄일 수 있습니다.
사례 1: 시계 부품이 펼쳐지는 scrollytelling 페이지
첫 번째 시연은 스위스 미니멀리즘을 내세운 가상의 고급 시계 브랜드 사이트입니다. 브랜드 정체성, 스타일 지침, 사이트 prompt까지 Claude가 네 블록 구조로 만들었습니다. 이 사이트는 scrollytelling(스크롤에 맞춰 장면이 이어지며 이야기를 전하는 웹페이지) 방식으로, 스크롤을 내리면 시계의 기계 장치가 분해되며 펼쳐집니다. 제품 소개 문구에는 부품 231개, 티타늄 케이스, 손으로 다듬은 모서리 마감 178곳 같은 내용이 들어갔습니다.
작업은 다음 순서로 진행됐습니다.
- 시계 케이스 바깥을 살피는 영상과, 톱니바퀴와 모서리 마감이 드러나도록 무브먼트를 분해해 보여 주는 영상 두 편을 요청합니다. 30초까지 한 번에 만들 수 있어 긴 스크롤 장면도 이어 붙일 필요가 없습니다.
- Claude가 완성한 영상을 대화 화면에 띄우고, 소스 코드를 건드리기 전에 검토를 받습니다.
- 두 번째 영상 끝부분에서 초침이 살짝 끊기는 문제가 보여, 영상 전체를 다시 만들지 말고 그 부분만 고치라고 요청합니다.
- Claude가 Seedance 2.5의 부분 수정 기능으로 초침 움직임만 고칩니다. 나머지 장면은 그대로 남고 생성 크레딧도 아낄 수 있습니다.
- 수정한 영상을 승인하면 Claude가 스크롤에 연동되는 고해상도 분해 장면을 넣어 페이지를 완성합니다.
사례 2: 3D 모델과 맞춤 주문 화면을 갖춘 가죽 케이스 사이트
두 번째 시연은 파리에서 주문 제작하는 가상의 가죽 휴대전화 케이스 브랜드입니다. 이번에도 Claude가 브랜드 콘셉트와 프랑스어로 보석함을 뜻하는 브랜드 이름, 사이트 prompt를 만들었습니다.
시계 사이트가 영상 중심이었다면, 이 사이트는 코드로 만든 실시간 3D 케이스 모델이 중심입니다. 사용자가 스크롤하면 케이스가 회전하고 뒤집힙니다. Seedance 2.5는 가죽 결과 박음질 가장자리를 가까이에서 보여 주는 보조 영상을 만들고, Claude가 이를 4K로 업스케일해 반복 재생 영상으로 넣었습니다.
▲ 3D 모델과 맞춤 주문 화면
페이지 맨 아래에는 맞춤 주문 화면이 있습니다. 방문자가 색상, 금속 부품 마감, 안감, 이니셜 각인을 고르면 가격이 €158에서 €177처럼 바로 바뀌고, 예약 버튼도 함께 동작합니다. 중간 스크롤 지점에서 3D 모델이 본문 글을 조금 가리는 문제가 보였을 때도, 간격을 조정해 달라는 한마디에 Claude가 레이아웃을 바로 고쳤습니다.
비싸 보이는 사이트를 위한 세부 요령
- 글꼴은 주 글꼴 하나만 쓰고, 크기는 비례에 맞춘 네 단계로 제한합니다.
- 여백을 넉넉하게 둡니다.
- 720p로 나온 영상은 4K로 업스케일하라고 지시합니다.
- 영상의 작은 결함은 전체를 다시 만들지 말고 부분 수정으로 고칩니다.
- 네 블록 prompt는 다른 대화형 AI 모델에 맡겨 자기 제품이나 브랜드에 맞게 다듬어도 됩니다.
정리: 영상부터 승인받고 코드는 그다음에
Claude Code에 Higgsfield MCP를 연결하면 사이트 코드 작성부터 영상 생성, 4K 업스케일, 반응형 레이아웃 수정까지 대화 한 곳에서 처리할 수 있습니다. 핵심은 도구보다 순서입니다. 브랜드, 사이트 구조, 구체적인 촬영 지시를 나눠 적고, 영상을 직접 확인해 승인하기 전에는 코드를 쓰지 않게 하면 레이아웃과 영상 모두를 원하는 대로 다룰 수 있습니다.
직접 시도해 보려면 다음 순서로 시작해 볼 만합니다.
- Claude 데스크톱 앱에 Higgsfield를 사용자 지정 connector로 추가하고 계정을 승인합니다.
- 자신의 제품이나 브랜드에 맞춰 Brand, Site, Films, Greenlight 네 블록 prompt를 씁니다.
- 영상 지시에는 카메라 움직임, 초점거리, 조명 각도를 구체적으로 적습니다.
- 생성된 영상을 검토해 결함은 부분 수정으로 고치고, 승인한 뒤에 사이트 코드를 쓰게 합니다.