추천 대상
AI 코딩으로 진짜 움직이는 웹게임을 만들고 싶은 입문자
강의 결과물 미리보기
이 강의에서 만들 결과물을 미리 확인해보세요.
챕터별 결과 화면을 짧게 모아 전체 제작 흐름을 보여줍니다.
강좌 소개
한 번에 전체 게임 코드를 복사하지 않고, 게임판 만들기부터 뱀 한 칸 표시, 방향키 입력, 자동 이동, 먹이 생성, 점수와 길이 증가, 벽/자기 몸 충돌, 게임오버와 재시작까지 단계별 프롬프트로 완성합니다.
수강 기간은 결제일로부터 30일이며, Dashboard의 AI Lesson Player에서 슬라이드·퀴즈·미션·JavaScript 미리보기를 따라가며 학습합니다.
대상 수강생
코딩을 처음 시작하는 학생
HTML, CSS, JavaScript를 처음 배우는 초등 고학년·중학생·입문자에게 적합합니다.
게임으로 코딩을 배우고 싶은 학생
버튼, 점수, 타이머, 재시작 같은 게임 요소를 만들며 코딩 흐름을 익힙니다.
AI 도구로 만들어보고 싶은 학생
Cursor나 ChatGPT에 프롬프트를 입력하고 결과를 실행하며 개선하는 과정을 연습합니다.
배우는 내용
화면 구성
HTML과 CSS로 게임 화면, 버튼, 점수판, 안내 문구를 배치합니다.
이벤트 처리
버튼을 클릭했을 때 점수가 올라가고 화면이 바뀌는 흐름을 만듭니다.
게임 상태 관리
시작, 진행, 종료, 재시작 같은 게임 상태를 JavaScript로 관리합니다.
AI 프롬프트 개선
원하는 결과가 나오지 않을 때 AI에게 다시 요청하고 코드를 개선하는 방법을 배웁니다.
만들게 되는 결과물
클릭 점수 게임
버튼을 누르면 점수가 올라가는 기본 게임을 완성합니다.
제한 시간 시스템
10초 제한 시간 안에서 점수를 올리고 게임 종료 화면을 확인합니다.
재시작 기능
게임이 끝난 뒤 다시 시작할 수 있는 흐름을 만듭니다.
모바일 대응 화면
모바일에서도 보기 좋은 버튼과 점수판 화면으로 다듬습니다.
실습 환경 안내
이 강의는 기본적으로 Cursor + Go Live 환경을 기준으로 제작되었습니다.
하지만 Cursor가 없어도 아래 환경에서 실습할 수 있습니다.
- Visual Studio Code + GitHub Copilot + Go Live
- Visual Studio Code + ChatGPT / Gemini / Claude + Go Live
- Cursor + Go Live
중요한 것은 특정 도구가 아니라, AI에게 프롬프트를 입력하고 생성된 코드를 실행해 보며 수정하는 흐름입니다.
예제 자료 안내
예제 코드와 프롬프트는 수강 신청 후 본 강의에서 확인할 수 있습니다.
AI Web Game Starter
3종 패키지로 함께 배우기
AI에게 한 번에 게임을 만들어달라고 하지 않고, 단계별 프롬프트로 3개의 웹게임을 직접 완성합니다.
개별 정가 합계 127,000원
패키지 런칭가 89,000원
수강 기간 60일
무료 샘플 레슨
로그인 없이 무료 샘플 lesson을 바로 체험할 수 있습니다. 샘플로 학습 흐름을 확인한 뒤, 마음에 들면 수강 신청으로 전체 레슨을 이어갈 수 있습니다.
상세 커리큘럼
전체 14개 레슨 · 1시간 35분
1. 완성 결과 미리보기
완성된 뱀 게임을 먼저 실행해 보고, 방향키로 뱀을 움직이고 먹이를 먹으면 점수가 올라가는 전체 흐름을 확인합니다. 이번 강의에서 어떤 게임을 만들게 되는지 목표를 이해합니다.
1. 실습 환경 준비하기
Cursor와 VS Code, Go Live 환경을 준비하고 강의 자료 다운로드 방법을 확인합니다. 앞으로 만들 HTML, CSS, JavaScript 파일이 어떻게 실행되는지 확인합니다.
2. 실습 자료 다운로드 안내
전체 실습 소스 zip을 한 번에 다운로드하고 Cursor에서 진행하는 방법을 익힙니다.
1. 강의 소개: 완성 게임 미리보기
완성된 뱀 게임 화면을 다시 확인하고, 게임판, 뱀, 먹이, 점수, 게임오버가 어떤 순서로 만들어지는지 살펴봅니다. 이번 장에서 만들 기능의 전체 흐름을 이해합니다.
2. 게임판 만들기
뱀이 움직일 격자형 게임판을 화면에 만듭니다. 게임판 크기와 칸 간격을 정하고, 브라우저에서 뱀 게임의 기본 무대가 제대로 보이는지 확인합니다.
3. 뱀 머리 한 칸 표시하기
게임판 위에 뱀의 시작 위치를 한 칸으로 표시합니다. 아직 움직이지는 않지만, 뱀이 어디에서 출발하는지 화면에서 확인합니다.
4. 키보드 방향 입력 받기
키보드 방향키를 눌렀을 때 뱀이 이동할 방향을 바꿀 수 있게 만듭니다. 위, 아래, 왼쪽, 오른쪽 입력이 게임 안에서 어떻게 연결되는지 확인합니다.
5. 뱀이 자동으로 움직이게 하기
방향을 정하면 뱀이 일정한 속도로 앞으로 움직이게 만듭니다. 사용자가 계속 키를 누르지 않아도 뱀이 스스로 이동하는 기본 게임 흐름을 완성합니다.
6. 먹이 표시하기
게임판 안에 뱀이 먹을 먹이를 표시합니다. 먹이가 화면의 한 칸에 나타나도록 만들고, 뱀이 먹이를 향해 움직일 수 있는 구조를 준비합니다.
7. 먹이를 먹으면 점수 올리기
뱀이 먹이에 닿으면 점수가 1점씩 올라가게 만듭니다. 먹이를 먹은 뒤 새로운 먹이가 다시 나타나는지 확인하면서 게임의 목표를 완성합니다.
8. 먹이를 먹으면 뱀 길이 늘리기
먹이를 먹을 때마다 뱀의 몸이 한 칸씩 길어지도록 만듭니다. 점수만 오르는 게임이 아니라, 뱀이 점점 길어지는 진짜 뱀 게임 규칙을 추가합니다.
9. 벽 충돌과 게임오버 만들기
뱀이 게임판 밖으로 나가면 게임이 끝나도록 만듭니다. 벽에 부딪혔을 때 게임오버 화면이 나오고, 더 이상 게임이 진행되지 않는지 확인합니다.
10. 자기 몸 충돌 만들기
뱀이 길어진 뒤 자기 몸에 부딪히면 게임이 끝나도록 만듭니다. 단순히 먹이를 먹는 게임에서 벗어나, 조심해서 움직여야 하는 뱀 게임의 핵심 규칙을 완성합니다.
11. 완성된 뱀 게임 만들기
지금까지 만든 게임판, 뱀 이동, 먹이, 점수, 길이 증가, 충돌, 게임오버 기능을 하나로 정리합니다. PC와 모바일에서 완성된 뱀 게임이 안정적으로 실행되는지 최종 점검합니다.