챗GPT로 웹게임 개발하기 - 카드 짝 맞추기

챗GPT! 모두 들어보셨을거에요!

AI 개발 툴이라고도 하는데

웹에서 누구나 무료로 접근 가능하고 쉽게 사용해볼 수 있어요

 

AI 개발 툴 중에 하나인 이 챗GPT가

저희가 하려는 코딩(개발)도 도와주고, 기획도 도와주고, 글도 써줘요

 

그런데, 도와주는 수준을 넘어서..정말 잘 해요!

저희 개발자 동료들은 개발을 아주 잘하는 친구가 일할 때 옆에서 도와준다

라고 표현하더라구요

 

명확한 질문을 하면 그 어떤 전문가보다 훌륭한 답을 내주는거지요

그게 정답이라곤 할 수 없구요

그런데 이 명확한 질문을 하기가 생각보다 쉽지 않아요 <- GPT를 잘 쓰려면 이걸(명확한 질문) 잘해야 합니다ㅎㅎ

 

여기선 챗GPT로만 활용하여 만든 카드 짝 맞추기 웹게임을 만드는 과정 보여드리려고 해요 

이걸 통해서 누구나 쉽게 게임을 만들 수 있는 가능성을 보여드릴게요

 

https://chat.openai.com/

챗 GPT링크첨부해요

 

따라해보시면서 결과물과 코드가 제가 한것과 어떻게 다른지 확인해보는것도 재밌을거에요!

 

GPT와 개발 하기

1. 웹에서 할 수 있는 카드 짝 맞추기 게임을 만들려고 합니다. 코드를 알려주세요.

 

 

 

 

코드가 길어서 중간은 스크린샷 다 포함하지 않았구요 이렇게 챗지피티가 코드를 제공해줘요

 

우선 저 코드 텍스트들을 어떻게 웹브라우저에서 게임실행까지 할수 있는지

모르는 분을 위해 메모장 기준으로 메모장에서 코드를 저장하고

웹에서 게임을 띄우는 법 설명을 추가로 할게요!

 

코드가 들어있는 메모장 파일로 웹게임 실행하기

 

먼저 메모장을 엽니다

그리고 Chat GPT에서 알려준 코드를 모두 복사해서 메모장에 붙여넣어요

그다음 파일을 저장해야 하는데

이때 파일명 뒤 확장자를 .html 라고 해주면 되요

 

다른 이름으로 저장을 하고

 

기본 상태가 이 상태일텐데요

 

이렇게 파일을 html파일로 이름만 바꾸어 저장해줘요

 

 

그리고 생성된 파일을 더블클릭해주면

 

짜잔! 이렇게 게임이 실행되었어요!

 

짝맞추기 게임의 기본은 맞추면 이기다,겠지요?

그래서 게임 로직을 추가 요청했어요

 

2. 두개의 카드를 맞추면 점수가 올라가게 해주세요

GPT가 추가해주고 표시해준다고 합니다

GPT는 이전 정황을 기억해서, 별도의 요청사항이 없다면 기존 코드를 수정 및 퇴고, 혹은 추가 하며 게임을 만들어냅니다

게임 내용이 복잡해질 수록 코드가 점점 더 많아질거에요   

2번째 결과물이에요

 

그런데 아무리 풀어도, 맞춰지지도 않고, 당연히 점수도 안올라가는거에요

알고보니 똑같은 카드가 없어서 게임이 진행이 안되는 거였어요!

 

그래서 요청했어요

 

3. 8가지의 카드를 사용하고 2장씩 총 16개의 카드가 깔리도록 코드를 수정해줘

 

*만약 여기서 좀 더 명확하게 요청하려면 "다 다른 카드가 아닌~" 을 앞에 붙인다면 더 의사전달이 확실할거에요

 

짜잔~ 이렇게 점수도 1점이 되고 강아지 패를 맞췄네요!

 

그런데, 카드가 처음부터 뒷면만 보이고 게임 난이도가 너무 어렵지요 그냥 운으로 맞춰야하는거니까요

그래서 미리 카드 패를 보여주는 게임로직을 추가해야해요

 

4. 카드가 깔리기 전에 3초 간 카드를 전부 보여주고 뒤집어 주도록 코드를 수정해줘

5. 카드가 뒤집히고 60초 동안만 카드를 뒤집을 수 있게 하고 60초가 지나면 게임 종료 메세지가 나오게 수정해줘

 

 

6. 위 코드에서 카드 짝을 전부 맞추면 승리 메세지가 나오게 코드를 수정해줘

 

