[영상] yt-dlp refreshed report

클로드 코드로 수백만 원짜리 웹사이트 제작 과정 총정리

Claude Code로 피부과 홈페이지를 만드는 전 과정을, 디자인 스킬 설치부터 레퍼런스·이미지/영상·모바일·GitHub/Vercel 배포까지 실제 화면 흐름 중심으로 정리합니다.

재작성 요약

핵심은 “홈페이지 만들어줘” 한 번으로 끝내지 않고, 디자인 기준을 주고 화면을 보며 계속 개선하는 루프입니다. 영상은 피부과 랜딩페이지를 예시로 Claude Code가 만든 초안을 점수화하고, 이미지/영상과 21st.dev 효과, Pretendard 폰트, 모바일 점검, Vercel 배포까지 연결합니다.

대상 독자

코딩은 익숙하지 않지만 랜딩페이지, 병원/1인사업 홈페이지, 포트폴리오 사이트를 빠르게 만들고 싶은 사람. 특히 Claude Code로 결과물을 실제 배포까지 해보고 싶은 초보자에게 맞습니다.

이번 판은 단순 자막 요약이 아니라, 최신 yt-dlp로 실제 mp4를 내려받고 프레임을 추출해 화면 흐름을 확인한 뒤 다시 쓴 버전입니다.

프레임으로 확인한 실제 화면 흐름

프레임상으로는 검은 배경의 강의 슬라이드, Claude Code/VS Code 편집 화면, 피부과 홈페이지 미리보기, 이미지 생성/보정 화면, 21st.dev 컴포넌트 탐색, Vercel 배포 대시보드가 순서대로 확인됩니다. 단순 말 설명이 아니라 실제 브라우저와 개발 도구를 오가며 만드는 구성입니다.

16개 프레임 접촉시트

대표 프레임

영상 프레임 01
프레임 01
영상 프레임 02
프레임 02
영상 프레임 03
프레임 03
영상 프레임 04
프레임 04
영상 프레임 05
프레임 05
영상 프레임 06
프레임 06
영상 프레임 07
프레임 07
영상 프레임 08
프레임 08

타임라인/진행 흐름

00:00
Claude Code로 외주급 홈페이지를 만들겠다는 목표와 AI 티 나는 홈페이지 문제 제기
03:00
Frontend Design과 UI/UX Pro Max 스킬 설치
04:30
Dribbble/Awwwards 레퍼런스와 피부과 무드 지정
06:00
Next.js/Tailwind 기반 초안 생성 및 브라우저 확인
07:30
8가지 기준으로 결과를 평가시키고 개선안 적용
09:00
인물 이미지와 영상 소재 생성·보정·삽입
10:30
21st.dev 효과 적용
12:00
섹션별 디테일, 의료광고법, 폰트, 모바일 최적화
15:00
GitHub 저장소 업로드와 Vercel 배포

영상에서 실제로 보여준 것 vs 말로 권장한 것

시연/화면 확인

  • 피부과 랜딩페이지처럼 보이는 완성 화면과 브라우저 미리보기
  • Frontend Design/UI UX Pro Max 설치 안내 화면
  • Claude Code/VS Code에서 수정 요청을 넣고 코드가 바뀌는 화면
  • 인물 이미지와 16:9 영상 소재를 히어로 섹션에 넣는 흐름
  • 21st.dev에서 스크롤/이미지 효과를 고르는 화면
  • GitHub 저장소 업로드와 Vercel 프로젝트 배포 화면

언급/권장/설명란 근거

  • 실제 사업용이면 병원 내부 사진·대표 사진·시술 사진 품질이 중요하다는 조언
  • 한국 의료광고법 위반 표현을 Claude Code에 1차 점검시키라는 권장
  • 로그인, 회원가입, 상담 폼, 메일 연동 같은 고급 기능은 별도 강의로 안내
  • 수백만 원 외주급이라는 표현은 마케팅 주장에 가깝고 실제 검수는 별도 필요

바로 적용할 실행 체크리스트

  1. 디자인 스킬을 먼저 설치하고 프로젝트에 적용한다
  2. 레퍼런스 이미지를 Claude Code에 주고 원하는 무드를 구체화한다
  3. 초안 생성 후 8가지 기준으로 자가 평가를 시킨다
  4. 히어로 이미지는 실제 사진 또는 고품질 생성 이미지/영상으로 교체한다
  5. 모바일 화면과 의료광고 표현을 마지막에 확인한다
  6. GitHub에 올리고 Vercel로 공개 배포한다
실무 판단: 빠른 랜딩페이지 제작 루프를 배우기에는 좋지만, 실제 상업용 홈페이지는 브랜드 카피, 실제 촬영 이미지, SEO, 접근성, 속도, 법률 검토까지 추가해야 합니다.

설명란/자세히 보기 반영

영상 주인이 설명란에 적은 도구, 링크, 챕터/주장까지 요약에 반영했습니다.

설명란 원문 일부

#ai꿀팁 #클로드코드 #클로드 #바이브코딩 #ui디자인 아직도 홈페이지 만드는데 외주비 수백만원 아직도 쓰고 계세요? 이제 코딩 1도 몰라도 AI (클로드)로 홈페이지 직접 만들 수 있습니다. 이 영상 하나로 기획부터 디자인, 배포까지 전 과정을 무료로 끝내는 방법을 알려드립니다. 🛠️ 사용 스킬 Frontend Design 스킬 : https://github.com/anthropics/skills/tree/main/skills/frontend-design UI/UX Pro Max 스킬: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill 🛠️ 사용 도구 21st.dev : https://21st.dev/ Vercel: https://vercel.com GitHub: https://github.com #AI홈페이지 #랜딩페이지 #1인사업 #노코드 #웹페이지만들기 #Vercel #무료홈페이지

영상 ID: RaIjKG_ENIU. 로컬 작업 폴더: /tmp/video-refresh-20260625/claude-code-website-build-20260625. 공개 페이지에는 영상 원본 파일을 올리지 않고, 요약용 프레임 이미지만 포함했습니다.