REA와 Claude Code를 활용한 2048 게임 분석 및 구현

EZ, ParkAITechTrendREA이매진팩토리박은지2026.10.27

1. 프로젝트 소개

기존 웹 게임의 화면과 동작을 관찰하는 것만으로 동일한 기능의 게임을 구현할 수 있을까요?

화면에 보이는 요소를 따라 만드는 것은 가능하지만, 원본과 동일하게 동작하도록 구현하려면 내부 규칙을 정확히 파악해야 합니다.

이번 실습에서는 REA(Reverse Engineer Anything)와 Claude Code를 활용해 기존 2048 게임을 분석하고, 그 결과를 바탕으로 새로운 웹 게임을 구현했습니다.

분석 대상: play2048.co
분석 도구: REA 6.7.0
AI 개발 도구: Claude Code
개발 목표: 원본 게임의 주요 동작을 분석하고 이를 기반으로 새로운 2048 웹 게임 구현

2. REA란 무엇인가?

REA는 기존 프로그램이나 웹사이트의 구조와 동작을 조사하는 데 활용할 수 있는 오픈소스 역공학 도구 모음입니다.

브라우저에서 실제 프로그램을 조작하며 화면 변화를 기록하거나, 웹페이지 구조와 JavaScript 파일을 조사하는 등 다양한 분석 기능을 제공합니다.

이번 실습에서는 두 도구가 다음과 같은 역할을 수행했습니다.

도구	역할
REA	기존 게임의 동작, 프로그램 구조 및 분석 자료 수집
Claude Code	REA 실행 작업 준비, 분석 결과 해석, 게임 구현 및 검증

즉, REA가 분석에 필요한 정보를 제공하면 Claude Code가 그 결과를 활용해 새로운 프로그램을 구현하는 방식입니다.

3. REA를 활용한 2048 게임 분석

이번 실습에서는 Claude Code에 다음과 같이 요청했습니다.

REA를 사용해서 https://play2048.co/ 게임을 분석하고, 분석한 내용을 바탕으로 동일한 기능의 2048 웹 게임을 만들어줘.

Claude Code는 요청 내용을 바탕으로 분석 작업을 준비하고, REA의 기능을 실행했습니다.

3-1. 원본 게임의 동작 관찰

먼저 REA의 capture_browser_scenario 기능을 이용해 원본 2048 게임을 분석했습니다.

Claude Code가 사이트 접속과 방향키 입력 작업을 지정하면, REA가 브라우저에서 이를 자동으로 실행하고 화면 변화를 기록하는 방식입니다.

왼쪽은 게임 시작 화면이고, 오른쪽은 REA가 왼쪽 방향키를 한 번 입력한 후 기록한 화면입니다.

이를 통해 실제 사용자가 게임을 조작했을 때 화면이 어떻게 변화하는지 관찰할 수 있었습니다.

3-2. REA의 실제 분석 결과

REA는 게임 화면뿐 아니라 분석 과정에 대한 정보도 기록합니다.

이번 분석에 사용한 capture_browser_scenario의 결과 파일에는 다음과 같은 항목이 포함되어 있습니다.

항목	의미
operation	실행한 REA 분석 기능
start_url	분석 대상 웹사이트
actions	브라우저에서 수행하도록 지정한 작업
evidence_id	분석 결과를 구분하고 추적하기 위한 식별 번호

이러한 기록을 통해 어떤 웹사이트를 대상으로 어떤 분석 작업을 수행했는지 확인할 수 있습니다.

또한 REA의 다른 분석 기능을 활용해 JavaScript 스크립트를 조사하고, 주요 프로그램 파일의 연결 관계도 확인했습니다.

이번 분석에는 브라우저 조작 기록, 페이지 검사, 스크립트 수집 및 구조 분석 등 총 6개의 REA 도구가 사용됐습니다.

3-3. Claude Code를 통한 게임 규칙 분석

REA가 확보한 프로그램 코드와 실행 기록을 바탕으로 Claude Code가 원본 게임의 규칙을 분석했습니다.

분석을 통해 확인한 주요 규칙은 다음과 같습니다.

구분	확인한 규칙
게임 시작	4×4 게임판에 숫자 타일 2개 생성
타일 병합	한 번 이동할 때 각 타일은 최대 한 번만 병합
타일 생성	90% 확률로 2, 10% 확률로 4 생성
승리 조건	처음으로 2048 타일을 만들면 승리
게임 종료	빈 칸이 없고 합칠 수 있는 타일도 없는 경우 종료
추가 기능	되돌리기, 타일 위치 교환, 같은 숫자 타일 제거 등

예를 들어 새로운 타일의 생성 확률은 원본 프로그램의 생성 로직을 조사해 확인했으며, 병합 조건 역시 관련 코드와 동작 기록을 바탕으로 파악했습니다.

분석 과정에서는 직접 확인한 사실과 추정한 내용, 확인하지 못한 내용도 구분해 기록했습니다.

4. 분석 결과를 활용한 2048 게임 구현

분석한 게임 규칙을 바탕으로 Claude Code가 새로운 2048 웹 게임을 구현했습니다.

원본 게임은 Canvas와 pixi.js를 이용해 화면을 그리는 반면, 이번 구현에서는 HTML, CSS, JavaScript를 사용했습니다.

원본 코드나 이미지 리소스를 그대로 복사하지 않고 확인한 동작 규칙을 바탕으로 새롭게 구현했습니다.

새로 구현한 게임에서도 방향키 입력에 따라 숫자 타일이 이동하고, 같은 숫자끼리 합쳐지도록 구성했습니다.

새 타일은 무작위로 생성되므로 원본과 구현 게임의 타일 배치가 항상 동일한 것은 아닙니다.

또한 이번 실습에서는 주요 게임 기능을 중심으로 구현했으며, 원본의 일부 모드와 기능은 구현 범위에서 제외했습니다.

5. 구현 결과 검증

게임 구현 이후에는 주요 규칙이 올바르게 적용되었는지 확인하기 위해 두 가지 검증을 진행했습니다.

5-1. 게임 규칙 자동 테스트

Claude Code가 원본 분석을 통해 확인한 주요 규칙을 기준으로 자동 테스트를 작성했습니다.

타일 병합 조건, 새 타일 생성 로직, 승리 및 게임 종료 조건, 되돌리기와 파워업 기능 등을 검사했습니다.

총 19개의 규칙 테스트를 실행했고, 모두 통과했습니다.

5-2. REA를 활용한 브라우저 조작 검증

구현한 게임을 대상으로 REA의 브라우저 조작 기능을 다시 사용했습니다.

방향키를 통한 타일 이동, 되돌리기, 타일 위치 교환, 새 게임 확인창 등 실제 사용자 조작을 자동으로 수행하고 결과를 확인했습니다.

총 18단계의 브라우저 조작이 정상적으로 완료됐습니다.

6. 마무리

이번 실습에서는 REA와 Claude Code를 활용해 기존 2048 게임을 분석하고, 분석 결과를 바탕으로 새로운 웹 게임을 구현했습니다.

REA가 실제 프로그램의 동작과 구조를 조사하고, Claude Code가 그 근거를 해석해 구현에 반영하는 과정을 확인할 수 있었습니다.

또한 구현 이후에도 자동 테스트와 REA 브라우저 조작 기능을 활용해 주요 동작을 검증했습니다.

이번 사례를 통해 기존 프로그램 분석 → 분석 결과 해석 → 새로운 프로그램 구현 → 동작 검증으로 이어지는 REA 활용 흐름을 확인할 수 있었습니다.

첫 댓글을 남겨주세요.