윈드서프 AI로 실시간 오목 대전 게임 만들기 ( Node.js + SOCKET.IO )

오늘 또 하나 흥미로운 주제를 가져왔습니다.
AI코딩을 이용하여 게임을 개발했다는 소문을 듣고 실험해 보았는데요.
2인 대전 오목 게임을 협업하여 코딩해 보았는데 괜찮은 것 같아 공유드립니다.

캡쳐하면서 다시 한번 진행했는데 더 멋지게 나와 만족스럽습니다 :)

실시간 게임에 필요한 IT 지식

2인 대전 오목 게임은 실시간 통신 기술을 사용해야 구현이 가능한데요.
내가 한수를 둔 후에 다시 상대방이 한 수를 번갈아 두는 식으로 진행하려면
상대방이 수를 둘 때 바로 바로 응답을 받아야 하기 때문입니다.
그래서 일반적인 홈페이지 기술로는 구현이 안됩니다.

적합한 기술로 무엇이 있을까요?
크레이가 알고 있기로는 Node.js, SOCKET.IO 기술입니다.
(사람마다 다르게 부르는데요, 저는 '노드 제이에스', '소켓 아이오'라고 부릅니다 )
이 기술의 구체적인 사용법은 몰라도 이 기술의 이름을 아는 것이 중요한데요.
윈드서프 AI에게 이 기술을 사용해서 일을 하라고 시켜야 하기 때문입니다.

간단히 기억해 주세요. 실시간 통신은 Node.js, SOCKET.IO !

윈드서프 에디터 설치 / 테마 설정

본문의 중복을 피하기 위해 윈드서프 에디터 설치 및 테마설정은 지난 게시글을 참고해 주시고요.
이미 설치 및 세팅이 끝나신 분은 이 부분은 넘어가셔도 됩니다.

https://itadventure.tistory.com/729

Node.js 설치

Node.js 는 자바스크립트라는 컴퓨터 언어를 사용하는 하나의 '플랫폼'인데요.
간단히 말해 홈페이지나 오늘 목표로 하는 실시간 채팅을 만들 수 있는 기술 중 하나입니다.

서버를 유료로 임대하는 방법도 있지만 리눅스애서 서버 세팅을 해야 하는 등 초심자분에게는 진입장벽이 높아
내 PC에 설치해 구동하는 방법으로 목적 달성이 쉽게 진행하겠습니다.

Node.js 는 아래 사이트에서 다운받아 설치할 수 있는데요.

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

첫 페이지 화면 아래로 좀 내려가서 Node.js 다운로드 버튼을 눌러 다운로드하신 후,

프로그램을 설치하시면 됩니다.
한글이나 MS오피스같은 프로그램과 설치 과정은 동일하니 상세 설명은 생략하겠습니다.

윈드서프 에디터 실행 / 세팅

금방 Node.js 를 설치했기 때문에 윈드서프 에디터는 종료 후 다시 실행해주세요.
그래야 윈드서프가 잘 인식합니다.

이제 윈도우 탐색기에서 임의의 폴더를 하나 만들어 주세요.

그리고 윈드서프 에디터에서 File - Open Folder 메뉴를 클릭, 금방 만든 폴더를 선택합니다.

실시간 통신 뼈대인 '채팅'부터

바로 오목 게임을 만들어 달라면 윈드서프 AI가 어떤 결과를 내놓을지 모릅니다.
방향을 잡아주지 않으면 어디로 튈지 모르거든요.
보통 오목게임과 같은 기능을 만드려면 '실시간 채팅' 기술부터 구현해야 합니다.
한 수 한 수 돌을 두는게 사실 채팅과 다를바 없거든요.

"나는 5, 7 좌표에 두겠네"
"그래? 나는 6, 4 좌표에 두지"

윈드서프 채팅창에 아래와 같이 요청합니다.

Node.js, SOCKET.IO 기술을 사용해 실시간 채팅을 구현할건데. 관련 모듈을 설치해줘.
그리고 항상 한글로 설명해줘.

대부분 이런 창이 나올텐데요. 이런 창이 나올 때는 Accept(수락) 버튼을 눌러주시면 됩니다.

보통 바로 설치후 채팅 샘플코드를 제작할 때도 있고 그냥 설치만 진행할 때도 있습니다.

만약 위와 비슷한 화면이 나왔다면 아래와 같이 요청하시면 됩니다.

코드를 만들어줘.

코드를 다 만든 후, 보통은 채팅 서비스를 자동 실행해주는데요.

위와 비슷한 화면이 안 나올 경우도 있습니다.
우선 크롬 브라우저를 열어 아래 URL에 접속해보시고 오류가 난다면 자동 실행이 안된 것입니다.

