Intro

<aside> 🔥

Windsurf의 cascade를 이용해서 간단한 snake game을 만들어봅니다. (마지막 수정일 : 2025년 3월 16일)

</aside>

저는 AI 개발자이기 때문에 게임을 만드는 방법에 대해서 전혀 모릅니다. 하지만, Windsurf와 함께하면 단 5분만에 게임을 만들어 낼 수 있었습니다. 매우 신기하고 재미있는 경험이였습니다! 이 경험을 같이 한번 체험해보시죠!

실제 Windsurf 개발자의 직강을 들으면서 정리한 글이므로 같이 보시면 더욱 좋습니다!

Body

0. 개발환경 셋팅

0.1. Windsurf 열기

개발환경 셋팅은 매우 간단합니다. windsurf를 켜주시고 원하는 디렉토리(폴더)로 열어주시면 됩니다.

• 전 미리 만들어놓은 workspace라는 디렉토리에서 진행하도록 하겠습니다.

1. snake game 만들기

<aside> 🔥

snake game은 뱀을 이동시켜 먹이를 먹으면 꼬리가 길어지는 게임입니다. 머리가 벽에 닿거나 자신의 몸에 닿으면 게임이 종료되는 간단한 게임입니다. 이 게임을 만들어서 실제로 플레이 해봅니다. (참고 : 링크)

</aside>

• 만들 게임 예시 이미지

1.1. 프롬프트 입력

아래 프롬프트를 오른쪽에 있는 Cascade에 입력하고 Enter를 입력합니다. write mode로 사용해주세요.

Create a snake game with javascript and html

입력하고 나면 다음 단계를 통해서 Cascade가 진행됩니다.

1. index.html 파일 만들기 (구조 잡기)
2. game.js 파일 만들기 (content 만들기)
3. 실행할 수 있는 명령어 추천 (실행)

위의 3단계를 실행한다는 것 자체가 multi-step를 수행하고 있는 것이라고 생각해주시면 됩니다. 즉, Cascade는 multi-step을 수행할 수 있는 Agentic AI라고 봐주시면 됩니다.

1.2. 추천한 대로 실행해보기

AI가 추천해준 대로 “**실행할지 말지”**의 의사결정을 사람이 진행해주셔야 합니다. 다음 3가지의 의사결정을 진행해야 합니다.

1. Cascade에서 만들어준 파일을 그대로 받아들일지 : Accept을 할 경우 코드가 그대로 저장이 되고, Reject을 하게 되면 파일만 생성된 채 코드가 사라지게 됩니다.
2. Cascade에서 수정한 변경사항을 수용할지 말지 : Keep Changes를 하게 되면 변경사항을 저장한다는 의미입니다. 현재는 파일을 새로 만들어서 코드가 생성되었기 때문에 1.과 차이점은 없습니다. 추후에 코드를 추가하고자 할때 주로 사용하게 될 겁니다.
3. Cascade에서 터미널 명령어를 실행할지 말지 : 현재는 게임을 만들었고, 이를 내부 서버를 띄워서 실행하는 명령어를 추천해줬습니다. Accept를 할 경우 해당 명령어를 실행합니다. Reject을 하게 될 경우 명령어를 실행하지 않고 중단하게 됩니다. Waiting on response 중이므로 해당 의사결정을 꼭 해줘야 다음 단계가 진행됩니다.

저는 우선 1, 2번 의사결정은 그대로 납둔 채, 3번을 Accept를 하겠습니다. 1, 2번 의사결정은 게임이 잘 만들어졌는지 확인하고 판단하고자 합니다.

Accept을 하고 난 이후에 Cascade는 다음 두 단계의 작업을 진행했습니다.

1. cascade라고 하는 bash 터미널을 실행
2. 터미널에 기존에 정의한 명령어 python3 -m http.server 8000 실행

이제 실제로 게임을 해당 서버에서 할 수 있는지 확인할 수 있습니다.

Open in External Browser를 클릭하면 웹사이트에 만들어놓은 게임 화면이 뜨는 것을 확인하실 수 있습니다!

10점 ㅋㅋ.. Restart를 하고 싶었지만 해당 기능은 text만 있고 버튼 구현이 되어 있지 않았습니다.. 다시 시작하고자 한다면 새로고침을 하면 됩니다.

<aside> ⛔

Q) 위에서 구현한 코드랑 제가 구현한 코드랑 정확하게 일치하지 않아요..!

