클로드로 게임 만들기, 제작부터 사이트 업로드까지

안녕하세요, 제이입니다. 지난번에는 재밋과 클로드로 홈페이지를 혼자 만들어봤는데요, 이번에는 클로드로 게임을 만들어봤습니다. 저는 요즘 스크린야구에 푹 빠졌는데, 모니터 화면으로도 야구를 하고 싶어서 야구공이 날라오면 타격하는 게임을 만들었어요.

게임 제작을 위해 클로드에 보낸 첫 프롬프트는 다음과 같습니다.

타격 타이밍 게임을 만들고 싶어. 정면에서 야구공이 서로 다른 속도로 날라오고 그걸 치는 방식으로 말이야.

이 두 문장으로 공을 타이밍에 맞춰 치는 야구 게임이 나왔습니다. 그리고 정확히 4분 뒤에 그 게임이 올라간 재밋 사이트가 생겼습니다. 사이트로 옮겨달라고 요청한 적은 없습니다.

도구는 지난번과 같이 재밋과 클로드를 사용했고 이번에는 클로드 데스크톱 앱의 Cowork에서 만들었어요. 재밋(Zaemit)은 대화만으로 홈페이지를 만드는 AI 웹빌더로, 클로드에 MCP로 연결하면 채팅창에서 바로 사이트를 만들고 고칠 수 있습니다.

게임 이름은 풀스윙으로 지었어요. 스페이스바를 누르거나 화면을 터치하면 타자가 배트를 휘두릅니다. 구종은 총 13종이고 레벨은 5점 단위로 4단계까지 있어요. 모바일에서는 세로와 가로 모두 작동하도록 구현했습니다.

결론부터 말씀드리자면, 지금 모양의 게임이 되기까지는 11시간이 들었습니다. 이미지 생성과 교체하는 일이 가장 시간이 많이 소요됐어요. 이번 글에서는 첫 프롬프트로 무엇이 나왔고 프롬프트로 수정한 내용과 한계에 대해 말씀드릴게요!

클로드로 게임 만드는 데 얼마나 걸렸을까요?

첫 버전에서 사이트가 생기기까지는 4분, 지금 게임이 되기까지는 11시간 걸렸습니다. 게임을 손댄 날은 4일이고, 게임이 처음 돌아간 뒤 시간은 전부 다듬는 데 들어갔어요.

시간이 가장 많이 소요된 부분은 이미지를 교체하는 일이었어요. 이미지는 VS Code를 활용해서 제작했어요. 투수가 공을 던지는 이미지를 6장으로 동작을 쪼갰으며 이를 입력하여 동적인 느낌을 주고자 했습니다. 타자도 유사하게 8장의 이미지로 동작을 구분하여 동적인 이미지를 형성했습니다. 동적인 장면을 구현하는 과정에서 이미지 사이즈 통일성과 일관성을 유지하는 것은 매우 중요합니다.

클로드 아티팩트는 사이트로 어떻게 옮기나요?

재밋과 클로드를 MCP로 연결해 두면 따로 할 일이 없습니다.

아티팩트는 클로드가 만든 결과물을 대화창 옆에 띄워주는 기능이에요. 클로드로 게임을 만들면 게임이 먼저 아티팩트 형태로 나옵니다. 아티팩트로 플레이하며 서비스를 사용해볼 수 있지만 남에게 보여주려면 사이트로 옮겨야 합니다.

저는 재밋 MCP 커넥터를 연결해 둔 상태로 게임을 만들었고, 클로드가 아티팩트를 만들자 그대로 재밋 사이트로 옮겼습니다. MCP 커넥터는 클로드가 재밋 사이트를 대화 안에서 직접 고칠 수 있게 연결해 주는 통로입니다. MCP 연결방법이 궁금한 분들을 위해 방법은 재밋 MCP 연동 가이드에 정리해 뒀어요.

프롬프트로 고칠 수 있는 범위에 대해