그리고 나온 게임 결과물인데요, 어떤 변화가 보이시나요?

바로 GPT 스스로 카드들을 4 x 4 형태로 만들어줬다는 거에요 (와 소름..)

 

너무 고맙긴 한데, 빈공간이 정갈한 모습이 아니라서 관련해서 일을 좀 시켜보기로 했어요

 

7-1. 카드의 가로 간격을 10px로 표시되게 코드를 수정해줘

 

그런데! GPT도 실수를 해요

코드를 수정 해서 실행해보았는데 해당 내용이 구현이 안되었어요

 

그래서 한마디 더 했어요

 

7-2. 가로 간격이 안좁혀졌어

 

 

죄송하다고 합니다..!ㅋㅋ 진짤까?

그리고 이렇게 구현이 되었어요

 

 

결과물을 보면 카드만 브라우저 기준으로 중앙에 있고 나머지 요소들은 왼쪽에 딱 붙어있어서

좀더 보완하고 싶지요?

그래서 카드들과 요소들을 중앙정렬로 수정 요청해볼게요!

 

8. 제목과 타이머, 점수, 승리/실패 메세지도 가운데로 오게 코드를 수정해줘

 

 

짠!  8번 내용 요청건까지의 1차 완성결과물 게임이에요

요청자가 코드를 넣은건 하나도 없고 오로지 GPT가 만들어주었구요 

 

다음은 고도화된 게임 결과물을 보여드릴게요

마찬가지로 GPT의 코딩만으로 나온 결과물입니다

 

 

위의 게임 결과물은 GPT의 많은 코드 이행 과정을 거쳐서 나왔는데요,

이미지도 바꾸고, 시작 때 3,2,1 연출도 넣고, 실패라벨과 성공라벨 그리고 다시시작 버튼도 구현을 했어요

 

 

8번까지 요청이 1차 완료 결과물이고,

위의 스샷에 내용처럼 23-3.html까지 GPT에게 매번 요청하는 과정을 겪었어요

8번 이후로도 여러가지 기능을 넣었고 

게임이 더 게임같아 지는 성공, 실패 라벨 등의 기능이 많아지면서 생긴 버그에 대한 수정 과정도 있구요

챗 GPT와의 대화와 결과물의 반복수행으로 더 많은 과정을 겪어야 했어요

 

이번 개발 때 언제까지 계속 전체 코드를 주나 궁금했는데요

한번 수정된 부분만 달라고 한 후부터는, 그후 일부 결과물은 수정된 부분만 주기도 하더라구요.

수정된 부분만 준다면 결국 코드를 봐야할 것이고

혹은 어느 부분에 삽입해야할지 판단해야하는 상황이 올 수도 있겠지요?

 

그래서 개발을 위해 GPT를 요청하는 사람은 해당 개발 언어에 대해 지식과 경험이 있는 게 좋아요

당연히 많을수록 좋구요

 

만약 해당 개발언어에 대한 아무런 지식이 없다면?

 

한계가 있지만 어떤 콘텐츠를 만드냐에 따라 불가능한건 아닙니다

가능한 콘텐츠를 만들면 되니까요

그리고 계속해서 전체코드를 달라고 하면될거에요

 

다만, 응용하는 상황이 왔을 때 부분부분만 GPT에게 요청해야 할 때가 있을텐데 

그 때 난관이 봉착하겠지요

 

이 부분도 기획 스펙에 따라 다르기 때문에

최대한 단순한 기능으로의 조합의 게임을 만든다면 이 때,

불가능할것도 없긴 해요!

 

그리고 AI가 점점 발달한다고 하니 그런부분도 보완되는 AI기술이 나오는 시대가 곧 올지도 모릅니다

 

다만 현재 시점에서는 더 심화된 게임, 역동적이고 다양한 기능이 많은 게임을 만들고 싶다면

해당 언어 공부와 로직 개발을 직접 해보면서 역량을 키우는 것도 필요해보입니다 :)

 

이렇게 접근하기 쉽고 언제든지 물어볼 수 있는 GPT 선생님이 있기 때문에

가능성을 열어두시고 쉽게 접근하셔서 

꿈을 펼치셨음 좋겠습니다

 

 

8번까지의 개발코드 파일 첨부할게요!

꽤 재밌더라구요 

 

이상 챗GPT로 웹게임 개발 - 카드 짝 맞추기 개발 포스트를 마치겠습니다!

 

챗GPT_웹게임개발_카드짝맞추기_8.html

0.01MB