겜린더 출시 후기

강문혁·2024년 12월 20일

겜린더

목록 보기

12/13

게임이 언제 출시하는지 사이트 들어가고 유튜브로 일일이 찾으셨나요?
겜린더로 한 번에 찾고 달력에 저장하세요!

📋 스팀, 플레이스테이션, 엑스박스, 닌텐도 스위치의 출시 예정 게임을 한눈에 보세요!

📆 출시 예정 게임을 캘린더에 등록할 수 있어요!

🔔 매일 아침마다 오늘 어떤 게임이 출시되었는지 알려줘요!

👾 만약 내가 인디게임 개발자라면 겜린더에 무료로 게임을 등록할 수 있어요! (모바일 게임도 가능해요)

구글 플레이
앱 스토어

Github Repo 모음
겜린더 백엔드 : 링크
겜린더 게임 수집 봇 : 링크
겜린더 게임 출시 알림 자동화 : 링크

관련 글 (수시로 업데이트됩니다)
여러 개의 알림을 하나로 묶어서 보내기 - 2024-12-27

개발하면서 어려웠던 부분이나 기술적인 부분은 분량이 많을 것 같아
이번 글에선 간략하게 요약했습니다.

리뉴얼

겜린더가 드디어 다시 출시되었습니다.
겜린더 2.0.0 개발 후기를 작성한 지 벌써 3년이 지났네요

3년 전의 나와 지금 나의 차이점을 한줄로 설명하자면:

이제야 조금은 개발자다워진 것 같습니다.

하지만 여전히 제 자신의 부족함을 다시 알 수 있었던 프로젝트였습니다.

포기하기엔 너무 멀리 와버린 프로젝트

"3년이나 걸릴 이유가 있나?"라고 생각하셨다면, 맞는 말입니다.
이 프로젝트가 3년이나 걸릴 일은 죽어도 아니었죠.

작년에는 아예 집중을 하지 못했었습니다. 번아웃이 왔었거든요...
3년이지만 실질적인 개발 기간은 1년 되는 것 같네요...

사실, 겜린더는 출시 후에 그만두려던 프로젝트였습니다.
다른 사이드 프로젝트도 시도해보고 싶었지만, 겜린더는 계속 제 머릿속에서 떠나질 않았습니다.

그리고 솔직히, 저렇게 어정쩡한 앱을 출시하고 나니 스스로도 부끄러웠습니다.
어디 가서 내가 개발했다고 말하기조차 어려울 것 같았죠.

마지막으로, 누군가에게 정말 도움이 되는 제대로 된 서비스를 만들어보고 싶었습니다.

슬로건 변경

겜린더의 초기 슬로건은
"달력으로 알아보는 게임 정보"였습니다.

즉, "어떤 게임이 출시하는지 달력을 통해 알아보고, 출시 당일 알림을 받아보자!"를 목표로 했습니다.

하지만 제가 구현하고 싶었던 본질적인 가치를 더 잘 담아내고 싶었고, 친구의 피드백도 큰 도움이 되었습니다.
그 결과, 슬로건을 "나만의 게임 캘린더"로 바꾸게 되었습니다.

슬로건 변경했던 상세한 이야기

디자인은 정말 어렵다

겜린더는 정말 많은 디자인 변천사를 겪었습니다.

자세한 내용은
겜린더 프론트엔드 제작기 1에서 확인하실 수 있습니다.

하지만 기존 디자인은 슬로건 변경과 함께 대폭 수정되었습니다.

항상 겜린더의 UI/UX에 피드백을 주던 친구가 이번에는 직접 UI를 리디자인해 주었죠.

덕분에 UX가 크게 개선되었고, 더 간결하고 깔끔한 UI를 완성할 수 있었습니다.

사실 개발이 지연된 가장 큰 이유 중 하나가 UI/UX 디자인이었습니다.

하지만 친구가 도와준 이후로는 디자인 걱정을 덜고 개발에만 집중할 수 있었습니다.
그 결과, 개발이 훨씬 순탄하게 진행되었죠.

친구가 디자인을 완성해 준 덕분에, 저는 이를 기반으로 API 명세서를 작성하고 본격적으로 개발에만 몰두할 수 있었습니다.

이 글을 빌려 친구에게 다시 감사하다는 말 전합니다.

