추천 대상
AI 코딩을 처음 시작하는 초등 고학년·중학생·입문자
강의 결과물 미리보기
이 강의에서 만들 결과물을 미리 확인해보세요.
챕터별 결과 화면을 짧게 모아 전체 제작 흐름을 보여줍니다.
강좌 소개
AI에게 완성 코드를 한 번에 복사해오지 않고, 완성 결과 미리보기와 실습 환경·강의 자료 자료 구조를 익힌 뒤, 버튼 만들기부터 점수 표시, 클릭 점수, 게임 시작, 10초 제한 시간, 게임 종료와 다시 시작, 이미지·사운드 적용, 모바일 개선, 완성 마무리까지 13개 lesson으로 쌓아 올립니다.
수강 기간은 30일이며, Dashboard의 AI Lesson Player에서 슬라이드·퀴즈·미션·코드 미리보기를 따라가며 학습합니다.
대상 수강생
코딩을 처음 시작하는 학생
HTML, CSS, JavaScript를 처음 배우는 초등 고학년·중학생·입문자에게 적합합니다.
게임으로 코딩을 배우고 싶은 학생
버튼, 점수, 타이머, 재시작 같은 게임 요소를 만들며 코딩 흐름을 익힙니다.
AI 도구로 만들어보고 싶은 학생
Cursor나 ChatGPT에 프롬프트를 입력하고 결과를 실행하며 개선하는 과정을 연습합니다.
배우는 내용
버튼·점수·타이머를 한 번에 요…
버튼·점수·타이머를 한 번에 요청하지 않고 작은 단위로 쌓는 AI 코딩 방법
HTML/CSS/JS 결과를 확…
HTML/CSS/JS 결과를 확인하고 다음 프롬프트로 개선하는 흐름
게임 시작·종료·재시작과 간단한…
게임 시작·종료·재시작과 간단한 디자인 개선까지 이어지는 프로젝트 구조
화면 구성
HTML과 CSS로 게임 화면, 버튼, 점수판, 안내 문구를 배치합니다.
만들게 되는 결과물
클릭하면 점수가 오르는 버튼 게임
클릭하면 점수가 오르는 버튼 게임
10초 제한 시간과 게임오버·다…
10초 제한 시간과 게임오버·다시 시작이 있는 완성형 미니 게임
모바일에서도 보기 좋게 다듬은…
모바일에서도 보기 좋게 다듬은 웹 페이지
클릭 점수 게임
버튼을 누르면 점수가 올라가는 기본 게임을 완성합니다.
커리큘럼 요약
강의 소개, 실습 환경 준비(환경 설정·자료 다운로드 안내), 게임 만들기 3개 섹션에서 13개 lesson으로 버튼부터 완성 마무리까지 단계별로 완성합니다.
실습 환경 안내
이 강의는 기본적으로 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일
무료 샘플 레슨
앞의 2개 lesson은 무료 샘플입니다. 로그인 후 바로 플레이어를 열어 학습 UX를 확인하고, 마음에 들면 수강 신청으로 나머지 lesson을 이어가세요.
상세 커리큘럼
전체 13개 레슨 · 1시간 20분
1. 완성 결과 미리보기
완성된 클릭 점수 게임 결과를 확인하고 강의 목표를 이해한다.
1. 실습 환경 준비하기
Cursor/VS Code + Go Live 환경을 준비하고 실습 자료를 확인한다.
2. 실습 자료 다운로드 안내
전체 실습 소스 zip을 한 번에 다운로드하고 Cursor에서 진행하는 방법을 익힙니다.
1. 강의 소개: 완성 게임 미리보기
완성된 클릭 점수 게임을 먼저 실행해 보며, 버튼 클릭, 점수 증가, 제한 시간, 게임 종료 화면이 어떤 순서로 연결되는지 확인합니다. 이번 장에서 직접 만들 기능의 전체 흐름을 이해합니다.
2. 버튼 하나 만들기
Cursor에게 첫 프롬프트를 입력해 클릭 게임의 기본 버튼을 만들고, HTML·CSS·JavaScript가 한 화면에서 어떻게 연결되는지 확인합니다. 이 버튼은 이후 점수 증가 기능의 출발점이 됩니다.
3. 점수 표시하기
게임 제목과 점수 표시 영역을 추가해 현재 점수가 보이는 화면을 만듭니다. 플레이어가 게임 상태를 확인할 수 있는 기본 UI 구조를 익힙니다.
4. 클릭하면 점수 올라가게 하기
버튼을 클릭할 때마다 점수가 1점씩 올라가도록 JavaScript 이벤트와 변수를 연결합니다. 클릭 게임에서 가장 중요한 점수 증가 로직을 완성합니다.
5. 게임 시작 버튼 만들기
시작 버튼을 누른 뒤에만 게임이 진행되도록 시작 전 화면과 플레이 중 화면을 구분합니다. 실제 게임처럼 “대기 → 시작 → 플레이” 흐름을 만듭니다.
6. 제한 시간 만들기
10초 타이머를 추가해 제한 시간 안에만 점수를 올릴 수 있게 만듭니다. 시간이 끝나면 버튼을 멈추게 하며 게임 규칙과 긴장감을 더합니다.
7. 게임 종료와 다시 시작 만들기
시간이 끝났을 때 최종 점수를 보여주고, 다시 시작 버튼으로 점수와 시간을 초기화합니다. 한 번 실행하고 끝나는 화면이 아니라 반복해서 플레이할 수 있는 게임으로 완성합니다.
8. 이미지와 사운드 리소스 사용하기
준비된 이미지와 사운드 리소스를 적용해 단순한 버튼 게임을 더 재미있는 화면으로 꾸밉니다. 기능은 유지하면서 AI에게 UI 수정 요청을 보내 화면 완성도를 높입니다.
9. 모바일 화면 다듬기
PC와 모바일 화면에서 버튼, 점수판, 종료 화면이 자연스럽게 보이도록 CSS를 조정합니다. 화면 크기가 달라져도 게임 요소가 깨지지 않게 다듬습니다.
10. 완성된 게임 최종 점검하기
점수 증가, 시작 버튼, 타이머, 게임 종료, 다시 시작 기능을 하나씩 확인합니다. PC와 모바일에서 안정적으로 실행되는 완성 게임으로 정리합니다.