개발자가 아니어도 괜찮아,
생성형AI로 게임 만들기.

AI를 활용한 입코딩으로 두 번째 게임 제작기

by 글쓰는몽글c

Feb 9. 2025

코딩 없이도 게임 제작이 가능하구나.

이를 몸소 깨달은 후, 두 번째 게임을 만들어보기로 했다.

처음 게임을 만들어보고, 호기롭게 1~2시간이면 금방 만들겠거니 했지만, 거의 반나절이 넘게 걸렸다.

우당탕탕 좌충우돌 과정들은 아래 정리해서 공유해보도록 하겠다.

약 10시간에 걸친 결과물은 아래 링크에서 확인할 수가 있다. :)

공룡 점프게임 하러가기 >

두 번째 게임도 간단한 캐주얼 게임으로.

지난 번 ✈️ 슈팅 게임을 만들어본 후, 나름 자신감이 붙은 맘으로 구글 크롬 브라우저에서 인터넷 접속이 되지 않을 때 보이는 공룡 점프 게임 정도를 만들어보고자 했다.

단순히 점프만 하면 되니, 다양한 조작이 필요했던 지난 번 슈팅게임 보다 더 쉽게 만들 수 있지 않을까 하는 맘도 있었다.

1. 무작정 말 걸어보기

크롬 브라우저의 dino 게임과 유사한 게임을 만들고 싶어.
캐릭터는 3개 중에 고를 수 있고, 캐릭터를 고른 이후 바로 게임을 시작해줘.

우선 무작정 머리 속에 생각나는대로 말을 걸어보았다. 심지어 처음부터 어려운 옵션을 만들어달라고 요청을 해보았다. 3개의 캐릭터 중에 하나를 선택하면 선택한 캐릭터가 주인공으로 나타나 점프점프를 하는 모습이 상상 속에 그려졌다. 내 한마디면 알아서 뚝딱뚝딱 만들어주는 GPT아니던가.

30초도 안되어 코드가 생성되었다.

그런데 이번에는 js코드로, 그것도 리액트로 만들어줬네..?

뭐 지난 번에도 파이썬으로 만들어진 걸 웹상에 올리는 것이 어렵진 않았으니, 리액트도 한번 사용해볼까?

시키는대로 환경들을 설정하고, 로컬 서버를 돌렸다.

2. 지난 번 처럼 우선 화면에 띄워보자.

localhost:3000.

지난 번엔 127.0.0.1:5000 으로 로컬 서버를 돌리더니, 리액트 환경설정을 통해서는 localhost:3000으로 확인할 수 있나보네. 그럼 캐릭터 부터 선택하고, 게임을 시작해볼까..

했던 희망은 잠시. 아래처럼 화면에 작은 토끼 한마리가 보였다. 그리고 score는 허무한 내 마음의 시간을 재고 있기라도 한 듯, 시간에 따라 계속 늘어나고만 있었다.

4. 차근차근 하나씩 수정하면 되지, 뭐.

캐릭터를 옵션으로 선택하는 건, 우선 제외하고 기본에 충실하자는 생각이 들었다.

다시 질문을 바꿔보았다.

크롬 브라우저의 dino 게임과 유사한 게임을 만들고 싶어.

조건을 단순화 했으니, 이제는 좀 더 그럴싸한 무언가가 나오리라 기대하며 브라우저 페이지를 새로고침 하였다. 하지만..

빨간색 박스가 하나 덩그러니 보여지고, 스페이스 바를 눌렀을 때 조용히 위아래로 점프만을 외롭게 하고 있는 게임이 탄생했다.

하지만 보다 원영적인 사고가 필요한 때.

이제 빨간색 박스를 그럴싸한 캐릭터로 바꾸고, 그 캐릭터가 장애물이 나타나면 점프로 피하기만 하면 되겠구나. 그걸 다시 차근차근 물어보면 되겠네.

캐릭터 위치값을 조정할게.
캐릭터가 땅 위에 붙어있는 것처럼 보이게 해줘.

그리고 캐릭터는 구글 이미지검색을 통해 갠적으로 좋아했던 보글보글 2P 캐릭터를 선택해서 링크만 변경해주었다. 이렇게 몇 번 티키타키 대화를 나누었더니 이정도까지 만들어주었다.

오.. 그럴싸한데. :)

하지만 실제 게임을 해보니 장애물 간격의 문제가 있었다.

장애물이 나오긴 하는데, 장애물의 간격이 너무 좁게 노출되는 것을 발견했다.

점프를 아무리 잘해도 깰 수없는 난이도의 장애물이 극초반에 나오다 보니 게임을 할 수 없었달까..

뿐만 아니라 장애물을 피하지 못해도 게임은 끝나지 않는 끝이 없는 게임을 만들어준 것을 확인하였다.

다시 질문을 해보자.

장애물 간격을 넓게 해줘.
그리고 게임은 장애물과 게임 이미지가 부딪혔을 때 끝나야해.

