바로 02 사과 게임 만들어보기

그렇다면 커서는 얼마나 복잡한 작업까지 처리할 수 있을까요? 구체적으로 지시할 수만 있다면 거의 모든 작업을 해낼 수 있습니다. 과연 정말 그런지 이번에는 사과 게임을 한 번 만들겠습니다. 다음 링크에 접속하면 사과 게임을 즐길 수 있습니다.

• 사과 게임 : gamesaien.com/game/fruit_box_a/

사과 게임은 아주 간단한 규칙을 가지고 있는 게임입니다. 게임 화면에는 1부터 9까지 숫자가 적힌 사과가 직사각형 배열로 배치되어 있고, 게임을 하는 플레이어는 마우스로 드래그하여 범위를 정해 사과를 선택할 수 있습니다. 이때 선택한 사과 숫자의 합이 10이 되면 게임 판에서 해당 사과가 사라집니다. 가능한 많은 사과를 없애는 것이 목표인 게임입니다. 이제 커서로 사과 게임을 만들어보고 ‘구체적인 지시’가 왜 중요한지 자연스럽게 알아보겠습니다.

사과 게임을 그냥 만들어보라고 하기

1. 새로운 작업을 하는 것이므로 새 폴더를 만들고, 커서로 만든 폴더를 연 다음 빈 상태에서 시작합니다. 사과 게임을 위한 사과 이미지는 다음 링크에서 내려받으세요.

NOTE

사과 이미지는 두 가지 스타일을 준비했습니다. 마음에 드는 것을 사용하세요.

• 사과 이미지 : bit.ly/4iTGFh2

1. 새로 만든 폴더에는 사과 이미지를 넣으세요.

   

그런 다음 컨텍스트에 사과 게임 사이트 주소와 사과 이미지를 넣고 [Plan] 모드로 전환해서 계획부터 세우겠습니다. 만약 커서가 ‘Questions’를 띄우고 질문하면 적당한 것을 고르세요. 보통은 HTML, CSS, Javascript 위주로 작업하는 것이 간편하고 좋습니다. 하지만 이번에는 React라는 것도 이용하겠습니다. 선택지 중에 React가 있는 것을 고른 다음 게임 진행 방식은 기본을 선택하세요.

프롬프트

사과 게임 한 번 만들 계획을 세워보자. 내가 원하는 사과 게임은 https://www.gamesaien.com/game/fruit_box_a와 같아. 사과 이미지는 apple.png를 사용해줘. 일단 계획부터 세워보자.

1. [Plan] 모드의 계획을 대략 읽어보세요. 불필요한 구현을 확인하는 과정은 꼭 필요합니다. 개발을 아예 모르는 상태더라도 사과의 숫자를 제대로 생성하는지, 합이 10일 때 없애는 규칙은 잘 지키는지 등을 확인하면 됩니다. 다 읽었으면 [Build]를 눌러서 개발하세요.

   

npmrundev로 게임을 실행해보기

1. 개발이 완료되면 npm run dev라는 것을 실행해야 게임을 할 수 있다고 합니다. 조금 난감합니다. npm run dev가 뭘까요? 하지만 이때도 그냥 커서에게 npm run dev를 해달라고 하면 됩니다. npm run dev가 어떤 역할을 하는지는 이후 과정에서 자연스럽게 설명하겠습니다. 우선은 커서에게 모든 것을 맡기도록 합시다.

프롬프트

나 개발을 잘 몰라, npm run dev를 해줘.

AI 답변

개발 서버가 실행 중입니다. 잠시 후 브라우저에서 게임을 확인할 수 있습니다. 일반적으로 Vite 개발 서버는 http://localhost:5173에서 실행됩니다. 터미널에 표시된 주소로 접 속하세요. 게임 플레이 방법: • 마우스로 사과를 드래그해 선택합니다. • 선택한 사과들의 숫자 합이 10이 되면 자동으로 제거됩니다 • Reset 버튼으로 게임을 다시 시작할 수 있습니다 • 서버를 중지하려면 터미널에서 Ctrl + C를 누르세요.

1. 커서가 localhost:5173에 접속하면 게임을 할 수 있다고 합니다. 여러분에게 보이는 주소는 localhost:3000과 같이 뒷부분의 숫자가 조금씩 다를 수 있습니다. 이 숫자의 비밀도 나중에 알아보겠습니다. 우선은 주소를 클릭하거나 웹브라우저에 주소를 입력해서 접속해보세요. 화면을 보면 어느 정도 게임이 만들어진 것 같습니다.

   

