소개
시도하고자 했던 것과 그 이유
AI 역량 강화 교육(1박 2일)을 앞두고, 참가자들에게 교육 안내 정보를 한 곳에서 깔끔하게 전달할 랜딩 페이지가 필요했습니다.
교육 개요, 오시는 방법, 주차 안내, 시간표, 식당 이동, 안전수칙, 사전학습, FAQ까지 총 8개 탭 분량의 정보를 담아야 했는데, 담당자가 수시로 내용을 수정·검토하는 상황이었습니다. 매번 HTML을 직접 편집하는 건 비효율적이라 생각했고, "기획 문서(이미지)를 주면 알아서 페이지를 갱신해주는 워크플로를 Claude Code로 만들어보자"는 아이디어로 시작했습니다.
진행 방법
사용 도구: Claude Code (VSCode Extension) + HTML/CSS 랜딩 페이지
전체 흐름
기획팀이 교육 내용을
.jpg이미지(슬라이드 캡처)로 공유Claude Code가 이미지를 읽고 → 현재 HTML과 비교 → 변경된 부분만 자동 수정
담당자는 결과만 확인
핵심: 커스텀 슬래시 커맨드 /rebuildPage
반복 작업을 자동화하기 위해 .claude/commands/rebuildPage.md 파일로 커스텀 커맨드를 만들었습니다.
프롬프트 전문 (rebuildPage.md):
# rebuildPage
`info/` 폴더의 이미지들을 다시 읽고, 변경된 내용을 `index.html`에 반영하여
랜딩 페이지를 업데이트합니다.
## 실행 절차
### 1단계 — 이미지 전체 재독취
아래 7개 이미지를 모두 Read 툴로 읽고 내용을 파악한다:
- `info/basic.jpg` → 교육 개요 탭 (Tab 1) 콘텐츠
- `info/coming.jpg` → 오시는 방법 탭 (Tab 2) 콘텐츠
- `info/parking.jpg` → 주차 안내 탭 (Tab 3) 콘텐츠
- `info/timetable.jpg` → 시간표 탭 (Tab 4) 콘텐츠
- `info/house1958.jpg` → 식당 이동 탭 (Tab 5) 콘텐츠
- `info/safe.jpg` → 안전수칙 탭 (Tab 6) 콘텐츠
- `info/faq.jpg` → FAQ 탭 (Tab 8) 콘텐츠
모든 이미지를 병렬로 동시에 읽는다.
### 2단계 — 현재 index.html 읽기
`index.html`을 읽어 현재 반영된 내용을 파악한다.
### 3단계 — 변경 사항 비교 및 업데이트
이미지에서 추출한 최신 정보와 현재 HTML을 비교하여,
**변경된 항목만** Edit 툴로 업데이트한다.
| 이미지 | HTML 섹션 | 업데이트 대상 |
|-------------------|-----------|--------------------------------------------------|
| basic.jpg | `#tab1` | 교육 목적, 일정/장소/대상/준비물, 교육 내용 |
| coming.jpg | `#tab2` | 주소, 네비게이션 검색어, 진입 방법 |
| parking.jpg | `#tab3` | 주차 안내사항 텍스트 |
| timetable.jpg | `#tab4` | 1일차·2일차 강의 주제명, 강의실 안내 |
| house1958.jpg | `#tab5` | 식당 이름, 이동 경로 |
| safe.jpg | `#tab6` | 안전수칙 4개 항목(제목·설명·배지 텍스트) |
| faq.jpg | `#tab8` | FAQ Q&A 항목(질문 텍스트, 답변 내용) |
### 4단계 — 업데이트 결과 보고
변경된 섹션 목록과 주요 변경 내용을 요약하여 사용자에게 보고한다.
변경이 없으면 "이미지와 현재 페이지 내용이 일치합니다"라고 알린다.
## 주의사항
- **스타일(style.css)은 수정하지 않는다.** 콘텐츠 텍스트만 업데이트한다.
- 탭 구조, 클래스명, JavaScript는 변경하지 않는다.
- 이미지에서 읽을 수 없는 내용은 기존 HTML 내용을 유지한다.
- 사전학습 탭(Tab 7)의 iframe URL은 이미지와 무관하므로 변경하지 않는다.
- 각 섹션을 독립적으로 판단하여, 변경이 필요한 섹션만 선택적으로 수정한다.
이후 교육 내용이 바뀔 때마다 이미지만 교체하고 /rebuildPage 한 번으로 페이지가 갱신됩니다.
결과와 배운 점
배운 점과 꿀팁
Claude Code는 이미지(JPG)를 직접 읽고 텍스트를 추출할 수 있어서, 기획 슬라이드 → HTML 자동 반영 파이프라인이 생각보다 훨씬 매끄럽게 동작했습니다.
.claude/commands/폴더에.md파일을 놓으면/커맨드명으로 바로 실행되는 커스텀 슬래시 커맨드를 만들 수 있습니다. 반복 업무를 프롬프트로 고정해두는 용도로 매우 유용합니다.프롬프트에 "변경된 항목만 수정"이라는 조건을 명시하지 않으면 Claude가 멀쩡한 섹션까지 건드리는 경우가 있었습니다. 범위를 명확히 제한하는 것이 핵심이었습니다.
시행착오
처음엔 이미지를 순차적으로 읽도록 프롬프트를 짰는데, 속도가 느렸습니다. "모든 이미지를 병렬로 동시에 읽는다"고 명시하자 처리 속도가 크게 개선됐습니다.
style.css를 함께 수정해버리는 경우가 있어서 주의사항에 "스타일은 건드리지 않는다"를 명시적으로 추가했습니다.
앞으로의 계획
교육 회차별로 이미지 폴더를 버전 관리해서, 과거 기수 페이지도 쉽게 복원할 수 있도록 구조를 잡을 예정입니다.
QR코드 링크를 랜딩 페이지와 연결해 참가자들이 모바일로 바로 확인하도록 배포할 계획입니다.
