비용과 키

에이전트 요금

에이전트는 각자의 요금제로 써요. 에이전트마다 필요한 요금제는 에이전트별 차이에 있어요. 요금제마다 정해진 사용량이 있어서, 한 번에 많은 일을 시키면 한도에 걸려 잠시 멈출 수 있어요. 그때는 안내된 시간이 지난 뒤 "하던 작업 이어서 해줘"라고 보내면 돼요.

화면 디자인과 모든 페이지 만들기는 사용량이 많은 작업이에요. 튜토리얼마다 "시간과 비용"에 걸리는 시간의 범위와 최소 비용, 내 요금제로 되는지를 적어 두었어요. 읽는 법은 아래에 있어요.

시간과 비용 읽는 법

튜토리얼의 시간과 비용은 프롬프트와 프리셋 팩으로 순조롭게 한 번에 끝날 때의 최솟값에서 시작해요. 이럴 때 더 들어요.

쓰는 AI와 모델: 쓰는 에이전트와 모델마다 토큰 단가와 일하는 방식이 달라요. 같은 일도 최솟값의 1~2배까지 차이 날 수 있어요.
다시 요청하고 다듬기: 결과를 보고 고쳐 달라고 할 때마다 더 들어요. 프리셋을 만들 때는 다시 디자인하고 다듬으면서 최솟값의 1.1~3배, 대개 2배쯤 들었어요.
오류와 끊김: 중간에 끊겨 이어 가면 다시 읽고 확인하느라 20%쯤 더 들어요.
유료 요금제: 돈은 더 들지 않아요. 대신 사용량 한도에 걸리면 기다려야 해서 끝나는 시각이 늦어져요.

시간은 이 차이를 넣어 범위로 적어요. 예를 들어 고루를 프리셋 팩으로 만들면 "한 번에 완성하면 약 1시간~2시간(여러 번 고쳐 달라고 하면 약 3시간까지)" 걸린다고 적고, 표 칸에는 "약 1시간~2시간 (여러 번 고치면 약 3시간까지)"처럼 줄여 적어요.

앞 숫자: 순조롭게 한 번에 끝날 때의 최솟값이에요.
범위의 끝: 쓰는 AI와 모델, 끊김에 따라 한 번에 완성할 때 걸릴 수 있는 시간이에요. 최솟값의 2배로 잡았어요.
괄호: 결과를 보고 여러 번 고쳐 달라고 할 때 걸릴 수 있는 시간이에요. 최솟값의 3배로 잡았어요. 고칠 때마다 무엇에 시간이 드는지는 고쳐 달라고 할 때마다 더 드는 시간에 있어요.

단계별 표의 칸은 최솟값이에요. 토큰과 API 요금 환산도 최솟값만 적었어요. 넉넉히 잡으려면 시간처럼 최솟값의 2~3배를 생각하세요.

토큰은 에이전트가 새로 읽고 쓴 양이에요. 앞에서 읽은 대화와 파일을 다시 읽는 캐시는 빼고 셌어요. 캐시까지 세면 50배쯤 커지는데, 캐시는 처리 비용이 10분의 1이라 따로 적었어요. 괄호 안의 "캐시 포함"이 그 값이에요.

토큰 수는 프리셋을 만든 Claude Code(Opus) 기록에서 잰 비율로 바꾼 값이에요. 1달러어치에 약 5.5만 토큰, 캐시 포함 약 275만 토큰이었어요. Codex나 다른 모델에서는 수가 달라요.

자세히 펼친 표에는 같은 일을 API로 했을 때의 요금(API 요금 환산)도 적었어요. 유료 요금제로 쓰면 이 돈이 따로 나가지 않아요. 시안과 AI 그림을 OpenAI API 키로 그리면 이미지 요금이 따로 들어요.

최솟값은 실제로 잰 단위값으로 계산했어요(2026-10-05).

잰 것	값
작업 폴더에서 프로젝트 만들기	3.2분, 0.9달러
스타일 추천, DESIGN.md 받기	0.95달러, 2.45달러
첫 화면(다듬기 없이)	12~19분, 4.45~6.34달러
두 번째 화면(따로 만들 때)	6~10분, 2.74~3.05달러
기능 하나를 만들고 검사하기	약 15분, 7달러
Nextflix 2~4장(4장에서 끊겨 이어 간 값 포함)	약 2시간 25분, 약 90달러

