KREAM이 싼지 StockX가 싼지 볼 때 제일 귀찮은 건 가격표보다 계산이거든요. 달러를 원화로 바꾸고, 배송비 넣고, 수수료 더하다 보면 그냥 감으로 사게 됩니다. 오늘은 KREAM StockX 가격 비교 에이전트를 Claude Code 기준으로 같이 만들 거예요. 상품명, KREAM 가격, StockX 달러가만 넣으면 두 카드가 뜨고 어디가 더 싼지 바로 보여줍니다. 첫 화면은 5분 안에 나와요.
Claude Code 쓰는 분은 그대로 따라가면 되고, Codex 쓰는 분도 같은 프롬프트만 넣으면 흐름은 거의 같습니다. 오늘은 Claude Code 공식 문서에 나온 /init, Plan mode, Preview, Review code만 씁니다. 기능 욕심내지 말고 이 네 개만 잡고 가죠.
준비물은 하나면 끝
Claude Code 하나만 있으면 됩니다. 브라우저에는 KREAM이랑 StockX 검색 탭만 열어두세요. 로그인도 없어도 되고, 몰라도 괜찮아 그냥 붙여넣으면 됩니다.
KREAM StockX 가격 비교 에이전트 붙여보기
1
규칙 메모부터 깔기
AI에게 보낸 프롬프트
/init 한 뒤 CLAUDE.md에 아래 규칙을 넣어줘. 우리는 KREAM StockX 가격 비교 에이전트를 만들 거야. 첫 결과는 index.html 하나만 사용. 한국어 화면. 입력칸은 상품명, KREAM 원화 가격, StockX 달러 가격, 배송비, 수수료, 환율. 결과는 두 개의 가격 카드와 더 싼 쪽 배지. 로그인, DB, 프레임워크는 넣지 말기. 초보가 파일 더블클릭으로 바로 볼 수 있게 만들기.
왜 이렇게 시켰나: 이거 안 넣으면 Claude Code가 괜히 폴더를 늘리거나 멋 부린 화면부터 만들 수 있어요.
이렇게 나오면 OK: CLAUDE.md에 규칙이 짧고 또렷하게 정리됩니다.
⚠여기서 이렇게 하면 안 돼요: 첫 프롬프트에 알림, 차트, 저장, 로그인까지 한 번에 다 넣지 마세요.
2
한 파일짜리 첫 화면 띄우기
AI에게 보낸 프롬프트
index.html 하나로 KREAM StockX 가격 비교 에이전트 첫 버전을 만들어줘. 상품명 입력칸, KREAM 가격 입력칸, StockX 달러 가격 입력칸, 환율 입력칸, 비교하기 버튼만 먼저 넣어줘. 버튼을 누르면 KREAM 총액과 StockX 원화 환산 총액이 카드로 보이게 하고, 더 싼 쪽에 바로 배지를 붙여줘. 기본 예시값도 넣어서 파일을 열자마자 결과가 보이게 해줘.
왜 이렇게 시켰나: 빈 화면이 나오면 초보는 바로 불안해집니다. 예시값이 먼저 떠야 이거 진짜 되네가 나와요.
이렇게 나오면 OK: Preview나 브라우저에서 파일을 열었을 때 비교 카드 두 장이 바로 보입니다.
⚠여기서 이렇게 하면 안 돼요: 차트나 로그인 창부터 넣으면 첫 결과가 늦어져요.
3
검색 버튼과 진짜 계산 붙이기
AI에게 보낸 프롬프트
/plan 지금 있는 index.html에 아래만 추가해줘. 상품명으로 KREAM 검색 버튼과 StockX 검색 버튼 만들기. StockX 총액은 달러 가격, 배송비, 수수료를 더한 뒤 환율로 원화 계산하기. KREAM 총액은 원화 가격 그대로 보여주기. 비교 결과 문장은 한 줄로 크게 보이게 만들기. 파일은 계속 index.html 하나만 유지하기.
왜 이렇게 시켰나: 계산식이 붙는 순간부터 실수가 나기 쉬워요. Plan mode로 먼저 순서만 보고 가면 덜 흔들립니다. 계획이 뜨면 그대로 실행하라고 한 번만 말하면 돼요. 이건 외우지 말고 그냥 이렇게 해.
이렇게 나오면 OK: 상품명을 넣고 검색 버튼을 누르면 각 사이트 검색 탭이 열리고, 숫자 바꾸면 승자가 바로 바뀝니다.
⚠여기서 이렇게 하면 안 돼요: 원화와 달러를 같은 칸에서 섞어 계산하게 두면 결과가 뒤집힙니다.
4
마지막 세 번은 기억하게 만들기
AI에게 보낸 프롬프트
지금 앱에 최근 비교 3개 저장 기능과 결과 복사 버튼만 추가해줘. 브라우저를 새로 열어도 마지막 3개 상품명과 승자만 남아 있으면 돼. 복사 문장은 상품명, KREAM 총액, StockX 총액, 더 싼 쪽을 한 줄로 정리해줘. 디자인은 지금 스타일 그대로 유지해줘.
왜 이렇게 시켰나: 여기부터 진짜 편해져요. 다시 켰는데 어제 보던 운동화가 남아 있으면 계속 쓰게 됩니다.
이렇게 나오면 OK: 새로고침해도 최근 비교 3개가 남고, 복사 버튼 누르면 메모장에 한 줄 요약이 붙습니다.
⚠여기서 이렇게 하면 안 돼요: 저장 목록에 가격 원본까지 전부 쌓으라고 시키면 화면이 금방 지저분해져요.
5
계산 실수만 검수받기
AI에게 보낸 프롬프트
/review 숫자 계산, 빈 입력값 처리, 콤마가 들어간 가격 처리, 모바일 줄바꿈만 집중해서 봐줘. 큰 리팩토링 말고 꼭 고칠 것만 알려주고 바로 수정해줘.
왜 이렇게 시켰나: Claude Code 문서에 있는 Review code는 큰 버그, 계산 실수, 뻔한 문제를 잡는 데 강해요. 스타일 잔소리까지 받으면 초보는 더 헷갈립니다.
이렇게 나오면 OK: 빈칸일 때 경고가 뜨고, 329,000처럼 콤마가 들어가도 계산이 멀쩡합니다.
⚠여기서 이렇게 하면 안 돼요: 마지막에 디자인 갈아엎어달라고 하면 오늘 만든 흐름이 다시 꼬여요.
여기서 막히면
비교 버튼을 눌렀는데 NaN이 뜨는 경우가 있어요. 원인은 가격 칸에 329,000원처럼 콤마나 글자가 섞여 들어가서 그렇습니다. Claude Code에 숫자 계산 전 모든 입력값에서 쉼표, 원, 달러 기호를 지우고 계산하라고 한 줄 더 붙이면 바로 잡혀요.
StockX가 더 비싸야 하는데 자꾸 더 싸게 나오는 경우도 있습니다. 이건 배송비나 수수료가 계산식에서 빠졌거나, 환율이 0으로 들어간 경우가 많아요. 카드 아래에 계산식을 작은 글씨로 같이 보여달라고 시키면 어디가 빠졌는지 눈으로 바로 확인됩니다.
데스크톱에서는 멀쩡한데 폰에서 카드가 옆으로 삐져나오기도 해요. 원인은 카드 너비를 고정해둔 채 버튼까지 한 줄에 몰아넣었기 때문입니다. 768px 아래에서는 세로로 쌓고, 카드 최대 너비를 줄이라고 다시 시키면 금방 정리돼요.
다음엔 여기 알림 하나 붙이면 끝
한 걸음 더
오늘 만든 KREAM StockX 가격 비교 에이전트가 마음에 들면 다음엔 목표 가격 밑으로 내려왔을 때 텔레그램으로 보내게 붙여보세요. 그 순간부터는 계산기가 아니라 진짜 자주 여는 도구가 됩니다.
