Show GN: 우리반 자리 배치를 온라인 게임처럼 - Seat Stealer
(seat-admin.coupy.dev)배경
- 고등학생 시절, 귀찮고 따분한 자리 배치를 재미있게 바꿔보고 싶은 마음에 시작한 사이드 프로젝트
- 학생들이 직접 본인의 기기로 참여하여 원하는 자리의 쟁탈전을 벌이는 기획
- 당시 학생 리스트도 하드코딩하고, 코드가 완전히 스파게티가 되었지만 그럴싸한 결과물이 나왔었음
- 담임 선생님께 허락을 받고 처음 시연한 날을 잊을 수가 없음. 반응이 아주 뜨거웠고, 프로젝트는 1년 내내 쓰이게 됨
리빌딩
- 졸업 후, 학교에서 연락이 왔음. 이 프로그램을 현재 반에 맞게 수정해달라는 요청이었음.
- 하지만 코드는 너무 꼬여있었고, 학생 리스트와 자리 배치가 하드코딩 되어있었기 때문에 유지 가능한 프로젝트를 위해 리빌딩을 결심함
- 구조
- 백엔드: 학생 데이터를 모두 클라이언트에서 처리하기 위해, 백엔드는 데이터만 전달하는 일종의 '게임 서버' 역할만 함.
- Node.JS
- Socket.IO
- 프론트엔드 - 어드민: 학생 데이터를 모두 관리하고, 게임의 진행을 총괄함. 이 화면이 TV에 송출되는 환경을 전제로 설계함.
- SvelteKit
- Socket.IO
- 프론트엔드 - 학생: 백엔드를 거쳐 어드민과 연결되어 데이터를 주고 받음.
- SvelteKit
- Socket.IO
- 백엔드: 학생 데이터를 모두 클라이언트에서 처리하기 위해, 백엔드는 데이터만 전달하는 일종의 '게임 서버' 역할만 함.
- 자리 배치와 학생 리스트를 쉽게 수정할 수 있도록 친절한 UI의 에디터를 도입함.
시나리오
- 어드민 페이지에서 "온라인 자리 배치"를 시작하고 학생 데이터 파일을 업로드하면 새로운 '방'이 생성되고 학생들이 접속 가능한 QR코드가 나타남.
- 학생들은 각자의 기기로 QR코드를 스캔하여 게임에 접속. 어드민 페이지에서는 학생 접속 현황 확인과 관리가 가능함.
- 어드민 페이지에서 게임을 시작하면 학생 페이지에서 '자리 선택' 화면이 나타남. 원하는 자리에 투표를 실시하면 어드민 페이지에 기록됨.
- 모든 학생이 투표를 완료하면 어드민 페이지에서 결과를 보여줌.
- 투표한 자리가 겹친 학생들끼리는 현장에서 간단한 게임을 실시함
- 가위바위보, 주사위, 미니게임 등등 선생님의 재량임
- 게임에서 승리한 학생이 해당 자리를 차지함.
- 모든 학생이 자리를 배치받을때까지 반복
후기
- 학생 데이터가 수집 또는 활용되지 않는다는 것을 투명하게 공개하기 위해서 프로젝트를 오픈소스화 하였음.
- 학교에서 실행되는 것을 전제로 하기 때문에 다양한 예외 상황에 모두 대응하도록 설계하는게 제일 어려웠음.
- 학생이 게임 중간에 연결이 끊기는 경우, 재연결을 시도하고 실패할 경우 재접속시 이어서 진행이 가능함.
- 학생이 결석한 경우, 참석하지 않아도 게임의 진행이 가능함.
- 학생이 지각한 경우, 게임 도중에 접속하여도 진행이 가능함.
- 다른 학생의 명의를 도용하는 경우, 강퇴처리가 가능함.
- 다양한 학급에서도 사용이 가능하도록 친절한 사용 설명서를 만들어 유튜브에 게재하였음.
- 아직 방학 시즌이라 프로젝트의 결과를 보지 못하였기에, 한 번도 기다려본 적 없던 봄학기를 기다리게 되는 계기가 되었음.
- 주변에 교사가 계시다면 공유 부탁드립니다. 감사합니다.