클로드와 GPT를 병렬로 써서 콘텐츠용 웹을 다듬은 과정
클로드와 GPT 병렬 작업으로 다듬은 콘텐츠용 웹과 홈페이지 시안
소개
시도하려던 것
3주차 목표는 "만든 글을 공개하고, 내 홈페이지에 모아 보기"였어요. 글 한 편을 다른 사람이 열 수 있는 주소로 공개하고, 메뉴와 글 목록이 있는 홈페이지를 만들어 새 글을 추가하는 거예요.
저는 조금 다르게 시작했어요
- 원래 강의 홈페이지를 따로 만들고 있었어요. 홍보할 상품(웨이브베개 클래스)이 처음부터 있었거든요.
- 강의 홈페이지를 다 끝낸 뒤에 블로그 글을 붙이면 시간이 오래 걸릴 것 같았어요. 그래서 블로그 글 홈페이지를 연습용으로 먼저 만들고, 나중에 강의 홈페이지에 합치기로 했어요.
- 호스팅은 Vercel과 요금제를 비교하다가 Cloudflare Pages로 정했어요. 상품을 홍보하는 업무용 사이트라서 상업적 사용 조건이 걸리지 않는 쪽을 골랐어요. (비교한 요금 조건 한 줄 추가 필요)
이번 주에 가장 중요했던 일
새로 만들기보다 1·2주차에 막혔던 부분을 처음부터 다시 다듬는 주간이었어요. 이해가 안 되는 단계, 제 콘텐츠 제작 환경과 안 맞는 단계는 그대로 따라 하지 않고 저한테 맞게 웹(앱)을 고쳤어요.
진행 방법
1) 같은 앱을 클로드와 GPT(Codex)로 병렬로 만들어 비교했어요
같은 설계서로 "하루정화 CONTENT OS"(글감 → 근거 → 원고 → 발행 준비를 돕는 제 작업용 웹)를 두 AI가 각각 만들게 했어요. 클로드 버전은 포트 3001, GPT(Codex) 버전은 포트 3002에서 열어 비교했어요. 두 AI가 같은 콘텐츠 베이스 폴더를 읽고 쓰기 때문에, 서로의 파일을 덮어쓰지 않는 규칙을 먼저 정했어요.
- 글은 클로드가 더 잘 썼어요. 제 말투와 경험이 살아 있었어요.
- 이미지 생성은 클로드가 못 해서 GPT로 따로 만들어 가져왔어요.
- GPT 쪽은 API 한도(429)로 AI 생성 단계가 막힌 적이 있어요.
- 지금은 글은 클로드, 이미지는 GPT로 나눠 써요. 이 방식이 맞는지는 아직 고민 중이에요.
2) 막혔던 부분을 제 환경에 맞게 고친 것
| 막힌 점 | 이렇게 고쳤어요 |
|---|---|
| 글감이 질문만 던지는 형식이라 스레드 반응이 약했어요 | 테스트 화면을 답 먼저(방법 3가지) + 내 경험 형식으로 바꿨어요 |
| 글감 분석의 검색수요·추세 칸은 제가 안 쓰는 칸이었어요 | 해당 칸과 출처표를 빼서 화면을 단순하게 했어요 |
| 근거 카드에서 "확인함"만 체크하면 출처가 비어도 통과됐어요 | 주장의 성격, 출처 종류, 쪽수·연도 칸을 넣고 출처 없이 확인함을 누르면 경고가 뜨게 했어요 |
| 글을 시작하기 전 점검 기준이 모호했어요 | 사다리 1단계 점검 4항목(독자 한 명·질문 하나 / 제목의 답 / 내 경험 1개 이상 / 사실·출처 확인) 카드를 만들었어요 |
| 기획 인터뷰 결과를 어디에 둘지 몰랐어요 | 인터뷰 요청문을 복사해 채팅에서 인터뷰하고, "검증할 주장"이 근거 목록에 확인 안 됨으로 쌓이게 했어요 |
| 이미지를 몇 장, 어떤 걸 만들지 감이 없었어요 | 썸네일 / 중간 개념 일러스트 / 도구 쓰는 웰니스 여성으로 이미지 계획표를 정했어요 |
3) 글 한 편을 "글 묶음"으로 만드는 스킬로 저장했어요
글감 하나(독자·질문·내 경험·근거)를 주면 아래 묶음이 나오는 스킬 my-blog-draft를 만들었어요. 출처 7건은 서지를 직접 대조해 확인했고, 공개 발행은 기본 OFF로 해 뒀어요.
post.md 글
sources.md 출처
image-plan.md 이미지 계획
images/ 이미지
preview.html 미리보기
progress.md 진행 기록4) 블로그형 홈페이지 만들기
빌드 도구 없이 올릴 수 있는 정적 HTML 사이트로 만들었어요. Cloudflare Pages에 site 폴더를 끌어다 놓으면 되는 구조예요. 메뉴는 홈 / 소개 / 글 / 리포트 / 강의이고, 글은 요약과 블로그 링크만 두고 전문은 블로그에 둬요. 새 글은 posts.json에 항목을 하나 더하고 python scripts/build.py를 실행하면 추가돼요. 지금은 모든 페이지에 noindex를 넣은 시안 상태예요.
사용한 프롬프트
① 홈페이지 만들기 요청 (3주차 과제 문구 기반, 실제 입력으로 교체 필요)
만든 글을 공개하고 내 홈페이지에 모아 보려고 해요.
1) 글 한 편을 다른 사람도 열 수 있는 주소로 공개할 수 있게 준비해 주세요.
2) 내 홈페이지를 만들어 주세요. 메뉴와 글 목록이 있어야 하고, 새 글을 추가할 수 있어야 해요.
저는 개발자가 아니라서 쉬운 말로 설명해 주세요.
호스팅은 Cloudflare Pages를 쓸 거예요. 아직 공개하지 말고 시안으로 만들어 주세요.② 두 AI 병렬 작업 규칙 (실제 규칙 문구로 교체 필요)
같은 설계서로 두 AI가 각자 만든다. 다른 AI의 파일은 덮어쓰지 않는다.
작업 전 AGENTS.md와 00_현재 작업 현황을 먼저 읽고, 끝나면 현황에 내 작업을 추가한다.결과와 배운 점
결과
- 글 3부작(근막이완) 초안, 근거 카드 3개, 1편 글 묶음(글·출처·이미지·미리보기)이 나왔어요.
- 홈페이지 시안 7개 페이지를 로컬에서 PC·모바일로 확인했고 내부 링크 10개도 점검했어요.
- 아직 못 한 것: Cloudflare에 올려 공개 주소를 받는 것, 블로그·오픈 알림·카카오 채널 주소 연결.
배운 점과 꿀팁
- 교안을 그대로 따라 하기보다, 내 작업 환경에 안 맞는 칸부터 지우세요. 화면이 단순해지고 더 자주 쓰게 돼요.
- "확인함" 체크는 믿지 마세요. 출처가 비어도 통과하는 구조가 제일 위험해서 경고가 뜨게 바꿨어요.
- AI 두 개를 병렬로 돌릴 땐 역할 규칙(덮어쓰지 않기, 현황 기록)을 먼저 정하세요.
- 공개 발행은 기본 꺼 두세요. 시안은
noindex로 두고 확인 후에 켜는 편이 안전했어요. - 홈페이지에는 요약과 링크만 두고 전문은 블로그에 두면 관리할 곳이 하나로 유지돼요.
시행착오
- GPT 쪽 AI 생성이 API 한도로 막혔을 때, 실패를 성공으로 기록하지 않고 재검증 항목으로 남겼어요.
- 앱 안의 옛 원고에 근거 6개가 "확인함"인데 출처가 비어 있었어요. 새 기준을 만든 뒤에야 발견했어요.
- 이미지 색이 AI마다 달랐어요(클로드 도식은 세이지 톤, GPT는 로즈브라운 톤). GPT 이미지 3장으로 통일했어요.
- 처음엔 Vercel로 가려다 요금제를 비교하고 Cloudflare로 바꿨어요.
도움이 필요한 부분
- 글은 클로드, 이미지는 GPT로 나눠 쓰는 방식이 맞는지 궁금해요. 이미지를 매번 GPT에서 따로 가져오는데, 더 매끄러운 흐름이 있을까요?
- 강의 홈페이지와 블로그 홈페이지를 나중에 합칠 때, 처음부터 한 사이트로 만드는 게 나았을까요?
앞으로의 계획
- Cloudflare Pages에 올려 공개 주소 받기, 휴대폰과 카카오톡 미리보기 확인
- 블로그 주소·오픈 알림 신청 주소·카카오 채널 주소 연결
- 2·3편 글에도 같은 스킬 적용하고 출처 원문 확인
- 강의 홈페이지에 합치기 (11월 클래스 오픈 목표)
도움 받은 글
- 조셉님 123주차 교안 (사이트에는 요약과 링크, 전문은 블로그)
- 이안님 123주차 강의 (글 묶음 만드는 흐름)
출처
- 원문: https://www.gpters.org/nocode/post/keulrodeuwa-gptreul-naranhi-dolryeo-bodaga-nae-kontenceu-hwangyeonge-majge-FRXQwQppZiuiSUg (2026-10-22 · 정화)