바이브 코딩을 넘어: Claude Code로 구축하는 워드프레스 매거진 사이트
전문 교육 저널과 같은 프로젝트에서는 매번 커스텀 코딩이 필요한 것은 아닙니다. Next.js나 Supabase 같은 복잡한 프레임워크에 뛰어들기보다, 워드프레스를 구축하는 것이 훨씬 현명한 선택일 때가 많습니다. 관리자 대시보드, SEO 플러그인, 미디어 라이브러리, REST API가 기본으로 제공되기 때문이죠. PHP나 워드프레스 경험이 전무한 인프라 전문가인 필자는 Claude Code CLI를 활용해 VPS를 프로비저닝하고 모든 커스터마이징 작업을 처리했습니다.
목표는 히어로 섹션, 기사 그리드, 검색 기능, 카테고리별 섹션을 갖춘 미니멀리스트형 블로그였습니다. 개발 비용은 0달러. 결과는 단 이틀 저녁 만에 완성된 완벽하게 작동하는 MVP였습니다.
인프라 구축
스택: Ubuntu VPS, 캐싱 적용 Nginx, PHP 8.3(FPM), MySQL 8.0, GeneratePress 테마. Claude Code는 다음 작업을 위한 SSH 명령어를 자동으로 생성했습니다.
- 패키지 설치 및 PHP-FPM 구성
- SSL(Let's Encrypt), 방화벽(UFW), Fail2ban이 적용된 Nginx 설정
- SEO 친화적 퍼머링크가 적용된 워드프레스 배포 및 사이트맵/SEO 관리를 위한 Rank Math 설치
워크플로우는 이렇습니다. 자연어로 작업 정의 → AI가 스크립트 작성 → 검토 및 반복. 반복적인 작업에서 수 시간을 절약할 수 있지만, 수동 검증은 절대 건너뛸 수 없는 필수 단계입니다.
mu-plugins를 통한 커스터마이징
총 12개의 mu-plugins가 홈페이지의 모든 로직을 담당했습니다. AI에게 입력한 프롬프트 예시:
- 고정 게시물이 표시되는 히어로 섹션과 최신 기사용 3단 그리드 구성
- 하드코딩된 HTML 대신
get_terms()를 활용한 동적 카테고리 블록 - 헤더 검색 기능 통합, 사이드바 제거 및 기사 카드 호버 효과 적용
직면한 문제와 해결 방안:
- 워드프레스 코어 스타일이 커스텀 CSS를 덮어씀 → 우선순위 999의
mu-plugin배포로 해결 - 모바일 환경에서 그리드 깨짐 현상 → 패딩 값 세밀 조정 및 미디어 쿼리 최적화
- 카테고리 슬러그 변경 시 문제 발생 → 하드코딩된 값 대신 동적 쿼리 방식으로 전환
디자인 선택: Inter 폰트, 은은한 드롭 섀도우가 적용된 흰색 카드, 완전 반응형 레이아웃. AI는 "마우스 오버 시 그림자를 추가하고 카드를 살짝 띄워주세요" 같은 자연어 프롬프트를 바탕으로 CSS를 생성했습니다.
반복적 AI 워크플로우
일반적인 작업 주기는 다음과 같습니다.
- 명확한 작업 정의 ("3단 그리드, 패딩 20px")
- AI가 PHP/CSS 생성 (초안 정확도 약 80%)
- 브라우저에서 테스트
- 버그 보고 ("모바일에서 텍스트가 가장자리에 닿음")
- 수정 반복 (기능당 2~4회)
AI 활용 시 주의할 한계점:
- 렌더링된 화면을 직접 볼 수 없음 → 상세 설명이나 스크린샷 제공이 필수
- 데이터베이스 변경 사항을 추적하지 못함 → 동적 요구사항을 명시적으로 전달해야 함
- 수정 작업이 인접 코드를 손상시킬 수 있음 → 파일 덮어쓰기 시 철저한 버전 관리 필요
핵심 교훈
- 비전문가에게 높은 투자 수익률: AI가 워드프레스 API(훅, 필터)의 지식 격차를 메꿔주어, 문서 읽기에 수주를 허비할 필요가 없습니다.
- 반복 작업은 필수: 작업당 2~4회 사이클을 예상해야 하지만, 깊은 기술 스택 전문성은 요구되지 않습니다.
- 기초 지식은 여전히 필요: 프롬프트 엔지니어링과 결과 검증에는 Nginx, SQL, CSS에 대한 기본 이해가 필수적입니다.
- MVP 중심 접근: 빠른 프로토타이핑과 CMS(워드프레스, Shopify 등) 커스터마이징에 이상적입니다.
- 보안은 수동으로 관리: 명시적으로 요청하지 않는 한 AI는 속도 제한이나 CSRF 보호 기능을 구현하지 않습니다.
이 방식을 도입해야 할 때
다음과 같은 경우에 가장 적합합니다.
- 엄격한 운영 SLA가 필요 없는 프로토타입 및 MVP
- 낯선 기술 스택에서 익숙한 플랫폼을 커스터마이징할 때
- 1인 개발자 또는 소규모 팀
다음과 같은 경우에는 권장하지 않습니다.
- 엔터프라이즈급 보안이 필수적인 핵심 업무 시스템
- 기술적 배경이 전혀 없는 사용자
- 적절한 QA 감독이 부재한 복잡한 아키텍처
주요 지표: 주말 2회(각 3~4시간), 월 약 7달러 VPS, CSS 약 600줄 + mu-plugins 12개, Claude 구독료 포함.
— Editorial Team
아직 댓글이 없습니다.