오목보드 (Omokboard)

설치 없이 브라우저에서 바로 즐기는 무료 온라인 보드게임 9종 — 순수 바닐라 JS로 구현한 정적 웹 서비스

🔗 Live: omokboard.com · 🇬🇧 English

오목·사목·리버시·점잇기·체스·알까기·윷놀이·스도쿠·틱택토 9개 게임을 각각 AI 대전(난이도 3단계)과 2인 대전으로 즐길 수 있습니다. 프레임워크·빌드 도구 없이 바닐라 JavaScript만으로 게임 로직, AI, 물리 시뮬레이션, 다국어, SEO까지 직접 구현했습니다.

---

✨ 주요 기능

• 게임 9종 — 보드게임마다 독립적인 규칙 엔진과 AI를 자체 구현
• AI 대전 — 게임별로 쉬움·보통·어려움 3단계, 미니맥스/알파베타 등 직접 작성
• 2인 대전 — 같은 기기에서 번갈아 플레이
• 한국어/영어 다국어 — 클라이언트 토글 + SEO용 별도 영어 URL(/en/) + hreflang
• 반응형 — PC·태블릿·모바일, 터치/마우스 모두 지원
• SEO 최적화 — canonical, hreflang, JSON-LD 구조화 데이터, sitemap, 404 처리
• 무설치 — 정적 사이트, 외부 의존성 최소화(체스 규칙 라이브러리 1개 외 전부 자체 구현)

---

🎮 게임별 구현 방식

게임	렌더링	AI 핵심
오목 (Gomoku)	DOM 그리드	알파베타 미니맥스(어려움 4수) + 위협(열린3·4·이중위협) 평가
사목 (Connect Four 변형)	Canvas	알파베타 미니맥스 + 윈도우 기반 평가
리버시 (Othello)	Canvas	위치 가중치(코너/모서리) + 기동력(mobility) 평가
점잇기 (Dots & Boxes)	Canvas	안전수·체인 휴리스틱
체스 (Chess)	DOM + chess.js	미니맥스(어려움 3수) + 기물-위치표(PST)
알까기 (Alkkagi)	Canvas	커스텀 2D 물리(마찰·탄성 충돌) + 발사 시뮬레이션
윷놀이 (Yut Nori)	Canvas	표준 윷판(지름길·잡기·업기) + 휴리스틱 AI
스도쿠 (Sudoku)	DOM 그리드	유일해 보장 생성기(백트래킹 + 해 개수 검증), 1인·대결 모드
틱택토 (Tic-Tac-Toe)	DOM	완전 탐색 미니맥스(무패)
얼티메이트 틱택토	DOM	알파베타 미니맥스(어려움 6수) + 보드 전송 전략 평가

모든 게임 AI는 외부 엔진 없이 직접 작성했고, 핵심 로직(이동 경로·승패·AI 수)은 Node로 단위 검증했습니다.

---

🛠 기술 스택

• 언어: Vanilla JavaScript (ES6+), HTML5, CSS3
• 렌더링: HTML5 Canvas (물리/보드형 게임), CSS Grid/Flexbox + DOM (격자형 게임)
• 외부 라이브러리: chess.js (체스 규칙 검증) — 그 외 의존성 없음
• 다국어: 자체 i18n 스크립트(lang.js) + Node 정적 생성기(build-en.js)
• 호스팅/배포: Cloudflare Pages (GitHub 연동 자동 배포, 클린 URL, _headers 캐시 제어)
• 분석/수익화: Google Analytics(gtag), Google AdSense, Kakao AdFit
• 빌드 도구: 없음 — 정적 파일 직접 서빙 (영어판만 Node 스크립트로 생성)

---

📁 프로젝트 구조

omokboard/
├── index.html              # 메인 (게임 허브)
├── omok.html / script.js   # 오목 (DOM)
├── connect4.html / .js     # 사목 (Canvas)
├── reversi.html / .js      # 리버시 (Canvas)
├── dots.html / .js         # 점잇기 (Canvas)
├── chess.html / .js        # 체스 (DOM + chess.js)
├── alkkagi.html / .js      # 알까기 (Canvas + 물리)
├── yut.html / .js          # 윷놀이 (Canvas)
├── sudoku.html / .js       # 스도쿠 (생성기 포함)
├── tictactoe.html          # 틱택토 (클래식/얼티메이트 선택)
│   ├── tictactoe.js        #   클래식 3×3
│   └── ultimate.js         #   얼티메이트 (미니맥스)
├── *-guide.html            # 게임별 공략 페이지 (9종)
├── about / contact / privacy.html
├── lang.js                 # 다국어(i18n) 엔진
├── build-en.js             # 영어판 + sitemap 정적 생성기 (Node)
├── style.css / subpage.css # 공통 스타일
├── en/                     # 생성된 영어 페이지 (build-en.js 산출물)
├── sitemap.xml / robots.txt / ads.txt / 404.html / _headers
└── favicon.svg

---

🌐 다국어 & SEO

• 언어 = URL 기준: 한국어는 루트(/omok), 영어는 /en/omok. 언어 토글 시 해당 언어 URL로 이동
• 영어판 자동 생성: build-en.js가 한국어 페이지에서 영어판 23개 + 사이트맵을 생성 → 손으로 중복 관리하지 않음
• 검색 최적화: 페이지별 canonical·hreflang(ko/en/x-default)·Open Graph·JSON-LD(WebSite+ItemList), 깔끔한 404 처리로 soft-404 방지

# 콘텐츠 수정 후 영어판/사이트맵 재생성
node build-en.js

---

🚀 로컬 실행

별도 빌드가 필요 없는 정적 사이트입니다.

# 아무 정적 서버로 실행 (클린 URL 때문에 file:// 직접 열기보다 서버 권장)
npx serve .
# 또는
python -m http.server

git push 시 Cloudflare Pages가 자동 배포합니다.

---

💡 구현 하이라이트

• 프레임워크 0 — React 등 없이 9개 게임의 상태 관리·렌더링·입력을 바닐라 JS로 구성
• 게임 AI 직접 설계 — 게임마다 특성에 맞는 알고리즘(알파베타 미니맥스, 위협 평가, 물리 예측, 백트래킹 생성기)을 구현하고 난이도별로 튜닝
• 커스텀 물리 엔진 — 알까기는 속도 벡터·마찰·탄성 충돌을 직접 계산
• 정적 다국어 파이프라인 — 런타임 의존 없이 빌드 타임 생성으로 영어 SEO 페이지 확보
• 운영까지 — 커스텀 도메인, 캐시 버스팅, Search Console/AdSense 연동 등 배포·운영 경험 포함

---

📄 라이선스

개인 포트폴리오 프로젝트입니다. 문의: [email protected]