2,500달러 대신 0달러로 워드프레스 이커머스 사이트를 재설계한 방법 [정확한 작업 흐름 + 프롬프트]

제 WooCommerce 스토어는 마치 2019년의 모습 같았습니다. 어두운 헤더, 아무도 기억하지 못하는 색상 조합, 테마에서 남겨진 데모 콘텐츠, 그리고 사람들이 구매하는 제품 대신 가장 새로운 제품을 보여주는 쇼핑 영역이었습니다.

워드프레스 디자이너가 이를 수정하는 데 청구할 금액은 최소 2,500달러였고, 몇 주에 걸친 오가며 주고받는 작업이 필요하다는 것을 대략 알고 있었습니다.

그래서 저는 다른 방법을 시도해 보기로 했습니다. 터미널에서 Claude Code (Opus 5.5)를 열고, 이를 Claude-in-Chrome 확장 프로그램에 연결한 다음, 로그인된 브라우저의 라이브 사이트에서 작업하도록 했습니다. 스테이징(staging) 사이트는 없었습니다. 모든 것이 프로덕션(production) 환경에서 한 번에 승인된 변경 사항을 거쳐 진행되었습니다.

2주 후, 이 시스템은 108개의 변경 사항을 만들었으며, 그 모든 것은 되돌릴 수 있는 방법과 함께 기록되었습니다. 저의 시간 투입량은 약 10시간이었고, 대부분은 제안 내용을 읽고 예/아니오를 말하는 데 사용되었습니다. 추가 지출 비용: 0달러. 저는 이미 코딩 작업에 대해 Claude를 비용으로 지불하고 있으며, 만약 직업적으로 무언가를 구축한다면 여러분도 Claude Code나 이와 유사한 것을 가지고 있을 가능성이 높습니다.

이 글은 워드프레스 또는 WooCommerce 사이트에서 동일하게 수행할 수 있도록 단계별 작업 흐름과 복사 가능한 프롬프트를 제공합니다. 또한 잘못되었던 네 가지 사항과 제가 다르게 할 것들까지 다룹니다.

준비물

터미널에 설치된 Claude Code (해당 기능이 포함된 플랜 필요).
워드프레스에 로그인한 Chrome 프로필에 설치하는 The Claude-in-Chrome 확장 프로그램. claude --chrome으로 Claude Code를 시작하거나, 세션 내에서 /chrome을 입력하여 연결합니다.
해당 Chrome 프로필에 이미 로그인된 워드프레스 사이트의 관리자 로그인 정보.
Code Snippets 플러그인 (무료). 작은 PHP 변경 사항은 functions.php를 수정하는 대신, 한 번의 클릭으로 끌 수 있는 이름 지정 스니펫(named snippets)에 넣습니다.
프로젝트용 컴퓨터 내 빈 폴더. Claude가 여기에 메모, 백업, 스크립트 및 변경 로그를 보관합니다.
시작하기 전에 호스팅 업체나 백업 플러그인을 이용한 사이트 전체 백업. 또한 테마 옵션에 내보내기 버튼이 있다면 해당 내용도 내보냅니다.

스테이징 서버, FTP, 새로운 유료 플러그인은 필요 없습니다.

사이트에 맞게 조정하기

쇼핑몰 기능이 없는 블로그 또는 콘텐츠 사이트인가요? 5단계, 6단계, 8단계를 건너뜁니다.
Elementor, Divi 또는 다른 빌더를 사용하나요? 동일한 작업 흐름을 따릅니다. Claude에게 해당 빌더 자체 위젯으로 구축하도록 지시합니다.
아직 히트맵 도구가 없나요? 7단계에서 읽을 데이터가 있도록 시작하기 1~2주 전에 Microsoft Clarity (무료)를 설치하세요.

0단계: 먼저 기본 규칙 작성하기

