💡
Haenu.com
  • 👋안녕하세요, 조현우입니다
  • 😍About me
    • ⚫이력서
    • 🟤개발 연혁
    • 🔵포트폴리오 (경력기술)
      • 크리에이터 관리 내부 툴 개발
      • TWIP 핀볼게임
      • TWIP 빙빙도네
      • TWIP CLIP
      • TWIP VOD & CLIP
      • TWIP/TGD APP
      • EJN 사내 프로덕트 개발
      • i.M 택시 예약서비스 웹뷰 개발
      • i.M 택시 백오피스 개발
      • HR Platform
      • Easy LMS
      • JDC 일자리데이터센터
      • 직업카드심리검사
      • (사)한국직업상담협회 공동훈련센터
    • 🟣외부 발표/강연
      • INFCON 2024
      • UbuCon Korea 2024
    • 🟢사이드 프로젝트 (엄선된)
      • ARCHIVERS (2023.10)
      • KAMY (2023.09)
      • 레븐 Portal (2023.08)
      • dotenv-to-sealed-secrets (2023.06)
      • gongik-ars (2023.04)
      • ⭐Clippy - MAU 4만 달성! (2022.11)
      • 해리배치고사 (2022.07)
      • 전해리 방송일정 (2022.06)
      • 나와 가장 잘 맞는 레븐 멤버는? (2022.06)
      • gellgell (2022.05)
      • 레븐 멀티트위치 (2022.04)
      • 포도당 노래책 (2022.02)
      • 트리니티 헬퍼 (2020.08)
      • 해누플래너 (2018.08)
      • 야자타임 (2016.07)
    • 🟠사이드 프로젝트 (그 외)
      • VMusic (2023.07)
      • 트위치 개발자문서 한글화 프로젝트 (2023.04)
      • 트위치/아프리카TV 뱅온알림봇 (2022.04)
      • 머니머니 (2022.04)
      • AfreecaTV Auto Up (2020.11)
      • 개인 쿠버네티스 클러스터
    • Life Checkpoint
      • 처음 개발을 접하다 (2013)
      • e-ICON 세계대회에서 앱 개발로 3위 수상 (2014)
      • 산수 연습 앱 개발 (2015)
      • 2016 - PHP와의 첫 만남
      • 2017 ~ 2018 - 개발의 즐거움으로 버틴 대입 수험생활
      • 2018 ~ 2019 - C++과 함께하는 알고리즘 문제해결
      • 2019.03 - 학식봇 프로젝트
      • 2019.09 - 첫 직장, 새로운 도전
      • 2020 - PHP와 함께 한 단계 업그레이드
      • 2021 - 계속해서 업그레이드, 그리고 첫 이직
      • 2022 - 산업기능요원 시작! 사이드 프로젝트에 눈을 뜬 한 해
      • 2023
    • 회고 모음
  • 🔗Links
    • GitHub
    • LinkedIn
    • Tech Blog
    • X (Twitter)
    • Coffee Chat
    • Document Storage
Powered by GitBook
On this page
  • 개요
  • 주요 기술 스택
  • Frontend
  • 상세 개발 과정
  • 프로젝트 진행 과정
  • 개발 과정
  • 성과

Was this helpful?

Edit on GitHub
  1. About me
  2. 포트폴리오 (경력기술)

TWIP 핀볼게임

2주만에 출시한 오픈소스 기반 핀볼게임 후원

Previous크리에이터 관리 내부 툴 개발NextTWIP 빙빙도네

Last updated 12 months ago

Was this helpful?

개요

후원액수에 따라 핀볼 구조물 내에 구슬을 만들고, 시작을 누르면 구슬이 떨어지며 가장 먼저 결승선을 통과한 구슬이 1등을 차지하는 웹 게임

  • 기간 : 2023년 8월 3일 ~ 2023년 8월 18일

  • 회사 : 이제이엔

  • 담당 범위 : 전체

주요 기술 스택

Frontend

  • Next.js

  • Chakra UI

  • Socket.io

상세 개발 과정

프로젝트 진행 과정

프로젝트를 처음 시작한 계기는 직원분들과 점심시간에 아프리카TV에서 유행하고 있는 '핀볼게임'이라는 컨텐츠를 이야기하다가, 그걸 가져와서 후원시스템을 붙여보면 재밌겠다고 아이디어가 떠올랐습니다.

그래서 퇴근 이후 저녁시간을 들여 이틀정도만에 빠르게 PoC 수준의 제품을 만들고 사내에 공유했습니다.

반응이 꽤 괜찮았고, 그 다음 주에 이틀정도 작업할 수 있는 시간을 받아서 피드백을 반영하고, 공개 가능한 수준까지 완성도를 끌어올렸습니다.

개발 과정

MIT 라이센스 오픈소스 게임을 바탕으로, 기존 HTML + Typescript 구조를 Next.js 기반으로 포팅하고, Chakra UI로 디자인을 씌우고, 트위치 로그인을 붙여서 내부 API 호출을 통해 스트리머의 토큰을 받아올 수 있도록 구성했습니다.

이를 통해 스트리머는 한 번의 트위치 로그인만 거치면, 자동으로 후원금이 구슬로 생성되는 모습을 볼 수 있게 되었습니다.

성과

  • 따로 프로모션이나 이벤트를 진행하지 않았음에도 출시 첫 달 핀볼게임을 통한 후원액 500만원을 달성했습니다.

  • 아무런 기획도 없이 아이디어를 가볍게 구현해보고, 이를 제품화시켜 출시까지 해본 재미난 경험이었습니다. 투입한 리소스 대비 효율이 좋았고, 앞으로 꾸준히 맵 추가나 기능 개선 등이 이뤄진다면 지속적으로 매출을 발생시킬 수 있을 것으로 예상합니다.

이후 내부 검토 과정과 홍보물 준비 과정을 거쳐 최초 공유 2주만인 8월 18일에 제품을 출시했습니다!

원본 게임 레포 :

😍
🔵
🎉
https://github.com/lazygyu/roulette
LogoTWIP 핀볼 게임TWIP 핀볼 게임
pinball.twip.kr
Logo방송천재트윕 핀볼 게임이 출시됐어요
홍보 게시물 (유튜브 쇼츠 + 홍보채널 게시물 + SNS)
TWIP 핀볼게임 플레이영상
첫 PoC 수준의 제품 공유