게임 엔진 만들기
Claude에게 tic-tac-toe 규칙을 만들어 달라고 부탁하기
⏱ 예상 ~7분
01 · 읽기
게임 엔진은 앱의 뇌예요. WebSocket, HTML, 플레이어를 몰라요. 그저 tic-tac-toe 가 어떻게 작동하는지만 알아요. 3x3 보드, 두 심볼, 차례, 승리 조건요.
이 로직을 따로 분리해서 서버 코드와 떨어뜨려 두는 걸 관심사 분리 (separation of concerns) 패턴이라고 해요. 게임 엔진은 독립 모듈이라서 어떤 서버, 어떤 테스트 프레임워크, 어떤 UI 와도 쓸 수 있어요.
💡 상상해 봐요농구 경기의 심판을 떠올려 봐요. 심판은 경기장을 운영하지도, 티켓을 팔지도, 전광판을 돌리지도 않아요. 규칙을 집행만 해요. 게임 엔진은 심판이에요. 수가 유효한지, 누가 이겼는지만 신경 써요.
핵심 정리
- 관심사 분리: 게임 로직을 자체 파일에 둬요
- 게임 엔진은 WebSocket 이나 HTML 을 몰라요
- 보드 상태, 수 검증, 차례 추적, 승리 감지를 처리해요
- 테스트와 재사용이 쉬워져요
02 · 프롬프트 템플릿
Claude에게 게임 엔진 모듈을 만들어 달라고 해요. class 가 무엇을 해야 하는지 구체적으로 적어요. 'tic-tac-toe 게임 만들어 줘' 보다 훨씬 더 좋은 결과가 나와요.
TicTacToeGame class 를 담은 game.js 모듈을 만들어 주세요. 요구 사항: (1) board 를 길이 9 의 배열로 초기화하고 모두 null 로 채워요. (2) 현재 차례를 추적해요. X 가 항상 먼저예요. (3) makeMove(cellIndex) 메서드를 제공해요. 수가 유효한지 검증하고 (cell 이 0-8 사이, cell 이 비어 있어야 함, 해당 플레이어 차례여야 함), 해당 심볼을 놓고, 승리나 무승부를 확인하고, { valid, symbol, winner, isDraw, board } 객체를 반환해요. (4) getState() 메서드를 제공해 현재 board 와 차례를 반환해요. (5) 8 개의 승리 라인을 모두 확인해요 (가로 3, 세로 3, 대각선 2). (6) module.exports 로 class 를 내보내요.03 · 코드 예제
Claude가 게임 엔진을 만든 후, 승리 확인 로직을 찾아봐요. 그냥 받아들이지 말고 이해해야 하는 부분이에요.
승리 감지: 8 개의 승리 라인
const WINNING_LINES = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
[0, 4, 8], [2, 4, 6] // diagonals
];
// Board layout:
// 0 | 1 | 2
// ---+---+---
// 3 | 4 | 5
// ---+---+---
// 6 | 7 | 8
보드는 9 개 cell 의 평평한 배열이에요. Index 0-2 가 윗줄, 3-5 가 가운데 줄, 6-8 이 아랫줄이에요. 가능한 8 개 라인 중 어느 하나에 같은 심볼 세 개를 채우면 승리예요. 매 수 후에 엔진이 8 개 라인을 모두 확인해요. 어떤 라인이든 같은 심볼 세 개 (null 아님) 가 있으면 그 플레이어가 이겨요. 9 cell 다 채웠는데 승자가 없으면 무승부예요.
04 · 실기 실습
Node.js REPL 에서 게임 엔진을 직접 테스트해요. 진짜 엔지니어는 이렇게 다른 것에 연결하기 전에 코드를 검증해요.
05 · 체크리스트
게임 엔진이 이 엣지 케이스들을 처리하는지 확인해요. Node REPL 에서 하나씩 시도하거나 Claude에게 빠른 테스트를 작성해 달라고 해요.
- X 가 항상 먼저예요. 첫 수는 항상 X
- 이미 점유된 cell 에 두면 valid: false 반환
- 순서 무시하고 두면 valid: false 반환
- 승리 후에는 더 이상 수가 허용되지 않음
- 보드가 다 차고 승자가 없으면 무승부를 정확히 보고
06 · 퀴즈
왜 게임 엔진을 서버와 분리된 모듈로 만드는 게 가치 있을까요?
- 독립적으로 테스트할 수 있고, 다른 프로젝트에서 쓸 수 있고, 서버 코드를 집중시켜요
- JavaScript 는 각 class 를 자체 파일에 두도록 요구해요
- 코드를 이해하기 더 어렵게 하지만 더 빠르게 실행해요
- Socket.io 는 Express 와 같은 파일의 코드에 접근할 수 없어요
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.