먼저 맞히면 이기는 퀴즈 웹 게임 <빨랐죠> - 기획 및 설계하기

들어가며

지난 프로젝트에서 채팅 관련 실시간 서비스를 구현해보면서 배운 것도 많고 아쉬운 것도 많았습니다. 다음에 비슷한 걸 만든다면 어떻게 만들면 좋을까 고민을 가지고서, 우선 필요하겠다 싶은 공부를 최근 간단히 일단락 짓고 만들면서 배우기를 시작해보려고 합니다.

프로젝트의 진행 과정을 처음부터 끝까지 최대한 블로그로 자세히 남겨보려고 합니다. 따라서 프로젝트에 대한 직접적인 소개보다는 저의 개발 일지로 생각하고 봐주시면 감사하겠습니다.

빨랐죠 GitHub https://github.com/gyehyun-bak/ppalatjyo

서비스 소개

지난 프로젝트의 핵심 기능이 타 서비스의 오픈 API를 둘러싼 기능이다 보니, 개발하면서 정말 많은 어려움이 있었습니다. 물론 나름 잘 해결했다고 생각하지만, 만약 다음에 또 뭔가 만든다면 꼭 타 시스템에 종속되지 않는 서비스를 만들고 싶다고 생각하고 있었습니다.

게임을 자주 하지는 못하지만 대리만족을 위해 게임 영상을 밥 먹으면서 자주 보는데(김성현 채널 특히 많이 봅니다ㅎㅎ), 그 중에서도 스타 방송 영상을 자주 봅니다. 그러다 스타 유즈맵 영상들 중에 맞히기 유즈맵 영상들을 보게 되었습니다.

저도 초딩 시절 굉장히 재밌게 했던 유즈맵이라 옛날 생각도 새록새록 나고, 재밌게 보고 있었는데 마침 이거다 싶었습니다.

상식 퀴즈도 좋지만, 취준 때문에 토익도 치고, 정처기도 치고, 각종 시험을 치면서, 이런 암기가 필요한 공부를 저렇게 게임으로 남들과 경쟁하면서 할 수 있으면, 특히 귀찮아 죽겠는 이런 자격증 공부 같은 것들을 그나마 훨씬 재밌게 할 수 있겠다 생각했습니다.

곧바로 비슷한 서비스가 있나 찾아보았고, 제가 못 찾은건지 다행히 정확히 일치하는 서비스가 없었기 때문에 설계에 들어갔습니다. (꼭 이러면 만들고 있는 중에 하나 둘씩 튀어나오던데ㅋㅋㅋ 그래도 끝까지 갑니다...!)

프로젝트 목표

우선 이전에 무작정 단순 구현을 목표로 하던 프로젝트에서, 이랬으면 좋았겠다 싶은 아쉬운 부분이 많았기 때문에 프로젝트 목표를 좀 명확하게 하고자 합니다.

1. 절대 불필요한 기술을 도입하지 않습니다.

프로젝트는 이 서비스가 돌아갈 수 있는 가능한 한 최소의 아키텍처로 우선 구현할 예정입니다. 리액트-스프링부트-MySQL로 모든 기능을 구현하고, 명확한 병목 지점을 파악한 다음에, 점진적으로 추가 기술을 도입하고 개선 결과를 기록하고자 합니다.

2. 변경에는 반드시 지표를 뒷받침합니다.

최소의 기능을 제외한 추가 기능은, 사용자로부터 요구사항을 수집하고, 구현 이전과 이후의 차이를 확인할 수 있는 명확한 지표를 측정합니다. 사용자 퍼널 등을 통해서 구체적으로 어떤 지표에 대한 개선인지 명확히 인지하고 개선 방향을 설정합니다. 이는 기능적/비기능적 요구사항 전체에 해당합니다.

3. 과정을 기록합니다.

"문제 인지 -> 해결 과정 -> 결과" 순으로 변경을 계획하고 전체를 기록합니다. 지금은 개인 프로젝트지만, 남에게 인수인계하리라는 전제 하에 프로젝트의 개발 과정과 방향을 기록합니다. 깃헙 리포지토리와 현재 블로그를 통해서 기록해나갈 예정입니다.

4. 사용자와의 소통 창구를 만듭니다.

인디 게임들이 스팀, 디스코드 등으로 사용자 커뮤니티와 적극적으로 소통하면서 발전해나가는 모습이 개인적으로 굉장히 좋아보였습니다. 그래서 단순 설문조사 등이 아닌, 이처럼 좀 더 자유롭게 열린 공간에서 적극적으로 소통할 수 있는 창구를 서비스 내부에 구현하는 것을 핵심 기능 중 하나로 가져가려고 합니다.

그리고 추가적으로 자잘한 몇 가지 세부 목표입니다. 진행 중 추가/변경될 수 있습니다.

• 모를 땐 공식 문서를 가장 먼저 참고할 것.
• 가능한 한 테스트 주도로 개발할 것.
• AI가 짜준 코드 중 이해 못한 코드는 절대 붙여넣지 않을 것.
• 가능한 한 유지보수하기 좋은 아키텍처와 코드 퀄리티를 유지할 것.
• MVP 개발 이후에는 팀을 모아볼 것.

이제 핵심 기능을 아래 화면 설계와 함께 간단히 소개하겠습니다.

화면 설계

