7 Techniques That Make Claude Code Websites Look $10,000

원본 영상: 7 Techniques That Make Claude Code Websites Look $10,000

한 줄 요약

Claude Code에 올바른 지시, 레퍼런스 클로닝, Tailwind/Shadcn, 그라디언트 배경, 애니메이션, 3D 그래픽, 폰트, 스크린샷 반복 수정을 조합하면 AI 생성 티가 나지 않는 고급 웹사이트를 만들 수 있다.

핵심 내용

CLAUDE.md 파일 설정 — 프로젝트마다 Claude.md에 “시니어 UI 디자이너 겸 프론트엔드 개발자처럼 행동하라”는 지시문을 넣는다. Claude는 이 역할에 맞게 결과물을 낸다.
레퍼런스 사이트 클로닝 — Railway, Dribbble 등 마음에 드는 사이트를 찾아 스크린샷을 찍고, “이 URL을 분석해 HTML/CSS를 클론하라”는 프롬프트와 함께 전달한다. Claude는 시각적으로도 참고할 수 있도록 스크린샷을 함께 첨부할 때 더 정확한 결과를 낸다.
Tailwind CSS + Shadcn-ui 사용 — Tailwind는 저수준 스타일링(패딩, 컬럼 등), Shadcn은 재사용 가능한 컴포넌트 라이브러리(아코디언, 아바타, 버튼 등)를 제공한다. 두 가지를 함께 쓰도록 프롬프트에 명시한다.
그라디언트 배경 — 단색 배경 대신 radial gradient로 보라, 파랑, 핑크, 틸 계열의 흐릿한 원들을 페이지 곳곳에 배치한다. 미니멀한 레이아웃에도 질감과 완성감을 준다.
애니메이션 — GSAP + Framer Motion — GSAP는 스크롤 시 요소가 날아 들어오는 효과를 담당하고, Framer Motion(motion.dev)은 hover 시 버튼 확대나 토글 슬라이드 같은 인터랙션을 처리한다. hover 확대는 300ms 딜레이로 부드럽게 적용한다.
3D 그래픽 — Spline + Three.js — Spline(spline.design)은 커뮤니티 탭에서 무료 3D 에셋을 remix해 불필요한 텍스트를 삭제한 뒤 코드 익스포트 링크를 Claude에 붙여넣는다. Three.js는 CTA 섹션 등 특정 영역의 배경 3D 그래픽에 활용한다. Spline 그래픽 경계는 투명→배경색 그라디언트를 덮어 자연스럽게 이어붙인다.
Google Fonts 타이포그래피 — 헤더용과 본문용으로 폰트를 분리한다. Google Fonts에서 원하는 폰트를 찾아 이름을 Claude에 전달하거나, Claude에게 사이트에 어울리는 폰트를 직접 고르게 해도 된다.
스크린샷 기반 반복 수정 — 텍스트로 설명하기 어려운 레이아웃 변경은 해당 섹션 스크린샷을 찍어 첨부하고, 원하는 변경 사항만 설명한다. (예: 단일 이미지 → 4×4 그리드)

전술·요소

기법	도구/방법	핵심 포인트
역할 지시	CLAUDE.md	”시니어 UI 디자이너 + 프론트엔드 개발자” 명시
클로닝	URL + 스크린샷 첨부	HTML/CSS 자동 분석
스타일링	Tailwind CSS	저수준 레이아웃
컴포넌트	Shadcn-ui	재사용 가능 UI 블록
배경	Radial gradient	여러 색상 원, blur 처리
스크롤 애니메이션	GSAP	요소 fly-in 효과
인터랙션	Framer Motion	hover 확대 300ms, 토글 슬라이드
3D 배경	Spline	커뮤니티 에셋 remix → 코드 익스포트 링크
3D 섹션	Three.js	CTA 등 특정 섹션 배경
폰트	Google Fonts	헤더/본문 분리, 무료
수정	스크린샷 + 설명	텍스트 묘사보다 정확

도구·워크플로

spline.design — 무료 계정 필요. Community 탭 → 에셋 선택 → Remix → 불필요 텍스트/오브젝트 삭제 → Export → Code 링크 복사 → Claude 프롬프트에 붙여넣기
프롬프트 패턴: [사이트 URL]을 방문해 분석하고 클론하라 + 스크린샷 첨부
폰트 프롬프트 패턴: Google Fonts에서 선택한 폰트명을 명시하거나 “이 사이트에 어울리는 폰트를 직접 골라라”로 위임
수정 프롬프트 패턴: 문제 섹션 스크린샷 + 원하는 변경 내용 한 줄 설명