성공지식백과 로고성공지식백과
Claude CodeHiggsfieldSeedanceSkillsVibeCoding

클로드 코드 + 힉스필드 스킬 3종으로 스크롤 인터랙티브 웹사이트 만들기

공유:

도입

스크롤을 내릴 때마다 영상이 진행되고, 그 영상 위에 카드가 정확한 타이밍에 등장하는 웹사이트가 있습니다. 카드가 나오는 시점은 사용자가 직접 계산하지 않습니다. AI가 영상의 흐름을 보고 가장 자연스러운 타이밍을 잡아 줍니다.

이 튜토리얼에서는 이러한 원페이지 랜딩을 직접 만들어 봅니다. 핵심 도구는 VS 코드의 클로드 코드 확장, 그리고 미리 준비된 스킬 3종 세트입니다. 영상 소스는 힉스필드의 시댄스(Seedance) 로 만듭니다.

오늘 만들 결과물
  1. 스크롤 인터랙티브 원페이지 랜딩
    스크롤에 따라 영상이 재생되며, 카드 오버레이가 영상 흐름에 맞춰 자동 등장
  2. VS 코드 + 클로드 코드 확장 기반
    안티그래비티 대신 정식 VS 코드 환경에서 동일한 작업을 진행
  3. 스킬 3종 세트로 자동화
    프론트엔드 디자인 / 시네마틱 스크롤 엔진 / 씬 오버레이 엔진
  4. 힉스필드 시댄스 15초 영상 1개
    이어지는 한 컷 영상으로 스크롤 진행감을 자연스럽게 연결

시리즈 흐름

이 글은 시리즈의 두 번째 버전입니다. 결과물은 비슷하지만 과정이 한 단계 단순해졌습니다.

ℹ️전체 시리즈 위치

버전 1: 안티그래비티 + 외부 디자인 스킬 + 힉스필드 시댄스로 처음 데모를 만든 단계입니다. 버전 2 (이 글): 안티그래비티 대신 VS 코드의 클로드 코드 확장을 사용하고, 직접 만든 스킬 3종 세트로 흐름을 정리했습니다. 버전 3 (후속편): 영상 프롬프트와 웹사이트 프롬프트가 짝을 이루는 프롬프트 팩 32종을 활용해, 주제에 맞는 랜딩을 더 빠르게 만드는 방법입니다.

💡후속편 안내

이번 버전의 흐름을 익혔다면, 같은 스킬 위에 32종의 영상·웹사이트 프롬프트 팩을 얹어 더 빠르게 랜딩을 찍어내는 방법을 정리한 후속 가이드를 이어서 보시면 좋습니다.

후속 가이드는 힉스필드 영상·웹사이트 프롬프트 팩 활용 가이드에서 이어 봅니다.

안티그래비티 대신 VS 코드를 쓰는 이유

이전 버전에서는 안티그래비티에 클로드 코드를 연결해서 작업했습니다. 안티그래비티 자체가 VS 코드를 기반으로 한 에디터이기 때문에 기능적으로는 큰 차이가 없습니다.

다만 안티그래비티는 비교적 새로운 도구이고, 계정 운영 정책이 안정화되기 전입니다. 한 채널에서 안티그래비티 사용 중 계정 제재 가능성에 대한 피드백이 있었습니다. 위험을 줄이기 위해 이번 버전에서는 정식 배포되는 VS 코드와 그 위에 올라가는 클로드 코드 공식 확장으로 환경을 맞췄습니다.

핵심 작업 방식은 동일합니다.

- VS 코드를 fork해서 만든 안티그래비티와 인터페이스가 거의 같습니다
- 단축키와 확장 설치 위치가 모두 동일합니다
- 클로드 코드의 모든 기능, 스킬 등록, 자동 작업이 그대로 동작합니다

ℹ️두 환경의 동등성

안티그래비티에서 익숙해진 사용자라면 VS 코드로 옮겨도 새로 배워야 할 것은 거의 없습니다. 클로드 코드 확장만 동일하게 설치하면 됩니다.

시작 전 준비

본격적인 작업 전에 아래만 준비되어 있으면 됩니다.

준비물

0/4 완료

💡힉스필드 크레딧 감각

울트라 플랜은 한 달 99달러에 3,000 크레딧을 제공합니다. 1 크레딧이 약 0.033달러이므로, 15초 영상 1개를 생성할 때 사용하는 135 크레딧은 약 4.45달러 수준입니다. 연간 결제 시 추가 할인이 들어갑니다.

⚠️이 가이드의 환경

이 글은 Windows + WSL 환경 기준으로 정리되어 있습니다. 단축키는 Ctrl·Alt 조합을 사용하고, 터미널은 PowerShell·Git Bash·WSL 중 편한 것을 쓰시면 됩니다.

