콘텐츠로 이동
Jono Catliff 채널 노트

How I Built INSANE WordPress Websites In 20 Minutes (Claude Code)

원본 영상: How I Built INSANE WordPress Websites In 20 Minutes (Claude Code)

한 줄 요약

섹션 제목: “한 줄 요약”

Claude Design에서 디자인 시스템을 만들고, Nova Mira로 WordPress와 연결한 뒤, Claude Code로 커스텀 PHP 페이지·편집 가능 블로그·on-page SEO까지 원샷 자동화한다.

핵심 내용

섹션 제목: “핵심 내용”
  1. 디자인 시스템 추출 — 기존 WordPress 사이트 스크린샷을 Claude Design에 업로드하면 색상·폰트·버튼·간격 등 브랜드 요소를 자동 추출해 재사용 가능한 디자인 시스템으로 저장한다.
  2. 레이아웃 레퍼런스 확보 — Dribbble에서 원하는 구조의 사이트 이미지를 찾아 Claude Design에 첨부하면 해당 레이아웃과 브랜드킷을 결합한 고품질 프로토타입을 생성한다.
  3. WordPress 연결 — Nova Mira 플러그인을 WordPress에 설치하고 앱 패스워드를 생성한 뒤, 생성된 연결 명령어를 Claude Code에 붙여 넣어 단방향 제어 채널을 구성한다.
  4. 페이지 이식 — Claude Design의 “hand off to Claude Code” 기능으로 명령어를 복사하고, “custom PHP로 픽셀 퍼펙트 복제” 지시를 추가해 WordPress 신규 페이지로 업로드한다.
  5. 편집 가능 페이지 — Elementor + Hello 테마를 한 번의 프롬프트로 설치·구성하고, 같은 디자인 시스템 기반의 블로그 포스트를 Gutenberg와 Elementor 두 가지 버전으로 생성한다.
  6. 블로그 품질 향상 — humor.md, tone.md 파일에 자신의 문체 샘플을 입력하면 Claude Code가 스타일을 해석해 이후 모든 블로그에 적용하며, on-page SEO(내부/외부 링크, 키워드 최적화)도 동시에 자동화한다.

전술·요소

섹션 제목: “전술·요소”
방식예상 품질편집 방법적합 용도
커스텀 PHP9~10/10Claude Code 프롬프트로만 수정클라이언트 납품용 완성 페이지
Gutenberg7~8/10WordPress 에디터에서 직접 편집블로그 포스트
Elementor4~5/10드래그앤드롭 편집팀/클라이언트가 직접 수정 필요한 경우
  • Claude Code로 텍스트 변경 시 섹션 이름이나 인접 요소를 자연어로 지칭하면 자동 인식
  • humor.md에 자신의 실제 글 발췌문을 붙여 넣으면 Claude가 유머 패턴을 디코딩해 파일에 저장

수치·사례

섹션 제목: “수치·사례”
  • (본인 경험) 동급 사이트를 수동으로 제작하면 보수적으로 5시간, 실제로는 10시간 소요 → Claude Code로 10~20분
  • Gutenberg one-shot 블로그 완성도: 7~8/10 (진행자 평가, 추가 프롬프트 없음)
  • Elementor one-shot 블로그: 4~5/10 (추가 편집 시 개선 가능)

도구·워크플로

섹션 제목: “도구·워크플로”
  • Claude Design — 디자인 시스템 생성 및 고충실도 프로토타입 제작; 무료 대안으로 Google Stitch 언급
  • Dribbble — 무료 레이아웃 레퍼런스 소스
  • VS Code + Claude Code 확장 — 코딩 워크스페이스 (영상 촬영 후 Antigravity의 Claude Code 접근이 차단되어 VS Code를 대안으로 안내)
  • Nova Mira (novamira.ai) — WordPress 플러그인; Claude Code → WordPress 단방향 제어, 페이지·포스트·플러그인·테마 조작 가능
  • Elementor + Hello 테마 — 편집 가능 페이지 빌더; 관련 무료 애드온 플러그인 일괄 설치

프롬프트 패턴

  • 디자인 생성: "build a beautiful one-page website for [브랜드], pull brand kit from design system attached, pull layout from [Dribbble 이미지]"
  • WordPress 이식: "copy the Claude Design website and upload into a new WordPress page using custom PHP, pixel for pixel clone"
  • 내비게이션/푸터: "update WordPress to add Hello theme and Elementor, copy Claude Design branding to create a navigation bar and footer for all pages"
  • 블로그 SEO: "update this blog post with humor.md, make it fun and lighthearted, do all on-page SEO, include internal and external links, rank for [키워드]"