I Built $10000 Website With Claude Opus 5.5 In 10 Minutes

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

영상은 Claude Opus 5.5를 활용한 커서 반응형 웹사이트 제작을 보여주지만, 제목의 1만 달러 가치와 10분 제작 시간은 입증하지 않는다.

📌 핵심 요점

1. 제작 흐름은 Pinterest에서 참고 이미지 선택 → ChatGPT로 이미지 수정 → Kai AI에서 영상 생성 → Claude로 웹사이트 구현 순서다.
2. ChatGPT에서는 이미지의 글자를 제거하고 가로형 구도로 수정한다. 발표자는 무료 기능을 활용해 비용을 줄이며, 결과물을 PNG로 저장한다.
3. Kai AI에서 Kling 3 Turbo를 선택해 강아지가 눈·머리·꼬리를 조금 움직이는 5초짜리 1080p 영상을 만든다. 발표자가 제시한 예상 비용은 약 60센트다.
4. 웹사이트는 추가 페이지나 스크롤 없이 히어로 영역 하나로 제한한다. 오른쪽에는 강아지 영상, 왼쪽에는 제목·설명·행동 유도 버튼을 배치하고, 커서 움직임에 따라 영상이 반응하도록 요청한다.
5. Claude가 브랜드명과 문구까지 생성하며, 마지막에는 로컬 index 파일을 열어 커서에 따른 영상의 정지·진행·역방향 반응을 시연한다. 가격이나 고객 후기 추가는 향후 확장 가능성으로 언급한다.

🧩 배경과 문제 정의

발표자는 커서 움직임에 반응하는 애니메이션 웹사이트를 만들고자 한다. 이를 위해 3D 강아지 이미지를 짧은 영상으로 바꾸고, 그 영상을 웹사이트 첫 화면의 중심 요소로 사용한다.

문제는 시각 자료 준비와 웹 구현을 연결하면서 비용과 반복 수정량을 줄이는 것이다. 발표자는 ChatGPT의 무료 이미지 기능, 비교적 저렴하다고 소개한 영상 생성 모델, Claude 유료 구독을 조합한다. 구현 범위는 추가 페이지나 스크롤이 없는 단일 히어로 영역으로 좁힌다.

🕒 시간순 섹션별 상세정리

1. 제작 목표와 Pinterest 참고 이미지 선택

• Claude Opus 5.5로 마우스 커서 추적 효과가 있는 웹사이트를 만들겠다고 보여준다. [00:07]
• Pinterest에서 애니메이션의 바탕이 될 디자인을 찾고, 3D 만화 스타일을 검색한다. [00:37]
• 미리 고른 3D 강아지 디자인을 선택해 이미지를 다운로드한다. [00:53]

2. ChatGPT로 웹사이트용 이미지 정리

• 원본 이미지의 글자를 제거하고, 나중에 영상으로 만들기 위해 가로형 구도로 수정하려 한다. [01:11]
• ChatGPT에 이미지를 올려 수정을 요청하고, 무료 기능을 선택한 이유를 비용 절감으로 보여준다. [01:51]
• 결과물을 PNG로 저장한다. 일부가 마음에 들지 않으면 선택 편집, 배경 제거, 지우기, 크기 변경 등을 활용할 수 있다고 보여준다. [02:22]

3. 영상 생성 도구와 품질·비용 선택

• 이미지를 영상으로 바꾸기 위해 Kai AI를 사용하며, 영상 생성에서는 비용과 해상도를 함께 고려해야 한다고 보여준다. [03:17]
• 첫 화면의 흐릿한 영상이 제품에 대한 인상에 영향을 줄 수 있다고 주장하고, 1080p를 적절한 해상도로 제시한다. [03:53]
• Kling 3 Turbo를 선택해 약 5초짜리 애니메이션을 만들 계획이며, 예상 비용을 약 60센트로 보여준다. [04:46]

4. 강아지 애니메이션 생성과 다운로드

• ChatGPT에서 만든 이미지를 업로드하고, 강아지가 조금 움직이면서 표정과 눈의 움직임을 보이도록 프롬프트를 작성한다. [05:35]
• 이미지·영상·웹사이트 제작 프롬프트와 이미지를 설명란에서 무료로 제공한다고 안내한다. 영상 설정은 5초·1080p이며 112크레딧이 표시된다고 보여준다. [06:17]
• 생성된 영상에서 꼬리·눈·머리가 조금 움직이는 모습을 확인한다. 단순한 움직임이 목적에 맞는다고 평가하고 영상을 다운로드한다. [07:02]

5. Claude 구독과 사용량 관리

• Claude 데스크톱 앱으로 이동한다. 이 구간에서는 모델을 Opus 3.5라고 부르며 Pro 또는 Max 구독이 필요하다고 보여준다. [07:32]
• 요구사항을 여러 차례 나누어 수정하면 사용량이 소진될 수 있으므로, 한 번에 정리해서 전달하라고 권한다. [08:05]
• 시연에서는 중간 수준의 추론 노력을 선택하고, 사용량을 고려해 중간 또는 높은 수준을 권한다. [08:43]

6. 프로젝트 폴더와 프롬프트 준비

