- 무한도전과 같은 예능에서만 보던 꼬리잡기 게임을 현실에서 구현해보고 싶다는 아이디어에서 출발한 프로젝트입니다.
- 예능 프로그램 제작진과 같이 게임의 구역 및 타겟 설정, 승패 규칙, 미션과 아이템 등을 세밀하게 기획하여 사용자들이 더욱 재미있고 몰입감 있게 게임을 즐길 수 있도록 하는 것을 목표로 삼았습니다.
- 궁극적으로는 남녀노소 누구나 함께 즐길 수 있는 새로운 형태의 인터랙티브 게임 경험을 제공하고자 하였습니다.
이름 |
역할 |
개발 내용 |
|---|---|---|
| 이서영 | 팀장, BE | 전반적인 게임 로직 설계 (웹소켓을 사용한 게임 입장, 플레이, 아이템 사용 등) |
| 최윤석 | BE 리더 | |
| 최태민 | BE | - WebSocket을 활용한 실시간 통신 기능 (STOMP 프로토콜을 활용한 클라이언트-서버간 실시간 통신 기술을 통해 게임 대기방 로직 구현 및 Handler 프로토콜을 활용한 1 대 1일 채팅 로직 구현) |
| 이규빈 | FE 리더 | - FE 아키텍처 설계 (재사용성, 유지보수성을 고려한 폴더와 컴포넌트 설계 및 코딩 컨벤션 수립) - 라이브러리 선정 (유틸리티 퍼스트 CSS 라이브러리인 Tailwind CSS와 헤드리스 UI 컬렉션인 shadcn/ui를 결합하여 스타일링 개발 시간 단축 및 웹사이트 로딩 속도 향상) - UI/UX 디자인 총괄 (사용성과 시각적 요소를 모두 고려한 와이어프레임 설계 및 전체 화면 디자인) - PWA(Progressive Web App) 설정 (배포 환경에서 적용되지 않았던 문제 해결) - 회원, 게임방, 순위, 프로필 관련 기능 구현 |
| 이다율 | FE | |
| 정동찬 | FE | - GPS 및 지도 관련 기능 전반 (프로젝트 구현의 핵심 기술로, Geolocation API 및 KakaoMap API를 활용해 유저의 위치에 대한 전반적인 FE 게임 로직 구현) - WebSocket을 활용한 실시간 통신 기능 (STOMP 프로토콜을 활용한 클라이언트-서버간 실시간 통신 기술을 통해 게임 대기방 및 인게임 로직 구현) - 전반적인 FE 게임 로직 구현 (코드의 재사용성과 유지보수성을 위해 React의 커스텀 훅을 게임 로직 구현에 적극 활용) |
| FE |
|
| BE |
|
| Infra |
|
| Tools |
|
react : 18.3.1 / javascript : 6.0.2 / vite : 5.3.1 / axios : 1.7.2 / tailwind CSS : 3.4.5 / shadcn/ui : 0.8.0
SpringBoot : 3.2.7 / JDK17 : 17.0.11 / JPA : 3.2.7 / Querydsl : 5.0.0 / JWT : 0.12.5 / Mysql : 9.0.1 / Redis : 7.4.0
| Splash | Onboarding-1 | Onboarding-2 | Onboarding-3 |
|---|---|---|---|
 |
 |
 |
 |
- PWA를 적용한 결과 네이티브 앱처럼 설치가 가능하고, 사용자가 앱을 실행하면 Splash 화면을 볼 수 있습니다.
- 사용자는 Onboarding 화면을 통해 게임의 컨셉과 규칙을 이해할 수 있습니다.
| Login | SignUp | Home | Ranking |
|---|---|---|---|
 |
 |
 |
 |
- 사용자는 카카오 또는 구글 소셜로그인이 가능합니다.
- 홈 화면에서 방을 만들거나 기존 방에 입장할 수 있습니다. 또한 누적된 게임 점수에 따른 순위를 확인하고, 내 프로필을 확인할 수 있습니다.
| Game Setting Dialog | Room | Room Number | Game Rule Dialog |
|---|---|---|---|
 |
 |
 |
 |
