MBTI 궁합 분석기부터 만들죠. INFP랑 ENTJ만 골라도 카드 한 장에 분위기, 부딪히는 지점, 같이 하면 재밌는 걸 바로 보여주는 화면입니다. 지난 편이 플레이리스트 카드였다면 이번엔 친구나 썸 상대랑 바로 돌려보기 좋은 쪽이구요. 월 구독료 내는 입장에선 이런 건 첫 화면이 5분 안에 떠야 덜 아깝더라구요.
준비는 하나만
Claude 쓰는 분은 브라우저 Claude Code에서 새 폴더 열면 되고, Codex 쓰는 분도 같은 프롬프트 거의 그대로 갑니다. 둘 다 켤 필요는 없어요. 오늘은 Claude Code로 갈게요. 브라우저에서 바로 시작할 수 있고, CLAUDE.md로 말투 규칙을 묶어둘 수 있어서 이런 MBTI 궁합 분석기 만들 때 손이 덜 갑니다.
손부터 움직이자
1
MBTI 궁합 분석기 첫 화면 띄우기
AI에게 보낸 프롬프트
새 폴더에서 시작해. index.html 파일 하나만 만들고, MBTI 두 개를 고를 수 있는 아주 단순한 페이지를 만들어줘. 결과는 카드 1장으로 보여주고, 모바일에서도 한 화면에 들어오게 해줘. 아직 기능 많이 넣지 말고 선택창 2개와 결과 카드만 먼저 보여줘.
왜 이렇게 시켰나: 첫 프롬프트에 욕심내면 AI가 페이지를 괜히 무겁게 만듭니다.
이렇게 나오면 OK: 드롭다운 두 개와 빈 결과 카드가 바로 보이면 됨.
⚠여기서 이렇게 하면 안 돼요: 공유 버튼, 저장 기능, 애니메이션까지 한 번에 넣지 마세요.
2
조합마다 말이 달라지게 만들기
AI에게 보낸 프롬프트
지금 페이지에 16개 MBTI를 모두 넣어줘. 조합마다 결과가 조금씩 달라 보이게 해줘. 카드에는 한 줄 궁합 요약, 잘 맞는 순간 1개, 부딪히는 순간 1개, 같이 하기 좋은 데이트 1개만 넣어줘. 너무 진지한 심리검사 말투 말고, 친구한테 보여주기 좋은 가벼운 한국어로 써줘.
왜 이렇게 시켰나: MBTI 궁합 분석기는 보는 맛이 먼저라서 카드 구성이 짧고 또렷해야 합니다.
이렇게 나오면 OK: INTP랑 ENFP를 넣었을 때 카드 문구가 바뀌면 성공.
⚠여기서 이렇게 하면 안 돼요: 설명을 길게 쓰게 두면 카드가 블로그 글처럼 늘어집니다.
3
말투 흔들림 막기
AI에게 보낸 프롬프트
CLAUDE.md를 만들어줘. 규칙은 네 가지야. 첫째, 오글거리는 연애 상담 말투 금지. 둘째, 각 문장은 짧게. 셋째, 과한 영어 섞지 말기. 넷째, 카드 문구는 친구에게 보여줘도 민망하지 않은 톤. 그리고 그 규칙을 읽고 MBTI 궁합 분석기 카드 문구를 한 번 더 다듬어줘.
왜 이렇게 시켰나: 이거 안 넣으면 어느 순간 문구가 갑자기 과몰입 톤으로 튑니다.
이렇게 나오면 OK: 카드가 가볍고 담백한데 심심하진 않으면 됨.
⚠여기서 이렇게 하면 안 돼요: 새 세션에서 규칙 파일 없이 다시 수정하면 문구 톤이 또 흔들려요.
4
눌러볼 맛 붙이기
AI에게 보낸 프롬프트
결과 카드 아래에 예시 조합 랜덤 버튼 하나와 결과 복사 버튼 하나만 추가해줘. 버튼 문구는 한국어로 짧게. 디자인은 과하지 않게, 카드가 주인공처럼 보이게 정리해줘.
왜 이렇게 시켰나: 사람은 첫 결과 보고 바로 캡처하거나 친구한테 보내고 싶어하거든요.
이렇게 나오면 OK: 버튼 두 개가 붙고, 랜덤을 누를 때 카드가 바로 바뀌면 됨.
⚠여기서 이렇게 하면 안 돼요: 버튼을 세 개 네 개 늘리기 시작하면 첫 화면 집중이 깨집니다.
5
마지막으로 어색한 데만 고치기
AI에게 보낸 프롬프트
이 MBTI 궁합 분석기 페이지를 처음 보는 사람처럼 읽어줘. 어색한 문구 3개, 모바일에서 답답한 곳 2개만 짚고 바로 고쳐줘. 새 기능 추가는 하지 말고 지금 있는 것만 손봐줘.
왜 이렇게 시켰나: 마지막엔 크게 바꾸지 말고 삐끗한 데만 잡는 게 제일 빠릅니다.
이렇게 나오면 OK: 카드 문구가 덜 튀고 휴대폰에서도 덜 답답하면 끝.
⚠여기서 이렇게 하면 안 돼요: 검수 단계에서 갑자기 다크모드나 로그인 같은 걸 붙이면 다시 길어집니다.
여기서 막히면
문구가 너무 오글거린다. 현상은 카드에 운명, 천생연분 같은 말이 슬쩍 끼어드는 쪽입니다. 원인은 규칙을 안 적었거나, 대화가 길어지면서 초반 톤을 까먹었기 때문인 경우가 많아요. 해결은 간단합니다. CLAUDE.md에 금지어를 더 적고, 오글거리는 예시 한 줄까지 넣은 뒤 다시 다듬어달라고 하면 금방 내려옵니다.
선택을 바꿨는데 카드가 그대로다. 현상은 MBTI를 바꿔도 처음 문구가 계속 남아 있는 경우예요. 원인은 선택창이 바뀔 때 결과 카드를 다시 그리라는 연결이 빠진 겁니다. 해결할 때는 어려운 말 외우지 말고 그냥 이렇게 붙여넣어도 됩니다. 선택이 바뀔 때마다 결과 카드도 바로 바뀌게 연결해줘, 지금은 한 번만 그려지는 상태야.
휴대폰에서 카드가 길게 밀린다. 현상은 카드가 예쁘긴 한데 아래로 너무 늘어져서 캡처하기 귀찮아지는 쪽입니다. 원인은 한 줄 설명이 길거나 여백이 넓어서 그래요. 해결은 320px 화면에서도 카드가 한 번에 읽히게 줄여줘, 각 문장은 최대 한 줄 반 정도로 맞춰줘라고 시키면 됩니다.
다음에 하나만 더 붙인다면
한 걸음 더
여기까지 만들면 MBTI 궁합 분석기만으로도 꽤 놀기 좋습니다. 다음엔 이 카드 아래에 대화창 하나만 붙여서 내 캐릭터 챗봇 쪽으로 꺾어보면 또 재밌겠더라구요.