이 단계 덕분에 나머지 과정이 안전해졌습니다. Claude가 어떤 것을 건드리기 전에, 저는 규칙들을 제공하고 세션 간에도 유지되도록 그 기억에 저장하도록 요청했습니다.

We're redesigning my live WordPress + WooCommerce site at <your URL>.
There is no staging site, so these rules apply to every change:

...

규칙 5는 프로젝트 이후의 사항에 관한 것입니다. 사용자 정의 HTML로 만들어진 페이지는 제목을 변경하고 코드를 열어야 할 때까지는 멋져 보입니다. 하지만 테마 자체 요소로 구축된 페이지는 약간 덜 커스터마이징되어 보일 수 있지만, 직접 유지 관리가 가능합니다.

1단계: 모든 것을 감사(Audit)하고 아무것도 바꾸지 않기

사이트 전체를 감사(Audit)해 주세요. 브라우저를 이용해 홈페이지, 쇼핑 페이지, 제품 페이지 3개, 장바구니, 결제 페이지, 문서 또는 블로그, 그리고 사이트맵의 404 오류 페이지에 방문해 주세요. 다음 사항들을 확인해 주세요:
...

오래된 웹사이트에서 발견될 가능성이 높은 것들:

테마 데모 잔여물: 데모 로고, 결제 페이지의 샘플 전화번호, 푸터나 팝업에 있는 플레이스홀더 텍스트. 제 사이트에서는 200개가 넘는 문서 페이지에서 깨진 데모 로고가 표시되고 있었습니다.
데이터베이스 또는 호스팅 마이그레이션 후 물음표(?)로 변한 이모지: 제목, 제품 설명, 심지어 버튼 레이블에서도 발견됩니다.
오래된 게시물과 문서의 404 링크: 삭제하거나 이름을 바꾼 페이지를 가리키고 있습니다.
페이지 캐시 부재 및 느린 서버 응답.
트래픽이 발생하는 페이지의 빈 메타 설명(meta descriptions).

이 중 어느 것도 찾기 어렵지 않습니다. 우리 대부분은 그저 앉아서 자세히 살펴본 적이 없을 뿐입니다.

2단계: 감사를 단계별 계획으로 전환하기

감사 내용을 단계별 계획으로 만드세요. 1단계: 안전한 수정(오탈자, 깨진 링크, 데모 잔여물). 2단계: 전역 디자인(로고, 헤더, 글꼴, 색상, 푸터). 3단계: 주요 페이지. 4단계: 쇼핑 및 결제.
...

단계를 거치면 검토 세션을 짧게 유지할 수 있습니다. 위험도가 낮은 변경 사항부터 시작하여 큰 작업이 일어나기 전에 승인-확인-기록(approve-check-log) 루틴에 익숙해지게 됩니다.

3단계: 전역 디자인 (로고, 헤더, 글꼴, 푸터)

새로운 모습을 제안하세요: 단순한 텍스트 로고 + 파비콘, 흰색 헤더, 두 개의 Google Fonts(제목용 하나, 본문용 하나), 그리고 하나의 메인 색상으로 구성된 색상 팔레트. 다음을 보여주세요: 이전/이후 스크린샷...

Claude는 SVG로 로고를 그리고 PNG와 파비콘을 모든 크기로 내보내는 작은 스크립트를 작성했습니다. 그것은 이 파일들을 업로드하고 테마 옵션에 설정한 다음, 헤더, 글꼴, 색상, 푸터를 변경했습니다.

각 설정 그룹에 대해 이전 값 옆에 새 값을 기록했기 때문에, 누구든 1분 만에 되돌릴 수 있습니다.

페이지 빌더 테마에서는 단일 팔레트 색상이 사이트의 모든 경계선과 구분선을 제어하는 경우가 많습니다. 이 색상을 한 가지 목적으로 변경하면 선들이 사방에서 색이 바뀝니다. 전역 색상을 변경하기 전에, Claude에게 그것을 사용하는 모든 옵션을 나열해 달라고 요청하세요.

