단내
단내는 숏폼과 줄임말들에 익숙해진 세대에게 잃어버린 어휘력을 되찾아주기 위한 어휘 학습 사이트 입니다. 어렵지 않은 게임을 통해 다양한 어휘 및 활용 방법에 대해 학습할 수 있습니다.
개요
숏폼과 줄임말들에 익숙해진 세대에게 잃어버린 어휘력을 되찾아주기 위한 어휘 학습 사이트 입니다. 단어들을 활용하여 문장을 완성하는 '단어의 방' 게임과 초성에 대응되는 단어를 입력하는 '무한 초성 지옥' 게임을 통해 다양한 어휘 및 활용 방법에 대해 학습할 수 있습니다.
주요 기능
웹소켓을 활용한 게임 진행 및 관리
유저 정보, 방장, 준비 상태, 채팅 등을 관리하는 게임 대기방
게임 모드, 라운드 또는 턴, 정답 제출, 게임 결과 등을 관리하는 게임 진행방
대기방과 진행방 웹소켓 변경
국립국어원 단어 기반 및 의미 조회
조회 가능 상태 구분 및 툴팁 UI
게임 모드별 필터링 및 초대 코드를 통한 입장
닉네임, 이미지를 통한 토큰 생성 및 랭킹 관리
시스템 아키텍쳐
Frontend
Backend
CI / CD
Collaboration
담당 구현
webSocket
실시간 게임 구현을 위한 웹소켓 활용 및 커스텀 훅 생성, 게임 진행 및 대기 방, 게임 방 간 소켓 이동
Next API
데이터 통신, 쿠키 관리를 위한 서버 요청, 응답 객체를 활용한 API 설계
Sass
글로벌 스타일 변수 선언 팔레트 정의 및 커스텀 함수 생성
배경음 및 동작음
사용자의 동작 및 상황에 따른 음향 및 게임 진행 몰입을 위한 볼륨 조절
사용자 편의 기능
게임 방 초대 코드 복사 및 게임 진행 가이드 모달, 라운드 진행 프로그레스 바 등 구현
단어 정보 툴팁
조회 가능 상태에 따라 국립 국어원에서 제공한 단어의 의미 제공 기능 구현
서비스 대표 화면
게임 로비
프로필을 설정하고 로비에 입장해 게임 모드 별 방을 확인하고 입장할 수 있습니다.
단어의 방 게임
다양한 난이도의 단어가 30개 주어지고 이를 바탕으로 문장을 완성하는 게임입니다.
무한 초성 게임
게임이 시작되면 초성이 제공되고 이에 대응하는 단어를 입력하는 게임입니다.
성과 또는 배운 점
사용자 데이터
MatterMost를 통해 사용자에게 게임 서비스를 홍보하고, Google Analytics를 활용해 실제 사용자 데이터를 확인했습니다. 배포 당일 24시간 동안 120명의 방문자와 2600번의 클릭을 기록하며, 재미와 학습을 동시에 만족시킬 수 있는 완성도 높은 게임을 구현했다고 생각해 뿌듯했습니다.
웹소켓 관리
게임 대기와 진행 과정에서 웹 소켓 관리에 대해 많은 고민을 한 경험이었습니다. 불필요한 웹 소켓 방 생성을 피하기 위해, 하나의 방에는 하나의 웹 소켓만 연결되도록 하였고, 게임 진행, 답변 제출 등은 각각 다른 타입으로 메시지를 분리하여 전송했습니다. 또한 대기 방과 게임 방 간 전환 시 기존의 웹 소켓은 종료하여 리소스를 효율적으로 관리할 수 있었습니다.
Next.js
Next.js만의 기능을 활용해 프로젝트의 완성도를 높였습니다. 미들웨어를 통해 라우팅 가드를 설정하고, 페이지 진입 전에 권한을 검증할 수 있었으며, 서버 요청과 응답 객체를 활용해 토큰 관리 및 데이터 통신을 간편하게 처리할 수 있었습니다. Next.js의 다양한 기능을 배우고 효율적으로 적용하는 과정에서 학습의 중요성을 더욱 실감할 수 있었습니다.