하지만 플레이를 하면 아마 좀 이상할 겁니다. 어떤 게임은 사과를 드래그할 때 사각형의 선택 영역이 만들어지는 것이 아니라 그냥 사과를 선택하기도 하고, 사과가 없어진 자리를 새 사과로 채우기도 할 겁니다. 이렇게 된 이유는 우리가 사과 게임에 대한 구체적인 컨텍스트를 제공하지 않아서 그렇습니다. 커서는 만능이 아니어서 원하는 결과물을 만들려면 명확한 지시와 충분한 컨텍스트가 필요합니다.

만약 한 번에 잘 만들어졌다면 축하합니다! 하지만 다음 내용은 꼭 읽어보세요. 앞으로 커서를 자주 활용하면서 명확한 지시가 무엇인지 감을 익히는 경험은 다른 복잡한 작업을 할 때도 많은 도움이 될 겁니다.

NOTE

물론 커서에 장착된 모델은 점점 발전하므로 ‘명확한 지시’의 기준도 계속 달라질 수 있습니다.

사과 게임 개선하고 실행하기

1. 사과 게임을 개선하기 위해 [Plan] 모드로 다음과 같이 추가 계획을 세우라고 하겠습니다. 추가 계획이 나오면 적절한 것을 선택해서 [Build]를 누르며 개발을 하세요.

프롬프트

사과 게임은 다음과 같은 게임을 말해. 게임 설명을 보고 사과 게임을 만들어봐. • 게임 화면에는 1에서 9 사이의 숫자를 가진 사과가 직사각형 배열로 17*10으로 늘어져 있고 • 게임을 플레이하는 플레이어는 마우스로 드래그하여 사각형의 범위로 사과를 선택할 수 있음• 사과 숫자의 합이 10이면 게임 판에서 사과가 사라짐 • 시간 안에 많은 사과를 없애는 것이 목표인 게임

AI 답변

...생략... 게임 실행 방법 • 브라우저에서 index.html 파일을 직접 열거나 간단한 HTTP 서버를 실행할 수 있습니다**.** • # Python이 설치되어 있다면 ° python3 -m http.server 8000  • # 또는 Node.js가 설치되어 있다면 ° npx http-server • 그 후 브라우저에서 http://localhost:8000으로 접속하세요.

1. 게임 실행은 역시 커서에게 부탁하면 됩니다. 어떤 화면이 보이나요?

프롬프트

게임 실행해줘.

아마 이번에도 여러분이 원하던 사과 게임이 나오지 않았을 겁니다. 겉보기에는 사과 게임과 비슷하게 동작하지만 실제로는 다소 차이가 있습니다. 다음과 같은 요소들이 온전히 개발되지 않았을 겁니다.

• 사과를 드래그해서 합이 10이 되면 사과를 없애고 그 자리를 새로운 사과로 채워넣는 규칙을 따르지 않는다.
• 드래그를 할 때 선택한 영역을 미리 보는 표시가 없다.
• 사과가 너무 크게 표현되었다.
• 드래그의 동작이 부자연스럽다.

1. 이처럼 기대한 부분과 커서가 만들어준 결과가 다를 때 미리 보기, 채워 넣는 방식까지 구체적으로 지시해야 합니다. 커서는 사과 게임을 잘 모르고 여러분의 의도를 모두 파악할 수 없습니다. 그럴 때는 수정할 부분을 명확하게 요청하여 지시를 내리면 됩니다. 다음과 같이 수정 지시를 내려보겠습니다.

프롬프트

마우스로 드래그할 때 드래그한 영역을 미리 볼 수 있게 해주고, 사과 개수는 가로 20개, 세로 10개로 더 많이 늘려줘. 그리고 드래그하여 선택한 사과의 숫자 합이 10이 되어서 사과가 없어질 때, 사과를 새로 채우지 마. 또 사과가 너무 커, 사과 크기를 줄여줘. 그리고 이미지를 드래그한다고 생각해서 드래그 동작이 부자연스러워.

그러면 커서가 코드를 개선하기 시작합니다. 바로 커서의 이런 특징이 코드를 잘 모르는 우리에게 매우 유용한 점입니다. 비록 코드에 대해 잘 몰라도 실행 결과를 보고 원하는 대로 다시 지시할 수 있기 때문입니다. 수정된 코드를 다시 실행하면 처음에 예상했던 사과 게임과 비슷한 게임이 나타납니다.

이처럼 구체적인 지시를 하면 꽤 복잡한 게임도 어렵지 않게 만들 수 있습니다. 이번 실습을 통해 원하는 결과를 얻기 위해서는 구체적인 지시가 중요하다는 것을 확인했으면 합니다.