실제로 프리셋을 만들 때 단계마다 걸린 시간과 그 이유, 고쳐 달라고 할 때마다 더 드는 시간(한 군데 약 10분, 마무리 검토 한 번 더 2~3시간)은 만드는 과정과 걸리는 시간에 있어요.

5시간 한도에 걸리면

Claude Pro와 ChatGPT Plus 같은 유료 요금제는 처음 쓰기 시작한 때부터 5시간 동안 쓸 수 있는 양이 정해져 있어요. 에이전트가 오래 일하면 이 양을 다 써서 중간에 멈춰요.

멈추면: 에이전트가 한도에 걸렸다며 언제 풀리는지 알려 줘요. 만든 파일과 진행한 내용은 그대로 남아요.
기다리기: 알려 준 시각까지 기다려요. 5시간은 처음 쓰기 시작한 때부터 세서, 길면 4시간 넘게 기다릴 수 있어요. 컴퓨터는 꺼도 돼요.
이어 가기: 시각이 지나면 같은 프로젝트 폴더에서 에이전트를 열고 하던 작업 이어서 해줘라고 보내요. 멈춘 곳부터 이어서 해요.
기다리기 싫으면: 사용 크레딧을 켜면 바로 이어 가요. Claude Code는 /usage-credits로 켜고 API 요금으로 청구돼요. Codex는 크레딧을 사서 이어 가요.

튜토리얼의 "5시간 한도에 약 2번 걸려요"는 이 일을 두 번 겪는다는 뜻이에요. 일하는 시간은 그대로이고, 기다리는 시간만큼 끝나는 시각이 늦어져요.

주간 한도도 있어요. 일주일 동안 쓸 수 있는 전체 양이라, 다 쓰면 정해진 날까지 기다려야 해요. 한 주에 프리셋 몇 개는 넉넉히 만들 수 있지만, Nextflix를 끝까지 만들면 주간 한도에 닿을 수 있어요. 자주 만든다면 Claude Max나 ChatGPT Pro가 편해요. ChatGPT Pro는 지금 5시간 한도가 없어요.

남은 양은 Claude Code에서 /usage를 입력하거나 Codex의 사용량 화면에서 확인해요.

참고

두 회사 모두 한도를 토큰이나 금액으로 공개하지 않아요. 튜토리얼의 횟수는 Pro의 5시간 한도를 약 170만 토큰(API 요금 환산 약 30달러)으로 어림해 계산한 값이에요(2026-10-05 기준). Antigravity와 Grok Build의 한도로는 재지 않았어요. Codex는 가벼운 모델로 바꾸면 5시간 한도가 약 3배 늘어요.

이미지 그리기

pro-kit은 화면 시안(완성 화면을 미리 그린 그림)과 사진, 일러스트를 AI로 그릴 수 있어요. 에이전트마다 준비할 것이 달라요. 프리셋 팩으로 만들면 그림을 그리지 않아서 준비할 것이 없어요.

에이전트	그리는 방법	준비할 것	요금
Codex	자체 이미지 도구(image_gen)	없어요	ChatGPT 요금제 사용량 안에서
Antigravity, Grok Build	자체 이미지 도구(Antigravity는 generate_image, Grok Build는 image_gen)	없어요	그 도구의 사용량 안에서
Claude Code + ChatGPT 요금제	gpt-image 스킬이 Codex CLI를 불러 그려요	Codex CLI 설치와 ChatGPT 로그인	ChatGPT 요금제 사용량 안에서
Claude Code + API 키	pro-kit의 이미지 도구가 OpenAI API로 그려요	유료 OpenAI API 키를 `.env`에 저장	그린 장수만큼 내 OpenAI 계정에 요금이 청구돼요

Claude Code는 스스로 이미지를 그리지 못해서 위 두 가지 중 하나를 준비해야 해요. 둘 다 준비하면 API 키로 그려요. 화면 구성을 고르기 전에만 준비하면 돼요. 준비를 마친 뒤에는 에이전트를 닫았다가 다시 여세요.

