동아일보

Inside

Firebase DB로 게임 랭킹 요소 구현하기

DB 사용을 겁내는 개발자들을 위한 Firebase DB 첫 발 내딛기
임희래 뉴스룸 디벨로퍼|동아일보 디프런티어센터 2025-02-12 14:00:01
이번 <누락: 당신의 아파트는 안녕하신가요> 시리즈 홍보를 위해 인터랙티브 형식의 게임 <아파트 메이커: 내가 만드는 나의 아파트>를 제작했다. 독자에게 내용을 쉽게 전달하기 위한 목적의 게임 형태의 ‘기사’가 아닌, 바이럴을 통한 기사 유입을 목표로 잡고 ‘게임다움’에 좀 더 초점을 맞춘 첫 시도였다. 이 글을 통해 이 게임을 어떤 의도로 기획했고, 이를 개발하는 과정에서 어떻게 코드를 작성했는지 소개하고자 한다. 특히 이번 프로젝트에서 Firebase DB를 활용했는데, Firebase를 처음 이용하고자 하는 개발자들에게 도움이 될 수 있도록 활용 방법을 자세하게 설명하고자 한다.
아파트 메이커, 어떻게 기획했나
‘돌아온 액션퍼즐 패밀리’의 ‘삼촌의 니편내편’ 게임 화면.‘돌아온 액션퍼즐 패밀리’의 ‘삼촌의 니편내편’ 게임 화면.
게임 형식은 컴투스가 2013년 출시했던 ‘돌아온 액션퍼즐패밀리’의 ‘삼촌의 니편내편’에서 아이디어를 얻었다. 게임은 이런 식으로 진행된다(위 이미지 참고). 가운데 길에 캐릭터가 줄을 서 있다. 왼쪽, 오른쪽 버튼 위에 있는 캐릭터 모양에 맞춰서 줄 맨 앞에 서 있는 캐릭터를 왼쪽이나 오른쪽으로 보내주면 된다. 제한 시간 안에 최대한 많은 캐릭터를 정확하게 보내야 한다.

이러한 게임 방식이 실제 아파트 건설 현장을 보여주기에 적절할 것이라고 판단했다. 아파트를 건설할 때도 정해진 시간 안에 설계 도면대로 철근을 정확히 넣어야 하기 때문이다. <아파트 메이커>도 제한 시간 20초 안에 철근 80개를 정확히 쌓으라는 퀘스트를 줬다. 이용자는 화면 가운데 보이는 철근 색(회색, 주황색)에 맞춰 왼쪽 혹은 오른쪽 버튼을 눌러 철근을 쌓도록 기획했다.
<아파트 메이커> 게임화면.<아파트 메이커> 게임화면.
게임 화면을 구현하는 건 어렵지 않았다. 무작위로 회색 혹은 주황색 철근 이미지 80개를 생성하고, 이를 렌더링하여 매 게임마다 다른 순서대로 이미지가 나오게끔 설정하면 됐다. 철근 이미지가 사라지고 나타나는 과정을 CSS의 left와 right 속성을 이용해 transition으로 처리했다. 다만 이렇게 하니 레이아웃 reflow를 유발하면서 애니메이션이 구현될 때 흔적(ghosting) 현상이 생겼다. 이를 해결하기 위해 left/right 대신 transform 속성을 사용해 GPU 가속으로 인터랙션을 처리했다.
Firebase를 활용해 랭킹 구현하기
<아파트 메이커>의 결과 화면. 철근 갯수에 따라 결과 화면의 아파트 그림과 설명이 달라진다.<아파트 메이커>의 결과 화면. 철근 갯수에 따라 결과 화면의 아파트 그림과 설명이 달라진다.
결과 화면에서는 철근 80개 중 이용자가 몇 개의 철근을 정확히 쌓았는지에 따라 다른 아파트 모습을 보여주기로 했다. 이때 게임 결과만 보여주기보다는, 이용자가 얼마나 잘했는지 순위를 보여줄 때 여러 번 게임에 도전할 것 같다는 내부 의견에 따라 ‘랭킹보기’ 기능을 추가했다.

게임의 결과를 저장하고 이에 따른 순위를 매기기 위해서는 데이터베이스(DB)가 필요했다. 여러 선택지 중 Firebase의 Realtime Database를 사용하기로 했다. Firebase는 서버를 구성하지 않아도 실시간 데이터 동기화가 가능하고 클라이언트 코드만으로 상호작용이 가능하다는 장점이 있다. 또한 Firebase는 10GB까지 무료 호스팅 서비스를 제공한다.

Firebase를 처음 접하는 사람인 어렵다고 느낄 수 있지만 사용법이 많이 복잡하진 않다. 먼저 Firebase Console에 접속한다. 이후 ‘프로젝트 추가’ 버튼을 클릭하고 프로젝트 이름을 입력하여 프로젝트를 생성한다.

