워드프레스 & 엘리멘터 사이트 전체를 15분 만에 Astro Islands로 포팅함 (100% 바이브 코딩)
Ported an Entire WordPress & Elementor Site to Astro Islands in 15 Minutes (100% Vibe Coding)
핵심 요약
AI 에이전트를 활용해 복잡한 워드프레스 사이트를 Astro 기반의 정적 사이트로 15분 만에 성공적으로 마이그레이션한 사례.
- AI 마이그레이션 — 워드프레스 SQL 덤프와 에셋을 분석해 Astro 기반으로 자동 변환함.
- 성능 최적화 — 무거운 플러그인 대신 가벼운 React Astro Islands를 사용하여 로딩 속도를 개선함.
- 배포 자동화 — CI/CD와 Cloudflare Edge를 연동해 서버 유지보수 비용을 0으로 만듦.
- 바이브 코딩 — 복잡한 코딩 과정 없이 AI 에이전트에게 프롬프트 하나로 전체 사이트를 구축함.
폴더에 처박혀 있던 옛날 워드프레스/엘리멘터 사이트 cPanel 백업본이 하나 있었음:
• 3.7MB짜리 날것 그대로의 MySQL 덤프 파일 (softsql.sql)
• 업로드된 이미지 300개 가까이 (wp-content/uploads/)
• 엘리멘터 숏코드, 직렬화된 데이터, 테마 파일들이 뒤섞인 개판 오분 전 상태
보통 이런 거 수동으로 옮기려면 워드프레스 관리자 페이지에서 텍스트 복사하고, 이미지 경로 일일이 찾고, 슬라이더랑 플립 박스 다시 코딩하고, 최신 툴 세팅하고, 호스팅 연결하느라 며칠은 그냥 날려 먹는 악몽이 펼쳐짐.
그래서 그냥 AI 에이전트 하나 써서 '바이브 코딩'으로 어디까지 가능한지 테스트해 보기로 함.
내가 던진 프롬프트는 딱 이거임:
│ "do a complete port of this website using astro js and make custom astro islands"
──────
에이전트가 한 일 (난 코드에 손도 안 댐)
-
파이썬 스크립트 즉석에서 짜서 SQL 덤프 역공학
MySQL 데이터베이스를 띄우지도 않았음. 그냥 파이썬 스크립트를 짜서 softsql.sql을 파싱하더니, 엘리멘터의 직렬화된 JSON 트리(_elementor_data)를 이스케이프 해제하고 모든 페이지(홈, 회사 소개, 제품, 갤러리, 왜 우리인가, 대량 주문, 연락처, 개인정보 처리방침)를 다 뽑아냄. 문구, 기술 사양, 대표 인사말, 주소, 카탈로그 항목까지 싹 다 긁어옴. -
이미지 290개 이상 자동 정리 및 매핑
wp-content/uploads/에 있던 미디어 파일을 전부 Astro의 public/images/로 옮기고, 모든 제품이랑 갤러리 항목을 TypeScript 데이터 구조로 깔끔하게 매핑함. -
무거운 WP 플러그인을 커스텀 React Astro Islands로 교체
메가바이트 단위의 jQuery랑 엘리멘터 런타임 스크립트를 갖다 버리고, 가볍고 독립적인 인터랙티브 컴포넌트를 새로 짬:
• 히어로 캐러셀 (client:load): 켄 번즈 줌 효과, 터치 스와이프, 자동 재생, CTA 배너.
• 통계 카운터 (client:visible): 스크롤 내리면 숫자 올라가는 애니메이션.
• 3D 플립 카드 (client:visible): 모바일 터치랑 데스크탑 호버 지원하는 3D 카드.
• 제품 카탈로그 & 퀵 뷰 (client:load): 카테고리 필터 탭, 검색창, 사이즈 선택 가능한 상세 모달 팝업.
• 갤러리 라이트박스 (client:load): 키보드 조작이랑 줌 기능이 포함된 전체 화면 메이슨리 갤러리.
• B2B 대량 견적 계산기 (client:visible): 수량별 단가 계산, 옵션 선택, WhatsApp 문의 생성 기능.
• 연락처 폼 & 플로팅 WhatsApp 위젯 (client:idle): 초기 로딩 속도에 영향 안 주는 반응형 폼 검증 및 채팅 팝업.
- CI/CD 및 Cloudflare Edge 배포 세팅
배포 권한만 줬더니 에이전트가 알아서 함:
• 깃 저장소 생성하고 자동 배포 워크플로우 구성
• Cloudflare Pages 프로젝트 새로 생성