느낀점

이번에는 정말 제대로 된 앱을 만들고 싶다는 마음으로, 설계부터 더 열심히 고민하고 작업했습니다.

아직 부족한 점이 많지만, 본질적인 부분을 안정적으로 구현해낼 수 있어서 정말 기뻤습니다.

삽질했던 부분들은 하나씩 정리하며, 따로 글로 남길 예정입니다.

겜린더는 여기서 끝이 아니라 이제 시작입니다.
본질적인 기능을 구현한 지금부터가 진짜라고 생각하며, 게이머가 애용하는 앱으로 거듭나기 위해 최선을 다해볼 생각입니다.

지금까지 받은 수많은 피드백을 바탕으로 새로운 기능을 정리했고,
그 기능들을 단순히 추가하는 것에 그치지 않고, UI/UX에 어떻게 자연스럽게 녹여낼지 고민해야 할 것 같습니다.

서비스 리뷰

개요

개발 과정에서 중점적으로 고려한 주요 포인트는 다음과 같습니다:

출시 예정 게임의 수 부족 문제 해결
→ 이용자가 더 다양한 게임 정보를 확인할 수 있도록 개선
회원가입 및 로그인 기능 구현
→ 사용자 편의성과 보안을 모두 고려
푸시 알림(FCM)의 재설계
→ 알림 폭탄을 방지하기 위한 체계적인 설계
페이징(Pagination) 구현
→ 자유로운 게임 탐색 경험 제공과 함께 서버 부하 최소화
VPN을 활용한 보안 강화
→ 자체 서버 운영 환경에서 데이터를 안전하게 보호

사용한 스택

기술 스택

Front-End

React Native
Axios
React Query

Back-End

Docker
Nginx
FastAPI
MongoDB
Redis
Firebase Cloud Message(FCM)

게임 수집 봇

Selenium
MariaDB
Pandas

자동화

Github Action

프로젝트 관리

Notion
Figma

실제 서비스 화면

Front-End 주요 기능

1. 자유로운 게임 탐색 및 제스쳐를 이용한 빠른 달력 등록

페이징을 통해 데이터 로딩을 최적화했습니다.
React Native에서는 FlatList보다 성능이 뛰어난 FlashList 라이브러리를 사용했습니다.
스크롤 시 성능 차이가 명확히 드러나 만족스러웠습니다.

2. 로그인/회원가입

회원 가입 절차를 직관적으로 만들기 위해 UX에 집중했습니다.
상단의 진행 바를 통해 단계별로 진행 상황을 쉽게 확인할 수 있도록 설계했습니다.

또한, 가입 단계별로 필요한 UI를 컴포넌트화하여 효율적으로 재사용할 수 있게 구성했습니다.

3. 설정페이지

4. 푸시 알림 받기

Back-End

백엔드 개발 과정에서 여러 문제를 만나며 많은 것을 배울 수 있었습니다.
각 기능별로 어떤 문제를 겪었고, 어떻게 해결했는지를 정리한 글을 차근차근 작성해 나갈 예정입니다.

이 글에선 간략하게 설명만 하고 마치겠습니다.

아래 이미지는 전체적인 구상도입니다.

JWT를 이용한 로그인

Redis를 활용한 효율적인 JWT 로그인 구현

1. 로그인 프로세스

사용자가 로그인 시 Access Token과 Refresh Token이 발급됩니다.
Refresh Token을 이용해 Access Token을 재발급받을 경우, Refresh Token도 새로 생성하여 보안을 강화합니다.

2. 멀티 로그인 관리

한 계정으로 여러 기기에서 로그인할 수 있도록, 각 기기에 UUID를 생성하여 구분.
Redis에 계정ID:UUID 형태로 Refresh Token을 저장하여 기기별로 독립적으로 관리합니다.

3. Redis 사용 이유

Expire 기능: Refresh Token의 만료 시간을 Redis에서 자동으로 관리하여 유지보수 편리.
기존 겜린더에서 Redis를 사용하고 있었기에 자연스럽게 통합.
빠른 읽기/쓰기 성능으로 다중 기기 로그인 시 효율적인 관리 가능.

4. 구현 결과

보안성을 강화하면서도 다중 기기 지원이 가능해졌으며, Redis를 통해 Token 관리의 복잡성을 줄이고 성능을 최적화할 수 있었습니다.