• 사이트 코드를 담을 별도 폴더를 선택한다. 빈 폴더를 사용하면 이후 파일 수정이나 호스팅을 위한 정리가 쉽다고 보여준다. [09:22]
• 다운로드한 영상을 프로젝트 폴더에 옮긴 뒤 Claude에서 해당 파일을 선택하고 준비한 프롬프트를 붙여 넣는다. [10:02]
• 다른 사이트를 만들고 싶다면 제공된 프롬프트를 참고해 자신의 목적에 맞는 새 프롬프트를 만들어 달라고 요청할 수 있다고 안내한다. [10:43]

7. 단일 히어로와 커서 반응 동작 지정

• 프롬프트는 추가 페이지나 스크롤 없이 히어로 영역 하나만 만들도록 한다. 화면은 빨간 배경과 강아지 영상으로 구성한다. [10:54]
• 영상은 자동 재생하지 않고 커서 움직임에 따라 반응하도록 요청한다. 무음으로 유지하고, 강아지는 오른쪽에, 제목·설명·행동 유도 버튼은 왼쪽에 배치한다. [11:34]
• 브랜드명과 문구도 Claude가 스스로 만들도록 맡긴다. 다시 Opus 5.5의 창의성을 언급한 뒤 프롬프트를 전송한다. [12:07]

8. 결과 확인과 서비스 판매 제안

• 미리보기와 로컬 index 파일에서 결과를 확인한다. 커서가 멈추면 영상도 멈추고, 커서를 앞뒤로 움직이면 영상도 진행하거나 역방향으로 움직이는 모습을 보여준다. [13:07]
• Claude가 만든 Boop이라는 브랜드와 반려동물 목걸이 설명, 사전 주문 버튼을 보여준다. 가격이나 고객 후기 추가도 가능하다고 말하지만 실제 추가 작업은 시연하지 않는다. [13:55]
• 사업자나 서비스 제공자가 이런 사이트를 만들어 판매할 수 있다고 제안한다. 이어 Hello AI 커뮤니티의 강의와 주간 실시간 세션을 홍보하고 영상을 마친다. [14:52]

🧾 결론

• 이 영상의 구체적인 결과물은 커서에 반응하는 단일 히어로 페이지다. 여러 페이지와 사업 기능을 갖춘 완성형 사이트까지 보여주지는 않는다.
• 핵심은 이미지와 영상을 먼저 준비한 뒤, 화면 구성과 동작 조건을 묶어 Claude에 전달하는 제작 방식이다.
• 브랜드명과 문구를 모델에 맡기는 과정은 시연되지만, 생성된 상품 설명의 사실성이나 실제 사업 성과는 검증되지 않는다.
• 제목의 모델명·가격 가치·제작 시간과 본문에서 확인되는 사실을 구분해서 읽어야 한다.

📈 투자·시사 포인트

• 웹 제작 서비스 관점에서는 이미지 편집·영상 생성·코드 작성을 연결하는 작업 방식이 제시된다. 발표자는 이를 유료 제작 서비스로 판매할 수 있다고 제안하지만 거래 사례는 제시하지 않는다.
• 제작 비용에는 영상 생성 비용뿐 아니라 Claude 유료 구독과 반복 수정에 따른 사용량도 고려해야 한다. 무료 프롬프트 제공이 전체 제작 과정의 무료 이용을 뜻하지는 않는다.
• 발표자는 첫 화면의 영상 품질이 제품 인상에 영향을 준다고 강조하며 1080p를 선택한다. 다만 전환율이나 매출 개선을 뒷받침하는 측정치는 없다.
• 재사용 가능한 프롬프트와 명확한 작업 범위가 제작 효율의 중심에 놓인다. 실제 수익성은 판매 가격, 수정 횟수, 추가 기능의 작업량을 확인해야 판단할 수 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• 모델명이 일관되지 않는다. 제목·도입·후반에는 Opus 5.5가 나오지만, 구독과 모델 선택을 설명하는 중간 구간에서는 Opus 3.5라고 반복한다. 이 자료만으로 실제 사용 버전을 확정하기 어렵다.
• 제목의 ‘1만 달러 웹사이트’에 대한 평가 근거나 판매 내역이 없다. 전체 영상은 14분 52초이며, 편집된 시연만으로 실제 제작 시간이 10분이었다고 확인할 수도 없다.
• 약 60센트의 영상 생성 비용, 1080p 설정의 112크레딧, 화면에 표시된 성공률 100%는 발표자가 소개한 수치다. 적용 조건과 성공률의 집계 기준은 설명하지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 사용할 Claude 모델명과 구독 조건을 확인하고, 영상 속 버전 표기 차이를 구분해 기록한다.
• 참고 이미지를 가로형으로 정리하고 불필요한 글자를 제거한 뒤 PNG로 저장한다.
• 5초·1080p 영상의 실제 크레딧과 결제 비용을 확인하고, 강아지의 움직임을 구체적으로 적은 프롬프트로 생성한다.
• 별도 프로젝트 폴더에 영상과 사이트 파일을 모으고, 단일 히어로 구성·좌우 배치·무음·커서 반응 조건을 한 번에 전달한다.

❓ 열린 질문

• 실제 사용 모델은 Opus 5.5와 Opus 3.5 중 무엇이며, 중간 구간의 표기 차이는 어디에서 발생했는가?
• 제목의 1만 달러 가치는 어떤 견적·거래·평가를 근거로 하며, 10분에는 이미지와 영상 준비 시간이 포함되는가?
• 가격표나 고객 후기 등을 추가하면 최초의 단일 히어로 구현보다 사용량과 수정 시간이 얼마나 늘어나는가?