클로드 코드로 자사몰 GEO 8일 — "AI가 못 읽는 사이트"를 읽히게 만든 기록 95건

반려견 영양제 브랜드 **닥터바이(drby.kr)** 의 자사몰을 **AI 검색(ChatGPT·퍼플렉시티)이 읽고 인용하게** 만드는 작업을 8일간 했습니다.

시작은 스터디에서 GEO를 배우고 우리 사이트를 진단해본 것이었는데, 결과가 좀 충격이었습니다.

- 상품 페이지는 대행사가 손봐서 기본기가 괜찮았는데, **정작 콘텐츠 게시판(닥터매거진·월간댕냥) 128개 글의 본문이 전부 "통짜 이미지" 한 장**이었습니다. 사람 눈에는 예쁜 카드뉴스인데, 검색엔진과 AI에게는 **글자가 0자인 빈 페이지**입니다. 수의학 근거를 담아 3년간 쌓은 콘텐츠가 AI에게는 존재하지 않는 상태였습니다.
- ChatGPT에 "강아지 관절 영양제 추천해줘" 같은 **비브랜드 질문 23개**를 던져봤더니 닥터바이가 나온 건 **1개(4%)**. 나머지는 성분 얘기만 하거나 해외 브랜드를 추천했습니다.

목표는 두 가지로 잡았습니다.
① **이미 쌓인 콘텐츠·상품 정보를 AI가 읽게 만들기**
② **앞으로 올라올 글도 자동으로 그렇게 되게 만들기** (①만 하면 다음 달에 또 같은 일을 해야 하니까요)

저는 회계 담당이라 코드를 못 씁니다. 그래서 **클로드 코드**에게 사이트 진단·수정·검증·기록을 전부 맡기고, 저는 "무엇을 할지 정하고 승인하는 사람" 역할만 했습니다.

### 쓴 도구

| 도구 | 역할 |
|---|---|
| **클로드 코드 (Opus)** | 메인. 진단·코드 작성·실행·검증·기록 전부 |
| **서브에이전트 병렬 10개** | 카드뉴스 이미지 → 텍스트 추출 (한 번에 10글씩) |
| **Playwright + 크롬 확장** | 카페24 관리자 로그인·글 수정·라이브 검증 자동화 |
| **노션 REST API** | 팀 5명이 보는 변경 내역 문서 자동 동기화 |
| GSC / 빙 웹마스터 / 네이버 서치어드바이저 | 색인 요청·사이트맵 제출 |
| PageSpeed Insights, GA4 | 속도·유입 측정 |

### 1. 제일 먼저 만든 건 기능이 아니라 "규칙"이었습니다

회사 실제 매출이 도는 사이트를 건드리는 일이라, 작업 전에 **프로젝트 CLAUDE.md**부터 썼습니다. 이게 이번 프로젝트에서 제일 값어치를 한 프롬프트입니다.

```markdown
## 변경할 때 지킬 것

- **★기록 없이 변경 없음.** 변경 전 값(원문)과 캡처를 확보하기 전에는 저장하지 않는다.
  되돌릴 수 있어야 하고, 나중에 회사에 "무엇이 왜 바뀌었는지" 설명할 수 있어야 한다.
- **한 세트로 처리한다**: ①변경로그.md에 즉시 append ②노션 변경 내역 갱신(4곳)
  ③현황판.md 갱신. 세션 끝까지 미루지 않는다.
- **실패·실험도 반드시 기록**한다(왜 실패했는지 포함).
- **시각 표기**: '오전/오후/밤' 금지 — 반드시 `date` 실측 `HH:MM`.
- **스킨 파일 수정**은 로컬 git에도 남긴다.

## ★내용을 손으로 옮겨 적지 말 것

기존 문장·수치·본문을 다른 곳에 넣을 때 **클로드가 다시 타이핑하면 반드시 오타가 난다**.
원문은 항상 **복사·이동**한다:
- 웹 본문 수정 = **DOM 노드 이동**(p→h2처럼 상자만 바꾸고 내용물은 그대로 옮김)
- 노션 = 로컬 md 파일 → REST 직송
- 표·수치 = 원본 파일에서 프로그램으로 읽어 넣기

## 모바일·PC를 항상 같이 볼 것

이 사이트는 모바일과 PC가 별개 설정·별개 렌더다. 점검·수정·측정 무엇이든
한쪽만 하고 끝내지 말 것.
```

