/// 실습 · 만들면서 배우기 · 04

시아의 모험 축소판 — 점프 게임

게임 만들기의 첫 칸이다. 이 사이트의 달리기 게임을 한 판 해 보고, 규칙을 다섯 줄로 줄여 적고, Claude 에게 줄인 판을 만들게 한다. 받은 게임은 파일로 받아 직접 해 보고, 불편한 곳을 한 번에 하나만 고친다. 실습 01 · 02 에서 익힌 것을 그대로 쓴다.

걸리는 시간40분
요금제무료로 된다
준비물실습 01 · 실습 02 를 해 본 것, Chrome 또는 엣지
설치없음
이 페이지의 화면은

IC Infinite LAB 이 2026-09-27 에 이 순서 그대로 해 보며 찍었다. 채팅 목록 · 계정 · 이름 · 내 컴퓨터 경로는 흐리게 가렸다. 같은 글로 시켜도 매번 모양이 다른 게임이 나온다 — 우리도 두 번 시켰더니 전혀 다른 두 판이 나왔다. 그러니 화면이 이 페이지와 똑같지 않아도 된다. 규칙이 지켜지는지만 본다.

1. 원작을 한 판 한다

이 사이트의 시아의 모험 을 두세 판 해 본다(달리며 뛰어넘는 게임이다). 하면서 아래 네 가지만 눈여겨본다. 게임을 만들 때 말로 적어야 하는 것들이다.

  1. 무엇으로 조작하나 — 어떤 키를 누르면 무엇을 하나.
  2. 무엇에 부딪히면 끝나나 — 끝나는 조건.
  3. 점수는 어떻게 오르나 — 언제 몇 점.
  4. 시간이 지나면 무엇이 달라지나 — 빨라지나, 많아지나.

2. 규칙을 다섯 줄로 줄인다

원작에는 슬라이딩 · 체력 · 아이템 상자 · 무대 여러 개가 있다. 첫 판에 다 넣으면 어디서 틀렸는지 찾기 어렵다. 달리고, 뛰고, 부딪히면 끝나는 것만 남긴다.

남긴다뺀다(다음에)
스페이스바로 점프 · 장애물에 부딪히면 끝 · 넘을 때마다 1점 · 최고 점수 · 점점 빨라짐 슬라이딩 · 2단 점프 · 체력 · 아이템 · 무대 바꾸기 · 소리

3. 만들 것을 말한다

  1. claude.ai 에서 새로 생성을 누른다.
  2. 입력칸 아래 채팅이 골라져 있는지 본다(실습 01 과 같다).
  3. 아래 글을 붙여 넣고 보낸다. 마지막 줄은 실습 02 처럼 파일로 받으려고 넣었다.
간단한 달리기 점프 게임을 만들어 줘. 브라우저에서 바로 하는 화면으로.
· 주인공은 네모 캐릭터 하나. 왼쪽에 서 있고, 땅이 오른쪽에서 왼쪽으로 흐른다
· 스페이스바(휴대폰은 화면 터치)를 누르면 점프한다
· 장애물이 오른쪽에서 다가온다. 부딪히면 게임 끝
· 장애물 하나를 넘을 때마다 점수 +1. 화면 위에 '점수'와 '최고 점수'
· 시간이 지날수록 조금씩 빨라진다
· 게임이 끝나면 '다시 하기' 단추
· 파일 하나로, 인터넷 연결 없이도 돌게
claude.ai 새 채팅 입력칸에 달리기 점프 게임 글 여덟 줄을 붙여 넣은 모습, 오른쪽 아래 주황 보내기 단추
① 보내기 전에 여덟 줄이 다 들어갔는지 본다 — 모델 이름은 요금제에 따라 다르게 보일 수 있다

4. Claude 안에서 먼저 본다

1~2분 뒤 오른쪽에 게임 창이 열린다. 제목 · 색은 매번 다르다. 점수 · 최고 점수 · 시작 안내가 보이면 된 것이다.

Claude 화면 오른쪽에 Jump runner 라는 게임 창. 위에 점수 0 최고 점수 0, 가운데 네모 점프와 눌러서 시작, 노을 하늘과 노란 네모 주인공
① 오른쪽 게임 창 — 우리 때는 노을 하늘의 "네모 점프" 가 나왔다
막히면