게임을 다시 하다보니, 이런 점을 수정해보고 싶었다.

스코어는 장애물을 뛰어넘을 때마다 올라가면 어떨까 했다.

그리고 점프가 중력의 흐름을 거슬러 자연스럽지 못한 부분을 발견해서 수정하고자 했다.

점프가 부자연스러워.
그리고 장애물을 뛰어넘을 때 스코어가 10점씩 올라가야해.

오. 이제 게임이 나름 그럴싸하게 만들어졌다.

(스코어는 장애물보단 시간에 따라 살아남는 것이 더 긴박감이 있는 것 같아 다시 수정하였다)

마지막으로 장애물이 초록색으로만 되어있고, 너무 단조로운 것을 발견하고, 30초가 지나면 다른 장애물도 노출되도록 코드수정을 요청하였다.

장애물을 좀 더 다양하게 보여주도록 해줘.
30초가 지나면 장애물이 다양하게 나타나며 난이도가 높아지면 좋겠어.

관련해서 최종 결과물은 아래와 같이 나왔다.

5. 휴, 이젠 모든 사람들이 볼 수 있도록 업로드를 해볼까나

지난 번에 파이썬의 경우 pythoneverywhere라는 서비스를 이용했었는데, 이번에는 리액트로 만들어지다보니 웹상에 올리려면 별도로 빌드를 해야하는 구조였다. 그냥 파이썬으로 첨부터 만들어달라고 할걸..

하는 후회가 밀려왔지만, 어련히 알아서 필요한 방식을 잘 찾아줬을까.

하는 생각을 하며, 내가 맞춰서 업로드 방법을 찾아보기로 했다.

이 코드를 js로 저장하고 netlify에 업로드하면
사람들이 접속할 수 있는거야?

읽어보니 빌드를 해서 업로드를 해야한단다. 복잡하지만 한번 배워두면 담에도 쓸 수 있을테니, 하나씩 차근차근 따라해본다. (netlify는 아래 주소 링크해두었다)

https://www.netlify.com/

Scale & Ship Faster with a Composable Web Architecture | Netlify

Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!

https://www.netlify.com/

이렇게 하여, 최종적으로 만들어진 게임을 Netlify라는 코드를 배포/관리/운영까지 해주는 클라우드 플랫폼에 업로드하여 온 세상에 해당 게임을 배포하였다. (광고까지 달아둔건 언젠가 있을 수익화에 대한 테스트까지.. :)

생성형 AI를 활용해서 서비스를 만드는 건, 정말 Agile 하구나!

생성형 AI를 활용하여 두 번째 게임을 만들어보았다.

정말이지 좌충우돌 언어를 이제 막 배우고 있는 유치원생이 물어물어 지하철 타고 엄마 만나러 가는 것 같았달까. 하지만 한번 찾아가봤으니, 담엔 좀 더 빠르게 찾아갈 수 있을 것 같다.

서비스를 만드는 과정은 정말 아무것도 없는 캔버스에 점 하나 부터 찍는 것으로 시작하게 되지만.

하나를 덧붙이고 돌아가는 걸 확인하고, 그리고 또 하나를 덧붙이고 돌아가는 것을 확인하고, 이렇게 작게나마 동작하는 워킹 프로토타이핑을 만들고 완성도 있게 만들어가는 과정이 Agile하다는 생각이 들었다.

1. 캐릭터 선택하면 점프게임을 시작해주었으면

2. 빨간 박스가 점프하여 장애물을 뛰어넘었으면

3. 공룡 캐릭터가 땅위에 존재하고 장애물을 넘어 점수를 얻을 수 있다면

4. 모바일에도 최적화되고 게임이 종료되면 다시 시작할 수 있고, 하단에는 광고도 보여질 수 있다면.

단계별로 워킹하는 프로토타입이면서, 완성도가 높아지는 것을 볼 수 있다.

흔히 Agile 프로세스 에서 이야기하는 자동차를 만드는 과정과 비슷하다는 생각.

이상 두 번째 생성형AI로 게임만들기 글을 마무리하고자 한다.

* 나름 글이 흥미로웠다면 심심하실 때 가끔씩 점프게임도 해주시고, 슈팅게임도 해주시고,
광고도 한번씩 눌러주세요. :)

(1000점 넘기가 힘들던데, 성공하신 분은 댓글로 남겨주세요. 난이도 조정을 좀 더 해보겠습니다. ㅎㅎ)

p.s)

생성형 AI와 코드를 좀 더 완결성 있게 만들기 위해서 아래와 같은 스킬이 필요한 경우가 있다.

(점프를 고치면 장애물이 안나오고 장애물을 고치면 캐릭터가 사라지고 캐릭터가 나타나게 하면 다시 화면이 검은화면으로 바뀌고의 무한 지옥 루프를 경험해본 적이 있다면 말이다)

생성형AI로 만들어본 첫번째 게임 이야기는 아래,

개발자가 아니어도 괜찮아, 생성형AI로 게임 만들기.