이 규칙 덕분에 8일 동안 **변경 95건이 전부 되돌릴 수 있는 상태**로 남았습니다. 실제로 되돌린 적도 있습니다(뒤에 나옵니다).

### 2. 통짜 이미지 128글 → 텍스트 병기 (제일 큰 덩어리)

카드뉴스 이미지를 클로드가 읽어서 텍스트로 옮기고, 본문에 **접기(`<details>`) 블록**으로 병기했습니다. 화면에는 "📄 본문 텍스트로 읽기" 버튼 하나만 늘고 디자인은 그대로인데, HTML 소스에는 전문이 들어갑니다(구글은 접힌 콘텐츠도 정상 색인합니다).

이미지 추출용으로 서브에이전트에게 준 지시 요지입니다. **"추가하지 마라"** 쪽에 힘을 준 게 핵심이었습니다.

```markdown
이 카드뉴스 이미지 조각들을 순서대로 읽어 본문 텍스트로 복원해줘.

원칙:
1. 효능·성분·의학 정보는 **이미지 원문의 수위 그대로**. 과장·추가·의역 금지.
   ("도움을 줄 수 있는"을 "효과가 있는"으로 바꾸지 말 것)
2. 소제목은 <h2>로, 본문은 문단·불릿으로 구조화.
3. 글 제목과 중복되는 첫 소제목은 제거.
4. UI 연출·장식 텍스트(스와이프 안내, 페이지 번호 등)는 제외.
5. 외국어 리뷰는 원문 + 번역 병기.
6. 확실하지 않은 글자는 추측하지 말고 [판독불가]로 표시.

출력: 마크다운. 다른 설명 없이 본문만.
```

**결과: 8/7~8/8 이틀간 매거진 101글 + 월간댕냥 27글 = 128글 전량 완료.**

### 3. 사고도 났습니다 (그리고 그걸 기록했습니다)

배치 3에서 클로드가 "속도를 높이려고" 브라우저를 안 열고 서버 HTML을 직접 파싱하는 지름길을 썼습니다. 그런데 그 페이지의 본문 칸은 **서버 HTML에서는 비어 있고 에디터 JS가 나중에 채우는 구조**였습니다. 빈 값 검사 없이 저장 → **글 하나의 이미지가 통째로 날아갔습니다.**

즉시 복구하고, 다시는 못 하게 규칙으로 박았습니다.

```markdown
**방법 확립 (다음 배치 필수 준수)**
① 수정 페이지는 반드시 **브라우저로 실제 내비게이션** 후 실제 DOM에서 본문을 읽는다
   (fetch + DOMParser 금지 — 위 사고의 원인)
② 삽입 스크립트에 **가드 3종** 필수:
   원문이 비었으면 / 이미지가 없으면 / 이미 삽입돼 있으면 → 저장 중단
③ 저장 성공 판정은 응답 텍스트가 아니라 **라이브 페이지 전수 검증으로** 한다
```

이후 배치 4~13(약 100글)은 **사고 0건**이었습니다. 나중에 잔재 검사 단계가 실제로 사고 하나를 미리 막기도 했습니다(추출 파일에 도구 잔재 문자열이 섞여 있던 것).

### 4. 검색엔진·AI가 읽을 뼈대 만들기