4단계: 중요한 페이지들을 초안(DRAFT)으로 먼저 재구축하기

새로운 홈페이지를 공개가 아닌 DRAFT 페이지로 만드세요. 테마의 빌더 요소만 사용하세요. 섹션 구성: 명확한 행동을 유도하는 히어로 영역, 베스트셀러 제품, 증거(실제 수치 + 실제 리뷰), 최신 상품...

'초안 우선' 습관은 라이브 페이지가 절대로 반쯤 완성된 상태로 남지 않게 합니다. 제가 승인했을 때, Claude가 프론트 페이지 설정을 변경하고 이전 홈페이지는 계속 게시된 상태로 두었기 때문에 롤백(rolling back)이 단 한 번의 드롭다운 메뉴로 가능했습니다.

다음으로 처리할 두 가지 페이지:

실제 리뷰를 활용한 리뷰 페이지. 마켓플레이스에서 판매하거나 Google 또는 Trustpilot 리뷰가 있다면, Claude에게 그것들을 읽게 하고 가장 좋은 구절을 원문 그대로 가져오되, 리뷰 작성자의 이름과 제품명을 함께 포함하도록 하세요. 실제 인용구는 스스로 작성하는 어떤 추천사보다도 강력합니다.

트래픽이 유입되는 페이지. 종종 홈페이지가 아닐 때가 많습니다. 7단계에서 그것을 찾는 방법을 보여줍니다.

5단계: 하나의 템플릿으로 제품 이미지 만들기

모든 제품에 일관된 제품 이미지를 만드세요: 1200×1200, 동일한 레이아웃, 제품 아이콘, 짧은 혜택 문구 하나. 제가 한 번 디자인을 변경하고 모든 이미지를 재구축할 수 있도록 스크립트로 작성해 주세요. 3가지 예시를 보여주세요...

'그리고 모든 변형(variation)'이라는 부분은 흔한 WooCommerce 버그를 잡아냅니다. 변형 제품의 경우, 각 변형이 자체적인 이전 이미지 사본을 가질 수 있으며, 이 사본이 제품 페이지에서 새로운 대표 이미지를 덮어씁니다. 나중에 로그아웃된 상태로 상점을 확인하여 새 이미지들만 표시되는지 확인하도록 Claude에게 요청하세요.

이미지가 스크립트에서 나오기 때문에, 나중에 디자인을 변경하는 것은 몇 분밖에 걸리지 않습니다: 텍스트 줄 하나를 추가하거나, 라벨을 추가하고, 재구축하고, 다시 업로드하기만 하면 됩니다.

6단계: 상점(돈이 되는 곳) 고치기

Review /shop/ 페이지에서 전환(conversion) 문제를 확인하세요. 정렬 순서를 실제 판매 데이터와 비교하고, 페이지당 제품 수, 가격 표시 방식, 버튼, 배지, 필터 등 콘텐츠를 덮는 모든 요소를 점검해야 합니다. 쇼핑몰이...

'베스트셀러 우선'으로 변경하기 전에 Claude가 판매 카운터를 WooCommerce Analytics와 대조해 본 결과, 세 개의 손상된(corrupted) 카운터를 발견했습니다. 두 제품은 각각 9,223,372,036,854,775,807건의 판매를 기록하고 있었습니다. 이는 64비트 정수(integer)가 가질 수 있는 최대 숫자이며, 이 두 제품이 모든 인기순 정렬에서 상위에 위치했을 것입니다. 정렬 기준으로 삼기 전에 카운터를 확인하세요.

일반적으로 쇼핑몰 개선을 위해 요청해야 할 사항들:

