리버스 체스 ( 2 ) - 익숙한 부분

게임 링크 : https://reversechess.perfect.ai.kr/

리버스 체스

리버스 체스 기록 처음부터 보기 : https://helloworld.ai.kr/29

엔진과 UI 파트 분리

카드 게임 개발 때나 Echo of Mana 컨셉 플레이를 만들 때와 마찬가지로,
이번에도 엔진 파트와 UI 파트를 분리하는 것부터 시작했다.

한 가지 차이점이 있다면, 이번에는 Zustand 같은 전역 상태 관리를 사용하지 않았다.

재접속 시 게임 재개 기능을 넣지 않을 예정이었기 때문에,
각 페이지 컴포넌트가 엔진 객체나 AI 플레이어 객체를 직접 소유하고 관리하는 구조로도 충분하다고 판단했다.

---

엔진

엔진 구현에만 약 20시간이 소요됐다.

먼저 다음과 같은 기본 타입을 정리했다.

• 행 / 열
• 기물 종류
• 스퀘어
• 위치 관련 타입

이후 이를 기반으로 Board 클래스와 Game 클래스를 구현했다.

클래스를 나눌 때마다 항상 어려운 지점은 책임의 경계다.

---

Board의 책임

• 기물 배치, 이동, 승격 처리
• 각 기물의 이동 가능 위치 / 공격 가능 위치 계산
• 위치로 기물 조회 / 기물의 위치 조회

Game의 책임

• 턴 관리, 게임 상태 관리, 종료 조건 판정
• 합법 수 계산
• 체크 상태 / 강제 캡처 상태 체크

---

UI

화면 구성

• 메인 화면 : 로고와 메뉴 버튼
• 게임 화면 : 혼자 하기, 둘이 하기
• 튜토리얼 : 중앙 체스판 + 상하 설명 영역

이번에는 Lovable에 전부 맡기지 않고, 나름대로 주도적으로 손을 봤다.

예를 들어 Lovable이 만든 UI에서는
‘혼자 하기’를 누르면 난이도 선택이 드롭다운으로 나타났는데,
미관이 아쉬워 버튼 형태로 통일했다.

사소한 변경이지만, 미적 감각에 늘 자신 없던 입장에서는 만족스러운 수정이었다.
(체르니를 한 단계 올렸을 때보다, 단소로 처음 민요를 불었을 때의 성취감에 가깝달까.)

---

턴 표시 컴포넌트와 강제 캡처/체크 안내 컴포넌트도 기본 골격은 Lovable이 만들어줬지만,

• 레이아웃 배치
• 크기 조정
• 반응형 CSS

등은 직접 손봤다.

Lovable이 만든 초안

개선 버전

---

엔진 상태를 UI에 반영

1인 플레이, 2인 플레이, 튜토리얼 모두 동일하게
보드 객체를 초기화 → 훅으로 UI에 바인딩하는 구조로 처리했다.

다만 한 가지 마음에 걸리는 지점이 있다.

엔진 내부에서는 프로모션이 한 번의 동작으로 처리된다.

폰 이동 + 기물 교체

하지만 UI에서는 이를 두 단계로 보여주는 것이 더 직관적이라고 판단했다.

1. 폰 이동 상태 표시
2. 유저가 교체 기물 선택
3. 교체 적용

이 때문에 프로모션 순간에만 UI와 엔진 상태가 완전히 일치하지 않는다.
기능적으로 문제는 없지만, 구조적으로는 조금 찝찝한 부분이다.

---

튜토리얼을 열심히 만든 이유

이전 카드 게임 프로젝트에서, 다른 사람에게 플레이를 권하기 어려웠던 이유가 세 가지 있었다.

1. 혼자 플레이할 콘텐츠(PvE)가 없음
2. 설명이나 튜토리얼이 없음
3. 모바일 UI가 깨짐

이번 프로젝트는 규모가 비교적 작았기 때문에, 이 세 가지는 확실히 보완하고 싶었다.

내가 직접 설명하지 않아도
유저가 스스로 이해하고 즐길 수 있는 페이지를 목표로 했다.

튜토리얼은 단순 설명 나열이 아니라,
각 규칙마다 짧은 퍼즐 상황을 제시하는 방식으로 구성했다.
규칙을 읽는 대신, 플레이하면서 자연스럽게 익히도록 유도했다.

---

이렇게 해서 튜토리얼 파트와 2인 플레이 파트를 완성했다.
 다음 글 보러가기 : https://helloworld.ai.kr/31

리버스 체스 ( 3 ) - '그 긴 거'