- 글마다 **Article / BreadcrumbList 구조화 데이터(JSON-LD)** 삽입, 홈에 Organization, 상품 94개에 Product
- 페이지마다 **H1 1개 + 진짜 소제목만 H2**로 정리 (푸터 "고객센터", 사이드 "로그인 혜택" 같은 위젯 제목 20여 곳을 헤딩에서 빼냄 — 외형은 CSS로 100% 승계해서 **화면 변화 0**)
- 이미지 **161장에 alt 일괄 삽입**, 파일명 **145장을 영문 의미형으로** 교체
  (`copy-1785486438-EBA7A4...jpg` → `chocolate-toxic-for-dogs.jpg`)
- `llms.txt` 생성, `robots.txt` 정리, 사이트맵 호스팅
- **구글·빙·네이버 3대 검색엔진 등록 완성** + 색인 요청 58건 + 빙에 URL 364건 일괄 제출

### 5. 연구소 글 소제목을 H2로 — "타이핑하지 않는" 수정

닥터연구소 글들은 텍스트는 있는데 소제목이 그냥 **굵은 18px 글씨**였습니다. 사람 눈에는 소제목인데 기계에겐 그냥 본문입니다.

여기서 오타 사고를 한 번 겪고 배운 게 있습니다. **클로드가 문장을 다시 타이핑하면 반드시 오타가 납니다.** 그래서 내용을 옮겨 적는 대신 **DOM 노드만 이동**시켰습니다. `<p>` 상자를 `<h2>` 상자로 바꾸고 내용물은 그대로 옮기는 방식이라 **원리상 오타가 불가능**합니다.

```javascript
// p 안의 자식 노드를 그대로 h2로 옮긴다 (텍스트를 다시 쓰지 않는다)
const h2 = doc.createElement('h2');
const st = g[0].getAttribute('style');
if (st) h2.setAttribute('style', st);        // 글씨 크기·색 등 원본 스타일 승계
g.forEach((p, i) => {
  if (i > 0) h2.appendChild(doc.createElement('br'));   // 인접 소제목은 병합
  while (p.firstChild) h2.appendChild(p.firstChild);    // ★내용물 통째 이동
});
g[0].parentNode.insertBefore(h2, g[0]);
g.forEach(p => p.remove());
```

**결과: 48글 267개 H2 적용.** 적용 후 **변경 전 스냅샷 ↔ 라이브 본문을 글자 단위로 대조 → 불일치 0/44글**.

### 6. 측정: 질문 30개를 고정하고 매달 같은 조건으로

개선했는데 나아졌는지 모르면 의미가 없어서, 측정 도구부터 만들었습니다.

```markdown
[클로드에게 준 지시]
우리 브랜드·제품군·강점·고객 여정을 근거로, AI 검색에서 반복 측정할 질문 세트를 만들어줘.

조건:
- 30문항. **비브랜드 질문 70% 이상**(브랜드명을 모르는 고객이 던질 질문이 진짜 시험대)
- 유형을 섞을 것: 발견 / 문제(증상) / 조건(나이·견종) / 비교 / 검증 / 브랜드 직접
- 각 문항에 [고객 여정 / 기대 속성(대응 제품) / 중요도 / 선정 이유]를 표로 붙일 것
- 실제 보호자 말투로. ("강아지 신장 수치가 높은데 먹일 만한 영양제 있어?")
- 질문은 고정한다. 바꾸려면 버전을 올리고 이유를 기록한다.
```

**여기서 제일 중요한 발견**: 처음엔 제 평소 ChatGPT 계정으로 측정했는데, 2번 질문에서 AI가 **"윤원님이 닥터바이의 경쟁 브랜드를 찾는 목적이라면"** 이라고 답했습니다. 계정 메모리가 저를 기억해서 **닥터바이를 1~4위로 부풀리고 있었던 겁니다.** 전부 버리고 **임시 채팅**으로 다시 측정했습니다. 그게 진짜 기준선입니다.