푸시 알림 (FCM)

Firebase Cloud Messaging(FCM)을 이용해 게임 출시 알림을 제공합니다.
게임 출시 알림은 Github Actions로 매일 오전 9시에 자동으로 실행되는데요
Github-Hosted runners를 이용하기 때문에 좀 느리긴 하지만 오류 없이 정상적으로 작동 중이라 만족하고 있습니다.

특히 알림 폭탄 문제를 해결하기 위해 설계를 최적화하고 사용자 경험을 개선했습니다.

아래 이미지는 당시 어떻게 구현할지 구상했던 이미지입니다.

2024-12-27 업데이트
푸시 알림 관련해서 개선한 글을 작성하였습니다.
자세한 내용은 하단 글을 통해 확인해주시면 감사하겠습니다.
여러 개의 알림을 하나로 묶어서 보내기

배포 자동화

배포 자동화는 그냥 큰 리소스를 쓰고 싶지 않아 간단하게 CI/CD 파이프라인을 만들어 보았습니다.
Github Actions를 사용하여 코드가 푸시될 때마다 자동으로 빌드하고 배포하는 방식입니다.

VPN을 이용한 보안 강화

개인 서버, 어떻게 안전하게 운영할까?

겜린더는 현재 개인 서버에서 운영되고 있습니다. 개인 서버는 외부 공격에 취약하기 때문에, 이를 보완하기 위해 VPN을 적극적으로 활용했습니다.

데이터베이스, 외부에서 막아야 안전하다

MongoDB와 Redis 같은 중요한 데이터베이스는 외부에서의 직접 연결을 완전히 차단했습니다.
만약 데이터베이스에 직접 접근해야 할 일이 있다면, VPN을 통해서만 접속할 수 있도록 설정했습니다.

Swagger 문서도 아무나 못 보게

FastAPI의 Swagger 문서 페이지는 기본적으로 개발 편의를 위해 제공되지만, 이 역시 VPN에 연결된 사용자만 접근 가능하도록 제한했습니다.
추가로, IP Whitelist를 만들어 특정 IP만 접속할 수 있도록 보안을 한층 더 강화했습니다.

보안은 선택이 아닌 필수... 안 그럼 큰일 난다...

VPN과 IP Whitelist 덕분에 서버 접근 경로를 최소화할 수 있었고, 외부 위협으로부터 서버를 한층 더 안전하게 보호할 수 있었습니다.
작은 서버라도 보안에 신경 쓴다면, 예상치 못한 문제를 미리 방지할 수 있습니다!

게임 수집 봇

게임 데이터 수집과 관련해 이전에 작성한 두 가지 글이 있습니다:

마치며

아쉬웠던 점

아직 코드를 완벽하게 작성하지 못한 점이 아쉬웠습니다.
백엔드에서 응답을 통일한 뒤, 프론트엔드에서 코드 재사용성을 높이려 했으나, 급하게 개발하다 보니 이를 구현하지 못한 점이 아쉬웠습니다.
올해 안에 출시하고자 급하게 진행하다 보니, 출시 초기에는 버그가 많았고, 넣지 못한 기능도 있었습니다.
생각보다 구현한 기능에 비해 보이는 부분이 적어 아쉬움이 남습니다. 😂
기초 지식은 여전히 부족하고 더 공부해야겠다는 마음가짐을 가질 수 있게 되었습니다.

만족했던 점

혼자서 서비스를 만들어본 경험이 정말 값졌습니다.
스스로 실력에 대한 의심이 많았지만, 이번 경험을 통해 많은 의문이 해결되었고, 단순히 코드를 작성하는 사람이 아니라 문제를 파악하고 해결할 수 있는 능력을 갖춘 개발자로 성장했다는 점에서 뿌듯함을 느낍니다.

앞으로 계획

이제 취업 준비를 본격적으로 시작할 생각입니다. CS, 자료구조, 코딩 테스트, SQL 등 기초부터 다시 복습하며 실력을 쌓고자 합니다. 이 기회가 마지막으로 기초를 제대로 다질 수 있는 시간이 아닐까 싶습니다. 겜린더는 주말마다 업데이트를 위해 꾸준히 개발할 예정입니다.