Step 1: VS 코드에 클로드 코드 확장 설치

VS 코드를 처음 쓰는 분도 따라올 수 있도록 처음부터 설명합니다. 이미 설치되어 있다면 다음 단계로 넘어가도 됩니다.

VS 코드 + 클로드 코드 확장 설치

1

VS 코드 설치

구글에서 'Visual Studio Code' 를 검색해 공식 사이트에서 Windows용 설치 파일을 다운로드합니다. 기본 옵션 그대로 설치를 마치고 한 번 실행해 둡니다.

2

익스텐션 패널 열기

왼쪽 사이드바의 사각형 4개가 모인 아이콘이 익스텐션 패널입니다. 클릭해서 확장 마켓플레이스를 엽니다.

3

Claude Code 검색

검색창에 'Claude Code' 를 입력하면 Anthropic의 공식 확장이 상단에 표시됩니다. 다른 이름의 비공식 확장이 따라 올라올 수 있으므로 발행자가 Anthropic인지 반드시 확인합니다.

4

Install 클릭

설치가 끝나면 왼쪽 사이드바에 클로드 코드 아이콘이 추가됩니다. 이 아이콘에서 새로운 세션을 열면 평소 터미널에서 실행하던 클로드 코드와 동일한 환경이 에디터 안에서 열립니다.

5

단축키로 호출 확인

Ctrl + Shift + P 로 커맨드 팔레트를 열고 'Claude Code' 를 검색해도 같은 세션을 띄울 수 있습니다. 두 방법 중 편한 쪽을 쓰면 됩니다.

설치가 끝났다면, 클로드 코드 아이콘을 눌러 새 세션을 한 번 열어 보고 정상적으로 프롬프트 입력창이 나타나는지 확인합니다.

Step 2: 작업 폴더 만들고 스킬 3종 붙여넣기

스킬은 폴더 안에 함께 두어야 클로드 코드가 인식합니다. 클로드 코드 채팅창에는 파일이나 폴더를 직접 첨부할 수 없기 때문에, 폴더 자체에 파일을 넣은 뒤 "이 폴더에 있는 스킬을 등록해 줘" 라고 요청하는 방식으로 진행합니다.

작업 폴더 구성

1

새 폴더 만들기

예: 'higgsfield-demo' 같은 이름으로 빈 폴더를 하나 만듭니다. 위치는 자주 작업하는 디렉터리 아래면 어디든 괜찮습니다.

2

VS 코드에서 폴더 열기

VS 코드에서 'Open Folder' 로 방금 만든 폴더를 엽니다. 이 폴더가 클로드 코드 세션의 작업 공간이 됩니다.

3

스킬 3종 폴더 붙여넣기

배포받은 스킬 폴더 3개(시네마틱 스크롤 엔진 / 프론트엔드 디자인 / 씬 오버레이 엔진)를 그대로 작업 폴더 안에 복사해 둡니다. 폴더 구조를 임의로 바꾸지 말고, 받은 그대로 붙여넣습니다.

4

클로드 코드 새 세션 열기

왼쪽 클로드 코드 아이콘에서 'New Session' 을 누릅니다. 새로 열린 세션의 작업 디렉터리가 방금 만든 폴더로 설정되어 있는지 확인합니다.

ℹ️스킬 다운로드 위치

이 가이드와 함께 배포되는 스킬 3종은 본문 하단의 다운로드 버튼 또는 영상 더보기란에서 받을 수 있습니다. 받은 폴더 구조를 그대로 유지한 채 작업 폴더에 붙여 넣으시면 됩니다.

Step 3: 클로드 코드에 스킬 3종 등록 요청

폴더 안에 스킬이 들어가 있어도, 클로드 코드가 "이 폴더의 스킬을 써라" 라고 알기까지는 한 단계가 더 필요합니다.

먼저 안전을 위해 모드를 오토 모드로 바꾸고, 아래 형식으로 짧게 요청합니다.

스킬 등록 요청 프롬프트
이 레포에 스킬 3종을 첨부해 뒀습니다. 각 스킬을 살펴보고 이 프로젝트에서 사용할 스킬로 등록해 주세요.

요청이 들어가면 클로드 코드가 각 스킬 폴더 안의 SKILL.md 파일을 읽어 들이고, 어떤 트리거에서 어떤 스킬을 호출할지 자체적으로 정리해 줍니다. 등록이 완료되면 다음 단계의 실제 웹사이트 작업부터 스킬이 자동으로 활성화됩니다.

ℹ️스킬 3종 역할 요약