좀 더 아기자기하게 해볼까 하고 고민이 많았으나, MVP 개발의 복잡도를 높이지 않기 위해서, 그리고 향후에라도 디자이너와 함께하게 되면 더 넓은 선택권을 주기 위해서, 명확한 사용 방법에만 초점을 두고 최대한 깔끔하게 디자인하였습니다.

PC 화면까지 따로 개발할 시간이 없다 판단해서 모바일 퍼스트로 디자인하였습니다. 추후 운영하면서 반응형 화면으로 확장합니다.

전체 화면

이렇게 하면 사실 잘 안 보이기 때문에 몇 가지 주요 화면만 뽑아 살펴보겠습니다.

사실 개인적으로 어쩌다 들어가는 가벼운 서비스에 회원가입을 해야하는 유스케이스를 불편해하기 때문에, 기본적으로 가입 없이도 가능한한 많은 기능을 제공하고자 합니다. 닉네임으로 한 번 접속하고 나면, 동일 장치로 접속시 매번 새로 입력할 필요 없습니다.

접속하고 나면 현재 참여가능한 게임을 포함해 모든 게임 목록이 표시됩니다. 기본 인원이 많은 순 정렬이 되며, 필터를 통해서 표시되는 결과를 조정할 수 있습니다.

보이는 레이아웃이 기본 레이아웃이며, 하단 탭바로 주 기능 이동이 가능합니다.

게임은 단순합니다. 문제가 제시되고 가장 먼저 정답을 채팅창에 입력한 사람이 점수를 얻습니다. 정답을 맞춘 사람의 이름이 위에 공개됩니다. 정해진 시간이 지나면 다음 문제로 넘어갑니다. 게임이 끝나면 점수별 등수가 공개됩니다.

현재 하고 있는 스터디가 있다면 스터디원들과 직접 퀴즈를 만들고 풀면서, 단순 반복 암기보다 훨씬 즐겁고 효과적으로 학습할 수 있습니다. 내가 만든 퀴즈를 공개하면, 다른 사람들도 해당 퀴즈로 게임을 만들고, "좋아요"를 남겨 저장할 수도 있습니다.

ERD

크게 가장 중요한 비즈니스 도메인으로 사용자(User), 로비(Lobby), 게임(Game), 퀴즈(Quiz)가 있습니다.

사용자는 닉네임만으로 이용하는 GUEST와 OAuth 가입을 진행한 MEMBER, DB에서 직접 승격만 가능한 ADMIN이 있습니다.

로비는 '게임방'이라고 이해할 수 있습니다. 유저가 게임을 만들면 그것은 시스템상 로비가 됩니다. 로비는 대기(WAITING) 상태로 시작해, 게임을 시작(PLAYING)하고, 끝나면 다시 대기 상태로 돌아옵니다. 하나의 로비에서 여러 게임을 즐길 수 있습니다. 게임은 퀴즈를 선택할 수 있습니다. 추가적인 설정 사항이 있습니다.

게임은 '한 로비에서 진행된 게임 한 판'입니다. 각 게임마다 유저의 점수를 기록합니다. 게임은 로비에서 시작 시점에 정한 퀴즈를 그대로 가지고 진행합니다. 몇 번째 문제인지 추적하고, 유저가 제출한 메시지가 답과 일치하는지 파악합니다. 게임이 진행 중(PLAYING)인 상태와, 다음 문제로 넘어가기 전 정해진 시간만큼 대기(WAITING)하는 상태가 있습니다.

퀴즈는 퀴즈입니다(그것이 퀴즈이니까..). 각 퀴즈는 등록된 문제(Question)들을 가지고 있습니다. 각 문제는 여러 답이 있을 수 있으므로 여러 개의 정답(Answer)를 가지고 있습니다.

메시지는 사용자로부터 로비를 대상으로 전달됩니다. 게임이 진행 중인 경우 메시지의 content를 기준으로 정답 여부를 확인합니다.

대부분의 주 도메인 엔티티는 나중에 차단 처리 및 통계를 위해 Safe-delete를 기본으로 합니다.

시스템 아키텍처

추후 확장성을 생각했을 때, 불편하지 않으면서 오버 엔지니어링이 아닌 최대한 단순한 아키텍처를 구성해보았습니다.

당장 MySQL도 AWS RDS를 쓸지에 대해서는 고민 중입니다.

React 대신 Vue를 사용할까도 고민해 봤습니다만, 저도 리액트 경험이 더 많고, 아무래도 팀원을 구하기에 더 좋지 않을까 생각했습니다.

Spring-MySQL 사이 데이터 접근 기술로는 JPA/Hibernate를 사용합니다. 이를 기반으로 최대한 도메인 중심으로 설계 및 구현합니다.

MVP가 올라가고 나면 앞으로 업데이트 방향 선정을 위한 지표 수집과 모니터링을 위해 Prometheus와 Grafana가 우선적으로 추가될 예정입니다.

CI/CD에는 간단하게 GitHub Actions를 사용합니다.

마치며

이제 설계가 얼추 마무리 되었으므로 이 다음에는 프로젝트 세팅, DB 세팅, 도메인 엔티티를 위한 테스트 작성, 도메인 객체 구현을 순서로 진행하고자 합니다. 화면은 각 도메인에 해당하는 백엔드 로직이 완성되고 나면 구현하려고 합니다. 뭐 포부는 이것 저것 멋드러지게 적어놓은 것 같은데, 적은 것에 부끄럽지 않게 꼭 끝까지 구현해보도록 하겠습니다.