- 사용자가 게임 정원, 게임 시간, 맵 사이즈 등을 직접 설정해 게임 방을 만들 수 있습니다.
- 방을 만들면 8자리 방 코드가 생성되고, 다른 사용자들은 이 코드를 입력해 방에 입장할 수 있습니다.
- 사용자는 게임 시작 전 대기중일 때와 게임중일 때 "게임 규칙" 버튼을 눌러 상세한 규칙을 확인할 수 있습니다.
- 촉박한 일정에도 불구하고 다들 열심히 해주어서 고맙습니다. 처음 해보는 시도에 우여곡절 많았지만 모두의 노력 덕분에 좋은 결과 낼 수 있었던 것 같습니다.
- 다들 익숙하지 않은 게임을 개발하는데다가 예상보다 프로젝트 볼륨이 커져서 완성에 대한 걱정이 컸지만, 잘 마무리하게 되어 다행입니다.
- 이번 프로젝트를 통해 FE 개발자가 겪는 어려움과 BE 개발자와의 소통의 중요성을 깨달았습니다. 다음에 BE 역할을 맡게 될 경우, 이 경험을 바탕으로 더 적극적이고 효율적으로 소통하며 협업할 수 있을 것 같습니다.
- 한편, MVP(Minimum Viable Product)를 빠르게 개발하여 실제로 테스트하고 개선하고자 했으나, 완성이 늦어져 충분한 시연을 하지 못한 점이 아쉽습니다. 앞으로는 애자일 개발 방법론을 적극적으로 적용하고, TDD(Test-Driven Development) 방식을 도입하여 개발 초기부터 테스트와 피드백을 더 적극적으로 반영해보고 싶습니다.
- 끝으로 우리 팀원들 모두 고생 많았습니다. 특히 처음 배우는 React에 더해 WebSocket, OpenVidu 같은 복잡한 기술을 짧은 시간 안에 학습하고 동시에 개발까지 완수한 FE 팀원 동찬이와 다율이 정말 고생했습니다. 또한 팀장으로서 리더십있게 팀을 잘 이끌어준 서영이, 어려운 인프라를 책임져준 윤석이, 막판에 일이 몰린 FE 작업까지 도와준 태민이까지 다들 정말 수고 많았습니다.
- 촉박한 일정 속에서 진행된 첫 프로젝트가 종료되었습니다. 아무래도 저를 비롯해 팀원들이 경험이 부족하다 보니 매끄럽게 진행되지 못한 부분도 많았지만 서로 잘 도와 가며 마무리할 수 있었던 것 같습니다.
- 전반적인 프로젝트 진행을 돌이켜 보자면 초기 기획 단계와 테스트 단계 부분이 충분하지 못해 아쉬운 상황이 많이 발생했다는 생각이 들었습니다. 특히 제가 맡았던 부분을 수행하며 React의 기능에 대해 많이 공부하고 사용할 기회가 있었는데, 유지보수성 측면에서 컴포넌트와 커스텀 훅 구성에 더 치밀한 기획을 통해 개선할 수 있는 여지가 많다고 느껴 가장 아쉬운 점으로 남게 되었습니다.
- 다소 부족한 경험이었지만 이번에 경험했던 미숙한 부분들이 이후에 진행될 프로젝트와 현업에서도 항상 고려해야 하는 것이라고 생각해, 이번 경험을 항상 새겨 두고 다음 프로젝트 때 적극 반영하고자 합니다.
- 마지막으로 촉박한 일정 동안 우여곡절이 많았지만 끝까지 각자의 역할을 책임지고 수행한 팀원 모두에게 격려의 말을 남기고 싶습니다. 짧은 기간이었지만 앞으로 모두에게 큰 도움이 되는 경험으로 남는 프로젝트였으면 좋겠습니다.