프론트엔드 디자인: 웹사이트의 시각 디자인을 담당합니다. 별도의 디자인 도구를 쓰지 않아도 깔끔한 결과물을 만들어 줍니다. 시네마틱 스크롤 엔진: 스크롤할 때마다 영상이 재생되며 카드가 등장·퇴장하는 인터랙션을 자동으로 구성합니다. 씬 오버레이 엔진: 영상 위에 텍스트와 카드 오버레이를 얹어, 정보가 잘 읽히는 형태로 배치합니다.

💡스킬 간 크로스 레퍼런스

이 세 스킬은 서로 참조하도록 설계되어 있습니다. 시네마틱 스크롤 엔진과 씬 오버레이 엔진을 같이 쓰면 영상 위에 카드가 자연스럽게 떠오르는 효과가 자동으로 들어갑니다. 셋을 모두 함께 쓸 때 결과물의 완성도가 가장 높습니다.

Step 4: 힉스필드 시댄스로 영상 만들기

웹사이트에 얹을 영상을 먼저 만듭니다. 이 영상의 흐름이 곧 스크롤 흐름이 되기 때문에, 영상 한 컷이 끊김 없이 자연스럽게 이어지는 것이 중요합니다.

시댄스 영상 생성

1

영상 프롬프트 준비

예시에서는 ChatGPT 5.5로 작성한 카페라떼 제작 과정 프롬프트를 사용합니다. 프롬프트 안에 '영상이 중간에 끊기지 않고 한 컷으로 이어진다' 는 조건을 반드시 포함합니다.

2

힉스필드 비디오 탭 → 시댄스

힉스필드에 로그인한 뒤 Video → Seedance 를 선택합니다. 베이스 이미지가 있으면 업로드해 일관성을 높여도 좋고, 텍스트 프롬프트만으로 진행해도 됩니다.

3

길이와 화질 설정

길이는 15초로 잡습니다. 8초는 스크롤 흐름에 담을 정보량이 부족합니다. 화질은 16:9 비율, 가장 높은 화질을 선택합니다.

4

생성 후 미리보기

출력 영상을 처음부터 끝까지 한 번 재생해 봅니다. 중간에 컷이 바뀌거나 갑작스러운 점프가 없어야 합니다. 컷이 끊기면 스크롤이 어색해지므로 프롬프트를 다듬어 다시 생성합니다.

5

다운로드

완성된 영상을 다운로드하고, 작업 폴더에 'coffee.mp4' 같은 짧은 이름으로 복사해 둡니다.

⚠️영상이 반드시 한 컷이어야 합니다

스크롤 인터랙티브 웹사이트는 영상 진행 시간과 스크롤 위치를 1대1로 매핑합니다. 영상 중간에 컷이 바뀌면 사용자가 스크롤할 때 갑자기 화면이 튀는 것처럼 보입니다. 프롬프트에서 'continuous single take' 또는 '한 컷으로 끊김 없이' 와 같은 조건을 명시하세요.

카페라떼 한 컷 예시 프롬프트
A continuous single-take, photorealistic shot of a freshly pulled espresso slowly dripping into a clear glass, then steamed milk being poured into the glass to form a smooth latte. No cuts, no jump transitions, smooth and uninterrupted camera motion. 16:9, ultra high quality, 15 seconds.

Step 5: 클로드 코드에 웹사이트 생성 요청

이제 영상과 스킬이 모두 한 폴더 안에 있습니다. 이 상태에서 클로드 코드에 짧은 요청만 보내면 됩니다. 프롬프트를 길게 쓸 필요가 없습니다. 스킬이 이미 디자인·인터랙션·오버레이를 모두 알고 있기 때문에, 어떤 영상과 어떤 주제인지만 알려 주면 충분합니다.

원페이지 랜딩 생성 요청
방금 추가한 coffee.mp4 영상을 사용해서, 시네마틱 스크롤 엔진, 프론트엔드 디자인, 씬 오버레이 엔진 스킬을 모두 활용한 원페이지 랜딩 웹사이트를 만들어 주세요.

- 주제: 도심 속 작은 스페셜티 커피 브랜드
- 스크롤에 따라 영상이 재생되고, 영상 흐름에 맞춰 서비스 설명 카드가 등장하도록 합니다.
- 카드 텍스트는 영상 안에서 일어나는 변화(원두 → 에스프레소 → 라떼)와 자연스럽게 연결되게 합니다.
- 마지막에는 매장 위치와 예약 CTA를 보여주는 카드를 배치합니다.

요청이 끝나면 클로드 코드가 폴더 안에 Next.js 또는 Vite 기반의 프로젝트 구조를 만들고, 영상을 정확한 위치에 배치하면서 카드를 렌더링하는 컴포넌트를 자동으로 작성합니다. 작업이 끝나면 로컬에서 한 번 실행해 결과를 확인합니다.

로컬 미리보기
$ npm install
$ npm run dev

