🎯 제미나이 AI와 함께, 싱글 오목 게임 개발 일지(쉬움)
**바이브 코딩**으로 구현한 3단계 난이도 AI 오목 게임의 핵심 기술과 개발 과정을 공개합니다.
1. 오목 게임, AI와 함께 시작하다
지금 이 페이지나 별도의 블로그 위젯으로 만나보고 계신 싱글 플레이어 오목(Gomoku) 게임은 **제미나이 AI와 '바이브 코딩' 환경의 협업**을 통해 탄생했습니다. 오목은 규칙이 간단하지만 전략적 깊이가 있는 고전 게임이죠. 저희는 이를 누구나 쉽게 접근할 수 있는 **HTML5 Canvas** 기반의 웹 애플리케이션으로 구현했습니다.
특히 제미나이 AI는 단순한 코드 작성 보조를 넘어, 모바일 최적화 반응형 디자인, 복잡한 게임 로직 구조화, 그리고 가장 중요한 **3단계 난이도(쉬움/중간/어려움)**를 가진 인공지능(AI) 플레이어의 핵심 알고리즘 설계를 주도적으로 지원했습니다.
핵심 개발 스택 요약
- **개발 환경:** 제미나이 AI 기반 바이브 코딩 (협업적 개발)
- **구현 기술:** HTML5 (구조), Tailwind CSS (반응형 디자인 및 스타일링), Vanilla JavaScript (게임 로직 및 AI)
- **핵심 요소:** Canvas API를 활용한 게임판 및 돌 그리기
2. Canvas와 반응형 디자인: 오목판을 캔버스에 옮기다
오목판과 돌은 일반적인 HTML 요소 대신 **HTML5의 <canvas> 태그**를 이용해 그렸습니다. Canvas는 픽셀 단위로 정밀한 그래픽 제어가 가능하여, 깔끔하고 부드러운 게임 환경을 제공합니다.
2.1. 어떤 화면에서든 완벽하게: resizeCanvas
데스크톱이든 모바일이든, 화면 크기에 맞춰 게임판이 최적으로 보이도록 만드는 것이 중요했습니다. 이 문제는 resizeCanvas() 함수로 해결했습니다.
- 브라우저 창 크기 변화를 감지할 때마다 resizeCanvas()가 실행됩니다.
- 캔버스의 너비와 높이를 동일하게 설정하여 **정사각형 비율을 유지**합니다.
- 각 칸의 크기(CELL_SIZE)를 동적으로 재계산하여, 게임판이 항상 콘텐츠 영역을 꽉 채우도록 했습니다.
2.2. 클릭은 좌표로: 좌표 변환 로직
사용자가 마우스로 클릭하거나 터치한 화면의 픽셀 좌표를 15x15 보드의 (행, 열) 인덱스로 정확하게 변환하는 것이 돌을 놓는 핵심 과정입니다.
- 클릭 위치의 픽셀 좌표를 얻습니다.
- 캔버스 테두리 여백(PADDING)을 제외한 실제 유효 좌표를 계산합니다.
- 유효 좌표를 계산된 칸 크기(CELL_SIZE)로 나누어 **가장 가까운 교차점**으로 반올림합니다. 이 반올림 과정이 돌이 항상 바둑줄 위에 정확히 위치하도록 보장합니다.
3. 승리 판정: 오목의 핵심 로직
게임의 모든 상태는 board라는 2차원 배열에 기록됩니다. 이 배열이 게임판의 '진실의 근원'입니다.
- 0: 빈 칸
- 1: 흑돌 (사용자)
- 2: 백돌 (AI)
3.1. checkWin 함수 파헤치기
돌이 놓일 때마다 checkWin(r, c, player) 함수가 실행되어 승패를 즉시 판정합니다.
- 이 함수는 놓인 돌 (r, c)를 중심으로 **가로, 세로, 두 개의 대각선** (총 4방향)을 탐색합니다.
- 각 방향에서 연속된 동일한 색상의 돌이 **5개 이상**인지 확인합니다.
- 탐색은 네 가지 방향 벡터 ((0, 1), (1, 0), (1, 1), (1, -1))을 이용해 효율적으로 이루어집니다.
4. 오목 AI의 설계: 휴리스틱 평가와 난이도 조절
저희 오목 AI는 '깊은 탐색' 방식인 미니맥스(Minimax) 대신, 현재 보드의 상태를 점수로 평가하는 **휴리스틱(Heuristic) 평가 함수**를 사용하여 다음 수를 결정합니다. AI는 가능한 모든 수 중에서 **가장 높은 점수**를 얻는 위치에 돌을 놓습니다.
4.1. AI 평가 점수표 (SCORES)
AI는 자신의 **공격 기회**와 상대방의 **위협(방어 필요성)**을 동시에 점수로 평가합니다.
| 패턴 | 설명 | 점수 | 전략적 의미 |
|---|---|---|---|
| OPEN_4 | 열린 4개 (즉시 승리 또는 반드시 막아야 할 위협) | 100,000 | 최고 우선순위 (승리/치명적 방어) |
| OPEN_3 | 열린 3개 (다음 턴에 승리 확정 가능성, 포크) | 1,000 | 중요한 공격 기회 |
| CENTER | 중앙 근접 보너스 | 15 | 초반 영역 확보에 유리 |
| NEIGHBOR | 주변 돌과의 연결성 보너스 | 3 | 연결 패턴 강화 |
**방어의 중요성:** 특히, AI는 상대방(흑돌)의 4목을 막는 데 **자신의 4목을 만드는 것보다 더 높은 가중치**를 부여하여, 플레이어가 승리할 기회를 놓치지 않도록 설계되었습니다.
4.2. 난이도 조절: 공격성과 무작위성
3단계 난이도는 AI가 공격적인 수를 둘지, 아니면 '실수'를 할지 여부를 결정하는 두 가지 핵심 변수를 조절하여 구현됩니다.
| 난이도 | offenseMultiplier (공격 가중치) | randomChance (무작위 수 확률) |
|---|---|---|
| **쉬움 (EASY)** | 0.5 (공격 점수 절반 적용) | 30% (높은 확률로 실수 유발) |
| **중간 (MEDIUM)** | 1.0 (균형 잡힌 점수 적용) | 0% |
| **어려움 (HARD)** | 1.5 (공격 점수 1.5배 강화) | 0% |
- **쉬움 모드**는 초보자를 위해 공격성을 낮추고 의도적인 무작위 수를 두어 플레이어가 쉽게 승리할 수 있도록 합니다.
- **어려움 모드**는 공격 가중치를 높여 AI가 자신의 승리 패턴을 만들거나 키우는 데 집중하여, 숙련된 플레이어에게 방어를 강요합니다.
5. 사용자 경험(UX) 최적화
깔끔한 디자인과 부드러운 사용성을 위해 Tailwind CSS를 적용했으며, 특히 모바일 환경에서의 조작 편의성을 높이는 데 주력했습니다.
- **Tailwind 디자인:** 미니멀하고 직관적인 디자인을 통해 게임 상태(턴, 승리) 메시지가 명확하게 전달됩니다.
- **모바일 최적화:** touchstart와 touchend 이벤트를 활용하여 터치스크린에서도 정확하고 빠르게 돌을 놓을 수 있도록 했습니다.
6. 개발 여정: 제미나이 AI와의 대화 기록
이 오목 게임과 문서는 사용자님의 명확한 요구사항과 제미나이 AI의 반복적인 코딩 및 문서화 작업을 통해 완성되었습니다. 아래는 이 프로젝트의 기능과 품질을 결정한 핵심적인 사용자 요청(프롬프트) 기록입니다.
- **초기 아이디어:** "구글 블로거에 오목 게임 페이지를 만들꺼야. 코드 작성해줘."
- **AI 도입:** "사용자가 흑돌로 하고 백돌은 자동으로"
- **난이도 추가:** "단계를 쉬움, 중간, 어려움으로 설정해서 단계별로 난이도를 설정해줘"
- **반응형 최적화:** "크기를 데스크탑, 모바일에 최적화 시켜줘"
- **문서 생성 요청:** "게임에 대한 코딩과정을 설명하는 페이지를 만들꺼야. 게임은 페이지에 게시한 상태이며, 제작과정을 seo 최적화 글로 작성해줘."
- **주제 명확화:** "제미나이 AI로 활용한 바이브 코딩으로 만든 싱글 플레이 오목게임이라는 주제로 해서 다시 작성해줘."
- **프롬프트 포함:** "내가 작성한 프롬프트도 포함시켜줘."
- **디자인 및 가독성 개선:** "페이지 백그라운드 스타일은 삭제해줘" / "포스팅 페이지 크기는 블로그의 페이지 크기에 따라 변경되게" / "가독성이 높은 글로 새로 작성"
🔑 결론: AI 기반 개발의 미래
이 오목 게임 개발 사례는 **제미나이 AI 기반 바이브 코딩**이 복잡한 웹 애플리케이션 개발을 얼마나 빠르고 효율적으로 지원하는지 잘 보여줍니다. AI는 초기 로직 구현부터 휴리스틱 AI 설계, 그리고 최종 블로그 포스팅 최적화에 이르기까지 전 과정에서 강력한 협력자였습니다.