AI로 홈페이지를 만든다? 무조건 클로드 쓰세요

01핵심 개요

02핵심 내용 구조

전체 제작 프로세스

• 클로드 코드에 스크롤월드 스킬과 프롬프트를 넣으면 단가 산정→예상 비용 승인→이미지·영상 생성→인코딩·조립까지 자동 수행한다.
• 결과물이 나오면 사용자가 수동으로 클로드 코드와 대화하며 세부 수정을 반복하는 방식이다.
• 킥스피드가 커넥터로 미리 연결돼 있어 클로드 코드가 영상·이미지 생성을 직접 호출한다.

스크롤월드 스킬

• 스크롤월드는 스크롤로 조작하는 몰입형 랜딩 페이지를 만들어 주는 에이전트 스킬로, 장면 진입·이탈·전환 등 인터랙티브 연출을 지원한다.
• 클로드 코드에 스킬을 설치만 하면 다양한 인터랙티브 디자인을 손쉽게 구현할 수 있다.
• 스킬 폴더 구조를 클로드가 스스로 탐색해 사용 방식을 파악한다.

그릴미(인터뷰) 스킬 활용

• 장면 구성이나 시작 흐름이 막막할 때 '그릴미' 스킬로 먼저 인터뷰를 진행하는 것을 권장한다.
• 그릴미는 사용자를 딥하게 인터뷰하며 바이브 코딩 계획을 구체화해 준다.
• 원하는 결과가 나올 때까지 세세하게 질문받으며 아이디어를 다듬을 수 있다.

실제 제작 사례(리프시프 버블티)

• 브랜드 '리프시프' 버블티 페이지로, 고산 찻잎 채집부터 한 잔이 완성되기까지의 여정을 각 장면으로 넣었다.
• 시작 이미지로 고산 계단식 다랑논 사진을 첨부해 장면 혼동을 줄였다.
• 계획 수립 후 클로드가 스크롤 플라이스루 엔딩 페이지·승인 게이트·크레딧 보고 계획을 반영했다.

비용·승인·모델 전환

• 5장면 기준 예상 비용은 약 500크레딧으로 안내됐고, 승인 후에만 렌더링이 시작되도록 프롬프트에 명시했다.
• 계획 단계는 비용이 큰 상위 모델(페이블)로, 구현 단계는 오퍼스로 전환해 비용을 절감했다.
• 최종 렌더링은 약 35분 소요됐고 5개 장면이 매끄럽게 전환되는 결과물이 완성됐다.

배포와 확장

• 커넥터에 버셀(Vercel)을 연결해 두면 클로드에서 곧바로 배포할 수 있다.
• 주문하기 버튼에 폼을 붙이고 토스 플레이스 API로 주문을 받는 기능 확장이 가능하다고 소개했다.
• 백엔드는 n8n이나 클로드 코드 내부 로직으로 처리해 실제 서비스로 발전시킬 수 있다.

03기술적 맥락

• 스크롤월드는 영상을 프레임 단위로 분해해 스크롤 위치에 매핑함으로써 영상이 재생되는 듯한 몰입형 스크롤 경험을 구현한다.
• 클로드 코드가 오케스트레이터로서 외부 영상 생성 도구(킥스피드)를 커넥터로 호출해 멀티모달 자산을 자동 생성·조립한다.
• 계획-구현 단계별 모델 분리(페이블·오퍼스)로 품질과 비용을 동시에 관리한다.

04전략적 의미

• 디자이너·개발자가 아니어도 스킬 조합만으로 상용 수준의 인터랙티브 웹페이지를 단시간에 제작할 수 있게 됐다.
• 스킬 생태계가 확장되며 클로드 코드가 단순 코딩을 넘어 멀티모달 콘텐츠 파이프라인 허브로 진화하고 있다.
• 승인 게이트·비용 보고 등 통제 장치를 프롬프트로 내장해 예측 가능한 생성 비용 관리가 가능해졌다.

05핵심 워크플로우·방법론

• 스킬 설치 → 그릴미로 인터뷰 → 장면·주제·시작 이미지 프롬프트 작성 → 계획 수립 → 승인 → 렌더링 → 수동 수정의 순서로 진행한다.
• 시작 이미지를 직접 첨부해 AI가 잘못 이해할 수 있는 장면을 명확히 고정한다.
• 비용이 큰 작업은 승인 게이트를 명시해 렌더링 전 크레딧을 확인한다.

06활용 시나리오

• 소상공인·1인 브랜드가 제품 스토리텔링형 랜딩 페이지를 저비용으로 제작한다.
• 이벤트·프로모션 기간에 반응형 몰입 페이지를 빠르게 만들어 마케팅에 활용한다.
• 버셀 배포와 토스 플레이스 API를 연결해 주문까지 받는 실제 판매 페이지로 확장한다.

07현황 및 전망

• 촬영 시점 킥스피드가 무제한 이벤트를 진행 중이어서 저비용 실험 환경이 조성됐다.
• 발표자는 다음 편에서 디자인을 넘어 기능적 구현을 다룰 예정이라고 예고했다.
• 프롬프트 템플릿은 ABC 클럽 강의실 자료에서 제공된다.

08용어 사전