Home

웹 기반 마이크로게임 프로젝트 기획서

1. 프로젝트 개요

본 프로젝트는 짧은 시간 안에 다양한 미니게임이 연속적으로 등장하는 웹 기반 마이크로게임을 제작하는 것을 목표로 한다.

플레이어는 매 라운드마다 제시되는 간단한 조작법을 빠르게 이해하고, 제한 시간 안에 미션을 수행해야 한다. 게임은 음악의 리듬과 함께 진행되며, 시간이 지날수록 점점 더 빠르고 어려워지는 구조를 가진다.

본 프로젝트는 WarioWare류 게임의 핵심 재미인 “짧은 규칙 이해”, “즉각적인 반응”, “예측 불가능한 게임 전환”을 웹 환경에서 구현하는 것을 목표로 한다.

2. 기획 의도

기존 웹 게임은 하나의 규칙을 중심으로 장시간 플레이하는 경우가 많다. 반면 본 프로젝트는 여러 개의 짧은 게임을 빠르게 전환하며, 플레이어에게 순간적인 판단과 반응을 요구한다.

이를 통해 다음과 같은 경험을 제공하고자 한다.

• 짧은 시간 안에 다양한 게임을 경험하는 재미
• 매 라운드마다 바뀌는 규칙에서 오는 긴장감
• 음악과 화면 전환이 맞물리는 리듬감
• 단순하지만 직관적인 조작에서 오는 접근성
• 랜덤성과 속도 증가에서 오는 반복 플레이 동기

3. 핵심 컨셉

3.1 짧고 빠른 게임

각 마이크로게임은 3초에서 8초 정도의 짧은 시간 안에 끝난다. 플레이어는 긴 설명을 읽는 것이 아니라, 한 줄짜리 조작 안내를 보고 즉시 행동해야 한다.

예시:

• 피하기
• 누르기
• 맞추기
• 고르기
• 멈추기
• 따라하기
• 클릭하기
• 흔들기

3.2 랜덤 게임 전환

게임은 정해진 순서가 아니라 랜덤하게 등장한다. 같은 게임이 반복될 수 있지만, 지나치게 연속적으로 나오지 않도록 최근 등장 기록을 관리한다.

이를 통해 플레이어는 다음에 어떤 게임이 나올지 예측하기 어렵고, 매번 새로운 긴장감을 느끼게 된다.

3.3 음악 기반 진행

게임은 배경음악의 리듬에 맞춰 진행된다.

음악은 단순한 배경 요소가 아니라, 게임의 템포와 전환 타이밍을 결정하는 핵심 요소로 사용된다.

• 라운드 시작 타이밍
• 조작 안내 표시 타이밍
• 게임 종료 타이밍
• 성공 / 실패 효과음
• 난이도 증가 구간

이러한 요소를 음악과 결합하여 플레이어가 리듬 게임처럼 자연스럽게 흐름을 느끼도록 한다.

4. 게임 진행 흐름

게임 시작
  ↓
에셋 프리로드
  ↓
인트로 / 카운트다운
  ↓
마이크로게임 랜덤 선택
  ↓
조작 안내 표시
  ↓
제한 시간 내 플레이
  ↓
성공 / 실패 판정
  ↓
점수 및 목숨 갱신
  ↓
다음 라운드 진행
  ↓
게임 오버

5. 주요 시스템

5.1 마이크로게임 시스템

각 마이크로게임은 독립적인 모듈로 구성된다.

각 게임은 다음 정보를 가진다.

• 게임 ID
• 게임 이름
• 조작 안내 문구
• 제한 시간
• 필요한 에셋 목록
• 시작 로직
• 입력 처리 로직
• 성공 / 실패 판정 로직
• 종료 로직

마이크로게임은 공통 인터페이스를 따르며, 새로운 게임을 쉽게 추가할 수 있도록 설계한다.

5.2 게임 루프

게임 루프는 전체 진행을 관리한다.

담당 역할은 다음과 같다.

• 현재 라운드 관리
• 현재 마이크로게임 선택
• 제한 시간 관리
• 성공 / 실패 결과 수집
• 점수 계산
• 난이도 증가
• 게임 오버 판정

