ChatGPT도 쓰고 Claude도 쓰고 Gemini도 눈에 밟히면 한 달에 얼마 나가는지 헷갈릴 때가 있죠. 오늘 만들 건 그걸 한 장으로 보여주는 구독료 비교 페이지예요. 카드 3개, 월 합계, 내가 실제로 쓰는 조합 체크박스까지 붙여서 5분 안에 첫 화면을 띄워볼 겁니다.
지난 편에서 쇼츠 제목을 다뤘다면 이번엔 돈 빠지는 쪽을 바로 잡아보죠. 이런 구독료 비교 페이지는 한 번 만들어두면 새 요금제가 나와도 숫자만 바꾸면 끝이라 진짜 자주 씁니다. 매달 구독료 빠져나가는 입장에선 이게 생각보다 꽤 커요.
준비물은 하나면 끝
Codex 하나만 고르면 됩니다. 오늘은 Codex 기준으로 적을게요. Claude Code 쓰는 분도 같은 문장을 붙여넣으면 되는데, 화면 이름이랑 명령어만 Codex 기준으로 보면 돼요.
Codex 공식 문서 쪽을 먼저 읽어보니까 요즘은 AGENTS.md를 먼저 읽고, web search로 최신 정보를 가져오고, 마지막엔 별도 리뷰도 돌릴 수 있더라구요. 오늘 작업이 딱 그 조합입니다.
구독료 비교 페이지 만들기
1
바닥부터 깔기
AI에게 보낸 프롬프트
현재 폴더에 AGENTS.md를 만들고 바로 읽어줘.
목표는 GPT, Claude, Gemini를 한눈에 보는 구독료 비교 페이지다.
첫 버전은 index.html 하나로 시작하고 카드 3개와 월 합계 박스만 넣어줘.
문구는 짧게, 이모지 금지, 과장 금지.
가격 값은 나중에 바꾸기 쉽게 한곳에 모아줘.
왜 이렇게 시켰나: 이거 안 넣으면 Codex가 갑자기 파일을 여러 개로 쪼개거나 문구를 길게 늘입니다.
이렇게 나오면 OK: index.html 하나가 생기고, 빈 카드라도 세 장이 먼저 보입니다.
⚠여기서 이렇게 하면 안 돼요: Step 1부터 다크모드, 환율, 필터, 저장 기능까지 한 번에 넣지 마세요. 첫 화면이 늦어집니다.
2
최신 값 붙이기
AI에게 보낸 프롬프트
이제 web search로 ChatGPT, Claude, Gemini 공식 가격 페이지를 읽고 개인이 가장 많이 쓰는 대표 유료 요금제를 확인해줘.
구독료 비교 페이지에 서비스 이름, 월 요금, 짧은 한 줄 메모를 넣어줘.
값이 애매하면 억지로 단정하지 말고 직접 확인 필요라고 적어줘.
본문 링크는 넣지 말고 화면은 깔끔하게 유지해줘.
왜 이렇게 시켰나: 가격 글은 복붙 블로그를 읽으면 바로 꼬입니다. 공식 가격 페이지만 읽게 해야 숫자가 덜 흔들려요.
이렇게 나오면 OK: 구독료 비교 페이지 카드 3장에 숫자가 채워지고, 어떤 서비스가 비싼지 바로 보입니다.
⚠여기서 이렇게 하면 안 돼요: 최고, 압도적 같은 말 붙이지 마세요. 우리한테 필요한 건 감탄이 아니라 숫자입니다.
3
내가 쓰는 조합으로 바꾸기
AI에게 보낸 프롬프트
이 페이지에 체크박스를 넣어줘.
내가 쓰는 서비스만 고르면 월 합계가 다시 계산되게 해줘.
환율 입력칸도 하나 넣어서 달러 요금을 원화로 바로 바꿔 보여줘.
모바일에서는 카드가 한 줄씩 떨어지게 정리해줘.
왜 이렇게 시켰나: 구독은 전부 다 쓰는 게 아니라 조합으로 쓰거든요. 여기서부터 이 페이지가 진짜 내 것이 됩니다.
이렇게 나오면 OK: 체크 두 개만 켜도 합계가 바로 바뀌고, 환율 칸에 숫자 넣으면 원화 금액도 따라 바뀝니다.
⚠여기서 이렇게 하면 안 돼요: 카드 안에 $20 같은 글자와 계산 숫자를 섞어두면 JS가 계산을 못 할 때가 많습니다. 숫자는 숫자로만 두세요.
4
마지막으로 숫자 검수
AI에게 보낸 프롬프트
방금 만든 구독료 비교 페이지를 스스로 리뷰해줘.
숫자 계산 실수, 모바일 간격, 말투 과장만 봐줘.
문제가 있으면 최소 수정만 하고 바뀐 점을 5줄 안으로 적어줘.
왜 이렇게 시켰나: Codex 공식 문서 쪽에 별도 리뷰 흐름이 있더라구요. 이 한 번이 계산 실수 잡는 데 꽤 쏠쏠합니다.
이렇게 나오면 OK: 합계가 맞고, 휴대폰 폭에서도 카드가 안 찌그러집니다.
⚠여기서 이렇게 하면 안 돼요: 전면 개편해줘라고 다시 시키지 마세요. 막판엔 작은 수정만 가는 게 빠릅니다.
여기서 막히면
현상: 가격이 이상하게 섞여서 블로그 글 숫자랑 공식 숫자가 함께 들어옵니다. 원인: Step 2에서 공식 가격 페이지만이라는 말을 빼면 Codex가 검색 범위를 넓게 잡을 때가 있어요. 해결: 프롬프트에 official pricing pages only를 한 줄 더 넣고, 카드 아래 메모도 직접 확인 필요로 두면 덜 위험합니다.
현상: 합계가 NaN으로 뜨거나 환율 칸이 먹통입니다. 원인: 화면에 보이는 문자와 계산용 숫자를 같은 변수에 넣으면 이런 일이 자주 납니다. 해결: 가격은 20 같은 숫자로 저장하고, 화면에 보여줄 때만 $20처럼 붙여달라고 다시 시키면 바로 풀립니다.
현상: 모바일에서 카드가 옆으로 밀려서 구독료 비교 페이지가 보기 싫어집니다. 원인: 첫 버전을 데스크톱 폭 기준으로만 뽑았기 때문입니다. 해결: 768px 아래에서는 카드 한 줄 1개, 버튼은 꽉 차게라고 정확히 적어서 한 번만 더 수정하면 대부분 끝납니다.
다음에 붙여볼 것
한 걸음 더
여기까지 만들었으면 다음엔 Codex Automations로 매주 월요일 아침 한 번 가격만 다시 읽어오게 붙여보세요. 첫 몇 번만 눈으로 확인하면, 그다음부터는 구독료 비교 페이지를 열 때마다 괜히 해지 버튼부터 찾게 될 겁니다.
