🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Code로 $10,000 Websites 수준에 가까운 결과를 만들려면, AI에게 “사이트를 만들어줘”라고 맡기는 것이 아니라 brief, reference, 디자인 skill, 자산, 디버깅, 모바일 마감을 반복적으로 지휘해야 한다.

📌 핵심 요점

1. $10,000 웹사이트와 저가형 웹사이트의 차이는 단순한 화면 미감보다 관점, 타이포그래피, 색상, 위계, 이미지, 모션, 모바일 완성도, 속도, 마감감 같은 세부 품질에서 갈린다.
2. Claude Code는 자연어 설명을 바탕으로 코드를 생성해 템플릿형 노코드 빌더보다 더 맞춤형 결과를 만들 수 있지만, 기본 출력만으로는 흔한 AI 웹사이트처럼 보일 수 있다.
3. 디자인 skill, 구체적인 brief, 3~5개의 참고 이미지, clarifying questions를 활용하면 Claude가 바로 제작에 들어가기보다 브랜드 방향과 사이트 구조를 먼저 정리하게 만들 수 있다.
4. 초기 결과가 좋아 보여도 이미지·영상 자산, 히어로 모션, 섹션별 미세 상호작용, 카피, 폰트, 모바일 레이아웃을 사람이 직접 점검하고 반복 수정해야 고급스러운 인상이 강화된다.
5. 최종 배포 단계에서는 로컬 미리보기로 끝내지 않고, 정적 사이트 파일을 올바르게 압축해 호스팅에 업로드하고 커스텀 도메인에서 실제로 접근 가능한 상태까지 만들어야 한다.

🧩 배경과 문제 정의

• 이 영상은 Claude Code를 이용해 자연어 설명만으로 맞춤형 웹사이트를 제작하고, 이를 실제 호스팅까지 연결하는 전체 과정을 다룬다.
• 핵심 문제의식은 “AI로 만든 웹사이트가 왜 대부분 비슷하고 저렴해 보이는가”이며, 단순히 화면을 만드는 것보다 관점, 타이포그래피, 색상, 위계, 이미지, 모션, 모바일 완성도, 속도, 마감감 같은 디테일이 고급 웹사이트의 차이를 만든다는 점을 강조한다.
• Claude Code 자체만으로도 웹사이트 제작은 가능하지만, 기본 출력은 반복되는 폰트·색상·레이아웃 때문에 흔한 AI 사이트처럼 보일 수 있다.
• 이를 보완하기 위해 영상은 디자인 skill 설치, 구체적인 brief 작성, 참고 이미지 활용, clarifying questions, 체크리스트 기반 평가, 반복 디버깅, 이미지·영상 자산 생성, 미세 모션 추가, 카피·폰트·모바일 마감, 최종 호스팅 업로드까지 이어지는 제작 흐름을 제시한다.
• 비용 관련 수치와 특정 서비스 가격은 영상 녹화 시점 기준 설명이므로, 실제 적용 전에는 현재 가격과 플랜 조건을 별도로 확인해야 한다.

🕒 시간순 섹션별 상세정리

1. Claude Code로 만드는 고급 맞춤형 웹사이트의 기준

• Claude Code는 사용자가 자연어로 웹사이트를 설명하면 코드를 직접 작성해 주는 AI 코딩 도구이며, 데스크톱 앱을 사용하면 별도 개발자 세팅 없이 한 창에서 제작을 시작할 수 있다 [00:42]
• 영상은 처음부터 단순한 웹사이트 제작이 아니라 “1만 달러짜리처럼 보이는 웹사이트”를 목표로 삼고, 좋은 사이트의 차이가 표면적인 예쁨보다 보이지 않는 품질에서 나온다고 보여준다 [01:02]
• $10,000 웹사이트와 $200 웹사이트의 차이는 관점, 타이포그래피, 색상, 위계, 이미지, 모션, 모바일 대응, 속도, 마감감 같은 요소에서 갈린다 [01:17]

2. Claude Code 설치와 프로젝트 작업공간 준비

