OX 퀴즈 게임, 필기 사진 한 장이면 바로 나온다

OX 퀴즈 게임, 필기 사진 한 장이면 바로 나온다

OX 퀴즈 게임, 필기 사진 한 장이면 바로 나온다

필기 사진이 게임이 되는 순간

오늘 만들 것
필기 사진이 게임이 되는 순간

OX 퀴즈 게임을 만들 건데요. 코드를 한 줄도 몰라도 됩니다. 손으로 적은 필기 사진 한 장만 있으면, AI가 그걸 읽고 바로 눌러볼 수 있는 HTML 파일까지 뽑아줍니다.

지난 편은 CSV로 우선순위를 뽑았다면, 오늘은 훨씬 가볍고 보여주기 좋은 쪽입니다. 친구한테 바로 보내도 되고, 모임 아이스브레이크로 써도 재밌구요.

매달 구독료 내는 입장에선 이런 건 설명 길게 듣는 것보다 5분 안에 첫 화면이 뜨는 게 낫더라구요. 오늘 목표도 그겁니다. OX 퀴즈 게임이 브라우저에서 바로 열리면 성공입니다.

준비물은 이 정도면 끝

도구는 둘 중 하나만 메인으로 쓰면 됩니다. Claude 쓰는 분은 필기 사진을 채팅창이나 Claude Code 창에 그냥 끌어다 놓으면 되고, Codex 쓰는 분은 이미지 파일을 같이 붙여서 시작하면 됩니다. 검수는 반대 도구를 읽기 전용으로 쓰면 편해요. Claude는 Plan Mode, Codex는 Read-only나 review 흐름이 있어서 파일을 막 건드리지 않고 먼저 봐줍니다.

필요한 건 필기 사진 1장, 저장할 폴더 1개, 그리고 복붙할 마음 정도면 충분합니다. 이건 외우지 말고 그냥 이렇게 해도 됩니다.

사진 던지고 바로 게임으로

1
첫 판부터 뜨게 만들기
AI에게 보낸 프롬프트
이 필기 사진 내용을 읽고 OX 퀴즈 게임 단일 HTML 파일을 만들어줘. 조건: index.html 하나로 끝내고, 모바일 우선으로 보여줘. 문제는 8개, 각 문제마다 O 버튼과 X 버튼, 답을 누르면 짧은 설명 한 줄, 마지막에 점수와 다시 하기 버튼을 넣어줘. 외부 라이브러리 없이 바로 열리게 해줘.
왜 이렇게 시켰나: 처음부터 많은 걸 바라면 늦어집니다. 파일 하나, 문제 8개, 모바일 우선. 이 세 개만 박아두면 첫 결과가 빨리 나옵니다.
이렇게 나오면 OK: index.html을 열었을 때 첫 문제와 큰 O/X 버튼이 바로 보이면 됩니다.

여기서 이렇게 하면 안 돼요: 문제를 20개로 늘리거나 로그인 같은 걸 붙여달라고 하면 첫 결과가 느려집니다.

2
애매한 문제를 걷어내기
AI에게 보낸 프롬프트
방금 만든 OX 퀴즈 게임에서 애매하거나 두 뜻으로 읽히는 문제는 빼줘. 쉬운 문제 5개, 살짝 헷갈리는 문제 3개로 다시 섞고, 각 설명은 45자 안으로 짧게 써줘. 사진에 없는 내용은 억지로 넣지 마.
왜 이렇게 시켰나: 필기 사진에서 게임을 만들 때 제일 흔한 실수가 AI가 빈칸을 상상으로 채우는 겁니다. 사진에 없는 내용 금지라고 미리 박아두면 훨씬 깔끔해져요.
이렇게 나오면 OK: 문제를 읽었을 때 한 번에 뜻이 들어오고, 설명도 길지 않으면 됩니다.

여기서 이렇게 하면 안 돼요: 더 똑똑해 보이게 해달라고만 쓰면 AI가 괜히 어려운 말을 붙입니다.

3
손맛 조금만 더하기
AI에게 보낸 프롬프트
지금 HTML에서 휴대폰 화면에 맞게 여백과 글자 크기를 다듬고, 진행률 표시, 현재 점수, 마지막 결과 카드, 다시 하기 버튼, 문제 순서 섞기만 추가해줘. 색은 2~3개만 쓰고 버튼은 엄지로 누르기 크게 만들어줘.
왜 이렇게 시켰나: OX 퀴즈 게임은 규칙보다 눌리는 맛이 더 중요합니다. 버튼이 작으면 바로 재미가 죽거든요.
이렇게 나오면 OK: 휴대폰으로 열었을 때 손가락으로 눌러도 답답하지 않고, 몇 문제째인지 바로 보이면 됩니다.

여기서 이렇게 하면 안 돼요: 애니메이션을 잔뜩 넣어달라고 하면 로딩만 늘고 산만해집니다.

4
다른 AI로 마지막 체크
AI에게 보낸 프롬프트
이 폴더의 OX 퀴즈 게임 파일을 읽기 전용으로 봐줘. 기능 추가 말고, 휴대폰에서 깨질 만한 점, 오탈자, 버튼 동작 오류만 5개 이내로 짚어줘. 바로 고칠 문장이나 코드도 같이 줘.
왜 이렇게 시켰나: 만든 AI가 자기 실수를 잘 못 볼 때가 있거든요. 다른 AI를 읽기 전용으로 넣으면 끝없는 수정 대신 바로 고칠 것만 남습니다.
이렇게 나오면 OK: 지적이 짧고 구체적이면 됩니다. 고칠 파일과 고칠 이유가 바로 보여야 해요.

여기서 이렇게 하면 안 돼요: 새 기능 아이디어까지 받아버리면 오늘 안에 안 끝납니다. 오류만 보자고 선을 그어야 합니다.

막히는 데는 늘 비슷합니다

  • 사진 글씨가 흐리면 문제가 이상하게 나옵니다. 그럴 땐 사진을 다시 찍지 말고, 헷갈리는 줄만 따로 텍스트로 덧붙여 주세요.
  • OX 퀴즈 게임이 너무 밋밋하면 색보다 문장을 먼저 손보세요. 문제를 짧게 자르면 체감이 바로 달라집니다.
  • 휴대폰에서 버튼이 겹치면 화면 전체를 다시 만들지 말고 버튼 크기와 여백만 키워달라고 따로 시키면 됩니다.

오늘 만든 건 작아도 바로 쓸 만합니다

오늘 만든 것은 필기 사진에서 나온 OX 퀴즈 게임 HTML 한 파일입니다. 저장해 두면 발표 전에 퀴즈용으로 써도 되고, 공부한 내용 복습용으로 돌려도 됩니다.

바로 써먹는 방법도 단순해요. 다른 필기 사진을 넣고 같은 프롬프트를 다시 보내면 새 OX 퀴즈 게임이 또 나옵니다. 그러니까 한 번 만들어두면 다음부터는 소재만 바꾸면 되죠.

다음에 한 발만 더 가보자면, 점수 기록을 남기고 친구랑 공유하는 링크 붙이기가 좋겠습니다. 여기까지 오면 장난감 같던 OX 퀴즈 게임이 꽤 오래 남는 물건이 됩니다.

댓글 쓰기

다음 이전