실제 인기도 순으로 정렬하고, 30개 미만의 제품이 있다면 모든 제품을 한 페이지에 표시하여 베스트셀러가 2페이지로 숨겨지지 않게 합니다.
구매자가 생각하는 카테고리별로 그리드 상단에 필터 탭을 만듭니다.
가격 아래에 '판매된' 수량을 표시하되, 신뢰할 만한 임계값(threshold)을 넘는 경우에만 표시합니다.
일반적인 'Sale!' 배지 대신 실제 할인율('Save 15%')을 사용하고, 가격 범위 대신 'From $49'와 같이 표시합니다.
잊고 지나간 숨겨진 제품들. 번들 상품이 흔한 예시입니다.
장바구니에서 총액 아래에 교차 판매(cross-sells) 항목을 배치하여 '결제하기(Proceed to checkout)' 버튼이 화면 밖으로 밀려나지 않게 합니다.

각 항목별로 독립적으로 켜고 끌 수 있는 작은 이름표 형태의 스니펫으로 요청하세요.

7단계: 히트맵(heatmaps)을 읽어보세요

Microsoft Clarity, Hotjar 등 유사한 도구를 사용한다면, Claude에게 브라우저에서 분석하도록 시키세요.

지난 30일간의 Clarity 대시보드를 열어주세요. 상위 진입 페이지(top entry pages), 데드 클릭(dead clicks), 레이지 클릭(rage clicks), 팝업 클릭, JavaScript 오류 및 성능 점수를 보고해 주세요. 그런 다음 상위 5개 진입 페이지에 대한 히트맵을 열어주세요...

찾아봐야 할 패턴들:

가장 중요한 랜딩 페이지. 이 페이지가 제 역할을 하는지 확인해 보세요. 저의 경우 몇 년 동안 손대지 않은 페이지였는데, 홈페이지보다 더 많은 방문자를 얻고 있었지만 내용물은 거의 없었습니다.
클릭을 방해하는 팝업. 저희 상점에서는 모든 클릭 중 약 3분의 1이 사람들이 팝업을 닫는 데 쓰였습니다. 저는 그날 바로 할인 팝업을 껐습니다.
순위는 높지만 깨져 보이는 아카이브 및 태그 페이지. 구글은 사람들을 그곳으로 보내는데, 아무도 확인하지 않습니다.
링크라고 기대하는 텍스트에 대한 데드 클릭(Dead clicks).

아무것도 변경하기 전에 지난 30일간의 주문 건수와 매출을 기록해 두세요. 그래야 무엇이 효과가 있었는지 알 수 있습니다.

8단계: 결제 과정 및 직접 처리할 부분

고객 입장에서 구매 흐름(구매 제품 페이지, 장바구니 담기, 장바구니, 결제)을 따라가 보세요. 실제로 주문하지는 마세요. 단계를 세고 필요한 필드를 확인하고, 구매자의 진행을 늦추는 부분이 있다면 표시하세요.
...```

단계와 필수 입력 필드의 개수를 세어보세요. 많은 테마들이 결제를 여러 탭으로 분할하며, 디지털 제품의 경우 주소나 전화번호가 필요하지 않은 경우가 많습니다. 저의 경우는 다단계(multi-step) 결제 과정이었고, 해결책은 제가 직접 변경한 하나의 테마 설정이었습니다. 일부 변경 사항은 결제 시스템과 관련되므로, 저는 차라리 그것들을 직접 클릭하는 것이 낫다고 생각했습니다. Claude에게 문제점을 찾게 하고 어떤 설정을 정확히 바꿔야 하는지 알려달라고 하세요.

## 9단계: SEO 정리

감사(audit)에서 발견된 기본적인 SEO 문제를 수정하세요: 주요 페이지의 누락된 메타 설명, 제품 이미지의 누락된 alt 텍스트, 깨진 내부 링크, 오탈자. 제 SEO 플러그인의 필드를 사용하세요. 이전 값은 각각 백업하세요. 검증...```

대부분 지루한 작업이며, 디자이너가 시간당 비용을 청구하고 여러분이 미루게 되는 바로 그런 종류의 일입니다.