이번에 게임을 제작하며 재밋에서 편집기를 사용한 적도 없습니다. 섹션 삭제, 코드 수정, 이미지 업로드, 헤더와 푸터 해제까지 전부 대화창에서 처리했습니다.

사이트에 게임 화면만 남기고 나머지를 걷어낸 과정과 모바일 UI를 개선한 작업도 프롬프트로 수행했습니다. 모바일 쪽은 제가 모바일 사용자가 많다고 말하고 나서야 클로드가 모바일 화면 설정 태그가 빠져 있던 걸 찾았어요.

한계

오랜 시간을 공들였지만 아직 미흡한 부분이 남았습니다.

먼저, 타자 이미지가 부자연스럽습니다. 정면에서 오는 공을 좌타자와 우타자가 어떻게 치는지에 대한 인체 메커니즘 레퍼런스를 충분히 주지 않은 결과, 부자연스러운 이미지가 형성됐습니다. 이는 천천히 수정하고자 합니다.

다음으로 모바일과 홈페이지에서의 UI가 모두 상이합니다. 스트라이크 존과 타자간 간격이 환경마다 다르기 때문에 두 환경 모두 어색하게 느껴집니다. 추후 서비스를 제작할 때는 환경 하나를 기준으로 명확히 선정하고 제작하는 방식으로 진행하고자 합니다.

게임의 흥미 요소로 다양한 구종을 생각했지만, 구종 뿐만 아니라 타격감, 애니메이션적인 요소가 첨부되면 더욱 흥미가 더해질 것이라고 생각했습니다. 따라서, 추후에는 이런 요소들을 추가할 계획입니다.

정리하며

간단한 프롬프트로 야구 게임 초안을 제작했습니다. 초안이 나오고 재밋 사이트 생성까지 4분안에 완료됐습니다. 재밋 MCP를 연결한 덕분에 클로드 아티팩트가 성공적으로 재밋 사이트로 옮겨졌습니다.

총 제작 시간은 11시간이 소요됐어요. 가장 오래 걸린 건 타자 이미지를 수정하는 일이었습니다.

마지막으로

게임을 만들고 사이트에 업로드하는 것은 생각보다 금방이었어요. 가장 편했던 점은 클로드에서 제작한 아티팩트가 바로 재밋 사이트에 업로드되는 것이었습니다. 가장 까다로웠던 작업은 동적 이미지 구현과 흥미 요소를 기획하는 일이었습니다.

제가 제작한 야구 게임은 하단 링크에서 해보실 수 있습니다.

야구 게임

어떤 기능을 어떻게 제작했는지에 대한 프롬프트와 문제가 발생했을 때의 해결 방법에 대해서는 2편에서 더 구체적으로 다루도록 할게요.

저처럼 직접 게임이나 움직이는 서비스를 만들고 싶으신 분들은 재밋 계정을 만들고 사용하던 AI에 MCP를 연결하면 바로 만들어 볼 수 있어요.

디자인팀이 만든 "클로드로 홈페이지 제작하기"와 제가 혼자 만든 "코딩 없이 홈페이지 혼자 만들기"도 함께 보시면 홈페이지와 게임 제작 과정이 어떻게 다른지 확인할 수 있습니다.

그러면 저는 2편으로 다시 돌아올게요!

FAQ

Q1. 코드를 몰라도 클로드로 게임을 만들 수 있나요?

네, 충분히 가능합니다. 저는 프롬프트 두 문장으로 실제로 작동하는 야구 게임이 나왔어요. 다만 초안은 이미지 품질이 낮고 타격감이 없어서 이를 다듬는 데 시간을 할애했습니다.

Q2. 클로드 아티팩트를 내 사이트로 빼려면 어떻게 하나요?

저는 재밋과 클로드를 MCP로 연결했기에 따로 한 일은 없었어요. 아티팩트가 나오고 4분 뒤 재밋 사이트가 생겼고, 옮겨달라고 말하지 않아도 알아서 옮겨져 있었습니다.

Q3. 클로드로 만든 게임이 모바일에서도 되나요?

네, 가능합니다. 가로와 세로로 모두 이용이 가능합니다.