이 창 안에서 스페이스바가 먹지 않는다 → Claude 화면 안의 게임 창은 페이지 속의 작은 페이지라, 키보드가 게임까지 닿지 않을 때가 있다(우리도 그랬다). 게임 화면을 한 번 눌러 보고, 그래도 안 되면 고치라고 하기 전에 5단계처럼 파일로 받아서 해 본다. 창 탓인지 게임 탓인지부터 가른다.

5. 파일로 받아 직접 해 본다

  1. 게임 창 위쪽 복사 옆의 작은 화살표(∨)를 누른다.
  2. HTML 형식으로 다운로드를 누른다. 다운로드 폴더에 jump-runner.html 처럼 이름 붙은 파일이 생긴다(이름은 매번 다르다).
  3. 실습 02 처럼 문서 › AI실습 폴더로 옮기고 더블클릭한다.
  4. 주소창 앞에 파일이 붙어 있으면 내 컴퓨터에서 연 것이다. 화면을 한 번 누르거나 스페이스바로 시작한다.
게임 창 위쪽 복사 옆 화살표를 누르자 HTML 형식으로 다운로드 와 아티팩트 게시 두 줄이 뜬 모습
① 복사 옆 화살표 · ② HTML 형식으로 다운로드 — "아티팩트 게시" 는 인터넷에 공개하는 것이라 이번에는 누르지 않는다
Chrome 으로 연 게임 파일. 주소창 앞에 파일, 가운데 네모 점프와 눌러서 시작
① 주소창 앞의 "파일" — 내 컴퓨터의 파일이다 · ② 눌러서 시작

뛰어서 장애물을 넘으면 왼쪽 위 점수가 하나씩 오른다. 부딪히면 끝난다.

달리는 중인 게임. 왼쪽 위 점수 2, 앞쪽에 어두운 장애물 두 개
① 장애물 둘을 넘어 점수 2
부딪혀 끝난 화면. 가운데 최고 기록! 점수 4, 다시 하기 단추, 오른쪽 위 최고 점수 4
① 끝 — 이번 판이 가장 잘했으면 "최고 기록!" · ② 최고 점수가 이번 점수로 바뀌었다

6. 새로고침해도 최고 점수가 남는지 본다

  1. F5 를 눌러 새로고침한다.
  2. 오른쪽 위 최고 점수를 본다.
새로고침한 뒤 시작 화면. 점수 0, 오른쪽 위 최고 점수 4 가 그대로
① 새로고침해도 최고 점수 4 — 우리가 시키지 않았는데 Claude 가 알아서 남겨 두었다
이렇게 보이면 성공

점수가 넘을 때마다 1씩 오르고, 새로고침해도 최고 점수가 그대로다. 그 기록은 실습 02 의 할 일 목록처럼 파일이 아니라 브라우저 안에 남는다. 그래서 다른 브라우저로 열면 최고 점수는 0 부터다.

7. 불편한 곳을 하나만 고친다

우리는 해 보다가 하나가 불편했다 — 게임이 끝난 화면에서 스페이스바를 눌러도 다시 시작되지 않았다(엔터나 마우스로만 됐다). 해 본 대로 적고, 하나만 고쳐 달라고 한다.

받아서 해 봤다. 잘 된다. 하나만 고쳐 줘 — 게임이 끝난 화면에서 스페이스바를 눌러도 다시 시작되지 않는다. 스페이스바로도 다시 하게 해 줘. 다른 곳은 그대로 두고.
줄왜 넣나
받아서 해 봤다. 잘 된다.어디까지는 되는지 먼저 알려 준다. 멀쩡한 곳을 다시 짜지 않게.
하나만 고쳐 줘 — 무엇이 어떻다본 것을 그대로 적는다. "이상하다" 보다 "스페이스바를 눌러도 다시 시작되지 않는다" 가 낫다.
다른 곳은 그대로 두고고치는 김에 다른 데까지 바뀌면, 무엇 때문에 달라졌는지 알 수 없다.
같은 대화의 입력칸에 고쳐 달라는 글을 넣은 모습. 오른쪽 게임 창에는 게임 끝 화면과 엔터 키로도 다시 할 수 있습니다 안내
① 같은 대화에 이어서 적는다 — 새 대화를 열면 앞에서 만든 게임을 모른다
Claude 의 답. 이제 게임이 끝난 화면에서 스페이스바로도 다시 시작된다, 게임 규칙 화면 속도는 건드리지 않았다, 0.4초 대기로 연타하다 부딪혔을 때 바로 다시 시작되지 않게 했다는 설명
① 무엇을 바꿨고 무엇은 안 건드렸는지 — 답에 이 두 가지가 있는지 본다

