[개발생존기] 일단 만들어!!! 우당탕탕..⚡

우당탕탕 개발일지를 작성해보겠습니다. 😎
(응애 개발자는 매일매일이 넘어지는 중)

이번 한 주 동안 파이어베이스를 활용해 게임 배포에 도전했습니다.
처음 하는 배포라 낯설고 어려운 점이 있었지만, 과정을 통해 새로운 경험을 얻고자 했습니다.

검은 배경에 박쥐의 픽셀 화 된 이미지

진행 방법

파이어베이스 CLI를 설치하고, 커서(Cursor)를 통해 배포 과정에 필요한 연결과 명령어를 확인했습니다.
모르는 부분은 커서에게 직접 물어보며 해결할 수 있었고, 이를 통해 배포 과정을 빠르게 익힐 수 있었습니다.

사용한 도구: Firebase, Cursor
활용 내용:

  • Firebase CLI 설치 및 초기 세팅

  • Cursor를 통한 배포 명령어 및 연결 확인

Firebase Studio

파이어 베이스 들어가서 콘솔로 이동하기
프로젝트 생성 후 데이터 베이스로 넘어가기

컴퓨터 화면 앞의 공에 앉아있는 사람
옵션 목록이있는 화면

데이터 베이스 만들때 ID 위치는 서울 (*본인의 현위치로!) 로 설정 후 넘어가기 🙂

그 후 혼자 생각에 빠지다가, 결국 커서에게 물어봤습니다.

한국어 문자 메시지의 스크린 샷

중간중간에 오류가 떴었지만 커서가 알아서 해결해줬습니다!

해당 화면이 나오면 거의다 된 것 같더라구요.

Firebase CI Ghihub 로그인 성공

Woohoo~~~~~~~~

🎉 배포 완료!
Firebase에서 Truth or Bullet 게임이 성공적으로 배포되었습니다!
   게임 접속 정보
게임 URL: https://truth-bullet.web.app
Firebase 콘솔: https://console.firebase.google.com/project/truth-bullet/overview
   배포 과정 요약
✅ Firebase CLI 설치 - npm install -g firebase-tools
✅ Firebase 로그인 - Google 계정으로 인증
✅ 프로젝트 초기화 - firebase init hosting
✅ 프로젝트 빌드 - npm run build (Vite로 production 빌드)
✅ 설정 수정 - firebase.json에서 public 디렉토리를 dist로 변경
✅ 배포 완료 - firebase deploy --only hosting
   향후 업데이트 방법
게임을 수정한 후 다시 배포하려면:
이제 전 세계 어디서든 https://truth-bullet.web.app 에서 Truth or Bullet 게임을 플레이할 수 있습니다! 🎮

배포 후 바로 오지 이미지까지 제작해서 재배포했습니다.



개발에서 배포까지 배운 후, 블랙잭 게임 개발 내용을 실습세션에서 진행했습니다.

미리 프롬프트와 이미지를 준비한 후에 진행했습니다.
(자세한 내용은 실습세션 오신분들만 알지용 >< )

실습세션 후기


기존 저의 서비스는 언어 설정이 추가 되었습니다.

진실 또는 총알 스크린 샷 썸네일

게임 아이템이 잘 사용되지 않는 점을 수정했습니다

추가로 천사와 악마의 목소리 부분에 대한 설명이 추가되고, 라운드마다 게임로그에서 더 눈에 띄도록 수정하였습니다.

2인 플레이를 위한 6개의 캐릭터가 만들어졌습니다.

2인 플레이시 캐릭터 선택창이 추가되었습니다.

2인 플레이에서는 벌칙을 설정할 수 있습니다.

파비콘 이미지가 수정되었습니다.

2인 플레이 로딩화면에서는 각자가 선택한 캐릭터가 나옵니다.

작업하다가 만나는 오류들 ^*^
2인 플레이는 아직 ui오류 때문에 적용 중에 있습니다 🙂

결과와 배운 점

  • Firebase를 통한 첫 배포를 성공적으로 완료했습니다.

  • 배포 경험을 통해 CLI 활용법과 커서의 장점을 체감했습니다.

  • 블랙잭 게임 제작 실습 세션을 통해 기본적인 카드 게임 구현 흐름을 연습했습니다.

  • 언어 지원(한국어, 영어, 일본어)을 추가하여 다국어 환경을 테스트할 수 있었습니다.

  • 배포 과정에서 OG 이미지까지 정상적으로 적용하는 데 성공했습니다.

시행착오

  • CLI 설치 및 연결에서 막히는 부분이 있었으나, 커서로 문제를 해결할 수 있었습니다.

  • 처음이라 낯설었지만 반복하면서 배포 과정이 점점 익숙해졌습니다.

앞으로의 계획이 있다면 들려주세요.

  • 다인 플레이 추가하기 *최대 6인

  • 반응형 체크해서 수정하기

  • 2인플레이 화면ui 개선하기

링크
파이어베이스 : https://firebase.google.com/?hl=ko
게임 링크 : https://truth-bullet.web.app/

도움 주신 분들

뇌과학스터디원분들..!
사례글 발표때 응원와주신 성준님 감사합니다!
JUN님, Wonny님 배포 도와주셔서 감사합니다.😆

4
3개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요