잘못된 점들

108가지 변경 사항 중 4건의 사고. 모든 사건은 당일 해결되었고, 모든 사건은 새로운 규칙이 되었습니다.

1. 제품 설명 대신 렌더링된 HTML을 저장했습니다. 하나의 API 엔드포인트를 통해 제품을 읽으면, 편집 가능한 빌더 콘텐츠가 아닌 페이지가 표시되는 그대로 반환됩니다. Claude는 이 내용을 저장했고, 몇 분 동안 한 제품의 설명이 정적 HTML로 존재했습니다. 자체 검사(저장 길이가 계획과 일치하지 않음)를 통해 이를 감지하고 백업에서 복원했습니다. 규칙: 항상 원본 콘텐츠를 읽고 작성하세요.

2. 위젯 목록을 저장하는 과정에서 푸터가 섞였습니다. 전체 '비활성 위젯' 목록을 전송하자 WordPress가 위젯을 재할당했고, 몇 분 동안 푸터에 잘못된 위젯이 표시되었습니다. 규칙: 한 번에 하나의 대상 영역에만 위젯을 할당하세요.

3. 라이브 이미지는 제가 직접 삭제했습니다. 미디어 라이브러리를 정리하던 중 여전히 사용 중인 이미지들을 삭제했습니다. 이미지 스크립트와 제품 ID 맵이 로컬로 저장되었기 때문에, Claude가 같은 날 다시 업로드하고 재할당했습니다.

4. Claude가 편집한 후 빌더에서 직접 편집하기. 제가 비주얼 빌더에서 홈페이지를 편집했을 때, 모든 기본 설정이 적용된 요소들이 재저장되면서 Claude의 로컬 사본과 더 이상 일치하지 않게 되었습니다. 규칙: Claude는 항상 편집하기 전에 라이브 페이지를 읽고, 자신의 오래된 사본을 사용해서는 안 됩니다.

별도로 계획해야 할 사항

페이지 캐싱(Page caching). 스토어가 국가별 또는 고객별로 다른 가격을 표시하는 경우, 전체 페이지 캐싱은 임시방편이 아닌 적절한 계획이 필요합니다.
소셜 공유 이미지(OG images). 별도의 작업으로 진행할 가치가 있습니다.
콘텐츠 수준 수정 사항 (예: H1 제목이 두 개인 페이지). Claude가 목록을 작성해 줄 수 있지만, 손으로 고치는 것이 더 빠를 수도 있습니다.
결제 설정(Payment settings). 이 부분은 직접 변경하세요.

비용

	디자이너	이 워크플로우
비용	$2,500 이상	$0 추가 지출
...
좋은 디자이너는 감각과 판단력을 가져다주지만, 저는 여전히 모든 디자인 결정을 직접 내렸습니다. Claude가 더해준 것은 인내심이었습니다. 108가지 변경 사항 각각에 대해 이전 값을 기록했습니다.

다시 따를 규칙들

1. 작업 전 규칙. 첫날부터 기본 원칙을 작성하고 Claude에게 이를 기억하도록 저장하게 하세요.

2. 감사(Audit)하고, 계획(Plan)한 다음, 변경(Change)하세요. 첫 두 프롬프트는 읽기 전용으로 만드세요. 올바른 순서로 정확한 부분을 고칠 수 있습니다.

3. 페이지별 초안을 만들고, 대량 편집은 제품 단위로 테스트하세요. 첫 시도가 라이브 버전이 되도록 절대 하지 마세요.

4. 디자인보다 데이터를 먼저 하세요. 망가진 판매 카운터와 제가 소홀히 했던 최상단 랜딩 페이지 모두 제 자신의 데이터에 있었습니다. 재설계만으로는 발견할 수 없었을 것입니다.

5. 되돌리기 규칙(Undo rule)을 따르세요. 아래에서 더 자세히 설명하겠습니다.