챗GPT로 간단한 웹 유틸리티를 만들 수 있다는 걸 확인하고 게임에도 도전해봤습니다. 방문자를 오랜시간 붙잡아 두려면 재미가 있어야하는데 재미 하면 게임 아니겠습니까? 단순한 게임이고 알고 있는 게임이라고 해도 기왕 있으면 킬링타임으로 한두번 해볼 수 있는 거니까요.
간단한 숫자 게임? 안간단해!
직접 코딩하는게 아니다 보니 난이도가 낮은 게임을 선택해야 했습니다. 그래픽이 필요 없는 단어 게임과 숫자 게임 중 고민이었는데 검색하다가 1 to 50 이라는 게임을 만드는 글을 보게 됐습니다. 이거다 싶었죠.
이미 해본 게임이었고 플레이 스토어에 검색하면 나오는 게임인 것도 알고 있었으니까요. 무엇보다 챗GPT가 쉽게 구현해 낼 수 있을 것 같았습니다. 결과적으로 그렇게 쉽게 구현하지는 못했고, 생각한 대로 작동하게 만들기 위해 코드를 눈이 빠지게 봤네요. 마지막에 맘에 걸리는 오류를 잡느라고 코드를 수정했고요. 역시 뭐든 쉬운 건 없습니다.
숫자 게임 만들기 시작
나는 one to fifty 게임을 만들고 싶어. 웹페이지에서 바로 실행할 수 있는 게임으로 만들어줘. 자바스크립트와 html 을 이용해서 만들어줘. 코드는 복사해서 사용 할거야.html 코드와 javascript 코드로 나눠서 파일을 작성해줬습니다.
첫술에 배부를 수 없다지만, 그래도 꽤 기대를 했는데요. 결과물은 별로 였습니다.
테이블로 나오는 모습을 상상했었는데. 일자로 죽 늘어서 있었고, 1을 클릭하니 2가 사라지고 27이 나타나는 코드였죠. 사실 html코드만 봤어도 테이블로 나오지 않는다는 걸 뻔히 알 수 있었는데, 후다닥 결과를 보겠다고 복붙해서 브라우저에 돌려본겁니다.
끊임없는 질문과 답변 테스트의 반복
이후로 계속해서 질문을 하고 결과를 보기를 반복했습니다. 생각한것과 다르게 결과가 나오면 어떻게 해야 이 챗gpt가 말귀를 알아먹도록 질문을 할수 있을까 고민을 하면서 말이죠. 결과 코드는 계속해서 오류를 품고 있었기 때문에 어떤 식으로 질문을 바꿔가면서 했는지 질문을 공유하겠습니다.
숫자를 25개의 칸을 나누어서 보여주도록 게임판을 변경해줘. 25칸은 가로5개 세로5개로 이루어진 표 형태로 만들어줘. 1부터 25까지를 지워 나가면서 그 빈자리에 새롭게 26부터 50까지의 숫자를 무작위로 넣어줘.이렇게 알려줬는데 바둑판 형태가 아닌 1행짜리 테이블을 만드는 코드를 돌려주더군요. 진짜 영어의 필요성을 또 느꼈습니다. 다시또 지시를 바꿨습니다.
숫자를 가로 5개 세로 5개의 바둑판 형태로 배치해줘. 지금은 일렬로 나타나고 있어. 일단 디자인은 원하는 프로토타입으로 나온것 같아서 다음 지시사항으로 넘어갔습니다. 영어로 번역했을 때 명확하게 번역되기를 바라며 질의문을 만들었는데요. 말투가 그때그때 다른 건 이해해주세요. 오타가 있는경우는 어떻게 번역하는지 궁금하더군요.
1부터 25까지의 숫자는 사용자가 클릭하면 26부터 50까지의 숫자로 교체됩니다. 예를 들어 1을 누르면 26부터 50까지의 숫자중 하나가 랜덤으로 표시됩니다. 순서대로 25의 숫자까지 눌리면 25개의 게임판에는 26부터 50까지의 숫자가 남게 되도록 코드를 수정하세요. 26부터는 숫자를 클릭하면 화면에서 지워지도록 코드를 작성합니다.진짜 뻔뻔한 챗GPT의 응답
이 정도 지시를 던졌으면 제대로 코드를 만들어 주겠거니 하는 기대가 생길 수 있습니다만, 챗지피티라는 놈 만만치가 않습니다. 제대로 작동하지 않는 코드를 알려주면서 요청한 사항을 다 수정했다고, 제대로 나올 거라고 천연덕스럽게 대답합니다. 믿고 실행했다가 소름 돋았습니다.
챗gpt 의 대답
위의 코드에서 handleButtonClick 함수를 수정하여 26부터 50까지의 숫자를 클릭할 경우 해당 숫자가 화면에서 지워지도록 하였습니다. 또한, currentNumber 변수가 25를 초과할 때 게임이 종료되도록 수정하였습니다.
코드를 수정한 후 HTML 파일을 웹 브라우저에서 실행해보세요. 이제 사용자가 1부터 25까지의 숫자를 클릭할 때마다 26부터 50까지의 랜덤한 숫자로 교체되며, 26부터 50까지의 숫자를 클릭하면 해당 숫자가 화면에서 지워집니다.보기에는 그럴듯한 화면이 나왔습니다. 우와, 이제 바로 되는거야? 챗GPT 대박이다. 생각했지만 아니었던거죠. 맨처음 있던 오류 1을 클릭하면 2가 27이 되는 오류는 그대로 였습니다. 전 코드를 해석하지 않고 이 오류를 수정하기 위해 어떻게 지시를 해야할 지 많은 고민을 했습니다.
원하는 기능과 발생한 오류를 수정하는 작업
챗GPT 가 지속적으로 코드를 수정해나가긴 하는데 지시가 왔다갔다하면 기존에 되던 기능도 다시 안되는 코드로 변경하기도합니다. 그래서 지시를 하다가 한번에 전부 통합해서 목록으로 지시를 내리기도 했습니다. 문제가 발생했던 몇가지 지시들을 공유해볼게요.
지금 코드를 실행하면 1을 클릭했을때 1이 적힌 칸이 비활성화되고 2가 적힌 칸이 랜덤하게 다른 코드로 변경된다. 이걸 수정해서 제대로 코드를 만들어줘정리해서 코드 작성 방법을 지시할게 .
1. 가로 5칸 세로 5칸으로 구성된 25개의 칸에 1부터 25까지의 숫자를 랜덥하게 넣는다.
2. 사용자는 게임을 시작하면서 1부터 순서대로 숫자를 눌러야만한다. 이때 순서대로 숫자를 눌러야만 올바르게 게임이 진행된다.
3. 사용자가 1을 누르면 그 칸의 숫자는 26부터 50까지 숫자중 하나로 교체된다.
4. 사용자가 다음 숫자인 2를 누르면 그 칸의 숫자는 26부터 50까지 숫자 중 하나로 교체된다. 이때 숫자 1 칸에서 사용했던 숫자를 제외한 나머지 숫자중에서 랜덤하게 선택한 숫자여야한다.
5. 2번과 3번 처럼 숫자 3부터 25까지 반복한다.
6. 26이 적힌 칸부터는 눌릴때마다 해당칸의 숫자를 안보이게 처리한다.
7. 50까지 모든 숫자가 눌리면 게임이 종료된다.
8. 사용자가 1을 누르기 시작한 시점부터 게임 플레이 시간을 측정한다.
9. 측정한 게임 플레이 시간은 표의 아래쪽 중앙에 1.22초와 같은 형식으로 보여준다. 표와는 한줄 빈 공간을 둔다.
10. 게임 시간이 증가하는 것을 실시간으로 보여준다. 마지막 50이 눌렸을 때 게임 시간 측정을 끝낸다. 카운터도 멈춘다.
여기까지의 코드를 복사해서 쓸수 있게 전체를 한번 더 정리해서 작성해줘.이렇게 정리해서 지시를 했는데 이 바로 다음 질문으로 화면 디자인을 다시 변경해 달라고 해야했습니다.
바둑판 형태로 칸을 배치해줘사용자가 1을 누를때부터 카운터가 시작되어야해카운터도 생각대로 구현안되더군요.
지금 코드는 카운터가 페이지 로딩이 완료된 순간부터 시작되고 있다 수정해줘.
1을 누르면 1을 누를 칸이 새로운 번호로 변경되어야해.오타가 나서 못 알아들었을까요. 이 문제를 고치는데 몇 번을 다시 요청을 했던지..
우선 코드에서 타이머를 제외해줘.
그리고 1을 누르면 1을 누른 칸의 숫자만 변경되는 거야.
지금은 다른 칸의 숫자가 변경되고 있어. 수정해줘결국은 타이머를 제외하고 일단 가장 중요한 메인 로직부터 완성하기로 했습니다. 이 마지막 지시에 대한 결과는 스타일태그 스크립트를 모두 html에 포함시켜서 작성을 해줬습니다.
도저히 안되겠어서 여기부터는 코드를 직접 보고 수정을 했는데요. 제가 프로그래밍을 잘한다기보다 함수 부분을 복사해서 챗GPT에게 어떤 기능을 하는지, 올바른 기능을 하기 위해서 어떻게 수정해야 하는지 물어가면서 만들었습니다.
마지막에는 카운터까지 다시 추가했고요. 최종 완성된 게임은 챗GPT 프로젝트 메뉴를 통해 테스트해볼 수 있습니다. 마음같아서는 방문자들의 게임 달성 시간을 저장해서 랭킹을 보여주는 것까지 만들고 싶은데 과연 가능할지 모르겠습니다.
여력이 된다면 만들어볼게요. 챗GPT 프로젝트들은 심심할 때마다 조금씩 고쳐볼까 합니다. 물론 챗GPT를 이용해서죠.