• claude.com에서 Pro 플랜을 선택하면 녹화 시점 기준 월 20달러로 필요한 기능을 사용할 수 있고, 이후 로그인과 다운로드 과정을 거쳐 데스크톱 앱 설치로 넘어간다 [02:19]
• Claude 인터페이스는 업데이트에 따라 달라질 수 있으므로, 영상 속 화면을 그대로 따라 하기보다 코드 모드 전환과 프로젝트 폴더 지정 같은 핵심 개념을 이해하는 것이 중요하다 [02:53]
• 웹사이트 제작을 시작하기 전에는 Claude Code가 작업할 로컬 프로젝트 폴더를 정하고, 이후 생성되는 파일들이 그 안에서 관리되도록 준비한다 [03:08]

3. 두 가지 디자인 skill로 기본 AI 결과를 끌어올리기

• Claude의 기본 디자인 출력은 넓은 지식을 바탕으로 작동하지만, 반복되는 폰트와 색상, 예측 가능한 레이아웃 때문에 흔한 AI 웹사이트처럼 보일 위험이 크다 [03:49]
• 영상은 이 한계를 보완하기 위해 Claude에 디자인 관련 skill을 추가하는 방식을 제안한다 [04:11]
• skill은 특정 영역의 지침서처럼 작동하는 텍스트 파일이며, 한 번 설치하면 Claude가 이후 작업에서 계속 활용해 디자인 판단을 보강한다 [04:26]
• 핵심은 Claude에게 단순히 “멋진 웹사이트를 만들어 달라”고 하는 것이 아니라, 고급 웹사이트를 판단하는 기준과 디자인 원칙을 먼저 주입하는 것이다 [04:41]

4. 좋은 brief와 참고 이미지가 결과 품질을 좌우하는 구간

• Claude에게 주는 brief가 구체적일수록 결과가 좋아지고, 원하는 사이트의 방향을 이미 알고 있다면 스타일과 목적을 직접 자세히 적는 것이 가장 빠른 경로가 된다 [06:07]
• 디자인 언어가 익숙하지 않으면 원하는 시각적 취향을 말로 설명하기 어렵기 때문에, 좋아하는 사이트 스크린샷을 reference로 제공하는 방식이 더 효과적이다 [06:22]
• 참고 이미지는 Claude가 추상적인 취향을 더 구체적인 레이아웃, 색감, 분위기, 인터랙션 방향으로 해석하는 데 도움을 준다 [06:37]
• 이 단계에서 brief와 reference는 이후 결과물의 상한선을 결정하는 입력값에 가깝다 [06:52]

5. clarifying questions로 사이트 방향을 확정하는 prompt 구조

• 설치한 디자인 skill을 호출한 뒤 brief를 작성하고, 마지막 줄에 “Ask me clarifying questions”를 넣으면 Claude가 바로 만들기보다 먼저 필요한 판단을 정리한다 [07:46]
• 이 방식은 AI가 임의로 중요한 결정을 해 버리는 것을 막고, 제작 전에 사이트의 목적과 방향을 더 명확하게 만드는 역할을 한다 [08:01]
• Claude의 질문은 레스토랑 이름, 스타일 방향, 필요한 섹션, 콘텐츠 작성 주체, 기술 스택, 애니메이션 수준, 추가 요구사항처럼 사이트 전체 구조를 결정하는 항목으로 구성된다 [08:07]
• 사용자는 이 질문에 답하면서 브랜드, 콘텐츠, 기능, 기술 범위를 정리하고, Claude는 이를 바탕으로 초기 웹사이트 제작에 들어간다 [08:22]

6. 초기 결과 평가와 이미지·영상 자산의 한계

• 초기 결과는 아직 polishing 전인데도 일반적인 AI 웹사이트 데모보다 완성도가 높고, $10,000 웹사이트 체크리스트의 관점, 타이포그래피, 색상, 위계부터 검토할 수 있는 수준에 도달한다 [09:23]
• Claude는 headline에 Francis, body에 Inter를 선택했지만 Inter는 과하게 쓰이는 AI 폰트라 이후 교체 대상이 된다 [09:44]
• 색상은 near black, warm cream, oxblood, brass, slate 다섯 가지로 절제된 팔레트를 형성하며, 이는 고급 레스토랑 사이트에 맞는 분위기를 만드는 기반이 된다 [09:59]
• 다만 이미지와 영상 자산은 아직 충분히 고급스럽지 않기 때문에, 사이트의 인상을 끌어올리려면 별도의 시각 자산 제작이 필요하다 [10:14]

