바이브코딩 해커톤 참여 후기 - 경기도 심시티 게임 개발

바이브코딩 해커톤에 참여했습니다

경기기후플랫폼 데이터를 활용한 바이브코딩 해커톤에 참여하여 재난 대비 시뮬레이션 게임을 개발했습니다.

프로젝트: 경기도 심시티 - 재난대비 시뮬레이션

프로젝트 개요

경기도 시장이 되어 10일간 재난 상황에서 도시를 지키는 텍스트 기반 시뮬레이션 게임입니다. 실제 경기기후플랫폼 API 데이터를 활용하여 현실감 있는 재난 대응 체험을 제공합니다.

주요 기능

• 도시 선택: 경기도 10개 도시(수원, 성남, 고양 등) 중 선택하여 플레이
• 실시간 데이터 반영: 실제 경기기후 API를 통해 도시별 공원/녹지 수, 침수위험도 반영
• 재난 이벤트: 폭우, 폭염, 산사태 3가지 재난에 대응하는 의사결정 게임
• 자원 관리: 예산, 안전도, 행복도를 관리하며 최고 점수 달성

사용 기술 스택

- Frontend: React 18 + TypeScript
- Build Tool: Vite 6
- Styling: Tailwind CSS
- Icons: Lucide React
- API: 경기기후플랫폼 API
- Deployment: Vercel
- Version Control: GitHub

활용한 데이터

경기기후플랫폼 API에서 제공하는 다음 데이터를 활용했습니다:

• 공원 데이터 (park): 도시별 공원 현황
• 녹지지역 데이터 (green_area): 녹지 면적 정보
• 침수위험지도 (flood_risk_map): 침수 위험 지역 데이터

개발 과정

빠른 프로토타이핑

해커톤의 특성상 제한된 시간 내에 결과물을 만들어야 했습니다. Claude Code를 활용하여 다음과 같은 과정으로 진행했습니다:

1. 초기 설정: GitHub CLI와 Vercel CLI 설치
2. Hello World 배포: 기본 프로젝트 구조 설정
3. 게임 로직 개발: 경기기후플랫폼 데이터를 활용한 시뮬레이션 로직 구현
4. 배포: Vercel을 통한 실시간 배포

주요 개발 프롬프트

# 1. 초기 설정
"github CLI 와 vercel CLI 설치해줘"

# 2. 프로젝트 배포
"Hello, World!"가 보이는 프로젝트를 깃헙에 올리고 버셀로 배포해"

# 3. 게임 개발
"경기기후플랫폼데이터를 가지고 경기도 심시티 재난대비 텍스트게임을 개발해"

# 4. 최종 배포
"깃헙 커밋 앤 버셀 배포해"

프로젝트의 의미

공익성

이 게임은 단순한 엔터테인먼트를 넘어 다음과 같은 교육적 가치를 제공합니다:

• 시민들에게 재난 대비의 중요성 인식
• 지자체 의사결정의 복잡성과 어려움 체험
• 실제 데이터 기반의 현실감 있는 시뮬레이션

게임 플레이

플레이어는 10일 동안 도시를 운영하며:

• 재난 상황에 대한 즉각적인 의사결정
• 제한된 예산 내에서 효율적인 자원 배분
• 시민 안전과 행복도 균형 유지

최종 점수에 따라 S/A/B/C/F 등급이 부여됩니다.

결과물

• GitHub: https://github.com/Shiene1010/hello-world-hackathon
• 배포 사이트: https://starter-project-ml5h0aaod-shiene1010s-projects.vercel.app

배운 점

1. 빠른 프로토타이핑의 중요성

해커톤에서는 완벽한 코드보다 작동하는 결과물이 중요합니다. TypeScript의 타입 에러를 무시하고 빠르게 기능을 구현하는 과정에서 실용주의의 가치를 배웠습니다.

2. AI 도구 활용

Claude Code를 활용하여 개발 시간을 대폭 단축할 수 있었습니다. 명확한 프롬프트만 제공하면 보일러플레이트 코드부터 배포까지 자동화할 수 있었습니다.

3. 오픈 데이터의 활용

경기기후플랫폼 API와 같은 공공 데이터를 활용하면 사회적 가치가 있는 프로젝트를 만들 수 있습니다.

마치며

짧은 시간 동안 진행된 해커톤이었지만, 실제 데이터를 활용한 의미 있는 프로젝트를 완성할 수 있었습니다. 앞으로도 이러한 기회를 통해 기술을 사회 문제 해결에 활용하는 경험을 쌓고 싶습니다.

Happy Hacking! ⚡