꿈 해몽 페이지 AI로 만드는 법, 오늘은 이걸 같이 해봅니다. 지난 편이 메뉴 추천이었다면 이번엔 텍스트 한 줄로 노는 쪽이구요. 완성되면 꿈 내용을 적고 버튼만 누르면 해석 카드가 바로 떠요.
친구한테 링크 보내서 서로 꿈 넣어보면 은근 재밌습니다. 저도 이런 건 괜히 밤에 한 번 더 눌러보게 되더라구요.
준비는 하나만
Codex 하나만 있으면 됩니다. Claude Code 쓰는 분도 아래 프롬프트를 거의 그대로 넣으면 되는데, 오늘 글은 Codex 기준으로 갈게요. 폴더 하나 만들고 그 안에서 시작하면 충분합니다.
매달 구독료 내는 입장에선 이런 건 복잡하게 붙이지 말고, 일단 화면부터 나오는 게 제일 속 편하거든요.
일단 띄우고, 그다음 다듬자
1
첫 화면부터 띄우기
AI에게 보낸 프롬프트
지금 폴더에 index.html 하나만 만들어줘. 주제는 꿈 해몽 페이지. 기능은 3개만: 꿈 설명을 적는 큰 입력칸, 해몽 버튼, 결과 카드. 결과 카드는 입력한 꿈에서 키워드를 읽어서 따뜻하고 재밌는 해석 2~3문장으로 보여줘. 모바일에서 보기 편하게 만들고, 파일은 절대 나누지 말아줘.
왜 이렇게 시켰나: 첫 결과를 빨리 보려면 한 파일짜리가 제일 편해요. 이거 안 넣으면 AI가 파일을 괜히 여러 개로 찢어놓는 경우가 있어요.
이렇게 나오면 OK: 브라우저에서 열었을 때 입력칸 하나, 버튼 하나, 결과 카드 하나가 바로 보이면 됩니다.
여기서 이렇게 하면 안 돼요: 처음부터 로그인, 저장, 공유까지 한 번에 넣으려 하지 마세요. 첫 화면이 늦게 나오면 바로 귀찮아집니다.
2
해석 말투 고정하기
AI에게 보낸 프롬프트
AGENTS.md를 만들어줘. 규칙은 이거야. 1) 말투는 가볍고 따뜻하게 2) 무섭게 겁주는 표현 금지 3) 결과는 항상 짧게 4) 카드 안에 오늘의 한 줄, 지금 기분, 가볍게 해볼 행동 한 개를 보여주기. 그리고 index.html도 이 규칙에 맞게 바로 수정해줘.
왜 이렇게 시켰나: Codex 공식 문서 기준으로 AGENTS.md를 먼저 읽고 들어가거든요. 이 한 장이 있으면 결과 톤이 덜 흔들립니다.
이렇게 나오면 OK: 같은 꿈을 몇 번 넣어도 문체가 크게 튀지 않고, 괜히 섬뜩한 문구가 안 나오면 됨.
⚠여기서 이렇게 하면 안 돼요: 규칙을 길게 쓰면 읽지도 못하고 흐려져요. 금지어와 톤만 짧게 박아두는 게 낫습니다.
3
짧은 꿈도 재밌게 만들기
AI에게 보낸 프롬프트
/plan 입력이 한 줄이어도 결과가 심심하지 않게 보강하고 싶어. falling, teeth, ex, school, water, late 같은 자주 나오는 꿈 버튼 6개를 넣고, 버튼 누르면 예시 문장이 자동으로 들어가게 설계해줘. 구현 전에 뭘 바꿀지 먼저 짧게 계획 보여줘.
왜 이렇게 시켰나: Codex 문서에 있는 /plan이 이런 때 좋아요. 머릿속이 애매할 때 바로 코드부터 치는 것보다 훨씬 덜 꼬입니다.
이렇게 나오면 OK: 예시 버튼 몇 개만 눌러도 바로 결과가 바뀌고, 빈칸에서 멈추는 느낌이 없어야 해요.
⚠여기서 이렇게 하면 안 돼요: 계획 없이 바로 기능 6개를 붙이면 버튼은 생겼는데 연결이 안 되는 식으로 흔들릴 수 있어요.
4
화면 캡처 한 장으로 분위기 바꾸기
AI에게 보낸 프롬프트
지금 띄운 페이지 스크린샷을 같이 볼게. 배경은 밤하늘 느낌으로, 결과 카드는 더 또렷하게, 버튼은 손가락으로 누르기 쉽게 크게 바꿔줘. 기존 기능은 건드리지 말고 index.html만 수정해줘.
왜 이렇게 시켰나: Codex는 공식 문서 기준으로 스크린샷도 같이 읽을 수 있어요. 말로만 예쁘게 해달라 하는 것보다 캡처 한 장 던지는 게 훨씬 빠릅니다.
이렇게 나오면 OK: 분위기는 달라졌는데 입력칸, 버튼, 결과 카드 흐름은 그대로면 성공.
⚠여기서 이렇게 하면 안 돼요: 예쁘게만 해달라고 하면 기능까지 뜯어버릴 수 있어요. 기존 기능 유지 문장은 꼭 넣으세요.
5
마지막으로 삐끗한 곳만 보기
AI에게 보낸 프롬프트
/review 모바일에서 글 잘리는 곳, 버튼이 답답한 곳, 해석이 너무 길어지는 곳만 봐줘. 큰 문제 3개만 알려주고 바로 고칠 문장도 같이 적어줘.
왜 이렇게 시켰나: 마지막엔 사람이 다 찾으려 들지 마세요. Codex 공식 문서에 있는 /review로 위험한 데만 먼저 찍는 게 빠릅니다.
이렇게 나오면 OK: 수정할 곳이 2~3개로 좁혀지고, 바로 다시 붙여넣을 문장이 나오면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 리뷰 단계에서 새 기능 추가까지 시키지 마세요. 끝날 타이밍을 놓칩니다.
여기서 막히는 지점 세 군데
1. 해석이 너무 밋밋함. 현상은 어떤 꿈을 넣어도 비슷한 말만 반복되는 거예요. 원인은 첫 프롬프트에 예시 꿈이나 결과 형식이 없어서 그래요. 해결은 예시 버튼 6개를 넣고, 결과를 오늘의 한 줄-지금 기분-가볍게 해볼 행동으로 고정하면 됩니다.
2. 파일이 여러 개로 늘어남. 현상은 style.css나 script.js가 갑자기 생기면서 초보가 바로 겁먹는 경우예요. 원인은 AI가 친절하게 구조를 나누려 든 거죠. 해결은 새 세션에서 index.html 하나만, 파일 분리 금지라고 다시 적고 시작하면 대부분 바로 정리됩니다.
3. 예뻐졌는데 버튼이 안 먹음. 현상은 스크린샷 수정 뒤에 클릭이 이상해지는 거예요. 원인은 디자인 수정 요청에 기능 유지 문장이 빠졌을 때가 많아요. 해결은 기존 기능은 절대 건드리지 말고 UI만 바꿔달라고 적고, /review에서 버튼과 모바일만 콕 집어 다시 보게 하면 됩니다.
여기서 한 번 더 놀기 좋음
한 걸음 더
오늘 만든 꿈 해몽 페이지에 localStorage만 하나 붙이면 꿈 기록장으로 바로 바뀝니다. 다음 편은 이 기록을 가지고 말투 있는 캐릭터가 답해주는 쪽으로 이어가도 재밌겠더라구요.
