[Side Project] 가로세로 낱말퀴즈 게임 만들기(01)

 

 

2024년 11월부터, 회사 동료분 2명과 함께 사이드 프로젝트를 해보기로 했다.

일단 멤버 구성은 프론트는 나, 동료분 2명은 백엔드.

이렇게 3명이서 진행하기로 했다.

 

퇴근하고 매주 월요일에 온라인 또는 오프라인으로 만나서 기획하고 계획을 세웠다.

처음엔 조금 큰 규모의 서비스를 생각하다가, 사이드 프로젝트인 만큼 빠르게 서비스를 배포할 수 있도록

더 작은 규모의 서비스 아이디어 회의를 진행했고, 그 결과 가로세로 낱말퀴즈 서비스를 만들어보기로 했다.

 

퀴즈의 문제는 데이터를 쌓고, 머신러닝을 통해 추후 자동화까지 고려하기로 하였고(콘텐츠의 질과 양이 중요한 서비스이기 때문에)

기술 스펙은 다들 각자 해보고 싶지만 실무에서는 경험하기 힘든 최신 기술 또는 본인들이 해보고 싶었던 스펙으로 공부하며

작업을 진행하기로 했다. (추후 사용자 반응을 보며 서비스를 어떻게 확장할지 고민하기로 함)

 

 

일단 웹프론트는 나 혼자 결정할 수 있었기 때문에 내가 해보고 싶은 Next.js 15를 이용하고 RSC를 이용하여 SSR을 잘 다뤄보는 경험을 쌓고자 했다. 사실 문제를 받고, 퍼즐 UI를 렌더링 하는 부분 까지긴 하지만,, ㅎ_ㅎ,,

그리고 또 가로/세로로 만들어져있는 폼 UI를 사용자 경험에 맞춰 작업을 진행해보고 싶은 마음도 있었다.

 

네이버-가로세로낱말퀴즈 화면 캡쳐

 

 

기획이나 디자이너가 없었기때문에 pinterest, google, 네이버 가로세로 낱말퀴즈 등등 다양한 UI에 대한 레퍼런스들을 모았고, git repo를 생성하고, jira confluence를 생성하고.. 등등 정말 기본적인 프로젝트 세팅만 하였고(팀원분들이 해주셨다.. 감사..)

프론트는 React.js 19, Next.js 최신버전인 15.0.3으로 설치하였다. (Next App Routing 사용) 

++ TypeScript, ESLint, Prettier, Tailwindcss 등의 기본적인 설정도 완료.

 

상태관리 라이브러리는 딱히 현재까지의 서비스 볼륨에서는 필요하지 않을 것 같아서 따로 설치하지 않았고, Next15에서 form이 더 최적화 되었다고 하여 일단은 react-hook-form등의 라이브러리를 사용하지 않고, Next.js 15에서 제공하는 form 기능을 활용해 볼 계획이다.

 

이번 포스팅은 해당 프로젝트의 기본적인 설명에 대한 포스팅이라 여기까지만 적고 추후 작업들이 진행되는 상황들도 함께 정리하여 공유하려고 한다.

 

 

 

 

 

---

 

 

 

 

 

 

 

++ 참고로 요런 느낌의 옛날 신문 십자말풀이 느낌으로 UI를 살려보자는 의견이 나와서 고민중이다. 디자이너분이 안계셔서 참 어렵지만,, 일단 도전해보기로,,,!