우리 때 Claude 는 "끝난 뒤 0.4초는 스페이스바로 다시 시작되지 않게" 했다고 덧붙였다. 점프하려고 연타하다 부딪히면 끝난 화면을 보기도 전에 새 판이 시작되기 때문이다. 이런 설명이 있으면 이유를 알고 쓸 수 있다.

8. 새 판으로 바꿔 넣고 확인한다

  1. 5단계처럼 다시 HTML 형식으로 다운로드한다. 같은 이름이 있으면 jump-runner (1).html 처럼 번호가 붙는다.
  2. 옛 파일은 jump-runner-before-스페이스재시작.html 로 이름을 바꿔 두고(실습 01 의 한 벌 받아 두기), 새 파일을 원래 이름으로 바꿔 AI실습 폴더에 넣는다.
  3. 새 파일을 열어 한 판 하고, 끝난 화면에서 스페이스바를 한 번 누른다.
새 판에서 게임이 끝난 화면. 안내가 스페이스바나 엔터 키로도 다시 할 수 있습니다 로 바뀌었고, 오른쪽 위 최고 점수 4
① 안내가 "스페이스바나 엔터 키로도" 로 바뀌었다 · ② 파일을 바꿨는데도 최고 점수 4 가 그대로 — 기록은 브라우저 안에 있다
스페이스바를 한 번 누르자 새 판이 시작되어 주인공이 달리는 모습, 점수 0
스페이스바 한 번에 새 판 — 고친 것 하나를 확인했다
막히면

고쳤다는데 그대로다 → 옛 파일을 연 것일 때가 많다. 주소창 끝의 파일 이름을 본다. 새로 받은 파일(번호가 붙은 쪽)을 열었는지 확인한다.
점수가 오르지 않는다 → 고치기 전에 원인부터 — "장애물을 넘었는데 점수가 0 그대로다. 언제 점수를 올리게 돼 있는지 먼저 알려 줘."
고쳤더니 다른 것이 달라졌다(색 · 속도 등) → "다른 곳은 그대로 두라고 했는데 속도가 바뀌었다. 속도만 원래대로." 그래도 꼬이면 한 벌 받아 둔 옛 파일로 돌아간다.

정리 — 세 줄

  1. 게임을 만들기 전에 원작을 해 보고 규칙을 줄여 적는다 — 조작 · 끝나는 조건 · 점수 · 빨라짐.
  2. Claude 화면 안에서 이상하면 파일로 받아 직접 해 보고, 창 탓인지 게임 탓인지부터 가른다.
  3. 고칠 때는 본 것을 적고, 하나만, 나머지는 그대로. 받을 때마다 옛 판을 한 벌 남긴다.
해 볼 것 · 15분
  1. 2단계에서 뺀 것 가운데 하나만 골라 넣게 한다 — 예: "아래 화살표를 누르고 있으면 몸을 낮춰 공중 장애물을 피하게 해 줘. 공중 장애물도 가끔 나오게. 다른 곳은 그대로."
  2. 받기 전에 지금 파일을 한 벌 남겨 둔다.
  3. 새 판에서 점프 · 최고 점수 · 스페이스바 재시작이 그대로 되는지 먼저 확인하고, 그다음 새 기능을 본다.

새 기능보다 원래 되던 것이 그대로인지를 먼저 보는 습관이, 게임이 커질수록 시간을 아껴 준다.

확인 질문 눌러서 답 보기
같은 글로 두 번 시켰더니 전혀 다른 게임이 나왔다. 잘못된 건가?

아니다. 같은 글이라도 매번 다르게 만든다. 모양이 달라도 적은 규칙이 지켜지는지를 본다 — 점프 · 끝나는 조건 · 점수 · 최고 점수 · 빨라짐.

Claude 화면 안의 게임에서 스페이스바가 안 먹는다. 바로 "고쳐 줘" 하면 되나?

먼저 파일로 받아 브라우저에서 직접 해 본다. 게임 창이 키보드를 못 받는 것일 수 있다. 창 탓인지 게임 탓인지 가른 뒤에 고치라고 한다.

파일을 새 판으로 바꿨는데 최고 점수가 그대로다. 왜인가?

최고 점수는 파일이 아니라 브라우저 안에 남기 때문이다(실습 02 와 같다). 같은 브라우저로 열면 파일이 바뀌어도 이어진다.