🎈 quiz-stream-service

개요

• 프로젝트 기간 · 2025-06-16 ~ 2025-06-23
• 실시간 퀴즈 스트리밍 서비스 QSTR

🤷‍♂️ 왜 이런 프로젝트를 기획했나

https://kahoot.it/

• Kahoot이라는 실시간 퀴즈 서비스는 웹 사이트를 이용하면서 인상이 강했던 서비스로 지금까지도 기억에 남아 있다.
• 실시간 통신 기술을 처음 접한 당시에는 ‘웹 사이트에서 이런 것도 구현이 가능하구나’ 생각이 들었다.
• Kahoot을 많이 사용해본 것은 아니라서, 클론 프로젝트를 만들기 보다는 실시간 퀴즈 서비스를 개발한다면 UI/UX 차원에서 어떻게 해야 할지 고민을 많이 했다.

🛠 프로젝트 환경

• Typescript, NestJS
• PostgreSQL
• React, TailwindCSS
• Docker, Docker-compose
• Visual Studio Code

🚀 화면 및 기능

🔹 홈 화면

• 홈 화면에 접속하여 버튼을 누르면 퀴즈를 생성하는 출제자가 된다.

🔹 퀴즈 생성 화면

• 퀴즈와 질문을 생성한다.
• 모든 값을 입력하고 정답을 선택해야 다음 화면으로 넘어갈 수 있다.

🔹 링크 공유 화면

• 링크를 복사한다.
• 출제자도 해당 링크로 이동해야 한다.

🔹 닉네임 생성 화면

• 닉네임을 입력하고 버튼을 누르면, 해당 사용자는 세션에 등록된다.

🔹 퀴즈 대기 화면

• 퀴즈 대기 화면으로, 출제자는 화면에 퀴즈를 시작할 수 있는 버튼이 노출된다.

🔹 질문 화면

• 출제자의 질문 화면에서는 정답이 표시되고, 다음 문제로 넘어갈 수 있는 버튼이 있다.

• 참여자의 화면에서는 문제를 선택할 수 있고, 버튼을 통해 답변을 제출 할 수 있다.

🔹 중간 결과 화면

• 각 문제가 끝날 때마다 순위와 점수 등 중간 결과를 확인 할 수 있다.

🔹 최종 결과 화면

🧐 회고

개발 환경과 운영 환경은 분명히 다르다.

• 개발 환경에서 테스트를 충분히 마쳤고, Docker 기반의 컨테이너 환경도 구성했지만, 실제 컨테이너 간 통신 및 웹소켓 처리 과정에서 URL과 Endpoint 관련 수정이 반복적으로 발생했다.
• 특히 웹소켓 통신은 오류로 명확히 드러나기보다는 예상치 못한 결과나 동작으로 나타나, 원인을 파악하고 해결책을 찾는 데 시간이 많이 소요되었다.
• 이 경험을 통해, 운영 환경에 맞춘 네트워크 구성과 라우팅 설정을 사전에 면밀히 검토하는 것이 얼마나 중요한지 체감할 수 있었다.

사용자 도메인의 생략은 예상보다 많은 복잡도를 초래했다.

• 초기에는 제한된 개발 기간과 UX 흐름을 고려해, 별도의 사용자 도메인을 생략하였다.
• 대신, 참여자와 출제자를 식별하는 데 있어 LocalStorage 기반 사용자 정보와 Socket ID 및 참여자 ID를 조합하여 식별하도록 구성하였다.
• 세션 내 접속 및 이탈은 서버 메모리 상에서 관리하고자 했지만,식별 키로 사용된 Socket ID는 고유성이 부족하여, 브라우저 새로고침이나 강제 종료와 같은 케이스에선 이탈을 정확히 감지할 수 없었다.
• 초기 대응 방안으로, 세션 이탈 시 해당 참여자 레코드를 삭제했으나, 이로 인해 연관된 점수 및 답변 데이터도 함께 삭제되는 문제가 발생하였다.
• 참여자 데이터를 삭제하면 세션 정합성은 유지되지만, 퀴즈 종료 후 점수 및 랭킹 데이터를 보존할 수 없는 트레이드오프 상황이 발생하였다.
• 결과적으로, 데이터 보존을 우선시하여 참여자 레코드를 삭제하지 않는 방향으로 결정하였다.
• 향후에는 사용자 도메인을 도입하여, 접속/이탈 추적 및 데이터 정합성을 보다 안정적으로 처리할 계획이다.

단순한 서비스처럼 보여도, 더 나은 UX를 위해 고려할 요소는 여전히 많다.

• 사용자 경험을 향상시키기 위해 추가로 고려 중인 기능들은 다음과 같다.

1. 사용자 인증 기능 도입
2. 다양한 문제 유형 지원
3. 링크 단순 복사가 아닌 타 플랫폼 공유 기능
4. 로딩 화면, BGM 등 UI/UX 개선
5. 중간/최종 결과 화면에서 출제자 제외
6. 닉네임 중복 등 입력 값에 대한 유효성 검사 강화

• 단순한 기능 구현을 넘어서, UX를 제공하기 위해 고려할 요소는 앞으로도 계속 늘어날 것이라 생각한다.