준비하지 않아도 튜토리얼을 끝까지 할 수 있어요. 에이전트가 시안 그림 대신 간단한 배치도를 쓰고, 사진 자리는 내가 준 이미지를 쓰거나 이미지 없이도 보기 좋은 구성으로 만들어요.

ChatGPT 요금제로 그리기 (Claude Code)

ChatGPT 유료 요금제(Plus, Pro, Business, Edu, Enterprise)가 있으면 API 키 없이 그려요. pro-kit이 프로젝트에 함께 설치하는 gpt-image 스킬이 Codex CLI를 불러서, ChatGPT 요금제 사용량으로 그려요. 처음 한 번 Codex CLI를 설치하고 로그인해 두면 돼요.

터미널터미널에 입력

curl -fsSL https://chatgpt.com/codex/install.sh | sh

설치가 끝나면 터미널을 다시 열고 codex를 입력하세요. "Sign in with ChatGPT"를 골라 로그인한 뒤 /quit으로 닫으면 끝이에요.

API 키로 그리기 (Claude Code)

키 만들기

platform.openai.com(새 탭)에 로그인하고 결제 수단을 등록하세요.
API keys(새 탭) 메뉴에서 새 키를 만들고 복사해 두세요. 키는 만들 때 한 번만 보여요.

키 넣기 (처음 한 번)

작업 폴더 ~/projects에 .env 파일을 만들어 키를 적어요. 프롬프트를 보내기 전에 해 두면 돼요. 편집기로 하면 macOS와 Windows가 같아요. 여기서는 VS Code(새 탭)로 설명해요.

VS Code에서 파일 → 폴더 열기로 ~/projects 폴더를 열어요. Windows는 Ubuntu 터미널에 code ~/projects를 입력하면 열려요.
왼쪽 파일 목록에서 새 파일을 만들고 이름을 .env로 정해요. 이미 있으면 그 파일을 열어요.
OPENAI_API_KEY=를 적고 바로 뒤에 복사한 키를 붙여 넣은 뒤 저장해요.

저장한 줄은 OPENAI_API_KEY=sk-proj-여기에복사한키 모양이에요. 따옴표와 띄어쓰기 없이 붙여요. 배포용 토큰(GH_TOKEN, VERCEL_TOKEN)도 같은 파일에 한 줄씩 적어요(배포하기).

이제 평소처럼 에이전트를 열어 작업하면 돼요. Claude Code를 열 때 pro-kit이 이 파일에서 키를 읽어 이미지 도구에 넘겨요. 에이전트를 연 뒤에 키를 넣었다면 닫았다가 다시 여세요. 작업 폴더에 만든 프로젝트는 모두 이 키를 같이 써요. 작업 폴더는 git 저장소가 아니라서 이 파일은 GitHub에 올라가지 않아요.

도움말

1~2번은 에이전트에게 부탁해도 돼요. 작업 폴더에서 연 에이전트에게 이 폴더에 .env 파일을 만들고 VS Code로 열어줘라고 보내고, 열린 파일에 키를 직접 붙여 넣으세요.

주의

키는 비밀번호와 같아요. 에이전트 대화창에 붙여 넣지 마세요. 화면 캡처나 GitHub에도 남기지 마세요. 에이전트는 키를 이미지를 그리는 명령에만 쓰고, 출력하거나 다른 파일에 적지 않도록 pro-kit에 정해져 있어요.

배포 비용

배포는 선택이에요. 화면만 올릴 때는 GitHub Pages나 Vercel 무료 요금제(Hobby)로 충분해요(배포하기). GitHub Pages는 무료 계정이면 공개 저장소에서만 쓸 수 있고, Vercel Hobby는 개인적인 비상업 용도예요. 로그인과 DB가 있는 실제 서비스를 올리려면 Vercel과 Neon(인터넷에 있는 DB) 계정이 필요하고, 둘 다 무료 요금제로 시작할 수 있어요. 요금과 조건은 바뀔 수 있으니 각 사이트에서 확인하세요.