클로드와 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주차 강의 (글 묶음 만드는 흐름)

📢 AI스터디는 24기를 끝으로 방학에 들어가요