OpenCode로 간단한 웹 게임 개발 후기 - 반응속도 테스트
들어가며
오픈코드는 최근 바이브 코딩 흐름에서 많이 언급되는 AI 기반 개발 도구 중 하나로, CLI 환경에서 자연어 프롬프트를 통해 프로젝트 설계부터 구현까지 진행할 수 있도록 도와주는 에이전트형 개발 툴입니다. 기존의 코드 자동완성과는 조금 다르게, 설계(Plan) → 합의 → 구현(Build) 과정을 거치면서 비교적 큰 단위의 작업도 자동으로 생성해준다는 점이 특징입니다.
이 글에서는 오픈코드(OpenCode)를 설치하고 ,이를 활용해 아주 간단한 반응속도 테스트 웹 게임을 만들어본 과정을 소개합니다.
오픈코드 설치
오픈코드를 설치하는 방법은 다음과 같습니다. brew를 활용하여 오픈코드를 설치합니다.
brew install anomalyco/tap/opencode
오픈코드의 버전이 출력된다면, 설치 성공입니다
opencode --version
반응속도 테스트 웹 게임 개발
이 글에서는 반응속도 테스트 웹 게임을 개발하므로 다음과 같이 reaction-game 디렉토리를 만들고, opencode 명령어를 통해 오픈코드를 실행합니다.
오픈코드의 초기 화면은 다음과 같이 기본적으로 Build 단계로 진입합니다. Build 모드는 실제 코드 생성 및 수정이 이루어지는 단계입니다.
‘tab’ 키를 활용하면 Plan 모드로 변경할 수 있습니다. Plan 모드는 바로 개발 작업을 하지 않고, ‘설계 → 합의 → 구현’을 하는 단계입니다. 바로 코드를 생성하기보다 먼저 요구사항을 구체화하고, 범위를 정리할 수 있어서 프로젝트의 방향을 잡을 수 있어 도움이 됐습니다.
Plan 모드로 변경하여 다음과 같이 프롬프트를 입력했습니다. 모델은 디폴트인 OpenCode Zen을 사용했고, 타 모델(클로드, 지피티)도 API 키만 연결하면 사용 가능합니다.
간단한 웹 게임을 만들고 싶어. 배포는 vercel로 진행할 수 있도록 구현 계획 정리해줘프롬프트를 입력하니 다음과 같이 ‘구체적인 플레이 방식’, ‘기능 범위 설정’ 등의 질문을 통해 프로젝트를 구체화합니다.
위의 질문을 통해 완성된 구현 계획은 다음과 같습니다. 계획을 더 수정하지 않고, Build 모드에서 다음 프롬프트를 입력했습니다. 그러면 프로젝트 구조 생성, 코드 작성, 설정 파일 생성 등이 자동으로 진행됩니다.
좋아 지금 계획으로 진행해줘. 위의 계획은 따로 md파일로 저장해줘.
반응속도 테스트 웹 게임 결과 확인
배포는 vercel로 진행했습니다. 결과물은 다음 링크를 통해 확인하실 수 있습니다. 👉 https://reaction-game-omega.vercel.app/
마무리하며,
이번에는 아주 단순한 웹 게임이었지만, 설계 단계부터 자동화된 개발 경험을 해볼 수 있어서 흥미로웠습니다.
특히 Plan 모드를 통해 요구사항을 정리하는 과정은 개인 프로젝트를 진행할 때도 충분히 활용할 수 있을 것 같았습니다.
앞으로는 조금 더 복잡한 프로젝트에도 적용해보면서 활용 범위를 넓혀볼 생각입니다.
'개발' 카테고리의 다른 글
| [자바스크립트 입문 #6] 함수 선언과 호출 - function (0) | 2026.01.22 |
|---|---|
| [n8n 실습] '삼성전자' 뉴스 수집 & 슬랙 전송 워크플로우 (0) | 2026.01.15 |
| [자바스크립트 입문 #5] 반복문 기초 - for, while (0) | 2025.12.08 |
| [바이브코딩] 윈도우 Windows 환경에서 Codex CLI 사용 방법 (2) | 2025.10.19 |
| [자바스크립트 입문 #4] 조건문 - if, else, else if (4) | 2025.10.13 |