7. 이미지·영상 자산 생성과 Claude 프롬프트 활용

• 11 Labs 안에서 ChatGPT 이미지 모델로 이미지를 만들고, 네 가지 결과 중 하나를 골라 Google VO3.1의 시작 프레임으로 넣으면 히어로 영상 자산의 기본 재료가 생긴다 [12:10]
• 이 과정은 웹사이트 코드 제작과 별개로, 고급스러운 첫인상을 만드는 데 필요한 이미지·영상 자산을 확보하는 단계다 [12:25]
• Google VO3.1 결과물 중 하나를 선택한 뒤 Topaz로 업스케일하면, 탭을 벗어나지 않고 스테이크하우스 사이트의 히어로 자산까지 이어지는 제작 흐름이 완성된다 [12:27]
• Claude는 웹사이트를 만드는 도구이지만, 영상은 Claude가 만든 구조 위에 외부 이미지·영상 생성 도구를 결합해야 더 높은 완성도에 도달할 수 있음을 보여 준다 [12:42]

8. 21st.dev 컴포넌트와 정적 사이트 아키텍처 보호

• 21st.dev에는 웹 컴포넌트, 애니메이션, 스크롤 효과, 버튼 같은 개발자 제작 요소가 모여 있고, 시각적 영감 탐색이나 Claude용 재현 프롬프트 복사에 쓸 수 있다 [13:11]
• 사용자는 여기서 원하는 컴포넌트를 고르고, 그 컴포넌트를 Claude Code가 재현하도록 프롬프트를 복사해 활용한다 [13:26]
• 히어로 섹션에 프리미엄한 인상을 주기 위해 smooth scroll image component를 고르고, 복사한 프롬프트와 방금 만든 스테이크 영상을 Claude Code에 넣어 히어로 제작을 요청한다 [13:51]
• 이때 중요한 조건은 기존 정적 사이트 아키텍처를 유지하는 것이며, React 같은 새로운 구조로 프로젝트를 과하게 바꾸지 않도록 Claude에게 명확히 지시해야 한다 [14:06]

9. 히어로 섹션 디버깅과 반복 개선

• React 없이 히어로를 다시 만들었지만 첫 시도에서는 영상이 페이지에 보이기만 하고 스크롤 효과가 작동하지 않아서, 기대 동작과 실제 문제를 Claude에 다시 전달한다 [14:51]
• 이 단계는 AI가 한 번에 완벽한 결과를 내는 흐름이 아니라, 사람이 결과를 보고 문제를 설명하며 반복 개선하는 흐름에 가깝다 [15:06]
• Claude가 두 가지 버그를 고친 뒤에도 페이지가 계속 깨져 있고, 더 깊은 점검을 요청하자 브라우저에서 실제 페이지를 열어 라이브 상태를 검사해 근본 원인을 찾는다 [15:21]
• 영상은 “문제가 있다”는 식의 모호한 피드백보다 기대한 동작, 실제로 발생한 문제, 확인해야 할 위치를 구체적으로 알려 주는 것이 디버깅에 더 효과적임을 보여 준다 [15:36]

10. 체크리스트 평가와 의도 중심 일괄 수정

• 사이트의 뼈대가 갖춰진 뒤에는 더 꾸미기 전에 처음 세운 10K 웹사이트 체크리스트와 비교해야 하며, 이 점검이 generic한 결과와 polished한 결과를 가른다 [15:56]
• 체크리스트는 단순 감상이 아니라 관점, 색상, 위계, 타이포그래피, 이미지, 모션, 모바일, 보이지 않는 마감 요소를 기준으로 사이트를 평가하게 만든다 [16:11]
• Claude의 평가에서 point of view, color, hierarchy는 강하지만 typography는 mixed이고, imagery, motion, mobile, invisible stuff도 mixed라서 남은 작업 범위가 구체화된다 [16:24]
• 이후 수정은 “더 예쁘게 만들어 줘”가 아니라, 체크리스트에서 부족한 항목을 중심으로 한 번에 방향성 있는 개선을 요청하는 방식으로 진행된다 [16:39]

11. 섹션별 미세 모션과 커서 상호작용