브라우저에서 localhost:3000 같은 주소를 열고, 마우스 휠 또는 트랙패드로 스크롤을 천천히 내려 봅니다. 영상이 스크롤과 함께 재생되고, 카드가 영상 흐름에 맞춰 등장하면 정상입니다.

Step 6: GitHub + Vercel로 배포

만들어진 결과물을 누구나 볼 수 있게 올리는 것까지가 한 사이클입니다. 절차는 정말 단순합니다.

Vercel 배포

1

GitHub 저장소 만들기

GitHub에 빈 저장소를 새로 만든 뒤, 작업 폴더를 그대로 push 합니다. 클로드 코드에 'GitHub에 처음 push 할 준비를 해 줘' 라고 요청하면 git init · 커밋 · 원격 연결까지 자동으로 처리해 줍니다.

2

Vercel에 import

Vercel에 로그인해 'New Project' 에서 방금 push한 GitHub 저장소를 가져옵니다. 프레임워크는 자동 감지되고, 별도 설정 없이 Deploy 버튼을 누르면 됩니다.

3

도메인 확인

배포가 끝나면 `vercel.app` 도메인이 자동으로 발급됩니다. 이 주소를 열어 데스크톱과 모바일에서 모두 스크롤 동작이 정상인지 확인합니다.

배포 절차에 대한 더 상세한 화면 캡처는 후속 가이드와 이 가이드의 페이지 하단 자료에 함께 포함됩니다.

결과 확인 체크리스트

웹사이트가 잘 만들어졌는지, 한 번에 확인할 수 있는 체크리스트입니다.

완성도 점검

0/5 완료

자주 막히는 문제

스킬을 등록했는데 클로드 코드가 스킬을 무시합니다.
작업 폴더 안에 스킬 폴더가 그대로 들어 있는지, 그리고 새 세션이 그 폴더를 작업 디렉터리로 잡고 있는지 먼저 확인하세요. 또한 스킬 폴더 안의 SKILL.md 파일이 손상되지 않았는지 확인해야 합니다.
영상은 만들었는데 웹사이트에서 영상이 안 보입니다.
작업 폴더에 영상 파일이 실제로 들어 있는지, public 디렉터리 또는 프로젝트 루트에 정확히 위치하는지 확인합니다. 클로드 코드에 '영상 파일 경로를 다시 확인해 줘' 라고 요청하면 자동으로 위치를 잡아 줍니다.
카드 타이밍이 영상과 잘 안 맞습니다.
씬 오버레이 엔진은 영상 길이를 기준으로 카드 타임라인을 잡습니다. 영상 길이가 정확히 15초가 아니라면 카드 시점이 어긋날 수 있으므로, 가능한 한 15초로 맞추고 시작하세요.
영상이 모바일에서 깜빡입니다.
iOS 사파리는 인라인 자동 재생 조건이 까다롭습니다. 영상 태그에 muted, playsInline, autoplay 속성이 모두 들어가 있는지 확인하고, 안 들어가 있다면 클로드 코드에 '모바일 자동재생 호환성을 점검해 줘' 라고 요청하세요.

다음 단계

스킬 3종을 한 번 익혀 두면, 같은 흐름으로 주제만 바꿔 더 다양한 랜딩을 만들 수 있습니다. 다만 매번 영상 프롬프트와 웹사이트 카피를 처음부터 짜는 것은 시간이 많이 듭니다.

이 흐름 위에 미리 만들어 둔 영상 프롬프트 + 웹사이트 프롬프트 짝 32종을 얹어 두면, 주제만 골라 거의 즉시 새로운 랜딩을 찍어낼 수 있습니다. 후속편에서 그 프롬프트 팩의 구조와 사용법을 정리했습니다.

💡이어서 보기

후속편: 힉스필드 영상·웹사이트 프롬프트 팩 활용 가이드. 32종의 영상·웹사이트 프롬프트를 골라 쓰는 흐름, 영상 타임라인과 오버레이 타임라인을 일치시키는 방법, 카피만 바꿔 자기 서비스에 맞게 변형하는 요령을 정리했습니다.

다음 가이드는 여기서 이어 봅니다 → 힉스필드 영상·웹사이트 프롬프트 팩 활용 가이드

마무리

오늘 흐름을 정리하면 다음과 같습니다.

오늘 배운 것
  1. VS 코드 + 클로드 코드 확장으로 안티그래비티를 대체
  2. 스킬 3종을 폴더에 넣고 한 줄 요청으로 등록
  3. 힉스필드 시댄스로 한 컷 15초 영상 생성
  4. 영상 + 스킬 조합으로 스크롤 인터랙티브 원페이지 랜딩 생성
  5. GitHub + Vercel로 즉시 배포

스킬 3종은 아래 버튼에서 한 번에 받을 수 있습니다. 같이 받아 두시고 후속 가이드까지 이어서 보면 한 사이클이 완성됩니다.