추천 대상
게임 만들기를 좋아하는 초보자·AI 코딩 입문자
강의 결과물 미리보기
이 강의에서 만들 결과물을 미리 확인해보세요.
챕터별 결과 화면을 짧게 모아 전체 제작 흐름을 보여줍니다.
강좌 소개
테트리스는 블록 이동, 회전, 줄 삭제를 작은 기능으로 나누어 AI에게 요청하면 안전하게 완성할 수 있습니다.
Dashboard AI Lesson Player에서 슬라이드·퀴즈·미션을 따라가며, 무료 샘플로 학습 흐름을 먼저 확인한 뒤 전체 lesson을 이어갈 수 있습니다.
대상 수강생
코딩을 처음 시작하는 학생
HTML, CSS, JavaScript를 처음 배우는 초등 고학년·중학생·입문자에게 적합합니다.
게임으로 코딩을 배우고 싶은 학생
버튼, 점수, 타이머, 재시작 같은 게임 요소를 만들며 코딩 흐름을 익힙니다.
AI 도구로 만들어보고 싶은 학생
Cursor나 ChatGPT에 프롬프트를 입력하고 결과를 실행하며 개선하는 과정을 연습합니다.
배우는 내용
게임 목표와 조작 키를 한 문장…
게임 목표와 조작 키를 한 문장·목록으로 정리하는 방법
블록 이동·회전·줄 삭제를 단계…
블록 이동·회전·줄 삭제를 단계별 프롬프트로 요청하는 연습
AI 결과를 확인하고 다음 단계…
AI 결과를 확인하고 다음 단계 요청으로 이어가는 디버깅 흐름
화면 구성
HTML과 CSS로 게임 화면, 버튼, 점수판, 안내 문구를 배치합니다.
만들게 되는 결과물
테트리스 화면 틀과 첫 블록이…
테트리스 화면 틀과 첫 블록이 보이는 프로토타입
좌우 이동·회전이 동작하는 플레…
좌우 이동·회전이 동작하는 플레이 가능한 미니 게임
줄 삭제와 점수 개념이 들어간…
줄 삭제와 점수 개념이 들어간 완성형 웹 테트리스
클릭 점수 게임
버튼을 누르면 점수가 올라가는 기본 게임을 완성합니다.
커리큘럼 요약
게임판, 블록 표시, 이동·회전, 자동 하강, 고정, 줄 삭제·점수, 다음 블록, 게임오버·재시작, 최종 완성까지 10개 lesson으로 테트리스를 완성합니다.
실습 환경 안내
이 강의는 기본적으로 Cursor + Go Live 환경을 기준으로 제작되었습니다.
하지만 Cursor가 없어도 아래 환경에서 실습할 수 있습니다.
- Visual Studio Code + GitHub Copilot + Go Live
- Visual Studio Code + ChatGPT / Gemini / Claude + Go Live
- Cursor + Go Live
중요한 것은 특정 도구가 아니라, AI에게 프롬프트를 입력하고 생성된 코드를 실행해 보며 수정하는 흐름입니다.
예제 자료 안내
예제 코드와 프롬프트는 수강 신청 후 본 강의에서 확인할 수 있습니다.
무료 샘플 레슨
앞의 2개 lesson은 무료 샘플입니다. 로그인 후 바로 플레이어를 열어 학습 UX를 확인하고, 마음에 들면 수강 신청으로 나머지 lesson을 이어가세요.
상세 커리큘럼
전체 16개 레슨 · 1시간 30분
1. 완성 결과 미리보기
완성된 테트리스 게임을 먼저 실행해 보고, 블록이 내려오고 줄이 사라지며 점수가 올라가는 전체 흐름을 확인합니다. 이번 강의에서 어떤 게임을 만들게 되는지 목표를 이해합니다.
1. 실습 환경 준비하기
Cursor와 VS Code, Go Live 환경을 준비하고 강의 자료 다운로드 방법을 확인합니다. 앞으로 만들 HTML, CSS, JavaScript 파일이 어떻게 실행되는지 확인합니다.
2. 실습 자료 다운로드 안내
전체 실습 소스 zip을 한 번에 다운로드하고 Cursor에서 진행하는 방법을 익힙니다.
1. 강의 소개: 완성 게임 미리보기
완성된 테트리스 게임 화면을 다시 확인하고, 게임판, 블록 이동, 회전, 자동 하강, 줄 삭제, 점수, 게임오버가 어떤 순서로 완성되는지 살펴봅니다.
2. 게임판 만들기
테트리스 블록이 쌓일 10열 x 20행 게임판을 만듭니다. 배경과 보드 프레임을 적용해 브라우저에서 테트리스의 기본 무대가 제대로 보이는지 확인합니다.
3. 떨어지는 블록 하나 만들기
게임판 위에 테트리스 블록 하나를 표시합니다. 아직 움직이지는 않지만, 블록 모양과 시작 위치가 화면에 제대로 나타나는지 확인합니다.
4. 왼쪽·오른쪽 이동 만들기
키보드 방향키로 블록을 왼쪽과 오른쪽으로 움직이게 만듭니다. 블록이 게임판 밖으로 나가지 않도록 이동 범위도 함께 확인합니다.
5. 블록 회전 만들기
위 방향키나 스페이스 키를 눌렀을 때 블록이 회전하도록 만듭니다. 회전한 블록이 벽이나 다른 위치와 겹치지 않도록 기본 규칙을 추가합니다.
6. 자동 하강 만들기
블록이 일정한 시간마다 아래로 한 칸씩 내려오게 만듭니다. 아래 방향키를 누르면 더 빠르게 내려가도록 만들어 테트리스의 기본 플레이 흐름을 완성합니다.
7. 블록 고정과 새 블록 만들기
블록이 바닥에 닿거나 더 이상 내려갈 수 없을 때 보드에 고정되도록 만듭니다. 고정된 뒤에는 새로운 블록이 위에서 다시 나타나도록 연결합니다.
8. 줄 삭제와 점수 만들기
가로 한 줄이 블록으로 가득 차면 해당 줄이 사라지도록 만듭니다. 줄이 삭제될 때 점수가 올라가고, 위에 있던 블록들이 아래로 내려오는지 확인합니다.
9. 다음 블록 미리보기 만들기
현재 블록 다음에 나올 블록을 미리 보여주는 패널을 만듭니다. 플레이어가 다음 상황을 예상할 수 있도록 테트리스 게임의 완성도를 높입니다.
10. 게임오버와 재시작 만들기
새 블록이 더 이상 시작 위치에 들어갈 수 없으면 게임오버가 되도록 만듭니다. 게임오버 화면과 재시작 버튼을 추가해 다시 처음부터 플레이할 수 있게 만듭니다.
11. 최종 완성 테트리스 게임
지금까지 만든 게임판, 블록 이동, 회전, 자동 하강, 고정, 줄 삭제, 점수, 다음 블록, 게임오버 기능을 하나로 정리합니다. PC와 모바일에서 안정적으로 실행되는 최종 테트리스 게임으로 완성합니다.
12. 테트리스 프로젝트 준비
테트리스 게임을 만들기 전에 화면, 블록, 입력, 충돌 개념을 정리합니다.
13. 블록 이동 규칙 정하기
좌우 이동과 아래로 떨어지는 규칙을 AI에게 단계별로 요청합니다.