[마이크로 SaaS 10편] 백엔드(서버) 없이 랭킹 시스템 구축하기: 구글 스프레드시트를 나만의 데이터베이스로

서론: 한 번 하고 끝나는 게임은 아쉽다

화려한 폭죽과 함께 타원형 트랙을 역동적으로 달리는 ‘경마 제비뽑기’ 게임이 완성되었습니다. 기능과 디자인 모두 흠잡을 데 없었지만, 주변 사람들과 내기를 반복하다 보니 묘한 아쉬움이 남았습니다. “오늘 김대리가 3번 이겼고, 박과장이 1번 이겼네? 이 누적된 우승 기록을 명예의 전당처럼 랭킹표로 띄워주면 사람들이 훨씬 더 승부욕을 불태우지 않을까?”

게임이 일회성 이벤트로 휘발되지 않고 지속적인 재미를 주려면, 유저들의 기록을 어딘가에 영구적으로 ‘저장’해야 합니다. 하지만 코딩 초보에게 데이터를 저장하는 ‘백엔드(서버)’와 ‘데이터베이스(DB)’는 그야말로 미지의 세계이자 거대한 장벽이었습니다. 이번 편에서는 복잡한 서버 구축이나 호스팅 비용 없이, 우리가 매일 업무에 쓰는 ‘구글 스프레드시트’를 무료 데이터베이스로 둔갑시켜 실시간 랭킹 시스템을 완성한 마법 같은 과정을 소개합니다.

1. 서버 구축의 벽 앞 절망, 그리고 AI의 기발한 제안

데이터를 안전하게 저장하고 불러오려면 MySQL이나 AWS 같은 서버 인프라가 필요하다고 들었습니다. 비전공자인 제가 당장 비싼 서버 호스팅을 결제하고 복잡한 데이터베이스 언어(SQL)를 처음부터 배울 수는 없는 노릇이었습니다. 지푸라기라도 잡는 심정으로 AI 비서에게 매달렸습니다.

나의 프롬프트: “나는 백엔드 서버도 없고 데이터베이스도 다룰 줄 몰라. 하지만 사람들이 경마 게임에서 우승한 기록을 무료로 쉽게 저장하고, 순위를 매겨서 내 웹사이트에 다시 보여주고 싶어. 비전공자도 당장 할 수 있는 제일 쉬운 방법이 없을까?”

AI는 단 1초 만에 너무나 익숙하고 친근한 툴을 해결책으로 제시했습니다. “구글 스프레드시트(Google Sheets)를 데이터베이스처럼 사용해 보세요! 구글 앱스 스크립트(Google Apps Script)를 활용하면 무료로 데이터를 저장하고 불러올 수 있는 나만의 API를 만들 수 있습니다.”

2. 구글 앱스 스크립트(GAS)로 데이터 파이프라인 뚫기

구글 스프레드시트가 서버 역할을 할 수 있다니! 반신반의하며 AI가 알려준 대로 빈 스프레드시트를 하나 열고 상단 메뉴에서 ‘확장 프로그램 > Apps Script’를 클릭했습니다. 하얀 코딩 창이 나타났고, 저는 늘 그렇듯 AI에게 논리적인 지시를 내렸습니다.

• 데이터 수신 로직 지시: “내 웹사이트에서 우승자 이름이 넘어오면, 스프레드시트 A열에는 날짜 및 시간, B열에는 우승자 이름, C열에는 우승 횟수(1)를 차곡차곡 맨 아랫줄에 추가해 주는 코드를 짜줘.”

• API 발급: AI가 뱉어낸 doPost(e)와 doGet(e) 함수로 이루어진 코드를 스크립트 창에 그대로 붙여넣고 ‘웹 앱으로 배포’ 버튼을 누르자, 복잡한 영문과 숫자로 이루어진 저만의 고유한 URL(API 주소)이 생성되었습니다.

• 프론트엔드 연결: 다시 워드프레스로 돌아와, 게임에서 폭죽이 터지는 우승 자바스크립트 로직 바로 뒤에 “방금 발급받은 구글 API 주소로 방금 우승한 말의 이름을 몰래 전송(Fetch)해 줘”라는 코드를 추가했습니다.

3. 빈 셀에 데이터가 찍히는 소름 돋는 마법

모든 세팅을 마치고 떨리는 마음으로 경마 제비뽑기를 실행했습니다. 참가자 이름을 ‘김대리’로 설정하고 레이스를 시작했습니다. 트랙을 맹렬히 돌던 ‘김대리’가 마침내 1등으로 결승선을 통과하며 폭죽이 터졌습니다. 그 즉시, 저는 듀얼 모니터에 띄워둔 텅 빈 구글 스프레드시트 화면으로 시선을 돌렸습니다.

[ 2026-02-11 14:30:15 | 김대리 | 1 ]

아무도 키보드를 건드리지 않은 엑셀 빈칸에, 제 웹사이트에서 발생한 우승 데이터가 실시간으로 스스로 타이핑되는 순간이었습니다! 등줄기에 찌릿한 전율이 일었습니다. 내 웹사이트와 구글의 서버가 보이지 않는 선으로 연결되어 데이터를 주고받는 ‘백엔드 파이프라인’을 코딩 1도 모르는 제가 직접 뚫어낸 것입니다.

이후에는 반대로 “스프레드시트에 저장된 B열의 이름들을 취합해서, 가장 많이 우승한 순서대로 상위 5명을 내 웹사이트 랭킹표에 보여줘”라는 코드를 추가하여, 완벽하게 작동하는 ‘실시간 명예의 전당’까지 구축할 수 있었습니다.

4. 코딩 초보를 위한 데이터베이스 솔루션 비교

결론: 비전공자, ‘풀스택(Full-stack)’의 영역을 엿보다

로또 번호 추첨기로 화면(프론트엔드)을 그리는 법을 배우고, 구글 스프레드시트를 연동하며 데이터(백엔드)를 관리하는 법까지 깨우쳤습니다. 비록 정통 개발자들의 방식은 아니지만, 아이디어를 실체화하고 데이터를 축적하는 ‘풀스택’의 사이클을 완벽하게 한 바퀴 경험한 것입니다.

두 개의 게임 프로젝트를 연달아 성공시키며 자신감이 최고조에 달했습니다. 이제 저는 단순한 오락거리를 넘어, 제가 매일같이 겪는 업무상의 진짜 불편함을 해결할 ‘실전 유틸리티 툴’ 개발에 눈을 돌리게 되었습니다. 다음 11편에서는 블로그에 글을 올릴 때마다 서식이 깨져서 고통받던 저를 구원해 준 **’네이버 블로그 전용 텍스트 포맷 변환 웹 툴’**의 제작 과정을 공개합니다.