• 일괄 수정 뒤에는 사이트를 섹션별로 직접 스크롤하며 여전히 flat하고 지루한 구간을 찾아야 하고, 이 판단은 Claude보다 사람이 더 정확하게 주도해야 한다 [18:01]
• 전체 사이트를 한꺼번에 자동 개선하기보다, 사용자가 직접 보면서 특정 섹션의 밋밋함과 흐름의 끊김을 찾아내는 것이 중요하다 [18:16]
• flat한 섹션마다 하나의 절제된 모션이나 커서 상호작용만 추가하면, 시각 효과가 과해지지 않으면서도 각 구간에 살아 있는 느낌이 생긴다 [18:19]
• 여기서 목표는 화려한 효과를 많이 넣는 것이 아니라, 고급스러운 사이트처럼 필요한 곳에만 반응과 움직임을 배치하는 것이다 [18:34]

12. 카피·폰트·모바일 마감과 실제 호스팅 준비

• AI 카피는 기본적으로 과하게 설명하고 형용사를 많이 쓰며 인상적으로 보이려는 경향이 있는데, “Six dishes, one fire”처럼 절제된 문장은 $10,000 메뉴와 $200 메뉴의 차이를 만든다 [19:52]
• 고급 웹사이트의 카피는 많은 정보를 과시하기보다, 짧고 기억에 남는 문장으로 브랜드의 태도와 분위기를 전달해야 한다 [20:07]
• Inter는 AI 생성 사이트에서 너무 자주 쓰여 즉시 AI 느낌을 주기 때문에, Geist 같은 다른 폰트로 바꾸면 작은 변화만으로도 사이트를 읽는 인상이 달라진다 [20:34]
• 폰트 교체, 카피 정리, 모바일 화면 확인 같은 마감 작업은 사소해 보이지만, 사이트가 템플릿처럼 보이는지 실제 브랜드 사이트처럼 보이는지를 가르는 단계다 [20:49]

13. 결제 완료와 기존 사이트 업로드 흐름 선택

• Hostinger 결제 링크와 Claude Pro 한 달 비용을 합치면 전체 제작·배포 비용이 약 60달러가 되고, 영상은 낮은 비용으로 고급 웹사이트 제작·공개 흐름을 구성할 수 있다고 보여준다 [24:08]
• 이 비용 계산은 영상 녹화 시점과 선택한 플랜 기준이므로, 실제 결제 전에는 현재 가격과 조건을 별도로 확인해야 한다 [24:23]
• 계정 등록에는 이메일과 비밀번호가 필요하고, 다음 단계에서 결제 정보를 입력해야 거래가 완료된다 [24:38]
• 결제 후에는 새 사이트 빌더로 만드는 흐름이 아니라, 이미 Claude Code로 만든 기존 웹사이트 파일을 업로드하는 방향을 선택해야 한다 [24:53]

14. 압축 방식 오류 방지와 도메인 배포 완료

• 프로젝트 폴더 자체를 압축하면 Hostinger 서버에서 한 단계 더 깊은 디렉터리로 풀리고, 도메인은 index.html을 찾지 못해 빈 페이지가 뜰 수 있다 [25:03]
• 이 오류는 웹사이트 파일이 없어서가 아니라, 서버가 기대하는 위치에 index.html이 놓이지 않기 때문에 발생하는 구조 문제다 [25:18]
• 올바른 방식은 프로젝트 폴더 안의 모든 파일을 선택해 압축하는 것이며, Mac은 Command+A와 Compress, Windows는 Control+A와 compressed folder 흐름을 사용한다 [25:22]
• 최종적으로는 압축 파일을 업로드해 도메인에 연결하고, Claude Code로 만든 정적 웹사이트를 실제 공개 사이트로 배포하는 흐름이 마무리된다 [25:37]

🧾 결론

