닥터킴의 연구소
[커피런] - 커피 내기를 위한 웹 게임 1인개발 후기 본문
1인 개발로 만든 커피 내기 게임, 벌칙 게임 웹사이트
안녕하세요! 평소 개발을 하면서 심심할 때마다 이런저런 사이드 프로젝트를 하는 편인데, 이번에는 커피런(CoffeeRun)이라는 커피 내기 게임을 개발해봤습니다.
사무실에서 커피 내기할 때나 벌칙 게임을 할 때 사용할 수 있는 온라인 뽑기 게임입니다.
🎮 커피런 게임 바로가기: https://coffeerun.kr
[커피런] - 신개념 커피내기 게임
1분만에 끝나는 재미있는 커피내기 게임! 회사나 친구들과 함께 누가 커피를 살지 정해보세요.
coffeerun.kr
왜 커피 내기 게임을 개발하게 되었나?
회사에서 점심 메뉴를 정하거나 커피 내기를 할 때 항상 가위바위보나 간단한 뽑기로 결정하는데, 뭔가 재미없고 뻔하더라고요. 특히 여러 명이 함께할 때는 공정성 문제도 있고, 무엇보다 재미가 없었습니다.
그래서 좀 더 재미있고 공정한 벌칙 게임은 없을까 생각하다가, 직접 커피 내기 게임을 만들어보자는 생각이 들었습니다.
커피런 게임 개발 과정과 소요 기간
원래 대학교 학부생때 만들어보려고 계획을 잡아두었습니다. 그러나 졸업 준비와 자격증준비로 접어두고 최근에 들어서야 다시 해보자는 생각을 하게되었습니다. 본업이 있다 보니 퇴근하고 집에서 짬짬이 개발했습니다. 전체적으로 약 6개월 정도 걸렸는데, 실제 게임 로직 개발은 2-3개월 만에 끝났고 나머지는 거의 CSS 디자인 작업과 모바일 최적화 작업이었습니다.
바이브코딩으로 전체적인 틀을잡는데 도움을받고 세부적인 사항은 직접 이것저것 수정했습니다.(4개월 소요 ㅠㅠ)
개발 과정에서 가장 고생했던 부분들
1. CSS 디자인 작업
정말 이 부분에서 가장 고생했습니다. 특히 모바일 반응형 작업이 생각보다 까다로웠어요. 커피 내기 게임은 주로 스마트폰에서 여러 명이 함께 보는 경우가 많아서 모바일 최적화가 필수였는데, 다양한 화면 크기에 맞춰 레이아웃을 조정하는 게 정말 어려웠습니다.
2. 게임 밸런싱 조정
벌칙 게임의 핵심은 공정성입니다. 너무 뻔한 결과가 나오면 재미없고, 너무 랜덤하면 조작 의심을 받을 수 있어서 적당한 밸런스를 찾기가 어려웠습니다. 특히 뽑기 게임에서 꼴찌 부스트 시스템을 어느 정도로 할지 정하는 게 까다로웠네요.
3. 애니메이션 처리
처음에는 이모티콘과 CSS만으로 캐릭터 애니메이션을 구현하려다가 Lottie 라이브러리로 바꿨는데 기존 방식보다 훨씬 생동감이 있어보여서 만족합니다. 다만 트랙의 각 방향별로 캐릭터 회전 처리하는 게 복잡했습니다.
커피런 게임 상세 기능 소개
기본 게임 설정
- 참가 인원: 2명~8명까지 자유롭게 설정 가능
- 커피 내기 조건: 꼴찌, 뒤에서 2등, 3등 또는 여러 등수 동시 선택
- 게임 시간: 1분 자동 진행 (지루하지 않은 적당한 시간)
- 플랫폼: 웹 브라우저 (설치 불필요, 모바일 최적화)
상세 게임 진행 방식
1. 참가자 등록
각 참가자의 이름을 입력하면 자동으로 귀여운 캐릭터가 배정됩니다. 총 8가지 다른 캐릭터로 구성되어 있어서 참가자를 구별하기 쉽습니다.
2. 내기 조건 설정
- 꼴찌 선택: 가장 기본적인 커피 내기 방식
- 뒤에서 2등, 3등: 좀 더 특별한 조건
- 기타 선택: 여러 등수를 동시에 선택 가능 (예: 1등과 꼴찌 동시 당첨)
3. 게임 진행
3초 카운트다운 후 게임이 시작됩니다. 1분 동안 자동으로 진행되며, 중앙에 실시간 순위가 표시되어 현재 상황을 쉽게 파악할 수 있습니다.
4. 결과 확인
게임이 끝나면 카드뉴스 형태로 결과가 발표됩니다. 단일 당첨자는 화려한 개인 발표 화면으로, 복수 당첨자는 그리드 형태로 깔끔하게 정리됩니다.
랜덤 스킬 시스템 - 벌칙 게임의 핵심
커피 내기 게임의 재미를 위해 다양한 랜덤 스킬을 구현했습니다
1. 공격형 스킬
- 💣 대폭발: 상위권 플레이어들이 3초간 느려짐
- ⚡ 번개 공격: 선두권 다수가 마비 상태
- 🎯 저격: 1등과 꼴찌의 위치가 즉시 교환
2. 지원형 스킬
- 🚀 터보 부스터: 하위권 플레이어가 급상승
- 🔥 각성: 하위권 전체가 부스트 효과
- 🌪️ 대혼란: 모든 순위가 완전히 뒤바뀜
이런 스킬들이 게임 중간중간 랜덤하게 발동되어 마지막까지 결과를 예측하기 어렵게 만듭니다.
이것이 일반적인 뽑기 게임과 다른 커피런만의 특징입니다.
기술적 구현 내용
게임을 더욱 재미있게 만들어주는 세심한 기능들을 소개합니다
특별한 UI/UX 기능들
1. 게임 가이드 시스템
처음 접하는 사용자들을 위해 게임 규칙과 스킬 정보를 쉽게 확인할 수 있는 모달 시스템을 구현했습니다.
2. 캐릭터 인터랙션
게임 설정 화면에서 참가자 이름 입력칸에 마우스를 올리면 캐릭터가 2.5배 확대되면서 애니메이션 속도가 빨라집니다. 작은 디테일이지만 사용자 경험을 한층 더 재미있게 만들어주는 요소입니다.
3. 복수 당첨자 선택 시스템
기존의 단순한 꼴찌 선택 방식을 넘어서, 사용자가 원하는 등수 조합을 자유롭게 선택할 수 있습니다. 예를 들어 "1등과 꼴찌 동시 당첨" 같은 특별한 조건도 설정 가능합니다.
4. 카드뉴스 형태의 결과 발표
게임 결과를 단순한 텍스트가 아닌 카드뉴스 형태로 제공합니다. 첫 번째 카드에서는 당첨자를 화려하게 발표하고, 두 번째 카드에서는 전체 순위를 보여줍니다. 화살표 클릭으로 페이지 이동이 가능합니다.
5. 실시간 순위 표시
게임 중앙에 2열 그리드 형태로 실시간 순위가 표시됩니다. 각 등수별로 다른 색상의 배지가 적용되어 한눈에 순위를 파악할 수 있습니다.
6. 스킬 이벤트 시각 효과
각 스킬이 발동될 때마다 해당 플레이어에게 파티클 효과가 나타납니다. 스킬 종류에 따라 다른 색상과 모양의 파티클이 적용되어 시각적 재미를 더해줍니다.
사용 기술 스택
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- JavaScript: 바닐라 자바스크립트 (프레임워크 없이 순수 JS)
- 애니메이션: Lottie.js (SVG 기반 고품질 애니메이션)
- 반응형 디자인: CSS Grid, Flexbox
- 호스팅: GitHub Pages (CDN 기반 빠른 로딩)
모바일 최적화 작업
커피 내기 게임은 스마트폰에서 여러 명이 함께 보는 경우도 있어서 모바일 최적화에 특별히 신경 썼습니다
1. 반응형 레이아웃 시스템
- CSS 변수 활용: 화면 크기별 동적 조정
- 트랙 크기 자동 조정: 화면 크기에 맞춰 게임 트랙이 자동으로 리사이징
- 캐릭터 크기 최적화: 모바일에서는 16% 크기로, PC에서는 9% 크기로 자동 조정
2. 터치 인터페이스 최적화
- 터치 영역 확대: 모든 버튼을 최소 44px 이상으로 설계 (Apple 가이드라인 준수)
- 터치 하이라이트 제거: -webkit-tap-highlight-color: transparent로 깜빡임 제거
- 터치 조작 최적화: touch-action: manipulation으로 더블탭 줌 방지
3. 가로/세로 모드 대응
- 세로 모드: 1열 순위표, 세로 중심 레이아웃
- 가로 모드: 2열 순위표, 가로 공간 활용 극대화
- 자동 감지: 화면 회전 시 실시간 레이아웃 재계산
4. 모바일 전용 UI 조정
- 순위표 최적화: 768px 이하에서 2열→1열 자동 전환
- 폰트 크기 스케일링: clamp() 함수로 최소/최대 크기 제한
- 여백 조정: 모바일에서 padding, margin 값 50% 축소
5. 성능 최적화
- 60fps 유지: 애니메이션 최적화로 부드러운 움직임 보장
- 메모리 관리: 불필요한 DOM 요소 제거 및 이벤트 리스너 정리
- 로딩 속도: 1초 이내 초기 로딩 완료
6. 사용자 경험(UX) 개선
- PC 권장 배너: 모바일 사용자에게 PC 환경 권장 (하루 1회 표시)
- 배너 자동 숨김: 24시간 후 자동으로 다시 표시되는 스마트 시스템
- 스크롤 최적화: 결과 화면에서 부드러운 스크롤링 적용
7. 크로스 브라우저 호환성
- iOS Safari: -webkit- 접두사 적용
- Android Chrome: 터치 최적화 및 성능 튜닝
- 구형 브라우저: 기본 기능 유지를 위한 폴백 제공
다만 모바일이 화면이 작은지라 몰입도가 떨어지긴 합니다. 다함께 즐기기 위해선 PC환경에서 모니터로 보는걸 추천드립니다.
기술적 성취
1. 60FPS 유지하는 부드러운 애니메이션
- Lottie.js + CSS transform 조합으로 모바일에서도 끊김 없는 60fps 달성
- 8명 동시 애니메이션에도 성능 저하 없음
2. 1초 이내 초기 로딩
- 바닐라 JS로 번들 크기 최소화
- CDN 활용한 리소스 최적화
- Critical CSS 인라인 처리
3. 픽셀 퍼펙트 반응형 디자인
- CSS clamp()와 CSS 변수로 모든 화면 크기 대응
- 320px부터 2560px까지레이아웃 유지
실제 사용 후기와 피드백
베타 테스트 결과
1. 긍정적 피드백
- 기존 가위바위보보다 훨씬 재미있다
- 1분이라는 시간이 적당해서 지루하지 않다
- 중간에 스킬 이벤트가 터질 때마다 환호성이 나온다
- 모바일에서도 화면이 선명하게 잘 보인다
2. 개선 요청사항
- 사운드 효과 추가 요청
- 더 많은 캐릭터 종류 요청
- 게임 결과 저장 기능 요청
다양한 활용 사례
1. 사무실에서의 활용
- 점심 메뉴 정하기
- 커피 내기 (가장 많이 사용)
- 회식 장소 결정
- 청소 당번 정하기
- 출장 참여자 선정
2. 모임에서의 활용
- 술자리 벌칙 게임
- 계산 담당자 정하기
- 노래방 순서 정하기
- 아이스브레이킹 게임
검색 최적화(SEO) 작업
커피 내기 게임을 찾는 사람들이 쉽게 찾을 수 있도록 다음과 같은 SEO 작업을 진행했습니다.
타겟 키워드
- 커피런: 브랜드명
- 커피 내기: 핵심 키워드
- 커피 내기 게임: 정확한 매치 키워드
- 벌칙 게임: 관련 키워드
- 뽑기 게임: 유사 기능 키워드
- 사무실 게임: 사용 환경 키워드
최적화 요소
- 메타 태그: 각 키워드에 최적화된 설명
- 구조화된 데이터: 검색 엔진이 이해하기 쉬운 마크업
- 속도 최적화: 로딩 시간 1초 이내 달성
- 모바일 친화성: 구글 모바일 친화성 테스트 통과
향후 업데이트 계획
단기 계획 (1-2개월 내)
- 사운드 효과 추가: 스킬 발동시 효과음
- 새로운 캐릭터: 추가 캐릭터 5종 추가
- 공유 기능: 결과 화면 이미지 저장 기능
중기 계획 (3-6개월 내)
- 게임 기록 저장: 과거 게임 결과 조회
- 커스텀 스킬: 사용자가 직접 스킬 설정
- 팀전 모드: 여러 팀으로 나누어 진행
장기 계획 (1년 내)
- 리그 시스템: 정기적인 커피 내기 토너먼트
- 통계 시스템: 개인별 승률 및 통계
- 테마 시스템: 다양한 시각적 테마 선택
개발하면서 배운 점들
기술적 측면
- CSS의 중요성: 기능 구현보다 디자인 작업이 훨씬 오래 걸렸습니다
- 모바일 우선 설계: 처음부터 모바일을 고려해서 설계하는 게 중요했습니다
- 사용자 경험의 중요성: 실제 사용자 피드백이 개발 방향을 크게 바꿨습니다
- 성능 최적화: 1초 내 로딩을 위한 최적화 작업의 중요성을 깨달았습니다
사업적 측면
- SEO의 중요성: 좋은 서비스도 검색되지 않으면 의미가 없습니다
- 사용자 피드백: 실제 사용자의 의견이 개발자의 상상보다 중요합니다
- 지속적인 업데이트: 한 번 만들고 끝이 아니라 계속 개선해야 합니다
마무리
6개월 동안 퇴근 후 짬짬이 개발한 커피런 게임을 드디어 배포했습니다! 고생도 있었지만, 끝까지 완성해서 실제로 서비스할 수 있게 된 게 뿌듯하네요.
아직 배포 초기 단계라 실제 사용자들의 피드백을 더 받아봐야겠지만, 지금까지 테스트해본 결과로는 기존의 단순한 가위바위보나 제비뽑기보다 훨씬 재미있다는 반응입니다.
사무실에서 커피 내기할 때, 모임에서 벌칙 게임할 때, 또는 간단한 뽑기 게임이 필요할 때 한 번 사용해보세요. 기존의 단순한 가위바위보나 제비뽑기보다 훨씬 재미있을 거예요 (모바일 최적화를 했지만 PC에서 큰모니터로 즐겨보세요 😀)
커피런 게임 정보
- 게임 URL: https://coffeerun.kr
- 소스코드: https://github.com/drkim-dev/coffeerun 연구/공부 목적으로 공개)
- 개발자: 김준하 (drkim1239@gmail.com)
- 개발 기간: 2024.12 - 2025.7 (약 6개월)
- 기술 스택: HTML5, CSS3, JavaScript(ES6+), Lottie.js
- 호스팅: GitHub Pages
- 라이선스: 독점 라이선스 (개인용 무료, 상업적 이용 금지)
혹시 버그 발견이나 개선 제안이 있으시면 언제든지 연락주세요. 더 나은 커피런을 만들어나가겠습니다!
라이선스 및 사용 조건
커피런 게임은 다음 조건으로 제공됩니다:
- 개인용 무료 사용: 사무실, 모임 등에서 자유롭게 사용 가능
- 연구/교육 목적: 소스코드 학습 및 연구 목적으로 GitHub 공개
- ❌ 상업적 이용 금지: 무단 복제, 재배포, 상업적 활용 불가
- ❌ 무단 수정 배포 금지: 원본 소스코드 수정 후 재배포 불가
소스코드는 독점 라이선스로 보호되며, 학습 목적 외의 사용을 원하시면 사전 연락 바랍니다.
'1인개발' 카테고리의 다른 글
| [커피런] 패치 노트 v1.3.1 - 메모리 누수 문제 해결 (6) | 2025.08.05 |
|---|---|
| [커피런] 패치노트 v1.3 - 게임시간 선택 & 로딩페이지 추가! (6) | 2025.07.31 |
| [커피런] 패치 노트 v1.2 - 더 재미있고 깔끔해진 커피내기 게임! (2) | 2025.07.11 |
