소개
개발을 거의 모르는 마케터 + 클로드 코드를 이번 주에 처음 써본 클린이(?)입니다...
지금 일을 쉬고 있어서 시간은 많고, 만들고 싶은 건 더 많은 상황인데요. html/css는 2~3년 주기로 공부했다가 포기하기를 반복해왔던, 지구력은 부족한 사람이에요. 그래서 이번 스터디를 들으면서 코딩의 시작이 곧 클로드 코드였고, 클로드 코드의 시작이 곧 bkit이게 됐어요.
우선 머릿속에 있던 아이디어 중 세 개를 MVP로 만들어보기로 했습니다. 하나는 취미, 하나는 재미, 하나는 수익의 영역으로 분류했어요.
일단 클로드 코드 설치와, bkit 설치부터 쉽지 않았는데요. 스터디장님과 버디님이 사전에 제공해주신 영상들을 보고, AI에게 물어가며 성공했어요. 정말 아무것도 모르는 상태에서 제 아이디어를 던져봤는데, 설치한 날 세 개의 서비스가 모두 (당연히 미완성이지만) 생각 이상의 결과물이 나오더라구요.
그중 재미의 영역이 바로 '운명 분석 서비스'였습니다. 마침 디즈니 플러스에서 '운명전쟁49'를 재밌게 보고 있었고, 기존 사주나 mbti 분석 서비스들을 보면서 아쉬운 점들이 있었거든요.
UI가 너무 투박하거나
광고가 가득하거나
모바일에서 보기 불편하거나
말투가 어색하거나
그래서... 사주 + 별자리 + MBTI + 거주지를 조합해서 보기 좋게 제공해볼까? 그리고 디자인을 내 취향대로 꾸미면 어떨까? 라고 생각해봤어요. (나중에 결제 모델도 붙이면 좋고...!)
완전히 재미와 취향으로 출발해서, 처음 보는 클로드 화면과 친해지기 위해! 시작했습니다.
진행 방법
처음 프롬프트: 너무 대충 물어봤다
... 제 첫 재물운 결과예요. bkit을 설치하고서, "운명 분석 서비스 만들어줘" 수준으로 요청했거든요 ㅋㅋ
당연히 엉망으로 나왔습니다. 나중에야 깨달았는데, 기획 단계를 너무 건너뛴 거였습니다. 제 기획은 제 머릿속에만 있으니까요... 물론 기획 이외에도 고민할 거리가 참 많더라구요.
만세력은 어느 라이브러리를 쓸지?
말투는 어떻게 할지?
AI는 어느 모델을 쓸지?
로그인은 필요한지?
결제는 필요한지?
엉망진창이 된 서비스를 그렇게 몇번 주고받기를 반복하니, 처음부터 다 밀고 다시 시작하고 싶었지만 지시어 연습도 할 겸 계속 여기서 수정하면서 나아갔습니다. 그러자 처음 보는 용어들과 함께 오류들이 생기기 시작했어요.
주요 수정 사항들
만세력 계산 버그lunar-javascript 라이브러리 import 방식 오류로 실제 만세력 계산이 작동하지 않았습니다. 에러 메시지를 Claude Code에 붙여넣으니 바로 수정해줬습니다.
calculate:1 Failed to load resource: the server responded with a status of 500
page.tsx:56 POST http://localhost:3000/api/saju/calculate 500 (Internal Server Error)로그인 없는 MVP로 전환
초기 설계에 로그인이 포함돼 있었는데, 로그인 없이 접근하면 즉시 오류가 나더라고요. 프로 요금제라 토큰이 금방 소진됐고, MVP 단계에서 불필요하다고 판단해 "로그인·마이페이지는 나중에 붙이고, 일단 결과 먼저 보여주도록 바꿔줘"라고 지시했습니다. Claude Code가 관련 파일 전부를 찾아서 수정했습니다.
"니가 점검해봐" — Claude Code의 진짜 강점
API 키를 설정하고 나서 작동하는지 확인이 필요했습니다. 그냥 이렇게 말했습니다.
지금 잘 되는지 니가 직접 테스트해봐. 오류 있으면 고쳐줘.Claude Code가 직접 API를 호출해보고, 정상 작동하는지 확인하고, 문제가 있으면 찾아서 고쳐줬습니다. "확인해줘" 한마디면 넘어가는 게 없습니다. 이게 Claude Code를 단순한 코드 생성기와 구분하는 포인트입니다.
Supabase 연동 중 키 보안 실수
Supabase 시크릿 키가 화면 캡처에 그대로 노출되는 실수를 했습니다. 즉시 Supabase에서 해당 키를 revoke하고 재발급했습니다. API 키는 .env.local 파일에만 보관하고, .gitignore에 반드시 포함해야 한다고 해요.
AI 모델 삼전도
사주 분석 텍스트를 생성하는 AI 모델을 세 번 바꿨습니다.
Anthropic Claude API → 크레딧 부족으로 사용 불가
Google Gemini → free tier quota 문제로 사용 불가
Groq (Llama 3.3 70B) → 무료, 빠름, 정상 작동
최종적으로 Groq로 결정했지만, 한국어 품질 문제가 남았습니다.
실제 출력 예시:
이게 도대체 무슨 말일까요...! 제 종합 패턴에 한자, 러시아어까지 섞여 나왔습니다. Llama 모델이 한국어 지시를 완벽하게 따르지 못하는 한계였습니다. 프롬프트를 강화해서 어느 정 도 개선했지만, 근본적 해결을 위해선 한국어 성능이 더 좋은 모델로 교체가 필요합니다.
말투 스타일 — 머릿속엔 있는데 어떻게 지시할지 모르겠더라
"용한 점쟁이처럼..? 컨셉추얼한 사주 분석 사이트를 만들어보자"는 목표는 있었습니다. 그런데 이게 머릿속에는 있는데 어떻게 지시해야 할지 잘 모르겠었습니다.
클로드 채팅에게 인기 사주 크리에이터들의 콘텐츠를 분석해달라고 했고, 말투 규칙을 명확하게 만들었습니다.
금지:
존댓말 (~입니다, ~합니다)
한자·외국어 혼용
같은 내용 반복
권장:
반말 (~야, ~이야, ~거야, ~해, ~하게 돼)
질문형 도입: "왜 항상 비슷한 사람 만나는 거야?"
전문용어 번역: '비견 과다' → '혼자 하고 싶어하는 성향이 강해'
점술사가 직접 말하는 어조, 400~800자 분량
이걸 prompt.ts에 직접 반영하고 나서 결과물이 훨씬 자연스러워졌습니다.
UI — "아직 너무!!!! 마음에 안 들어요"
처음 디자인은 딥 블랙 + 골드 조합의 고급스러운 느낌이었습니다. 그런데 막상 보니까 올드했습니다. 두 번째 시도는 네온 핑크 클럽 느낌이었는데, 이것도 아니었습니다.
결국 레퍼런스 이미지들을 분석하면서 방향을 잡았습니다. MZ 감성 사주 콘텐츠의 특징:
블랙 베이스 + 비비드 5색 (무지개/홀로그래픽)
굵고 대담한 한글+영문 믹스 타이포
3D 리본/곡선 오브젝트
핵심은 "머릿속의 무드를 구체적인 레퍼런스로 만들어야 한다"는 것이었습니다. 막연하게 "힙하게 해줘" 는 통하지 않습니다. "이 이미지처럼, 이 색감으로, 이 타이포 느낌으로"가 필요합니다.
UI 부분은 그래픽과 타이포를 제가 직접 좀 더 잡아보고, 명확하게 지시할 예정이에요.
결과와 배운 점
1. 기획이 먼저다 (정말로)
Claude Code는 지시한 대로 만들어줍니다. 근데 그게 함정이기도 해요. "만들어줘"만 하면 AI도 방향을 못 잡습니다. 만세력 라이브러리는 뭘 쓸지, 로그인은 필요한지, 말투는 어떤지. 이걸 먼저 결정하지 않으면 수정을 반복하게 됩니다. 저는 이걸 몸으로 배웠습니다.
2. 막히는 건 대부분 개념 문제였다
Node.js가 뭔지, Claude Code랑 claude.ai가 왜 다른 건지, claude console은 뭔지, 이게 다 처음이었습니다. 기술이 어려운 게 아니라 개념 자체를 몰랐던 거라 초반에 개념 정리를 먼저 하면 훨씬 빠르게 갈 수 있을 것 같습니다.
3. "힙하게"는 통하지 않는다
머릿속엔 분명히 있는 무드인데 어떻게 말해야 할지 모르겠더라고요. 레퍼런스 이미지를 던지고, 색감을 구체적으로 말하고, 말투 예시를 들어야 비슷하게라도 나왔습니다. 이게 마케터가 원래 하는 일이기도 한데, AI한테도 똑같이 적용되더라고요.
4. MVP는 진짜 최소로
처음부터 로그인, 결제, 마이페이지 다 넣으려다가 아무것도 안 된 경험을 했습니다. "일단 사주 결과만 보여주는 것" 으로 줄이고 나서야 뭔가 실제로 돌아가기 시작했습니다. 당연한 말인데 실제로 해보면 욕심이 생기더라고요.
다음 계획은...
배포 — Vercel에 올려서 링크 공유 가능하게
회원가입 + 결과 저장 — 내 사주 결과를 다시 볼 수 있게
유료 결제 연동 — 상세 분석(연애운, 재물운, 월별 운세)은 결제 후 열람
공유 기능 — 내 사주 분석 결과를 카카오톡으로 공유
궁합 — 두 사람의 사주를 비교하는 기능
얼른 더 작업해보고 가져오겠습니다!
재사용 가능한 프롬프트
서비스 시작할 때
[서비스명]을 만들고 싶어.
사용 자가 [입력값]을 넣으면 [결과]를 보여주는 서비스야.
디자인 톤은 [분위기] 느낌으로.
MVP니까 [제외할 기능]은 나중에 붙이자.오류 났을 때
버튼 누르니까 오류가 나. 이 로그 봐줘:
[오류 메시지 붙여넣기]
고쳐줘.AI 출력 품질 조정할 때
지금 이런 답변이 나오는데:
[문제 있는 출력 붙여넣기]
이런 규칙으로 바꿔줘: [원하는 규칙]
근데 AI가 규칙 무시할 수도 있으니까,
출력 후에 자동으로 정제하는 필터도 만들어줘.점검 시킬 때
지금 잘 되는지 니가 직접 테스트해봐.
오류 있으면 고쳐줘.