A) 우선 모델이 차이가 날 수 있습니다. 제가 사용한 모델은 Claude 3.5 Sonnet 입니다. 반면에, 다른 모델을 사용한다면 구현하는 방법이 다를 수 있고, 심지어 Cluade 모델 내에서도 서로 다릅니다. (제가 Claude 3.7 Sonnet으로 구현해봤는데 조금 다르더라고요..!)

위처럼 왜 결과물이 달라지는지 좀더 깊게 알고 싶으시다면 왜 Chat-gpt는 재현이 안될까?를 참고해주세요!

</aside>

1.3. 결과물 피드백

위에서 실제로 실행을 해보면서 의도한 대로 구현이 됐는지 확인할 수 있었습니다. 추가로 좀더 면밀하게 잘 구현됐는지 확인하고자 한다면 Cascade 마지막에 요약해서 구현한 내용을 확인하면 됩니다.

각 파일들이 어떤 기능을 구현했고, 어떤 특징이 있는지가 한눈에 잘 들어오도록 요약하여 제공합니다. 이것 또한 Agentic AI의 장점이라고 볼 수 있을거 같네요!

구현한 코드가 만족스럽다면 나머지 1,2번에 대한 의사결정을 Accept를 진행합니다. 굳이 진행하지 않으셔도 큰 문제는 없지만 2. 추가 기능 구현을 할 때 변경사항이 눈에 잘 보이지 않습니다. 따라서 추가 기능을 구현하고자 한다면 한번 Accept를 하고 진행해주세요!

만약, Accept을 하지 않으면 뭔가를 변경해도 계속 초록색 화면으로 채워져 있어 변경점이 잘 보이지 않습니다..

2. 추가 기능 구현

단 한줄의 명령어로 게임을 빠르게 구현할 수 있었습니다. 그러나 Restart 기능이 구현되어 있지 않은 등 모든 기능이 다 구현되어 있지는 않습니다.

당연하다고 생각합니다. “이것도 되어 있어야 하고 저것도 당연히 되어 있어야 하는거 아니야?” 가 바로 떠오르신다면 당신은 99% 확률로 문과입니다.

base는 이미 만들어져 있으므로 이 위에 추가 기능을 구현하여 좀더 완성도 높은 게임으로 만들어봅시다.

2.1. 배경 변경

아래 프롬프트로 뱀이 먹이를 먹을때마다 배경이 바뀌는 기능을 추가 구현해보겠습니다.

Change the background color every time a food square is consumed.

배경이 바뀌는 함수 추가 구현

위에 보시는 것처럼 배경이 채워지는 것을 확인하실 수 있습니다.

2.2. 먹이를 사과로 바꾸기

아래 프롬프트를 입력해서 뱀이 먹을 먹이를 사과 이모지로 바꿔봅시다.

Change the food square to be an apple emoji

위처럼 네모였던 먹이가 사과로 바뀐 것을 보실 수 있습니다.

2.3. 먹이를 먹을때 팡 터지는 효과 추가하기

아래 프롬프트를 입력하면 사과를 먹을때 팡 터지는 효과를 추가할 수 있습니다.

Add a little explosion where the food square is consumed every time it is successful.

주황색으로 뭔가가 터지는 효과가 추가된 것을 보실 수 있습니다.

이제 개발을 종료하고자 한다면 cascade 터미널에서 Ctrl + C로 서버를 중단해주세요.

Conclusion

실제로 Cascade를 실행해보면서 놀라운 점은 두가지였습니다.

1. Agentic한 서비스 구현이 매우 잘 되어 있다. (AI 엔지니어들이 갈리는 소리가 여기까지 들리네요..)
2. 여러 파일을 고려하는 등 RAG 시스템도 상당히 잘 구현되어 있다.

하지만, 위의 케이스는 당연히 cherry picking이기 때문에 좀더 복잡한 요구사항과 수많은 파일이 들어가게 된다면 속도나 정확도 등이 떨어질 것이기 때문에 좀더 사용해보면 좋을거 같습니다.

그리고 두가지를 느낄 수 있었습니다.

1. 프롬프트를 짧게 써서 여러번 AI한테 프롬프트를 여러번 입력해서 레고 블록처럼 차근차근 쌓아올리는 것이 더 효과적일 수 있겠다. (inference time을 증가시키는 방향으로)
2. 이렇게 AI가 모든 것을 다 하면 주니어 개발자는 어떻게 취업하고 어떻게 성장하지?