웹에서 하는 틀린그림 찾기
그림을 비교하며 다섯 차이를 찾는 작은 게임이에요.
파일 제작은 PC에서 하면 편해요. 개인정보는 보내지 않고, 결제나 사용 한도 안내가 나오면 멈춰도 괜찮아요. 받은 게임이 로그인·결제·불필요한 권한을 요구하면 실행하지 마세요.
01먼저 한 판 해 보세요
설치 없이 새 탭에서 열려요.
달라진 곳을 찾으면 두 그림에 표시돼요. 막히면 ‘힌트’를 눌러 보세요.
결과 확인다섯 곳을 찾으면 완료 안내가 나와요. 다시 시작하면 표시가 사라져요.
02내 게임을 만들어 보세요
긴 문장을 처음부터 준비할 필요는 없어요. 하고 싶은 일을 말하고, 답을 보고 필요한 조건을 덧붙이면 돼요.
브라우저에서 하는 틀린그림 찾기 게임 만들어 줘.
이름이나 주제를 내 것으로 바꿔도 좋아요. 짧은 요청의 결과는 수업 예시와 달라질 수 있어요.
답을 받고 더 바꾸고 싶다면
결과를 보고, 원하는 것 한 가지만 더 말해 보세요. 같은 대화에 이어 보내요.
틀린 곳을 다 찾으면 축하 효과가 나오고, 다시 시작할 수 있게 해 줘.
무엇을 해야 할지 모르겠다면 필요한 도움부터 물어보세요.
처음 해 보는 거야. 다음에 무엇을 하면 되는지 한 단계씩 쉽게 알려 줘.
수업 예시의 자세한 조건이 궁금하다면
아래는 예시의 조건을 자세히 적은 요청이에요. 처음부터 전부 입력할 필요는 없어요.
브라우저에서 하는 틀린그림 찾기 게임을 index.html 한 파일로 만들어 줘. 이미지 생성 기능은 쓰지 말고, 코드 안에서 간단한 문구점 그림 두 장을 그려 줘. 차이는 다섯 곳만 두고 어느 쪽 그림을 눌러도 두 그림에 표시해 줘. 같은 곳을 다시 눌러도 점수는 한 번만 오르게 해 줘. 찾은 개수, 완료 안내, 힌트와 다시 시작 버튼을 넣어 줘. 휴대전화에서는 그림을 위아래로 놓고 터치로 할 수 있게 해 줘. 외부 파일, 인터넷 연결, 로그인은 필요 없게 해 줘. 저장할 전체 HTML 코드를 코드 블록 하나로 보여 줘.
새 대화에 붙여 넣고 보내세요.
받은 코드를 index.html로 저장해 브라우저에서 열어요.
결과 확인달라진 곳을 찾을 수 있나요? 어느 쪽을 눌러도 표시되고, 같은 곳의 점수는 한 번만 오르나요? 힌트·완료·다시 시작도 확인하세요. 없는 기능은 필요한 것부터 하나씩 추가해 달라고 부탁해요.
정답이 가려지거나 작동하지 않는다면
실제 첫 결과에서는 오른쪽 위 별이 선반 뒤에 가려졌어요. 내 게임에도 같은 문제가 있을 때만 아래 요청을 같은 대화에 보내세요. 다른 물건이 가려졌다면 이름과 위치를 바꾸세요.
두 그림의 오른쪽 위 별이 선반 뒤에 가려져 차이가 안 보여. 별을 선반과 다른 소품보다 앞에 그려서 별과 동그라미의 차이가 보이게 고쳐 줘. 다른 네 차이와 위치, 힌트, 점수, 다시 시작은 그대로 유지해 줘. 고친 전체 HTML을 코드 블록 하나로 보여 줘.
수정한 전체 코드로 기존 파일을 바꿔 저장하고 다시 열어요. 위 실제 게임 파일은 이 수정 응답의 코드 그대로예요.
코드를 파일로 저장하는 방법
PC 기준이에요. 코드 상자의 복사 버튼으로 <!DOCTYPE html>부터 </html>까지 복사해 메모장에 붙여 넣으세요. 앞뒤 설명은 빼요.
‘파일 → 다른 이름으로 저장’에서 파일 형식은 ‘모든 파일’, 인코딩은 ‘UTF-8’로 선택해 바탕 화면에 저장하세요.
index.html
Chrome이나 Edge로 열어요. 메모장이 뜨면 마우스 오른쪽 메뉴의 ‘연결 프로그램’에서 브라우저를 선택하세요. index.html.txt라면 ‘모든 파일’로 다시 저장해요. 기본 방법은 HTML 한 파일만 필요해요.
아이폰에서 해 보려면
웹 주소의 ‘실제 게임 해보기’로 수업 예시를 열 수 있어요. 이것은 내가 만든 파일을 여는 과정과 달라요. 아이폰 파일 미리보기에서 내 게임이 작동하는지는 아직 확인하지 않았어요.
삽화로 만든 참고 그림을 쓰고 싶다면
기본 요청은 코드로 그린 간단한 그림을 만들어요. 아래 삽화 첨부 방식은 실제 ChatGPT 실행을 확인하지 못한 선택 실습이에요. 그림을 첨부할 수 있는 계정이 필요해요.
새 대화에 그림을 첨부하고 아래 문장을 보내세요. 완성된 HTML과 그림 파일은 같은 폴더에 두세요.
첨부한 shop-differences.png로 브라우저에서 하는 틀린그림 찾기 게임을 만들어 줘. 그림은 1774×887px이고, 왼쪽 장면은 가로 0~863px, 오른쪽 장면은 910~1773px이야. 각 장면을 따로 잘라 나란히 보여 주고, 휴대전화에서는 위아래로 놓아 줘. 차이는 시계 바늘(장면 안 좌표 약 91%, 13%), 등불의 별(70%, 11%), 화분의 빨간 꽃(73%, 38%), 주전자 뚜껑(74%, 60%), 책 더미 가운데 책 색(28%, 74%) 다섯 곳이야. 어느 쪽 그림을 눌러도 해당 차이를 두 그림에 표시하고, 다 찾으면 완료 안내를 보여 줘. 힌트와 다시 시작 버튼도 넣어 줘. 결과는 index.html 한 파일로 작성하고 그림은 같은 폴더의 shop-differences.png를 참조해 줘. 외부 라이브러리와 로그인은 필요 없게 해 줘.
같은 그림을 써도 코드가 완전히 같아지지는 않아요. 표시 위치가 틀리면 차이 이름과 위치를 짚어 다시 요청하세요.
장면 하나를 바꿔 보세요
같은 게임을 내 방으로 바꿔 보고, 이전 결과와 비교해 보세요.
내 방으로 바꾸기
방금 만든 게임의 문구점을 내 방으로 바꿔 줘. 두 그림은 같은 방이고, 물건 다섯 곳만 다르게 해 줘. 어느 쪽을 눌러도 표시되는 기능, 힌트, 점수와 다시 시작은 유지해 줘. 저장할 전체 HTML 코드를 코드 블록 하나로 보여 줘.
새 그림에서도 차이가 다섯 곳인지 확인하세요. 이 추가 요청의 실제 결과는 아직 확인하지 않았어요.
내 말로 설명해 보기
“두 그림에서 같은 곳과 다른 곳을 어떻게 정했나요?” 한 문장으로 말해 보세요.
그림과 게임 제작 기록
2026년 10월 6일 ChatGPT 새 대화에 기본 요청을 보내고, 같은 대화에서 별을 고쳤어요. 당시 로그인하지 않았고 모델 이름은 표시되지 않았어요. 수정 응답의 HTML을 그대로 연결했어요.
320·390·768·1440px에서 다섯 차이, 양쪽 선택, 중복 점수 방지, 힌트·완료·다시 시작을 확인했어요. 휴대전화 크기의 브라우저 시험이며 실제 아이폰이나 초보자 시험은 아니에요. 같은 결과나 무료 이용은 보장하지 않아요.