카드 게임 제작 ( 1 ) - 회고

게임 링크 : cardgame.perfect.ai.kr

개발 기간 : 2025.10.28 ~ 2025.11.27
총 소요 시간 : 110시간

< 카드 게임 제작 개발기 리스트 >

Lovable에게 감탄 ( UI 작업 )
https://helloworld.ai.kr/15
JWT 토큰은 json web token token이다 ( 로그인 구현 )
https://helloworld.ai.kr/16
JS 이벤트 루프와 비동기 처리의 이해 ( 백엔드 API 구현 )
https://helloworld.ai.kr/17
zustand는 나가있어 ( React Query, CORS, 프론트와 백 통합 )
https://helloworld.ai.kr/18
게임이 돌아가기는 한다 ( Websocket 구현 )
https://helloworld.ai.kr/19

웹페이지 상에서 온라인 PvP를 할 수 있는 카드 게임을 제작하였다.

 

---

프로젝트 동기

카드게임에 대한 마르지 않는 갈증이 있어서 직접 만들기 시작했다.

처음에는 cursor에게 기획만 던져주고 전부 위임해봤다.
결과는 처참했다. 스파게티 코드, 60달러 소모, 구린 UI, 게임이 돌아가지도 않고.

그래서 초심으로 돌아가 GPT와 함께 하나씩 쌓아보기로 했다.
“100시간이면 뭐라도 나오겠지”라는 마음으로 100시간을 정해두고 시작했다.

---

게임 컨셉

아컴호러 카드게임에서 영감을 받았다.

그 게임의 묘미는 예상치 못한 재앙이다.
계획을 세우고 착착 진행하고 있는데 갑자기 사고가 터지는 그 불쾌한 재미.

여기서 ‘재앙 덱’이라는 컨셉을 가져왔다.

 게임은 두 마법사의 결투를 테마로 한다.
덱은 16장으로 얇게 구성해서 빠른 회전과 속도감을 준다.
카드 타입에는 즉발 마법, 마법진, 소환물이 있다.
5 x 5 보드 위에서 이동을 하며 서로 공격하는 시스템이다.

덱이 모두 소모된 상태에서 카드를 뽑으면 덱을 재구성할 수 있는데 대신
나쁜 효과를 가진 재앙 카드도 한 장 뽑아야 한다.
이 카드로 인해 내 전략이 망가지는 불쾌한 경험을 하게 될 것이다.
재앙 덱은 내가 고른 카드와 상대가 고른 카드가 섞여서 구성된다.
그렇기에 재앙 덱조차 자신의 전략으로 삼을 수 있다.

---

아키텍쳐

기술 스택

• DB : Postgres (Supabase)
• 백엔드 : Node.js + Express + WebSocket (Render 배포)
• 프론트엔드 : React + TypeScript + Zustand (Vercel 배포)

유니티 같은 게임 엔진이 아니라 웹 페이지를 고른 이유는 다음과 같다.
1) 내가 이미 알고 있는 것을 활용할 수 있으니 개발이 빠를 것이다.
2) 카드 게임 엔진을 바닥부터 만들어보고 싶다.

---

통신 구조

계정 생성 / 로그인 / 게임 방 생성 / 방 입장 등의 기능은 REST API를 사용하도록 구현했다.
카드 게임 내에서는 실시간 상호작용이 필요하기 때문에 WebSocket으로 구현했다.

1. 프론트 → WebSocket으로 행동 명령 전송
2. 서버 → 명령 검증
3. 서버 → 게임 상태 업데이트
4. 서버 → 방 단위 브로드캐스트
5. 프론트 → 수신 후 UI 반영

게임의 권위는 서버가 가지도록 했다.

---

헥사고날 아키텍쳐 적용

 헥사고날 아키텍쳐 개념을 적용했다.

핵심 원칙:

• 도메인 로직은 순수하게 유지
• 프레임워크 의존성은 바깥 레이어에서만 가질 것
• 의존성 방향은 바깥 → 안쪽

이번 프로젝트에서의 적용은 다음과 같다.

• 게임 엔진은 웹소켓과 완전히 분리
• 단독 시뮬레이션 테스트 가능
• AI 플레이어 확장 가능
• 웹소켓도 도메인 레이어 / 어댑터 레이어 분리

 

---

구현한 핵심 기능

PvP 플레이

• 36장의 카드로 덱 구성
• 실시간 대전
• 5×5 보드 이동 시스템
• 체력 20 소진 시 승리

각 카드에는 상대에게 대미지 주기, 마법진 설치하기, 카드를 뽑기, 카드를 버리기, 피해를 회복하기 등 다양한 능력이 있다.

---

웹 배포 및 도메인 연결

• Vercel / Render 배포 완료
• 개인 도메인 연결
• 실제 플레이 가능한 상태

---

개선이 필요한 부분

부족한 점들이 아주 많다.

• ❌ 게임 제목 없음
• ❌ 카드 효과가 직관적이지 않음
• ❌ 튜토리얼 부재
• ❌ 애니메이션 부족
• ❌ 카드 수 부족
• ❌ 엔진 추가 개선 여지
• ❌ 게임 로깅 없음

그럼에도 100시간 넘게 개발했기 때문에 일단 여기서 멈췄다.

---

부족할 때 끝맺는 용기

완벽하지 않아도 끝내야 새로운 것을 하고,
나중에 다시 돌아와서 개선할 수 있다고 생각했다.

---

프로젝트의 의의

1. 실시간 상태 동기화 경험

• WebSocket 기반 턴 처리
• 서버 authoritative 구조
• 브로드캐스트 설계

중규모 웹 서비스에도 그대로 가져다 쓸 수 있는 패턴이다.

---

2. 도메인 분리 감각

헥사고날 아키텍쳐를 실제 코드에 적용해보면서
“도메인을 순수하게 유지한다”는 감각을 몸으로 익혔다.

이건 앞으로 어떤 서비스를 만들 때도 계속 써먹을 수 있다.

---

3. 게임 엔진 설계 경험

복잡한 스택, Observer 패턴 기반 게임 엔진을 직접 만들어본 경험이 가장 큰 수확이다.
복잡한 상태 머신을 다루는 감각이 확실히 늘었다.

---

계속해서 단계별로 개발 과정을 자세하게 작성하고자 한다.
다음 글 보러 가기 : https://helloworld.ai.kr/15

카드 게임 제작 ( 2 ) - Lovable에게 감탄