마이크로게임 내부 로직과 전체 게임 진행 로직은 분리하여 관리한다.

5.3 입력 시스템

게임마다 필요한 입력 방식이 다를 수 있다.

지원 예정 입력 방식은 다음과 같다.

• 키보드 입력
• 마우스 클릭
• 마우스 이동
• 드래그
• 터치 입력
• 모바일 대응 입력

공통 입력 시스템을 만들고, 각 게임은 필요한 입력 이벤트만 받아 사용하도록 한다.

5.4 에셋 프리로딩 시스템

웹 환경에서는 이미지나 사운드가 늦게 로딩되면 게임 흐름이 끊길 수 있다.

따라서 게임 시작 전에 기본 에셋을 미리 로딩하고, 진행 중에는 다음 후보 게임의 에셋을 미리 준비한다.

프리로딩 대상은 다음과 같다.

• 게임 이미지
• 배경 이미지
• 캐릭터 이미지
• 효과음
• 배경음악
• 전환 애니메이션 리소스

5.5 난이도 시스템

게임이 진행될수록 난이도가 점진적으로 증가한다.

난이도 증가 방식은 다음과 같다.

• 제한 시간 감소
• 게임 전환 속도 증가
• 조작 안내 표시 시간 감소
• 더 어려운 게임 등장 확률 증가
• 일부 게임 내부 패턴 복잡도 증가

난이도는 단순히 빠르게 만드는 것이 아니라, 플레이어가 익숙해질수록 더 높은 집중력을 요구하도록 설계한다.

6. 화면 구성

6.1 메인 화면

게임 시작 전 사용자가 처음 보는 화면이다.

포함 요소:

• 게임 제목
• 시작 버튼
• 간단한 설명
• 설정 버튼
• 사운드 on/off

6.2 게임 화면

실제 마이크로게임이 진행되는 화면이다.

포함 요소:

• 현재 마이크로게임 영역
• 조작 안내 문구
• 남은 시간 표시
• 점수
• 남은 목숨
• 성공 / 실패 피드백

6.3 전환 화면

마이크로게임 사이의 짧은 전환 화면이다.

포함 요소:

• 다음 게임 안내
• 리듬에 맞춘 화면 전환
• 성공 / 실패 결과 표시
• 속도 증가 연출

6.4 게임 오버 화면

플레이가 종료된 후 결과를 보여주는 화면이다.

포함 요소:

• 최종 점수
• 생존 라운드 수
• 최고 기록
• 다시 하기 버튼
• 메인으로 돌아가기 버튼

7. 마이크로게임 예시

7.1 피하기

장애물이 빠르게 다가오고, 플레이어는 방향키로 피해야 한다.

• 입력: 방향키
• 성공 조건: 제한 시간 동안 충돌하지 않기
• 실패 조건: 장애물과 충돌

7.2 타이밍 맞추기

움직이는 바가 특정 영역에 들어왔을 때 버튼을 눌러야 한다.

• 입력: Space
• 성공 조건: 정확한 타이밍에 입력
• 실패 조건: 너무 빠르거나 늦은 입력

7.3 정답 고르기

여러 선택지 중 화면의 지시에 맞는 대상을 클릭해야 한다.

• 입력: 마우스 클릭
• 성공 조건: 올바른 대상 선택
• 실패 조건: 잘못된 대상 선택 또는 시간 초과

7.4 멈추기

움직이는 물체가 목표 위치에 도달했을 때 정지시켜야 한다.

• 입력: 클릭 또는 Space
• 성공 조건: 목표 범위 안에서 정지
• 실패 조건: 목표 범위 밖에서 정지

7.5 따라하기

짧게 제시된 입력 패턴을 기억하고 그대로 따라해야 한다.

• 입력: 키보드
• 성공 조건: 올바른 순서 입력
• 실패 조건: 잘못된 순서 입력

8. 기술 스택

8.1 Frontend

• Next.js
• TypeScript
• React
• Tailwind CSS

8.2 Deployment

• Vercel

8.3 상태 관리

