🎮 TETRIS

웹소켓 기반 실시간 멀티플레이 테트리스

🎥 시연 영상

2025-08-20.14.46.39.mp4

🤸 테스트 주소

https://limits1214.github.io/tetris/
AWS 요금때문에 서버를 껏을수도 있습니다.🥲 (싱글플레이는 가능)

💻 사용스택

프론트엔드

• Vite React
• Radix-UI
• R3F
• Zustand
• WebSocket
• Wasm

백엔드

• Axum
• WebSocket
• Postgresql(sqlx)
• JWT

인프라

• AWS(EC2, EIP)
• Github Action
• Github Page
• Docker Compose
• Nginx
• Let's Encrypt
• DuckDNS

🔌 기능소개

• ✅ 로그인
• ✅ 방 생성 및 참가 + 채팅
• ✅ 싱글 플레이
• ✅ 멀티 플레이 모드
  • Score: 가장 점수를 많이 획득한 사람 승리
  • 40Line: 가장 먼저 40줄을 지운 사람이 승리
  • Battle: 공격 줄을 보내 최후의 1인만 생존
• ✅ 게임 결과 화면

🏠 아키텍쳐 구조

😀 좋았던점

테트리스 코어 라이브러리를 한벌 만들어두고
프론트에서는 Wasm으로변환해서 사용하고
서버에서는 그대로 사용해서 중복 코드 작성을 줄였다.

테트리스 코어 라이브러리에 각 기능별 테스트 코드를 작성해두어서
두려움 없이 리팩토링을 했다.

🤔 고민했던점

테트리스 로직을 서버에서 수행할지 클라에서 수행할지 고민했었다.
서버에서 수행한다면 심플하고 치팅방지도 되지만, 서버 응답에는 딜레이가 존재해서
민첩하게 작동해야하는 게임의 사용자 경험이 크게 하락한다.(특히 모바일에서)
그래서
서버에서 해야하는 게임 종료 조건, 응답이 느린 사용자 걸러내기, 공격줄 생성하여 뿌려주기는 서버에서 수행하고
그외는 로직은 클라이언트에서 바로 수행후 화면에 렌더랑하고 서버에 전파하는걸로 타협했다.

🤛 후기

혼자서 전체다 구현하려고하니 생각보다 해야하는게 많았다.
하지만 테트리스는 꼭 구현해보고 싶었던 주제였기때문에 구현 과정이 즐거웠다.
역시 하고싶은 주제를 해야 지치지 않고 할수 있는거 같다.