• 이 영상의 핵심은 Claude Code가 웹사이트 제작을 자동화해 준다는 주장보다, 고급 웹사이트를 만들기 위해 AI를 어떻게 디렉팅해야 하는지에 가깝다.
• 좋은 결과는 한 번의 프롬프트에서 나오기보다, 설치와 작업공간 설정, 디자인 skill 적용, 참고 이미지 제공, 질문 기반 brief 정리, 체크리스트 평가, 디버깅과 polishing을 거치며 만들어진다.
• Claude가 만든 초기 사이트는 출발점일 뿐이며, Inter 같은 흔한 폰트 교체, 절제된 카피, 프리미엄 이미지·영상 자산, 섹션별 subtle motion, 모바일 전용 마감이 품질 차이를 만든다.
• React 컴포넌트처럼 멋져 보이는 요소도 프로젝트 성격에 맞지 않으면 구조를 복잡하게 만들 수 있으므로, 단순 정적 사이트에서는 기존 아키텍처를 지키는 판단이 중요하다.
• 영상에서 제시된 Hostinger 비용, Claude Pro 가격, 할인 조건 등은 녹화 시점 기준 설명이므로 실제 적용 전에는 현재 가격과 약관을 별도로 확인해야 한다.

📈 투자·시사 포인트

• 소규모 비즈니스 웹사이트 제작 시장에서는 “AI로 빠르게 만든다”보다 “AI 결과물을 얼마나 고급스럽게 편집·감독하느냐”가 차별화 포인트가 될 수 있다.
• 웹 제작자의 역할은 단순 코딩에서 brief 설계, reference 큐레이션, 시각적 판단, 카피 절제, 디버깅, 모바일 UX 마감으로 이동하고 있다.
• AI 웹사이트 제작 도구가 보편화될수록 기본 템플릿형 결과물의 가치는 낮아지고, 브랜드 맞춤형 자산과 세밀한 상호작용을 설계하는 능력이 더 중요해질 가능성이 있다.
• 정적 사이트처럼 범위가 명확한 프로젝트는 Claude Code와 저비용 호스팅 조합으로 제작·배포 비용을 크게 낮출 수 있지만, 결제·계정·데이터베이스가 필요한 서비스형 사이트는 더 복잡한 인프라 판단이 필요하다.
• 검증 필요: 영상에 나온 Claude Pro 월 20달러, Hostinger 12개월 플랜 비용, 무료 도메인, 할인 링크 조건은 시점에 따라 바뀔 수 있으므로 실제 구매 전 현재 공식 가격과 조건을 확인해야 한다.

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

• Claude Pro 플랜이 영상 녹화 시점 기준 월 20달러라고 설명되지만, 실제 가격과 포함 기능은 업로드 이후 변경됐을 수 있으므로 Claude 공식 가격 페이지에서 재확인이 필요하다.
• Hostinger 비용, 첫해 무료 도메인, 할인 링크, 약 43달러 또는 전체 약 60달러라는 비용 계산은 영상의 예시 조건에 기반하므로 현재 프로모션·국가·플랜·갱신가 기준으로 다시 확인해야 한다.
• UI UX Pro Max, Anthropic front-end design skill, 21st.dev 컴포넌트, Google VO3.1, Topaz 업스케일링 등 도구 조합은 영상에서 제시된 워크플로우일 뿐이며, 각 도구의 현재 사용 가능 여부와 라이선스 조건은 별도 검증이 필요하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• Claude Code를 사용할 작업 폴더를 먼저 만들고, 생성되는 코드·이미지·영상 자산이 한 프로젝트 안에서 관리되도록 정리한다.
• 사이트 제작 전에 업종, 브랜드 톤, 필요한 섹션, 제외할 기능, 애니메이션 강도, 기술 스택을 brief로 작성한다.
• Dribbble, Awwwards, Pinterest 등에서 원하는 분위기의 참고 화면 3~5개를 모아 Claude에 디자인 방향성 자료로 제공한다.
• Claude에게 바로 제작을 시키기보다 clarifying questions를 먼저 요청해 사이트 구조와 스타일 결정을 확정한다.

❓ 열린 질문

• 이 워크플로우를 실제 클라이언트 프로젝트에 적용할 때, AI가 만든 디자인·카피·이미지 자산의 저작권과 상업적 사용 조건은 어떻게 검토해야 할까?
• 정적 단일 페이지 사이트로 충분한 프로젝트와 React 같은 프레임워크가 필요한 프로젝트를 나누는 실무 기준은 무엇으로 잡아야 할까?
• “비싸 보이는” 미세 모션과 “과하게 시끄러운” 애니메이션을 구분하기 위한 평가 기준은 어떻게 만들 수 있을까?