목차
3.2
스튜디오에서 만들고 고치기
스튜디오에서 프로젝트를 만들고 파일 구조와 AI 모델을 익힌 뒤 게임을 요청합니다. 의도와 다르게 나온 결과를 실행해 보며 찾아내고 수정하는 과정이 이 편의 중심입니다.
이 편의 영상은 준비 중입니다. 아래 글로 먼저 따라 하실 수 있고, 영상이 올라오면 이 자리에 보입니다.
01새 프로젝트 만들기
과제 화면 위쪽의 꺾쇠(< >) 모양 아이콘이 스튜디오입니다. '새로운 프로그램 만들기'를 눌러 프로젝트를 만듭니다. 외부 편집기와 AI 구독을 따로 연결할 필요가 없습니다.
02이름 통일하기
프로젝트 이름, 게임 화면에 보이는 제목, 라운지에 올릴 때의 제목을 하나로 맞춥니다. 라운지에는 '신나는 스네이크', 실행하면 '즐거운 스네이크'처럼 제각각인 경우가 자주 생깁니다.
왼쪽 위 프로젝트 이름을 누르면 바로 바꿀 수 있습니다. 게시하기 전에 꼭 한 번 확인하게 합니다.
03파일의 역할 알기
왼쪽 탐색기에는 처음부터 파일이 역할별로 나뉘어 있습니다.
- HTML: 화면의 뼈대
- JS: 기능과 동작
- CSS: 디자인
간단히 만들어 달라고 하면 AI는 보통 모든 코드를 HTML 한 파일에 넣습니다. 스튜디오는 처음부터 나눠 두어, 학생이 확장자에 따라 역할이 다르다는 것을 자연스럽게 알게 합니다.
프로젝트.md는 기획서이자 설명서입니다. AI는 작품을 만들 때 이 문서를 계속 참고하고, 수정을 요청할 때마다 바뀐 내용이 자동으로 반영됩니다. 그래서 설계할 때의 내용과 완성된 작품이 어긋나지 않습니다.
스튜디오 작품은 웹에서 실행되는 형태이며, 파이썬 파일을 올려 실행하는 방식은 지원하지 않습니다.
04모델과 모드 고르기
오른쪽 대화창의 AI 이름은 '레코'입니다. 더하기 버튼으로 새 대화를 엽니다.
- 보통·높은·매우 높은 수준: 수준이 높을수록 복잡한 요청을 잘 처리하지만 사용량이 빨리 줄어듭니다. 매우 높은 수준은 한 번에 1~2%씩 줄기도 합니다.
- 학습 모드: 코드를 만들지 않고 대화하거나, 내가 만든 프로그램에서 배울 내용을 설명합니다.
- 이미지 생성 모드: 썸네일이나 게임에 쓸 그림을 만듭니다. 용량이 작은 WEBP 형식으로 저장됩니다.
입력창 옆 도넛 모양이 남은 사용량입니다. 대화창 오른쪽 위에는 지금 고른 모델이 표시됩니다. 클래스에서 허용한 범위 안에서만 고를 수 있습니다.
캡처를 붙여넣어 AI가 그림을 '보게' 하는 것과, 새 그림을 '만들게' 하는 것은 다른 기능입니다. 둘 다 스튜디오 안에서 됩니다.
05기본 게임 요청하기
먼저 보통 수준으로 기본 스네이크 게임을 요청합니다. 그다음 규칙을 더합니다.
기본 스네이크 게임에 규칙을 추가해 줘. 화면 위에 목표 수를 보여 주고, 뱀이 먹은 두 숫자의 곱이 목표 수와 같으면 성공이야. 예를 들어 목표가 72면 8과 9를 먹어야 해.생성을 기다리는 동안 학생은 자기 작품을 다시 보며 고칠 점을 생각합니다.
06의도와 다른 결과 찾기
AI는 학생의 의도를 그대로 구현하지 않을 수 있습니다. 만들어진 게임을 실행하며 차이를 찾습니다.
- 실행해 봅니다. 예: 숫자가 너무 작아 보이지 않습니다.
- 무엇이 다른지 말로 정리합니다.
- 수정을 요청합니다. '숫자를 두 배 크게, 굵게 보여 줘.'
- 바뀐 화면을 다시 실행해 확인합니다.
이 과정이 수업의 핵심입니다. 요청 문장은 짧게 지나가고, 결과 화면과 학생의 판단에 시간을 씁니다.
07아이디어 넓히기
기본 게임이 돌아가면 여기서부터 확장합니다. 수학과 엮으면 놀면서 개념을 만나게 됩니다.
- 먹을 때마다 더해지거나, 깎이거나, 나눠지는 규칙
- 뱀의 모양이 삼각형, 사각형, 다각형, 입체로 바뀌는 규칙
- 사방에서 날아오는 장애물을 피하는 규칙
떠오른 아이디어는 그대로 대화창에 적어 요청하면 반영됩니다. 학생의 생각을 계속 끌어내는 질문은 「완성작에 던지는 교사의 질문」을 참고합니다.