몬스터 도감 AI로 만들기, 오늘은 이걸 합니다. 이름이랑 속성, 한 줄 설정이 붙은 카드 12장이 화면에 쫙 뜨고, 다시 뽑기 누르면 다른 애들이 나오는 페이지예요. 지난 편에서 관계 카드 한 장 띄웠다면 이번엔 카드 수만 확 늘리는 셈입니다.
퇴근하고 이런 거 만들 때 제일 중요한 건 설명보다 첫 화면이 빨리 뜨는 거더라구요. 툴 구독료 내는 입장에서도 5분 안에 카드가 보이면 그때부터 아깝단 생각이 안 납니다.
준비물은 Codex 하나
Codex만 있으면 됩니다. 지금 OpenAI Codex docs 기준으로 Codex는 `AGENTS.md`를 작업 전에 읽고, `gpt-5.4`를 most tasks용으로 추천하고, ` /review `로 바뀐 파일만 읽어 검수할 수 있구요. 오늘은 이 세 가지만 씁니다. 몰라도 괜찮아 그냥 새 폴더 하나 열면 돼요.
일단 도감부터 띄우자
1
카드가 보이는 첫 화면 깔기
AI에게 보낸 프롬프트
새 폴더에서 몬스터 도감 웹페이지를 만들어줘. 파일은 `index.html` 하나만 써. 첫 화면에 카드 12장이 바로 보이게 하고, 각 카드에는 이름, 속성, 한 줄 설명이 들어가게 해줘. 상단에는 제목과 `다시 뽑기` 버튼만 두고, 디자인은 장난감 도감 느낌으로. 모바일에서도 카드가 깨지지 않게 해줘.
왜 이렇게 시켰나: 첫 결과는 무조건 가볍게 가야 해요. 여기서 저장, 공유, 로그인까지 한꺼번에 넣으면 바로 느려집니다.
이렇게 나오면 OK: 브라우저 열자마자 카드 12장이 보이고 버튼도 하나 보이면 됩니다.
⚠여기서 이렇게 하면 안 돼요: Step 1부터 100마리 목록이나 검색창까지 달라고 하면 첫 화면이 늦어져요.
2
이름 톤을 고정하는 규칙 넣기
AI에게 보낸 프롬프트
`AGENTS.md`를 만들고 규칙을 적어줘. 이름은 2~4음절, 속성은 불·물·숲·번개·밤·젤리·구름처럼 가볍게, 설명은 18자 안팎, 너무 무섭지 않게, 기존 유명 캐릭터 이름 흉내 금지. 카드 문구에 영어 남발도 금지해줘.
왜 이렇게 시켰나: 이거 안 넣으면 카드마다 분위기가 제멋대로 됩니다. Codex docs에 나온 대로 `AGENTS.md`를 먼저 읽게 두면 결과 톤이 확 덜 흔들려요.
이렇게 나오면 OK: 카드 이름이 한 세계관 안에서 나온 것처럼 맞춰지고, 설명 길이도 비슷하게 잡힙니다.
⚠여기서 이렇게 하면 안 돼요: 규칙을 길게 소설처럼 쓰면 오히려 흐려져요. 이름, 속성, 금지어만 짧게 박는 게 낫습니다.
3
누를 맛 나는 장치 세 개만 붙이기
AI에게 보낸 프롬프트
방금 만든 페이지에 기능 3개만 더 붙여줘. `다시 뽑기`를 누르면 카드 12장 전체가 새로 바뀌게 하고, 속성별 필터 칩을 추가하고, 카드를 누르면 큰 설명과 약점, 대표 대사가 팝업으로 뜨게 해줘. 파일은 여전히 `index.html` 하나로 유지해줘.
왜 이렇게 시켰나: 기능을 세 개씩만 잘라 시키면 수정이 편해요. 한 번에 너무 많이 붙이면 어디서 틀어졌는지 찾기 귀찮아집니다.
이렇게 나오면 OK: 버튼 한 번에 카드가 싹 바뀌고, 필터 누르면 같은 속성만 남고, 카드 누르면 팝업이 열리면 돼요.
⚠여기서 이렇게 하면 안 돼요: 데이터 저장까지 넣자고 하지 마요. 오늘은 보는 재미가 먼저입니다.
4
마지막으로 문구랑 간격만 다듬기
AI에게 보낸 프롬프트
`/review`로 보고 카드 설명이 서로 비슷한 부분, 모바일에서 버튼 간격이 답답한 부분, 팝업 닫기가 불편한 부분만 고쳐줘. 새 기능 추가는 하지 말고 지금 있는 것만 다듬어줘.
왜 이렇게 시켰나: Codex docs에 있는 ` /review `는 바뀐 파일만 읽고 문제를 짚어줘서 마지막 손질에 잘 맞아요. 막연하게 예쁘게 해달라기보다 어디를 볼지 찍어주는 게 훨씬 빨라요.
이렇게 나오면 OK: 카드 문장이 덜 겹치고, 휴대폰 폭에서도 버튼이 안 붙어 보이면 끝입니다.
⚠여기서 이렇게 하면 안 돼요: 그냥 예쁘게 해줘 한 줄로 던지면 원하지 않은 색이나 레이아웃까지 다 바뀔 수 있어요.
여기서 막히는 딱 세 군데
카드 이름이 너무 비슷할 때. 현상은 `뭉이`, `몽이`, `멍이`처럼 비슷한 이름만 계속 나오는 거예요. 원인은 `AGENTS.md`에 금지어는 있는데 이름 패턴이 너무 넓게 열려 있어서 그래요. 해결은 규칙에 `이름 첫 글자 반복 줄이기`, `받침 없는 이름만 3개 연속 금지`처럼 더 구체적으로 넣고, 기존 카드 12장만 다시 생성해달라고 시키면 됩니다.
버튼은 보이는데 눌러도 안 바뀔 때. 현상은 화면은 멀쩡한데 `다시 뽑기`가 장식처럼 서 있는 경우예요. 원인은 HTML과 JavaScript 연결이 빠진 채 디자인만 먼저 끝났기 때문입니다. 해결은 `버튼 클릭 때 카드 배열을 다시 만드는 함수에 실제로 연결해줘`라고 딱 찍어 말하고, 클릭을 세 번 해봐서 카드가 매번 달라지는지 확인하면 돼요.
휴대폰에서 카드가 잘릴 때. 현상은 컴퓨터에선 예쁜데 폰에선 카드가 세로로 찌그러지거나 팝업이 화면 밖으로 나가는 거예요. 원인은 첫 프롬프트에 모바일 기준 폭을 안 넣었거나, 너무 큰 여백을 잡았기 때문입니다. 이때는 화면 캡처 한 장을 붙여서 `375px 기준으로 카드 2열, 팝업 높이 줄여줘`라고 다시 보내면 빨리 잡혀요. Codex docs에 나온 image input을 여기서 쓰면 됩니다.
다음엔 그림까지 붙여보자
한 걸음 더
오늘 만든 몬스터 도감은 이름, 속성, 설명까지만 끝냈습니다. 다음엔 여기 그림 한 장씩 붙여서 진짜 스티커북처럼 키워도 재밌구요, 더 나가면 카드 하나를 골라 말투만 뽑아 캐릭터 챗 화면으로 이어도 됩니다. 몬스터 도감 AI로 만들기에서 여기까지만 해도 이미 친구한테 보여주기엔 충분합니다.
