AI로 오늘 뭐 먹지 페이지 만들기, 오늘은 이걸 같이 해봅니다. 기분이랑 날씨만 고르면 메뉴 카드 3장이 툭 나오고, 이유도 한 줄씩 붙는 화면이구요. 지난 편에서 카톡 txt를 읽혔다면, 이번엔 아예 눌러 쓰는 웹 화면까지 갑니다.
배달 앱만 10분 넘게 보다 닫는 날 있잖아요. 저도 그 시간이 제일 아깝더라구요. 월 구독료 내는 입장에선 자주 켜는 결과물이 남아야 덜 아깝습니다.
준비물은 진짜 하나면 됨
빈 폴더 하나, Claude Code 또는 Codex 하나만 있으면 됩니다. Claude 쓰는 분은 Claude Code 데스크톱 Code 탭을 Local로 열면 되구요. Codex 쓰는 분은 Codex 앱이나 터미널에서 폴더를 열면 됩니다. Claude Code는 CLAUDE.md를 세션 시작 때 읽고, Codex는 AGENTS.md를 먼저 읽으니까 우리도 짧은 규칙 메모부터 깔아둘게요. Claude Code는 바꾸기 전에 diff를 보여주고 Accept 또는 Reject로 넘길 수 있어서 덜 무섭고, Codex도 interactive로 수정 과정을 보면서 밀어붙이기 좋습니다.
버튼 눌러가며 붙이기
1
규칙 메모부터 깔기
AI에게 보낸 프롬프트
이 폴더에 AGENTS.md 파일을 만들어줘. Claude Code를 쓰면 같은 내용으로 CLAUDE.md 파일명만 바꿔서 써도 돼. 규칙은 다섯 개만 넣어줘.
- 결과물은 index.html 한 파일부터 시작
- 화면은 모바일 먼저
- 문구는 짧고 가볍게
- 회원가입, 설치, 서버 연결 금지
- 오늘 목표는 오늘 뭐 먹지 페이지 하나 완성
왜 이렇게 시켰나: 이거 안 넣으면 AI가 갑자기 일을 키웁니다. 이건 외우지 말고 그냥 이렇게 해요.
이렇게 나오면 OK: 규칙 파일에 다섯 줄이 또렷하게 들어가면 끝입니다.
⚠여기서 이렇게 하면 안 돼요: 규칙에 기능 열 개를 한꺼번에 적지 마세요. 첫 메모가 길어지면 첫 결과가 느려집니다.
2
첫 화면만 5분 안에 띄우기
AI에게 보낸 프롬프트
index.html 하나만 만들어줘.
입력은 기분, 날씨, 배고픔 세 개만.
버튼은 '추천 받기' 하나.
결과는 메뉴 카드 3장 자리를 먼저 보여줘.
색감은 저녁 느낌으로, 외부 라이브러리 없이 만들어줘.
왜 이렇게 시켰나: 첫 화면이 보여야 손이 안 멈춥니다. 뼈대만 먼저 띄우면 반은 끝난 거예요.
이렇게 나오면 OK: 드롭다운이나 버튼이 보이고, 아래에 비어 있는 카드 3장이 있으면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 첫 프롬프트에 저장, 공유, 로그인까지 넣지 마세요. 첫 결과는 가볍게 가는 게 낫습니다.
3
메뉴 추천이 진짜 나오게 하기
AI에게 보낸 프롬프트
지금 index.html에 추천 로직을 붙여줘.
기분, 날씨, 배고픔 조합에 따라 한국에서 익숙한 메뉴가 나오게 해줘.
각 카드에는 메뉴 이름, 추천 이유 한 줄, 오늘 피하면 좋은 메뉴 한 줄을 넣어줘.
'다시 뽑기' 버튼도 추가해줘.
왜 이렇게 시켰나: 오늘 뭐 먹지 페이지는 생활감이 없으면 바로 티가 납니다. 떡볶이, 국밥, 샐러드, 마라탕처럼 실제로 손 가는 메뉴가 나와야 해요.
이렇게 나오면 OK: 버튼을 누를 때마다 메뉴 카드 3장이 바뀌고, 이유 문장이 너무 길지 않으면 됩니다.
⚠여기서 이렇게 하면 안 돼요: 메뉴 이름을 영어로 쓰게 두지 마세요. 광고 문구처럼 과장된 말도 빼는 게 좋습니다.
4
말투랑 화면을 짧게 다듬기
AI에게 보낸 프롬프트
결과 카드 문구를 더 짧게 줄여줘.
20~30대 한국인이 실제로 쓰는 말로 다듬고, 카드 높이는 맞춰줘.
모바일에서 첫 화면에 버튼이 보이게 여백도 손봐줘.
왜 이렇게 시켰나: AI는 꼭 한 번 길게 씁니다. 여기서 짧게 잘라야 진짜 쓸 만해져요.
이렇게 나오면 OK: 버튼이 한 화면 안에 들어오고, 카드 세 장 길이가 비슷하면 됩니다.
⚠여기서 이렇게 하면 안 돼요: '예쁘게 해줘'처럼 흐린 말만 던지지 마세요. 뭐가 불편한지 콕 찍어야 바로 잡힙니다.
5
다른 AI로 읽기만 검수하기
Codex로 만들었다면 Claude Code에 폴더를 열구요. Claude Code로 만들었다면 Codex에 같은 폴더를 열면 됩니다. 둘 다 없다면 이 단계는 건너뛰어도 오늘 결과물은 남습니다.
AI에게 보낸 프롬프트
이 폴더를 읽기만 해줘.
오늘 뭐 먹지 페이지를 모바일 기준으로 보고, 헷갈리는 점 3개만 적어줘.
직접 수정하지 말고 문제 위치와 고칠 방향만 짧게 써줘.
왜 이렇게 시켰나: 같은 AI는 자기 실수를 그냥 지나칠 때가 있거든요. 다른 눈 한 번 들어오면 헷갈리는 버튼이나 긴 문장이 잘 잡힙니다.
이렇게 나오면 OK: 문제 3개가 짧게 정리되면 됩니다. 길게 칭찬만 나오면 다시 돌리세요.
⚠여기서 이렇게 하면 안 돼요: '좋은지 봐줘'만 쓰면 흐려집니다. 모바일 기준, 세 개만, 읽기만이라고 꼭 박아두세요.
6
검수 메모 반영해서 마무리
AI에게 보낸 프롬프트
검수 메모를 반영해서 이 세 가지만 고쳐줘.
1) 카드 문구가 긴 부분 줄이기
2) 버튼 아래 여백 더 주기
3) 추천 이유가 겹치는 메뉴 바꾸기
파일은 그대로 index.html 하나만 유지해줘.
왜 이렇게 시켰나: 마지막엔 고칠 것만 고쳐야 합니다. 여기서 새 기능 붙이기 시작하면 다시 길어져요.
이렇게 나오면 OK: 바뀐 부분이 몇 군데 안 보이고, index.html 하나로 끝나면 성공입니다.
여기서 이렇게 하면 안 돼요: 검수 메모를 통째로 넣고 '알아서'라고 하지 마세요. 손볼 항목을 세 줄로 잘라주는 게 훨씬 낫습니다.
여기서 막히는 데는 거의 세 군데
1. 버튼을 눌러도 카드가 안 바뀝니다. 보통 원인은 버튼 이름과 script 안 이름이 다르게 적힌 경우예요. index.html에서 버튼 id와 script 쪽 id가 같은지만 먼저 보세요. 이름이 다르면 메인 AI에게 '버튼 id와 script id를 같은 이름으로 맞춰줘' 한 줄만 다시 보내면 됩니다.
2. 문구가 너무 오버합니다. 원인은 Step 1 규칙 메모에 말투 금지선이 약해서 그래요. AGENTS.md나 CLAUDE.md에 '광고 말투 금지, 친구 추천 말투, 과장 금지'를 한 줄 더 넣고 새 세션에서 다시 시작하면 확 줄어듭니다. 긴 대화 뒤로 갈수록 이 현상이 잘 나옵니다.
3. 모바일에서 버튼이 아래로 밀려 보이지 않습니다. 원인은 AI가 카드 높이를 먼저 키워서 첫 화면이 길어진 경우가 많아요. 미리보기에서 화면을 좁힌 뒤 버튼이 바로 보이는지만 확인하세요. 안 보이면 '첫 화면 한 번에 버튼이 보이게 카드 높이와 위아래 여백을 줄여줘'라고 다시 보내면 대부분 끝납니다.
다음엔 냉장고 재료 3개 붙여보자
한 걸음 더
오늘 뭐 먹지 페이지가 여기까지 나오면, 다음엔 냉장고에 남은 재료 세 개만 넣고 장 안 보고 먹을 메뉴만 뽑게 붙여보면 재밌습니다. 그때부터는 장난감 느낌이 좀 빠지구요. 퇴근길에 진짜 켜보게 됩니다.
