I/O FLIP은 고전 카드 게임을 Google의 AI로 디자인한 게임으로, 개발자가 Google의 새로운 생성형 AI 기술로 구현 가능한 다양한 실험을 시도하도록 영감을 주고자 제작되었습니다. 사용자가 설정한 수천 개의 캐릭터 이미지를 Muse에서 DreamBooth로 사전 생성했으며 PaLM API를 사용해 캐릭터에 대한 설명을 작성했습니다. 게임의 UI와 백엔드는 Flutter와 Dart로 만들었으며 호스팅과 공유에는 Firebase 도구 모음을, 확장 지원에는 Cloud Run을 사용했습니다.
사용자가 I/O FLIP을 플레이하는 과정은 다음과 같습니다.
게임 개발 방식을 자세히 살펴보겠습니다.
I/O FLIP의 게임 논리 및 UI는 go_router 패키지를 통한 오디오 기능과 앱 탐색 등 Flutter Casual Games Toolkit의 기능이 제공하는 기반을 바탕으로 설계되었습니다. FLIP은 웹 앱이므로 사용자의 화면 크기에 따라 크기를 조정하고 다양한 기기와 모바일, 태블릿, 데스크톱에서 입력을 받는 등 FLIP이 반응형이라는 점이 중요했습니다.
FLIP의 논리는 대부분 게임 카드를 기반으로 하므로 이 카드부터 설명하는 것이 좋겠습니다. 각 카드에는 Dash, Sparky, Dino, Android의 4가지 Google 마스코트 중 하나의 이미지와 설명이 들어가고 해당 이미지와 설명은 모두 게임을 시작할 때 사용자가 선택하는 클래스와 파워에 따라 결정됩니다. 또한 카드에는 원소 능력(공기, 물, 불, 금속, 흙)과 카드의 힘을 나타내는 10~100 사이의 숫자가 무작위로 할당됩니다. 원소 능력은 대결할 때 아래 이미지에 표시된 것처럼 서로 영향을 미칠 수 있습니다.
원소 능력은 단지 보여주기 위한 것만이 아닙니다. 위 이미지에 설명된 대로 요소 대결에서 불리한 쪽에 있는 카드는 10포인트의 페널티를 받습니다.
대결에 대해 설명하자면, 각 대결은 3전 2선승제로 진행됩니다. 승자는 선택한 패로 계속 플레이하여 승리를 계속 이어갈 수 있는 반면, 패자는 패를 공유하거나 새로운 패를 선택하여 다시 시도할 수 있습니다.
새로운 Flutter 및 Dart 기능은 이 게임을 빠르게 실현하는 데 도움이 되었습니다. 예를 들어, Flutter Forward에서 발표한 Dart 기능인 레코드는 카드 요소를 기반으로 프레임을 렌더링하는 데 도움이 되었고, 웹에서 프래그먼트 셰이더에 대한 Flutter의 공식적인 지원은 게임에서 유일하게 100포인트를 가진 일부 카드에 특수 홀로그램 효과를 만드는 데 도움이 되었습니다.
I/O FLIP의 각 카드는 AI가 생성한 이미지와 설명을 포함하고 있으므로 고유한 카드입니다.
Google 연구팀에서 개척한 두 가지 기술, 즉 Imagen 모델 제품군의 텍스트 투 이미지 AI 모델 Muse와 Muse를 기반으로 실행되는 기법으로서 텍스트 투 이미지 모델을 맞춤 설정하여 학습을 위해 소량의 고유 이미지 세트를 사용해 특정 피사체의 새로운 이미지를 생성할 수 있는 DreamBooth로 이미지를 사전 생성했습니다.
카드 설명은 MakerSuite에서 프로토타입으로 만들고 Google의 대규모 언어 모델에 액세스하는 PaLM API를 사용하여 사전 생성했습니다. 플레이어가 게임을 시작할 때 선택하는 파워에 따라 캐릭터의 특수 능력을 포함해 이미지에 컨텍스트를 주는 카드 설명이 제공됩니다. 카드 설명의 예는 다음과 같습니다. "Dash the Wizard는 애완용 드래곤과 함께 성에 살고 있습니다. 주문을 걸고 사람들에게 웃음을 주기를 좋아하죠." 여기에서 PaLM API 및 MakerSuite 대기자 명단에 등록하세요.
Flutter는 GameCard 위젯을 사용하여 이름과 설명, 이미지, 파워로 카드를 구성하는 데 사용됩니다. 카드가 생성되면 해당 요소를 나타내는 테두리가 적용됩니다. 운 좋게 홀로그램 카드를 획득한다면 특수 포일 셰이더 효과가 디자인에 적용됩니다.
Firebase용 Cloud Storage는 플레이어의 카드 덱을 생성하는 모든 이미지와 설명, 요소, 숫자를 저장합니다. Firestore는 firedart 패키지를 사용해 새로운 연승자가 추가된 "Highest Win Streak"를 위해 리더보드를 계속 추적합니다.
Flutter 앱이 Firestore에 직접 액세스하는 모든 경우에 저희가 직접 작성한 코드만 허용되도록 하는 App Check를 사용했으며, 코드가 데이터에만 액세스하고 허가받은 변경 사항만 적용할 수 있도록 Firebase 보안 규칙을 사용했습니다.
I/O FLIP에는 부정행위 방지를 위한 더 많은 방안이 필요했습니다. 바로 이 부분에서 Dart Frog가 유용하게 쓰였습니다. Dart Frog를 사용해 각 라운드의 승자 등 게임 논리를 백엔드에 유지할 수 있을 뿐만 아니라 Flutter 프런트엔드와 Firestore 백엔드 간에 이 코드를 공유할 수 있었습니다. 이는 부정행위 방지에 도움이 되었고 또한 백엔드와 프런트엔드 코드가 동일한 언어로 작성되고 있었기에 팀이 조금 더 빠르게 움직이는 데도 도움이 되었습니다.
I/O FLIP은 많은 플레이어가 온라인에 접속해 플레이할 때 가장 재미있습니다. 이 게임은 I/O FLIP Dart Frog 서버를 Cloud Run에 배포함으로써 자동 확장 같은 기능을 활용하여 한 번에 많은 플레이어를 지원할 수 있습니다.
마지막으로, Dart Frog를 통해 소셜 미디어에서 카드를 다운로드하거나 공유할 수도 있습니다. 라운드가 끝나면 플레이어는 Twitter나 Facebook에 카드를 다운로드하거나 공유할 수 있습니다. 사용자가 공유 버튼을 클릭하면 Dart Frog는 공유할 텍스트가 포함되어 미리 작성된 게시물과 그에 맞는 패 또는 카드가 있는 웹페이지 링크 및 방문자가 게임을 플레이할 수 있는 버튼도 생성합니다!
I/O FLIP을 사용해 보고 그것이 여러분의 제품에서 생성형 AI를 안전하고 책임감 있게 활용할 수 있는 방법에 대해 생각으로 이어지면 좋겠습니다. I/O FLIP을 위한 코드를 오픈소스로 제공해 드렸으므로 코드를 어떻게 작성했는지도 자세히 살펴보실 수 있습니다. I/O FLIP에 사용되는 생성형 AI 기술 중 일부를 직접 사용해보고 싶다면 Google I/O에서 전하는 소식에 계속 귀를 기울이고 더 많은 내용을 알아보세요.