**1회차 기준선(2026-08-12, ChatGPT 임시 채팅 30문항)**
- 비브랜드 23문항 중 노출 **1건 (4%)** ← 이게 출발점
- 브랜드 직접 7문항은 **전부 정확·긍정**
- 그중 한 문항에서 **AI가 우리 공식몰의 리뷰 통계(1,000건 4.86/5, 기호성 264건)를 그대로 인용** — 상품 페이지에 넣어둔 GEO 양식이 실제로 AI의 재료로 작동한 첫 실증
- 퍼플렉시티는 3문항 전부 미노출, drby.kr 인용 0

### 8일 결과 요약

| 항목 | 결과 |
|---|---|
| 콘텐츠 글 텍스트 병기 | **128글 전량**(글자 0자 → 본문 전문) |
| 이미지 접근성 | alt **161장** · 파일명 영문화 **145장** |
| 헤딩 구조 | H1 정리 + 연구소 **H2 267개** + 위젯 헤딩 20여 곳 격하 |
| 구조화 데이터 | Article·BreadcrumbList·Organization·Product |
| 검색엔진 | 구글·빙·네이버 **3대 등록 완성**, 색인 요청 58건, 빙 URL 364건 |
| 속도 | 홈 이미지 3,644KB→**572KB(84%↓)** · 폰트 2,281KB→**596KB(74%↓)** |
| 측정 | 30문항 기준선 1회차 확보(비브랜드 4%) |
| 기록 | 변경로그 **95건**(전부 되돌리기 가능) + 노션 팀 공유 |

성과 판정은 **9월 2회차 측정**에서 합니다. 색인은 보통 2~3주 걸리니까요.

### 배운 점 · 꿀팁

**① "예쁜 카드뉴스"가 GEO 최대의 적입니다.**
디자인팀이 정성껏 만든 이미지 한 장이 AI에게는 빈 페이지입니다. 사이트에 콘텐츠가 많다고 안심하지 말고, **브라우저에서 Ctrl+A로 본문을 긁어보세요.** 안 긁히면 AI도 못 읽습니다.

**② 클로드에게 "기록 없이 변경 없음"을 시키면 겁 없이 시킬 수 있습니다.**
실제로 홈 배너를 경량화했다가 디자인팀이 "PC에서 흐리다"고 해서 **원복하고, 방식을 바꿔 재적용**했습니다. 변경 전 값이 남아 있으니 되돌리는 데 30분이면 됐습니다. 기록이 없었으면 아예 시도를 못 했을 겁니다.

**③ 사고는 대체로 "지름길"에서 납니다.**
이미지가 날아간 그 한 번도, 클로드가 속도를 높이려고 브라우저를 건너뛴 순간이었습니다. **저장 전 가드 3종(원문 비었으면·이미지 없으면·이미 있으면 중단)** 을 규칙으로 박은 뒤로는 100글 무사고였습니다.

**④ AI에게 우리 브랜드를 물어볼 땐 반드시 임시 채팅으로.**
평소 계정은 나를 기억하고 있어서 **우리 브랜드 순위를 부풀려 보여줍니다.** 이걸 모르고 "우리 1위네?" 했으면 8일을 헛짚을 뻔했습니다.

**⑤ 벤더 탓하기 전에 결정적 증명부터.**
사이트 화면 밀림(CLS 0.42)의 범인으로 팝업 앱이 의심됐는데, 제가 "확실해?"라고 물었습니다. 클로드가 **그 앱의 스크립트만 차단하고 재측정**했더니 모바일 1.0 → **0.00**. 정황이 아니라 실증이 되니 벤더에 개선 요청할 명분이 생겼습니다.

**⑥ 클로드는 "새로 타이핑하는 순간" 오타를 냅니다.**
노션 문서에 오타가 20여 건 났고, 고치다 또 냈습니다. 원인은 클로드가 한글을 유니코드 코드값으로 변환해 입력한 것이었습니다(코드 한 자리만 틀려도 다른 글자가 됩니다). 지금은 **"내용을 옮겨 적지 말고 복사·이동하라"** 를 규칙으로 박았고, 사이트 수정은 전부 DOM 이동 방식이라 오타가 원리적으로 불가능합니다. **게시 후 기계 스캔**(기존 문서에 한 번도 안 나온 음절을 뽑아 검사)으로 7건을 사람 눈 아닌 프로그램이 잡아냈습니다.

