해질 무렵 고양이들이 사라진다. 제때 찾을 수 있나요?

출처: Dev.to

이 작품은 June Solstice Game Jam 에 제출된 작품입니다.

제가 만든 것

이번 게임잼을 위해 Find Them Before They Disappear 라는 숨은 물체 찾기 브라우저 게임을 만들었습니다. 해가 지기 전에 목표 고양이들을 찾아야 합니다.

아이디어는 바로 하지(동지)에서 시작되었습니다.

6월 21일은 1년 중 가장 긴 날입니다. 그 이후로는 날이 짧아지고, 빛이 사라집니다. 사라지는 느낌을 레이스처럼 체험하고 싶었어요.

게임에서는 목표 고양이 몇 마리를 5초 동안 보여줍니다. 특징을 기억한 뒤 20~90마리의 고양이가 화면에 나타납니다. 해가 지기 전에 목표 고양이를 찾아야 합니다. 틀린 클릭은 5초를 차감하고, 빠른 정답 클릭은 콤보를 쌓습니다. 남은 시간이 10초 이하가 되면 화면이 빨갛게 깜빡이며 긴장이 고조됩니다.

시간이 흐를수록 고양이들이 서서히 사라집니다. 이 아이디어는 에이전트가 제안한 것이었고, 게임에서 가장 좋은 시각적 은유가 되었습니다.

각 목표 고양이는 몸 색(주황, 검정, 흰색, 회색, 갈색), 눈 색(초록, 파랑, 노랑), 액세서리(모자, 안경, 리본, 목걸이, 없음) 중 하나씩 조합된 고유한 특성을 가집니다. 특성을 꼼꼼히 비교해야 합니다. 잘못된 고양이를 클릭하면 시간이 줄고, 올바른 고양이를 충분히 빠르게 클릭하면 콤보 보너스를 얻습니다.

🎮 여기서 플레이하기

비디오 데모

직접 해볼 수 있는 것들

• 해가 지기 전에 목표 고양이 찾기
• 빠른 정답 클릭으로 콤보 만들기
• 10초 남았을 때 경고 펄스 견디기
• 빛이 사라지면 고양이가 서서히 사라지는 모습 보기
• 5개 레벨 모두 플레이하기 (20마리에서 90마리까지)

… 모두 Vercel에 배포된 게임을 통해 바로 체험할 수 있습니다.

find-them-before-they-disappear.vercel.app

코드

전체 게임은 단일 index.html 파일 하나로 이루어져 있습니다. 약 900줄 정도이며, 빌드 도구도, 의존성도, package.json도 없습니다.

사용한 기술:

• Phaser 3 (CDN 통해 로드)
• Web Audio API (파일 없이 합성된 사운드)
• Phaser Graphics Primitives (코드로 직접 그린 모든 시각 요소)
• Vercel (배포)

Phaser를 선택한 이유는 캔버스 렌더링, 입력 처리, 트윈, 게임 상태 관리 등을 직접 게임 루프를 짜지 않아도 제공해 주기 때문입니다. 에이전트가 이미 API를 알고 있었어요.

어떻게 만들었나요

코덱스(OpenAI 코딩 에이전트)를 사용했습니다. 게임 엔진도, 스프라이트 시트도, 오디오 파일도 전혀 없었습니다. 프롬프트 두 개만으로 진행했습니다.

첫 번째 프롬프트: 게임 만들기

첫 번째 프롬프트는 약 200단어 정도였으며, 스펙 문서처럼 작성했습니다. 각 레벨의 고양이 수, 타이머 길이, 목표 고양이 수, 전체 특성 시스템, UI 배치, 엔딩 문구 등을 모두 명시했습니다. CDN으로 로드하는 Phaser 3, 외부 에셋 없이 단일 HTML 파일, 그래픽 프리미티브만 사용하도록 지시했죠.

