Link to Youtube Video (visible only when JS is disabled)
올해 Google I/O에서는 AI를 사용한 개발에 도움이 되는 새로운 제품과 도구를 발표했습니다. 또한 Gemini API Dev Competition을 개최하여 도구의 힘을 활용하고 가장 유능한 AI 모델을 통합하여 사용자를 위한 놀랍고 새로운 경험을 선사하도록 장려했습니다. 이를 위해 맞춤형 전기 슈퍼카 DeLorean과 많은 상금을 잡을 기회도 함께 마련했습니다.
그래서 I/O Connect 이벤트 시리즈의 시작을 축하하고 영감을 드리기 위해 I/O에서 선보였던 Gemini API와 통합된 도구 중에서 저희가 좋아하는 몇 가지를 소개해 드리면 좋겠다고 생각했습니다. 바로 일반적인 십자말풀이를 변형해 개발한 I/O Crossword입니다. I/O에서 다루는 모든 내용에 대한 지식을 시험해 볼 수 있을 뿐 아니라 Flutter, Firebase, Gemini API의 능력을 직접 살펴볼 수 있는 유용한 도구입니다.
본격적으로 시작해보죠!
1단계: 마스코트를 골라 팀을 선택합니다. 팀마다 보드에 고유한 색이 있고 모두가 팀 점수에 기여합니다.
2단계: 보드에서 단어 풀이를 시작할 위치를 선택합니다.
3단계: 막히는 단어가 있나요? 'Hint' 버튼을 클릭하고 단어에 대해 예 또는 아니요 형식의 질문을 최대 10개까지 할 수 있습니다. 이를 통해 답에 더 가까이 다가갈 수 있습니다.
4단계: 리더보드에 점수를 제출한 후 Google Developer Program에서 프로필에 표시할 배지를 받고 십자말풀이 솜씨가 얼마나 뛰어난지 전 세계에 뽐내세요!
게임 개발에 사용한 각각의 기술을 살펴보겠습니다!
I/O Crossword에 사용할 단어와 단서에 대한 가장 자연스러운 시작점은 올해 I/O에서 이야기한 모든 내용들입니다. 이 경우에는 Gemini Advanced에 YouTube에 업로드한 3시간 분량의 Google I/O 기조연설 영상을 살펴보고 I/O 제품 발표에 대해 배울 수 있는 재미있는 십자말풀이를 할 수 있도록 주제에 부합하는 기술 관련 단어와 단서를 만들어 달라고 했습니다.
Gemini 앱을 사용하면 누구나 업무에서 최첨단 모델을 사용하여 창의력을 극대화할 수 있습니다. Gemini Advanced가 다른 많은 LLM에 비해 더 최신의 지식까지 담고 있고 인터넷에 액세스하여 최신 정보를 얻을 수 있기 때문에 특별히 Gemini Advanced를 사용했습니다.
그러나 정말 흥미로운 것은 동일한 Gemini 모델로 개발할 수 있도록 지원해 드린다는 점입니다. Gemini API를 사용하면 Gemini의 AI 모델을 개발하시는 애플리케이션에 통합할 수 있습니다. 참여도를 높이고 앱 제거율을 줄이기 위해 플레이어가 어려운 문제를 못 풀고 있을 때 포기하지 않고 게임을 계속할 수 있도록 고안된 'Hint' 기능을 십자말풀이에 추가했습니다. 저희는 Gemini API와 함께 모든 앱의 백엔드에 AI 기능을 쉽게 추가할 수 있는 새로운 프레임워크인 Firebase Genkit를 사용했습니다.
플레이어가 'Ask for a hint' 버튼을 클릭하고 질문하면 Genkit가 예 또는 아니요 형식의 질문을 받아 관련 단서와 과거 질문을 수집하고 해당 정보를 Gemini 1.5 Flash 모델로 보냅니다. '예' 또는 '아니요'로 답하도록 특별히 지시받은 이 모델이 정답 단어에 다가가도록 유도합니다.
이 기능의 토대에는 훨씬 더 많은 내용이 있습니다. 자세히 알아보고 싶다면 Firebase 블로그의 심층 분석 게시물을 확인하세요!
이 게임의 UI는 Flutter로 개발되었습니다. 플랫폼 전반에서 Flutter의 유연성과 성능은 역동적인 대화형 게임을 개발하기에 완벽한 조건이었습니다.
저희는 Flutter의 InteractiveViewer 위젯을 사용하여 십자말풀이 보드를 렌더링하고 원활한 탐색 환경을 구현했습니다. 이 위젯은 대규모 콘텐츠 영역에서 상하좌우 이동, 확대/축소 등의 사용자 상호 작용을 처리하도록 설계되었으므로 광범위한 십자말풀이 그리드를 탐색하는 데 이상적입니다.
이 게임은 여러 플레이어가 같은 보드에서 동시에 플레이하며 함께 협력해서 진행하는 게임이므로 훌륭한 게임 환경 구현에 결정적인 요소는 바로 성능입니다. 그래서 이 게임은 Google I/O에서 Flutter 웹 앱을 위한 안정적인 채널로 승격한 WebAssembly(WASM)로 컴파일됩니다.
InteractiveViewer 위젯 내에서의 행렬 변환 사용과 같은 주제에 대한 자세한 내용이나 WASM을 통해 높은 프레임 속도를 유지한 방법은 Flutter 심층 분석을 확인해 보세요!
Firebase는 여러 플랫폼에서 작동하여 백엔드 기능을 제공하는 다양한 도구를 제공했습니다. 라이브 애플리케이션은 Firebase 호스팅에서 호스팅되며 애플리케이션의 모든 데이터는 Firestore에 저장됩니다. Firestore는 실시간으로 작동하여 전 세계 사용자가 퍼즐을 완성할 때 실시간 업데이트를 저장하고 사용자가 게임에 참여하고 나갈 때 자동으로 확장 및 축소됩니다.
십자말풀이가 완료되면 전체 보드가 재설정됩니다. 즉, 게임은 항상 활성화된 상태에 있고 신규 사용자가 게임에 참여하면 바로 플레이할 준비가 되어있습니다. 이 기능은 Firebase용 Cloud Functions로 구동됩니다.
Flutter 앱이 Firestore에 직접 액세스할 때 인증된 사용자만 액세스할 수 있도록 리더보드 API를 보호하려고 App Check와 익명 인증을 설정했습니다. 게임에 참여하는 모든 사용자는 Firebase 인증을 사용하여 익명 인증을 통해 개인 점수를 추적하고 리더보드에 표시할 수 있습니다.
Dart로 개발된 백엔드 설정은 API 호출을 관리하고 데이터베이스와 상호 작용하며 Flutter 앱의 요청을 처리합니다. Cloud Run은 원활한 경험을 보장하기 위해 자동 확장 기능을 제공합니다.
부정행위 방지를 위해 Dart Frog 백엔드를 사용합니다. 그래서 앱이 Firestore에서 데이터를 읽지만 Dart Frog 백엔드만이 변경을 할 수 있습니다. 인증과 함께 이 아키텍처를 통해 공정한 플레이를 보장합니다.
I/O Crossword를 직접 체험해 보세요. 기술적 호기심이 많은 분을 위해 코드를 오픈소스로 제공합니다. 하지만 무엇보다도 개발자 여러분이 이 여정을 통해 배운 내용을 Gemini API Developer Competition에 출품할 창작물에 어떻게 적용할지 어서 보고 싶습니다.
원활히 시작하실 수 있도록 개발 프로세스를 안내하는 Developer Learning Pathway를 출시했습니다. 확인해 보세요!
Dive Deep into Gemini: Explore Starter Apps in AI Studio
Project IDX와 Gemini API를 사용한 Go 애플리케이션 개발
Firebase Demo Day ‘24에서 AI 기반 앱 개발 및 실행 방법을 알아보세요
Celebrating Flutter’s “Production Era”
영어를 넘어서: Gemma 개방형 모델이 언어 격차를 해소하는 방법
Celebrating innovation: Gemini API Developer Competition