http://localhost:3000/

그럴 경우 아래와 같이 지시하시면 대부분 될 겁니다.

서버를 자동으로 시작해줘.

제가 맞이한 화면은 아래와 같습니다.
요청하지도 않은 사용자 이름을 입력하는 창도 만들어주었네요.
여러분은 결과 화면이 다를 수 있습니다.

닉네임을 입력 후 입장, 채팅 메시지를 입력하면 아래와 같이 표시됩니다.

이게 실시간 채팅이 맞는지 확인해 봅시다.
브라우저를 한개 더 띄워 같은 URL로 접속한 후 닉네임 입력하면,
입장하는 즉시 입장 소식을 알려줍니다.

그리고 한쪽애서 채팅 메시지를 입력하면 반대쪽에 즉시 표시됩니다.

순식간에 실시간 채팅방이 한개 뚝딱 만들어진 건데요.
여러 브라우저를 띄우면 여러명이 동시에 채팅할 수도 있습니다.

닉네임을 입력하는 창이 나오지 않을 수도 있습니다.
그럴 경우 아래 요청문구면 아마 될겁니다.

닉네임를 입력하는 창을 먼저 보여주고, 입장 버튼을 누르면 해당 닉네임으로 채팅하도록 수정해줘,

오목게임으로 컨버전

이제 실시간 채팅을 실시간 오목 게임으로 바꾸겠습니다.
채팅방에는 여러사람이 입장할 수 있으니 이 사람 저 사람 모두 돌을 두면 안되겠지요?
오목게임은 1:1 대전 게임입니다. 첫번째, 두번째 입장한 사람만 두도록 지시합니다.

2인 대전 오목게임을 만들어줘. 채팅방에 입장한 첫번째 사용자와 두번째 사용자만 대국하고 
다른 사람은 입장은 되지만 돌을 둘 수 없게 해줘.

닉네임을 입력 후 입장하자, 채팅방은 입장이 되었는데 오목판이 나오지 않습니다.
이렇게 가끔 AI가 엉뚱한 짓을 할 때가 있습니다.

조금 더 구체적으로 지시하겠습니다.

오목을 두려는데 오목판이 안보여. 15x15크기의 오목판을 그려서 
그 위에 사용자가 번갈아 돌을 두도록 수정해줘.

오목을 둘 수 있게 수정되었습니다.

원래 십자 선 중앙에 두어야 하는데 칸이 좀 이상한 문제가 있긴 하지만 이것도 수정 요청하면 됩니다.
입장한 유저의 턴이 표시되어 자기 차례에만 둘 수 있도록 기능도 잘 구현되었고,

오목을 완성하면 각각 승리와 패배 표시가 뜨고 게임 재시작 전까지는 더 이상 둘 수 없는 기능도 잘 처리되었습니다.

이 후로도 아래와 같은 지시를 계속 내렸습니다.

돌이 십자선 중앙에 두어야 하는데 네모칸 안쪽에 두도록 되어 있어. 
십자선 위에 두도록 수정해줘,

승리, 패배할때 효과가 없어 밋밋하네. 
화려한 화면 효과를 넣어 이긴 사람과 진 사람, 관전자 각각 다른 효과를 보여줘. 
그리고 승리한 사람 이름도 가운데 5초 정도 크게 표시해줘,

여기까지가 한계이긴 합니다.
다음 명령을 내리니 더 이상 소화하지 못하고 무한 수행되는 문제가 있는데요.
아무래도 좀 모호한 내용이다 보니 그런것 같습니다.

효과가 좀 약하네. 이펙트 효과가 펑펑 크게 터지고 눈에 띄도록 수정해줘.

이 경우 윈드서프를 종료 후 재실행해주면 되는데요.
윈드 서프 재실행 후 금방 만든 실시간 채팅서버는 멈춰서 http://localhost:3000 URL 접속이 안될 겁니다.
이 경우 package.json 파일을 열어 Debug -> start node server.js 순으로 클릭해주시면 서버가 실행됩니다

아무래도 히든카드를 꺼내야겠습니다.
외부 라이브러리의 도움을 받는것인데요. particles.js 가 바로 그것입니다.

particles.js 를 이용하여 게임이 끝났을 때 멋진 파티클을 보여줘.

캬아~ 멋지네요. 그러니 기술 용어를 많이 알면 좋다니까요.
파티클 효과는 particles.js ! ( 최근 이름은 tsParticles )

필요하신 분께 도움이 되셨을지, 지나가는 길에 흥미로운 구경거리가 되셨을지요 :)
오늘도 방문해주신 모든 분들께 감사드립니다.