출력은 작동하는 게임이었지만, 보기엔 별로였고, 기능만 구현된 수준이었습니다. 5레벨(20마리 → 90마리), 타이머 감소, 원과 삼각형으로 그린 고양이, 목표 미리보기, 클릭 감지, 점수 집계 등이 포함됐습니다.

가장 크게 배운 점은 프롬프트 품질이 예상보다 훨씬 중요하다는 것이었습니다. 처음에 “레벨이 있는 고양이 찾기 게임을 만들어줘” 라고만 하면 에이전트가 일반적인, 깨진 결과물을 내놓았습니다. 그래서 정확한 수치를 넣어 다시 작성했죠.

예시) 레벨 1: 20마리, 목표 3마리, 60초
레벨 2: 35마리, 목표 3마리, 55초 … 레벨 5: 90마리, 목표 5마리, 40초

특성 시스템(몸 색 5가지, 눈 색 3가지, 액세서리 5가지)과 승리·패배 메시지를 정확히 정의했더니 첫 시도부터 정상 작동했습니다.

두 번째 프롬프트: 재미 요소 추가

두 번째 프롬프트는 “재미(juice)”를 넣는 것이었지만, 구체적으로 어떤 효과를 원하는지 명시했습니다.

• 고양이 호버 효과(마우스 오버 시 시각 피드백)
• Web Audio API를 이용한 사운드 효과(정답 종소리, 오답 버즈, 틱, 버튼 클릭)
• 빠른 연속 정답 클릭 시 콤보 보너스
• 타이머가 10초 이하가 되면 경고 펄스
• 특성을 쉽게 비교할 수 있도록 목표 카드 명확히 표시
• 빠른 재시작을 위한 리스타트 버튼
• 모바일 터치 지원 및 터치 액션 처리

첫 번째 버전은 프로토타입 수준이었고, 두 번째 버전은 실제로 즐길 수 있는 게임이 되었습니다. 프롬프트를 구체적으로 작성하면 “재미를 추가해줘” 라는 모호한 요청보다 정확히 원하는 효과를 얻을 수 있다는 좋은 예시가 되었습니다.

하지(동지)를 의미 있게 만들기

동지 테마는 부수적인 것이 아니었습니다. 먼저 테마를 정하고, 그에 맞게 게임을 설계했습니다.

게임은 하나의 은유에 기반합니다: 빛 = 시간, 시간이 다하면 사라진다.

• 타이머가 감소하면 해가 진다.
• 어두워지면 고양이가 서서히 투명해진다.
• 찾은 고양이는 반짝이며 안전하게 사라진다.
• 찾지 못한 고양이는 해가 지면서 사라진다.

승리 메시지: “가장 긴 날이 끝나기 전에 찾았습니다.”
패배 메시지: “그들은 해가 지면서 사라졌습니다.”

6월 21일, 가장 긴 하루. 이 게임은 그 순간의 긴박함, 빛이 사라지기 전에 중요한 것을 찾아야 한다는 느낌을 전달합니다.

아트 디렉션

모든 그래픽은 Phaser의 그래픽 프리미티브로 직접 그렸습니다. 원은 머리와 몸, 삼각형은 귀, 사각형은 액세서리 등. 스프라이트나 이미지, 외부 에셋이 전혀 없습니다.

이 선택은 단순히 기술적인 이유뿐 아니라, 모든 고양이가 동일한 스타일, 비율, 시각 언어를 갖게 해 줍니다. 또한 스프라이트를 찾거나 라이선스를 고민하는 데 시간을 쏟지 않아도 됩니다.

배경은 해질녘 그라데이션으로, 시간이 흐를수록 따뜻한 주황색 → 짙은 보라색 → 어두운 파랑색으로 변합니다. 고양이는 완전 가시성에서 반투명으로 변하면서, 타이머를 보지 않아도 화면 자체만으로도 시간이 다가오고 있음을 알 수 있습니다.

기술 스택

전체 구성:

• Phaser 3 (CDN) – 게임 프레임워크
• Web Audio API – 사운드 합성
• Phaser Graphics Primitives – 시각 요소
• 단일 HTML 파일 –