왜 AI와 함께 코딩을 배울까요?
AI에게 묻고, 바로 실행하며 배우는 코딩
강의 결과물 미리보기
이 강의에서 만들 결과물을 미리 확인해보세요.
챕터별 결과 화면을 짧게 모아 전체 제작 흐름을 보여줍니다.
왜 게임으로 시작할까요?
게임은 코딩 결과가 바로 보이는 가장 쉬운 프로젝트입니다
이 강의의 장점
작은 프롬프트를 쌓아 완성까지 가는 실전형 학습
어떤 방식으로 배우나요?
Cursor와 Go Live로 만들고 바로 실행합니다
실습 환경 안내
이 강의는 기본적으로 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와 모바일에서 안정적으로 실행되는 완성 게임으로 정리합니다.