프로젝트가 생성되면 Firebase Console의 대시보드로 이동할 수 있는데, 이 때 ‘앱 추가’ 버튼을 클릭하여 사용할 플랫폼을 선택한다. 우리는 웹 기반 게임을 제작했기 때문에 Web 플랫폼으로 설정했다. 앱 이름을 입력한 뒤 앱을 등록하면 “Firebase SDK 설정 및 구성 정보” 를 확인할 수 있는 화면이 나온다. 자신이 작성하고 있는 코드와 알맞은 설정 정보를 선택하고, 해당 코드를 복사 후 붙여넣으면 Firebase 초기 작업이 완료된다.
Firebase SDK 설정 화면.Firebase SDK 설정 화면.
여기서 Firebase SDK 설정을 Firebase 초기화 과정이라고 부르는데, 이러한 초기화 작업은 새로운 장치에 Wi-Fi를 처음 연결하는 작업이라고 생각하면 된다. 프로젝트 정보를 적어서 Firebase 서버에 본인을 알리고 연결하는 과정인 것이다.

알맞게 코드를 집어 넣었다면 Firebase의 함수들을 모아놓은 모듈을 import해서 데이터베이스를 불러올 수 있을 것이다. 데이터를 모으기 전에, 다시 Firebase console로 돌아가서 realtime database를 사용하기 위한 설정을 몇 가지 해야 한다. DB의 위치를 지정해주고(가까운 위치를 선택하는 게 가장 좋다.) 보안 규칙 설정을 하고나면 DB를 사용할 수 있는 상태가 된다.

이제 다시 코드로 돌아와 아까 불러온 모듈들을 사용해 코드를 짜 나가면 된다. 코드를 짜기 전에 게임에서 사용할 전체적인 로직을 우선 짜 두어야 한다. 이 게임에서 사용한 전체적인 로직은 아래와 같다.
페이지의 로직 플로우차트.페이지의 로직 플로우차트.
여기에 추가적으로 사용자 각각을 구분하고 DB 호출을 최소화하기 위해 localStorage를 사용했다. 닉네임뿐만 아니라 사용자의 최고 기록과 현재 점수, 남은 시도 횟수 역시 Result Page Setting의 편의성을 위해 localStorage에 저장해 두었다. 즉, DB에는 최고 점수와 닉네임만 저장하는 방식인 것이다.
가상 닉네임 생성하기
여기서 가장 중요한 건 사용자 로그인 없이도 가상의 닉네임을 생성하여 사용자 각각을 구분해낼 수 있도록 만드는 것이었다. 닉네임 생성 방식에 대해 고민하다가, 형용사 + 동물의 형식으로 닉네임을 생성하기로 했다. ChatGPT에게 겹치지 않는 수식어 150개와 동물 이름 150개를 요청하여 각각 배열로 저장하고, 이를 랜덤으로 하나씩 가져와 닉네임을 생성하도록 로직을 짰다.

이 때, 각각의 닉네임이 겹치지 않도록 닉네임 생성 시 DB에서 해당 닉네임이 있는지 확인하는 작업을 추가했다. 또한 22500개의 닉네임이 모두 생성되었을 경우를 대비하여, 뒤에 숫자 태그를 붙여 닉네임을 생성하도록 설정했다. 예를 들어, ‘용감한 사자’라는 닉네임이 모든 닉네임을 사용한 뒤라면, ‘용감한 사자#1’처럼 숫자 태그가 붙은 형태로 저장되게 된다. 부디 많은 사람들이 기사를 읽어서 숫자 태그가 붙은 닉네임이 등장하는 상황이 되기를 바란다.
흥미로운 뉴스 경험을 제공하려면
이번 프로젝트는 게임 형식의 페이지를 제작하면서 복잡한 서버 구성 없이 Firebase와 같은 서버리스 DB 시스템을 활용해 데이터를 처리했다는 점에서 큰 의의가 있다. 이를 통해 독자들이 재미를 느끼고 적극적으로 참여할 수 있는 요소를 간단히 구현할 수 있었다. 앞으로도 효율적인 도구들을 활용해 독자들에게 더 흥미로운 뉴스 경험을 제공할 수 있도록 노력하겠다.
임희래 뉴스룸 디벨로퍼
임희래 뉴스룸 디벨로퍼|동아일보 디프런티어센터

새로운 이야기가 사람들에게 강렬하게 남아서 오랜 시간동안 회자될 수 있도록 만드는 일을 하고 있습니다. 뉴스와 기술이 만나 함께 성장할 수 있도록 매일 고민하고 나아가는 개발자가 되겠습니다.

Inside 더보기