**⑦ 제일 값어치 있었던 건 "사후 수정"이 아니라 "작성 규칙"이었습니다.**
43글 267개 소제목을 사후에 고쳤는데, 그러고 나서 **콘텐츠 작성자용 안내 문서에 "본문 소제목은 에디터에서 '제목 2'로 지정해주세요" 한 줄을 추가**했습니다. 이 한 줄이 다음 달 사후 작업을 0으로 만듭니다. **GEO는 일회성 프로젝트가 아니라 발행 프로세스에 심는 일**이더군요.

### 시행착오 목록 (실패도 기록했습니다)

- 게시판 목록 title 보완 → 부작용 발견해 **전면 원복**
- 배너 경량화 1차 → 디자인팀 반려("PC 흐림") → 원인 규명(1920px이 2560px 모니터에서 강제 확대) → **3840px 유지 + WebP 압축만**으로 재적용
- 팝업 애니메이션 3종 실험 → **전부 CLS 1.0으로 동일** → 설정으로 해결 불가 확정 → 원복
- 화면 밀림 개선용 CSS 2종 실험 → 하나는 모바일만 36% 개선, 하나는 **데스크톱 악화** → 폐기
- 연구소 소제목이 전부 18px인 줄 알았는데 **20px·14px도 섞여 있어** 10글을 통째로 놓쳤던 것 → 재조사로 2글 추가 적용, 14px은 불릿과 구분 불가라 **자동 변환 포기**(작성자 안내로 해결할 영역)

### 도움이 필요한 부분

1. **퍼플렉시티는 아직 우리를 한 번도 인용하지 않습니다.** 소스가 블로그·뉴스·가격비교 생태계라, 자사몰만 고쳐서는 안 될 것 같습니다. **오프사이트(외부 매체) GEO를 해보신 분** 계시면 조언 부탁드립니다.
2. **AI 검색 노출 측정을 자동화**하신 분 계신가요? 지금은 30문항을 매달 브라우저 자동화로 돌리는데, 계정 개인화 오염을 피하려고 임시 채팅을 쓰다 보니 손이 많이 갑니다.
3. 카페24 같은 **호스팅형 쇼핑몰**에서 GEO 하신 분과 함정 목록을 나누고 싶습니다.

### 앞으로의 계획

- **9월 초 2회차 측정** — 같은 30문항, 같은 임시 채팅 조건. 비브랜드 4%가 얼마나 움직였는지가 이번 프로젝트의 성적표입니다.
- **상품 94개의 성분·근거 보강** — AI가 추천 근거로 쓰는 건 결국 "글루코사민 몇 mg, 균주명, CFU" 같은 숫자였습니다. MD팀 승인 대기 중입니다.
- **자매 브랜드(바이랩)에 같은 절차 복제** — 이번에 만든 규칙과 워커 코드를 그대로 재사용할 예정입니다.
- **월 1회 GEO 유지보수 루틴화** — 새 글 스캔 → 헤딩 점검 → 색인 요청.

- **지피터스 23기 GEO 스터디 1주차 강의** — 질문 세트로 반복 측정한다는 방법론(질문 고정, 첫 실행이 기준선, 바꾸면 버전을 올린다)을 여기서 가져왔습니다. 이번 프로젝트에서 제일 실용적이었던 부분입니다.
- 구글 검색 센터 문서 — 접힌(`<details>`) 콘텐츠의 색인 처리, 모바일 퍼스트 인덱싱 기준 확인에 사용했습니다.
- 클로드 코드 공식 문서 — CLAUDE.md(프로젝트 규칙 파일)와 서브에이전트 병렬 실행.