NxtCloud Workshop
Lab 01: 워밍업 — 게임 고치기
이 Lab의 흐름
이 Lab은 각자 노트북에서 합니다. 설치해둔 Kiro를 그대로 쓰면 되고, 클라우드는 아직 필요 없습니다.
학습 목표
여기서는 AI를 개발 도구로 씁니다. 원하는 기능을 말로 설명하면 코드가 바뀌는 경험이 목표입니다.
- Kiro에게 요청하는 감을 잡습니다
- 로컬에서 만든 건 나만 볼 수 있다를 몸으로 확인합니다
- AI의 결과물이 내 의도와 다를 수 있다는 것을 직접 겪습니다
프로그래밍을 해본 적이 없어도 괜찮습니다. 오늘 필요한 건 코드를 읽는 능력이 아니라, 바뀌었는지 눈으로 확인하는 습관입니다.
Step 1: 게임 하나 고르기
Kiro를 실행합니다. 저장소를 받으려면 터미널이 필요한데, Kiro 안에 이미 들어 있습니다. 오른쪽 위의 패널 설정/해제(⌘J / Ctrl+J) 버튼을 누르면 아래쪽에 패널이 열립니다. 거기서 터미널 탭을 고릅니다.
터미널에 아래를 입력합니다.
git clone https://github.com/nxtcloud-edu/kiro-on-cloud.git받아온 폴더를 Kiro에서 엽니다. 왼쪽 탐색기의 폴더 열기 버튼을 눌러 방금 내려받은 kiro-on-cloud 폴더를 고릅니다.
폴더를 열면 화면이 새로 뜹니다. 터미널도 함께 초기화되니, 패널을 다시 열고 실습 폴더로 들어갑니다.
cd 1.basic-game
시키는 곳과 결과를 보는 곳이 같은 화면에 있다는 게 IDE의 장점입니다. 창을 옮겨 다닐 일이 없습니다.
1.basic-game/ 폴더에 라이브러리를 쓰지 않은 단일 HTML 게임 4개가 들어 있습니다. 하나만 고릅니다. 파일을 더블클릭하면 브라우저에서 바로 열립니다. 설치할 것이 없습니다.
| 파일 | 게임 |
|---|---|
reaction.html | 반응속도 테스트 |
typing.html | 수도 타자 연습 |
guess.html | 숫자 맞히기 1~100 |
mole.html | 3×3 두더지 잡기 |
고른 게임을 브라우저에서 먼저 한 번 해봅니다. 뭐가 아쉬운지 느낀 다음에 시키는 편이 훨씬 나은 요청으로 이어집니다.
- 게임 하나를 골라 브라우저에서 실행해봤다
Step 2: 내가 원하는 대로 고치기
방금 해본 게임에서 무엇이 아쉬웠는지 떠올립니다. 너무 쉽다, 금방 질린다, 점수가 안 남는다, 반응이 밋밋하다, 뭘 해야 할지 안 알려준다. 무엇이든 좋습니다. 정해진 과제는 없습니다. 내가 만들고 싶은 게임으로 바꾸는 것이 목표입니다.
바꿀 것이 정해졌으면 Kiro에게 시킵니다. 이때 어떻게 적느냐에 따라 결과가 크게 달라집니다. 아래 네 가지를 갖추면 의도가 그대로 전달됩니다.
| 무엇을 | 어떻게 적나 |
|---|---|
| 주제 | 게임 전체가 아니라 바꿀 지점 하나를 짚습니다 |
| 이벤트 | 언제 무슨 일이 일어나는지 조건과 반응을 짝으로 적습니다 |
| 값 | 좀 더, 적당히 같은 말은 AI가 대신 정해버립니다. 숫자로 말합니다 |
| 결과 | 어떻게 되면 성공인지 화면에서 확인할 수 있는 형태로 적습니다 |
네 칸의 답을 이어 붙이면 그대로 요청이 됩니다.
reaction.html에서 초록으로 바뀌는 시간을 2~5초 사이 랜덤으로 바꿔줘.
초록이 되기 전에 누르면 "너무 빨라요"를 띄우고,
다섯 번 눌렀을 때 매번 다른 시간에 초록이 되면 성공이야.이건 예시일 뿐입니다. 내 게임에서 아쉬웠던 것을 골라 같은 방식으로 적으면 됩니다.
바꿀 것이 여러 개라도 한 번에 하나씩 보냅니다. 매번 브라우저를 새로고침해 직접 확인한 뒤 다음으로 넘어갑니다. 중간 결과를 확인하지 않으면 어느 요청이 어긋났는지 알 수 없기 때문입니다.
뜻대로 안 된 부분이 있다면 대부분 네 가지 중 하나가 빠진 것입니다. 예를 들어 typing.html의 한글은 자모 조합이 끝나야 글자가 완성되는데, 그 상황을 설명해주지 않으면 AI는 영문처럼 처리합니다. 이럴 때는 상황을 문장으로 풀어 다시 요청합니다.
한글은 자모가 조합되는 중에는 아직 완성된 글자가 아니야.
조합이 끝난 뒤에만 정답 비교를 하도록 고쳐줘.- 내 게임에서 바꾸고 싶은 것을 정했다
- 네 가지를 갖춰 요청했다
- 브라우저에서 바뀐 것을 직접 확인했다
Step 3: 내 게임을 주소로 만들기
고친 게임은 아직 내 노트북 안에만 있습니다. 주소창을 보면 file:///Users/... 로 시작합니다. 내 컴퓨터 안에서만 도는 파일이라 옆 사람은 이 게임을 열 수 없습니다.
만든 것을 남이 볼 수 있게 공유 사이트에 올립니다.
- 소속(수업) —
2026-Summer-AI해커톤 - 분류 — 미니게임
- 이름 · 콘텐츠 제목 입력
- 소유 비밀번호 입력 — 다시 올릴 때 확인용
- HTML 파일 하나 선택 — 최대 1MB
- 업로드하고 URL 받기 — 주소가 나옵니다
받은 주소를 열어봅니다. file:// 가 아니라 https:// 로 시작하고, 링크를 보내면 누구나 열 수 있습니다. 나만 보던 파일이 주소를 가진 무언가가 됐습니다.
올린 다음에 확인할 것
기록을 하나 세워두고 새로고침해 봅니다. 사라집니다. 값이 브라우저 메모리에만 있기 때문입니다. 주소가 생겨도 이건 그대로입니다.
어떤 데이터를 남길 것인지에 따라 기능이 붙기도 하고, 아키텍처 설계가 통째로 바뀌기도 합니다. 그 결정은 AI가 아니라 사람이 합니다.
- showcase에 업로드하고 주소를 받았다
- 받은 주소를 브라우저에서 열어봤다
- 새로고침하면 기록이 사라지는 것을 확인했다
다음 단계
파일 하나는 이렇게 올라갑니다. 올릴 자리를 누군가 미리 만들어뒀기 때문입니다.
앞으로 다룰 것은 파일이 아니라 서버에서 도는 앱입니다. 이건 올릴 자리부터 직접 만들어야 합니다. 다음 페이지에서 EC2를 만들고 브라우저로 접속하는 것까지 준비한 뒤, Lab 02에서 앱을 띄웁니다.