안녕하세요 선배님들 맨날 눈팅만 하다가 첫 글을 적어봅니다.
저는 심심할때 이것저것 개발해보는 취미가 있습니다.

회사에서나 친구들이랑 매번 커피내기나 벌칙내기를 할때 가위바위보, 사다리타기를 했었는데 매번 할때마다 너무 재미없어서
직접 재밌는 웹게임을 만들어보면 어떨까 생각이 들어서 무작정 [커피런] 이라는 게임을 만들어 봤습니다.
막상 만들어서 주변사람들과 같이해보니 반응이 너무 좋아서 무작정 배포를 해버렸네요 ㅋㅋ

게임 이름: 커피런 (CoffeeRun)


게임 규칙은 정말 간단합니다.

 1. 인원수를 고르고,
 2. 당첨 대상을 고르고,
 3. 이름을 적고 1분동안 관전을 하면 됩니다.


24b0d768e2db3e8650bbd58b368270648b9d1f09




중간에 여러가지 스킬이 써지면서 엎치락 뒤치락 하는데 정말 쫄깃합니다.
 - 대폭발: 상위권이 느려짐
 - 번개공격: 선두권이 마비됨
 - 터보부스터: 꼴찌가 급상승
 - 저격: 1등과 꼴찌가 자리바뀜
 - 대혼란: 모든 순위가 뒤바뀜

정적 페이지라서 최적화가 정말 잘되어있어서 랙은 없습니다.
(모바일에서도 잘 작동하지만 여러명에서 커피내기를 하는 상황에선 큰 PC화면으로 보면 더 재밌습니다.)

75f35cdb3d58ea4ae24132fb11d8221d63991d4a8931cbb8410c1b8d


74f390aa0f16b544a2f1d1bc10f11a39b943ddd4b017a854bd0e



7ced9e666e39e12abc779e3efd19a8c05fee7f1b555930c8ee8eb2b8a84cccd6281c259a8453ca


활용 사례들로는
 - 커피내기 (가장 많이 사용)
 - 점심 메뉴 정하기
 - 청소 당번 정하기
 - 회식 장소 결정
 - 술자리 벌칙게임
 - 이벤트 당첨자 정하기
 - 노래방 순서 정하기

커피런 게임은 기존 가위바위보보다 훨씬 재미있고 공정합니다. 1분이라는 시간도 적당해서 지루하지 않고요.


개발 후기
6개월 정도 퇴근하고 집에서 짬짬이 개발했는데, 실제 게임 로직은 2-3개월 만에 끝났고 나머지는 거의 CSS 디자인 작업이었습니다.
특히 모바일 반응형 작업이 생각보다 까다로웠어요. (리액트 쓸껄...)
커피런은 주로 스마트폰에서 여러 명이 함께 보는 경우가 많아서 모바일 최적화가 필수였는데, 다양한 화면 크기에 맞춰 레이아웃을 조정하는게 어려웠습니다.(리액트 쓸껄...2)
하지만 완성하고 나니 뿌듯하고, 테스트해본 결과 기존의 단순한 가위바위보나 제비뽑기보다 훨씬 재미있다는 반응입니다.


기술 스택
HTML5, CSS3, JavaScript (바닐라JS)
Lottie.js (애니메이션)

취미 프로젝트라서 깃헙페이지로 호스팅하였고 인앱결제유도 그런것 없이 완전 무료입니다.
소스코드: https://github.com/drkim-dev/coffeerun (학습용으로 공개)


댓글로 피드백 주시면 정말 감사하겠습니다. 즉각 반영하겠습니다!!
버그 발견하시면 바로 수정하고, 기능 추가 요청도 환영합니다.

네이버/구글에 '커피런 게임' 검색하셔도 바로 접속 가능합니다.