초기에는 React 기본 상태 관리와 custom hook을 사용한다.

필요 시 다음과 같은 상태를 분리한다.

• 전체 게임 상태
• 현재 라운드 상태
• 현재 마이크로게임 상태
• 입력 상태
• 사운드 상태
• 에셋 로딩 상태

9. 기술적 고려사항

9.1 랜덤 게임과 에셋 로딩 문제

마이크로게임이 랜덤으로 등장하기 때문에, 다음에 어떤 게임이 나올지 미리 알 수 없다.

이를 해결하기 위해 다음 전략을 사용한다.

• 게임 시작 전 핵심 에셋 전체 프리로드
• 용량이 큰 에셋은 우선순위 기반 로딩
• 최근 등장하지 않은 게임 후보들의 에셋을 백그라운드에서 준비
• 로딩되지 않은 게임은 랜덤 후보에서 일시 제외

9.2 음악과 게임 타이밍 동기화

음악과 게임 전환이 어긋나면 리듬감이 크게 떨어진다.

따라서 단순 setTimeout 기반 진행보다는 음악 재생 시간을 기준으로 라운드 타이밍을 계산한다.

핵심 기준:

• AudioContext 또는 audio.currentTime 기반 타이밍
• 라운드별 시작 시간 명시
• 프레임 단위 보정
• 지연 발생 시 다음 박자에 맞춰 보정

9.3 게임별 상태 분리

각 마이크로게임은 서로 다른 규칙과 상태를 가진다.

따라서 전체 게임 상태와 개별 게임 상태를 분리한다.

전체 게임이 관리하는 것:

• 점수
• 라운드
• 목숨
• 난이도
• 현재 게임 ID

개별 게임이 관리하는 것:

• 내부 오브젝트 위치
• 충돌 여부
• 입력 처리
• 성공 / 실패 조건
• 게임별 애니메이션

9.4 애니메이션

짧은 시간 안에 게임의 규칙을 직관적으로 전달해야 하므로, 애니메이션은 매우 중요하다.

사용 예정 방식:

• CSS transition
• CSS keyframes
• requestAnimationFrame
• Framer Motion 또는 직접 구현 애니메이션

복잡한 물리 연산보다는 짧고 명확한 움직임을 우선한다.

10. 개발 우선순위

Phase 1. Core Loop

• 기본 게임 시작 / 종료
• 라운드 진행
• 제한 시간 관리
• 성공 / 실패 판정
• 점수 및 목숨 관리

Phase 2. Microgame Prototype

• 3개 이상의 기본 마이크로게임 구현
• 공통 마이크로게임 인터페이스 정의
• 랜덤 선택 로직 구현
• 게임별 입력 처리 구현

Phase 3. Asset & Sound

• 이미지 프리로딩
• 효과음 추가
• 배경음악 추가
• 음악 기반 타이밍 구조 설계

Phase 4. Game Feel

• 전환 애니메이션
• 성공 / 실패 피드백
• 속도 증가 연출
• 화면 흔들림, 확대, 반짝임 등 즉각적 반응 추가

Phase 5. Polish

• 모바일 대응
• 최고 기록 저장
• 게임 오버 화면 개선
• UI 정리
• 배포 최적화

11. 성공 기준

본 프로젝트의 성공 기준은 다음과 같다.

• 플레이어가 조작법을 즉시 이해할 수 있다.
• 게임 전환이 빠르지만 혼란스럽지 않다.
• 음악과 화면 전환이 자연스럽게 맞물린다.
• 랜덤 게임 진행에도 로딩 지연이 거의 없다.
• 새로운 마이크로게임을 쉽게 추가할 수 있다.
• 짧게 플레이해도 재미가 느껴진다.
• 반복 플레이 시 더 높은 점수를 노리게 된다.

12. 향후 확장 가능성

• 모바일 전용 조작 추가
• 멀티플레이 모드
• 랭킹 시스템
• 사용자 제작 마이크로게임
• 테마별 게임팩
• 난이도별 스테이지 구성
• 캐릭터 및 스킨 시스템
• 스토리 모드
• 보스 스테이지
• 게임별 통계 분석