오늘은 최근 잘 활용하고 있는 구글 Gemini AI 의 제미나이에서 제공하고 있는 Canvas 기능을 이용해서, 게임 개발을 위한 프로토타이핑을 해보는 것을 한번 소개해볼려 한다.
원래 개발에는 ” 페이퍼 프로토 타입” 이라는게 있다.
< 이미지 출처 : 위키피디아 >
페이퍼 프로토타입의 위키피디아 정의는 다음과 같다.
인간-컴퓨터 상호작용 에서 종이 프로토타입 제작은 사용자 중심 설계 프로세스 에서 널리 사용되는 방법으로 , 개발자가 사용자의 기대와 요구를 충족하는 소프트웨어를 만드는 데 도움이 되는 프로세스입니다.이 경우 특히 사용자 인터페이스를 설계 하고 테스트하는 데 유용합니다 . 일회용 프로토타입 제작이며, 디자인의 프로토타입 또는 모델로 사용할 인터페이스의 대략적이고 손으로 스케치한 그림을 만드는 것을 포함합니다.종이 프로토타입 제작은 간단해 보이지만, 이 사용성 테스트 방법은 사용하기 쉬운 제품의 설계에 도움이 되는 유용한 피드백을 제공할 수 있습니다.이는 많은 사용성 전문가들이 지지합니다.
출처 : https://en.wikipedia.org/wiki/Paper_prototyping
즉 어떠한 프로덕트를 만들기 전에 미리 종이나 간단히 제작이 가능한 도구들로 기능들을 만들어보고 사람들이 상호작용하면서 어떻게 쓰는지를 미리 테스트해봄으로써 사용자 환경에서의 사용성을 테스트해볼 수 있는 좋은 방법이다.
나도 처음 게임개발을 시작할때부터 애용하던 방법인데, 종이와 그림 등으로 간단한 카드게임이나 보드게임등을 만들면서 만들고자 하는 게임의 프로토타입을 만들어보고 사용자들과의 상호작용사이에서 나오는 재미에 대해서 미리 체크해보곤 했다.
< 페이퍼 프로토타입 기법은 게임개발에서 널리 사용되는 필수적인 초기 단계의 게임 검증 방법중 하나이다, 이미지 출처 : ismaellara.com >
그런데 요즘 들어서 대화형 접근이 가능한 AI 서비스들이 눈부실정도로 발전되면서, 아이디어를 이야기하고 다듬는 과정을 거치고 바로 AI 의 도움으로 코딩까지하고 웹으로 띄워볼 수 있는 기능들이 등장하면서, 꼭 종이와 필기도구등이 없어도 빠르고 간단하게 프로토타입을 만들어볼 수있게 되었다.
그 중에서도 연초에 Canvas 라는 기능을 추가하면서 아주 손쉽게 html 기반의 웹을 띄워볼 수 있는 기능이 생기면서 프로토타입에서 널리 쓰고있다.
< 대화형 기반의 프로토타입이 가능한, 그야말로 혁신 구글 제미나이 캔버스, 출처 : 구글 >
특히 우리개발팀에는 최근 인턴 직원이 들어오면서 다양한 테스트 시나리오를 진행해보고 있는데, 이 Canvas 기능을 활용하면서 다양한 프로토타입을 찍어내고 있다. 그래서 나아가 AI 페이퍼 프로토타입 기법을 적극적으로 쓰고있는데, 학교에서 강의를 할때도 활용해보고 간단한 내용으로 정리해보려 한다.
해당 기능은 구글 제미나이 Pro 구독 부터 사용이 가능한데, 신규 계정을 만들면 초기에는 캔버스와 같은 프로 기능도 사용할 수 있는 것으로 보인다.
LLM 과 대화를 통해서 기획 내용을 정리하고, 하단의 캔버스 버튼을 누르고 웹페이지로 만들어줘, 구현해줘 등등 만들어달라는 요청을 하면 바로 코딩을 시작하면서 바로 테스트가 가능한 웹페이지 형태로 제작해주게 된다.
그래서 한번 오목 게임을 만들어보기 위한 질문을 넣어봤다.
당연한 이야기지만, 오목은 널리 알려져있는 룰이기때문에, 특별한 어려움 없이 룰을 이해하고 LLM 도 큰 오류없이 게임을 만들기 위한 룰 정리 및 개념들을 정리해줄 수 있다.
자 그럼 이제 바로 어느정도 정리된 룰을 바탕으로 순차적으로 오목을 만들어달라고 요청한다.
한번 따라해보고 싶은 분들은 아래의 프롬프트를 한번 그대로 따라해보도록 하자.
✅ 1단계: 오목판 생성
이제부터 간단한 오목 게임을 만들 거야. 먼저, 웹 브라우저에서 실행될 수 있도록 HTML, CSS, JavaScript를 사용해 줘.
가로 15줄, 세로 15줄의 오목판을 그려줘. 칸은 정사각형이고, 눈금선이 명확하게 보이도록 스타일을 적용해 줘.
게임판은 웹페이지 중앙에 위치시켜 줘.
오목판을 바로 만들어주었다 다음 단계로 넘어가자
✅ 2단계: 사용자가 돌 놓는 기능 추가
좋아, 이제 사용자가 오목판에 돌을 놓는 기능을 추가해 줘.
사용자가 오목판의 교차점을 클릭하면 그 위치에 검은색 돌이 놓이게 해줘.
돌은 원 모양으로, 교차점 중앙에 정확히 위치해야 해.
한 번 돌을 놓은 자리에는 다시 돌을 놓을 수 없도록 막아줘.
사용자 친화를 위해 돌이 놓아질 위치에 네모 모양 포인터를 보여줘.
이제 요청한대로 제대로 작업이 되었다.
다음 단계로 넘어가보자.
✅ 3단계: 기본 AI 턴 추가 (무작위)
이제 AI(컴퓨터) 차례를 만들자.
사용자가 검은 돌을 놓으면, 다음 차례는 AI야. AI는 흰색 돌을 사용해.
AI는 아직 돌이 놓이지 않은 비어있는 칸 중에서 무작위로 한 곳을 선택해서 흰 돌을 놓게 해줘.
사용자와 AI가 한 번씩 번갈아 가며 돌을 놓도록 게임 흐름을 만들어줘.
드디어 AI 도 흰색 돌을 두기 시작하고 있다. 그런데, 지금은 그냥 무작위로 두기 때문에 게임이 진행이 되지 않는다.
다음 단계로 넘어가자.
✅ 4단계: 승리 조건 확인 기능 추가
가장 중요한 승리 규칙을 추가할 시간이야.
매번 돌을 놓을 때마다, 방금 놓인 돌을 기준으로 가로, 세로, 대각선(, /) 방향을 모두 확인해 줘.
같은 색의 돌이 5개 연속으로 놓이면, 게임이 끝났음을 알려줘.
예를 들어, '흑돌 승리!' 또는 '백돌 승리!' 같은 메시지를 화면에 크게 표시하고 더 이상 돌을 놓을 수 없게 게임을 중단시켜줘.
게임에서 가장 중요하다고 할 수 있는 승리조건이 제대로 구현이 되었다.
다음으로 넘어가자, 이제 드디어 AI 한테 지능을 넣어줄 차례이다.
✅ 5단계: AI 업그레이드 (공격 및 수비 로직 추가)
이제 AI를 더 똑똑하게 만들자. 현재의 무작위 로직을 다음 규칙에 따라 수정해 줘.
AI가 돌을 놓을 위치를 결정하는 규칙의 우선순위는 다음과 같아.
(필승 공격) AI(백돌)가 이번 수로 즉시 이길 수 있는 자리(5개 완성)가 있다면, 그곳에 둬.
(필수 수비) 상대방(흑돌)이 다음 수로 이기는 자리(5개 완성)가 있다면, 그 자리를 막아.
(유리한 공격) AI가 열린 4개를 만들 수 있는 자리가 있다면 그곳에 둬.
(유리한 수비) 상대방이 열린 4개를 만들 수 있는 자리가 있다면 그곳을 막아.
위 상황에 해당하지 않으면, 기존처럼 비어있는 칸 중에 무작위로 한 곳에 돌을 둬.
드디어 꽤 오목을 잘 두기 시작한다!!
처음에는 바로 질것 같아서 엄청 긴장하면서 테스트.. 겨우겨우 이기고 나서 보니 어느정도 패턴이 좀 단순해보인다.
따라서 지능을 좀 올려줘보자.
✅ 6단계: 추가 지능 업그레이드
AI를 훨씬 더 지능적으로 만들기 위해, 기존의 규칙 기반 시스템을 점수 기반 평가 시스템으로 강화해줘.
AI는 돌을 놓기 전에 모든 빈칸의 가치를 계산해서, 가장 높은 점수를 얻는 곳에 돌을 놓아야 해.
각 칸의 점수를 계산하는 규칙은 다음과 같아.
점수 합산: 각 칸의 최종 점수는 '공격 점수'와 '수비 점수'를 합산하여 결정해 줘.
공격 점수: AI(백돌)가 특정 빈칸에 돌을 놓았을 때, 그 결과로 만들어지는 자신(백돌)의 연속된 돌 패턴(5개, 열린 4, 닫힌 4, 열린 3 등)에 따라 점수를 계산해 줘. 더 강력한 패턴일수록 점수가 높아.
수비 점수: 상대방(흑돌)이 특정 빈칸에 돌을 놓는다고 가정했을 때, 그 결과로 만들어지는 상대방의 패턴을 분석해서 점수를 계산해 줘. 상대의 강력한 공격을 막는 자리일수록 높은 수비 점수를 부여해 줘.
점수 우선순위: 패턴별 점수는 다음의 우선순위를 따르도록 해줘.
5개 연속 (필승)
열린 4 (다음 수에 반드시 이기는 공격)
닫힌 4 (상대가 막아야 하는 공격)
열린 3 (다음 수에 '열린 4'를 만드는 강력한 공격)
그 외 패턴들...
만약 위 계산을 통해 가장 높은 점수를 받은 칸이 여러 개라면, 그중에서 가장 먼저 찾은 곳에 돌을 놓게 해줘.
헉.. 바로 패배했다.
물론 내가 이길때도 있는데 확실히 어려워졌다. .이런..
마지막으로 바로 다시하기를 할 수 있는 기능을 추가하면서 마무리를 해본다.
✅ 기타: 편의 기능
마지막으로 '다시 시작' 버튼을 게임판 아래에 추가해 줘. 이 버튼을 클릭하면 모든 돌이 사라지고 게임판이 초기화되어 처음부터 다시 게임을 시작할 수 있게 해줘.전체적인 제작 과정은 나중에 다시 영상으로 찍은 것이긴 한데, 아래 영상을 보면 좀 더 이해하기 편할 듯하다.
이상으로 이번에 만들어본 오목 게임 만들기 AI 프로토타입 첫번째 영상을 마쳐보려한다.
다음편은 이 오목의 AI 의 지능을 좀 올려서 단계별로 격파해나가는걸 한번 정리해서 올려보려한다.
과연 제미나이 캔버스만으로도.. 이게 가능할까?