조작은 유지하고,
판단 조건을 바꾸기.
트리플 도크는 탈출 순서, 2048은 같은 색·숫자의 합성, 열쇠·빙결은 선행 조건, 팩토리는 추가 공급과 이동 공간을 다룹니다. 여섯 모드를 한 조작 체계에 연결했습니다.
검증할 가설 · 익숙한 조작을 유지하면서 서로 다른 퍼즐 판단을 경험할 수 있을까?
BLOCK BLOOM · PLAYABLE CASE STUDY
한 수의 만족감에서,
다음 한 판의 이유까지.
색상 슬라이딩에 서로 다른 판단 조건을 결합한 HTML5 퍼즐.
제작 방향을 정의하고 Codex에 구현을 요청한 과정을, 실제 제작 기록과 결과물로 설명합니다.
- 형태
- 개인 웹 프로토타입 · HTML/CSS/JavaScript
- 방향·요구사항
- 레퍼런스, 수익화 관점, 모드 조합, 아이템, 타격감
- AI 협업
- Codex의 구현·테스트·배포 기록 확인
- 현재 범위
- 6개 모드 · 아이템 5종 · 보상·상점 데모
01 · DESIGN INTENT
길을 여는 판단과,
탈출하는 순간의 만족감.
레퍼런스는 Block Out!의 공식 소개와 스크린샷 ↗ (새 탭)입니다. 같은 색 출구로 블록을 밀어내는 코어를 바탕으로, 통로를 여는 순서와 공간 사용을 고민하게 만들고자 했습니다. 아래 의도와 가설은 현재 구현·제작 노트를 바탕으로 정리했습니다.
- 01통로 읽기
- 02블록 밀기
- 03같은 색 탈출
- 04보상과 다음 판
조작은 유지하고,
한 번의 탈출도
분명하게 느껴지도록.
탈출·합성·빙결 해제에 다른 피드백을 주고 파편, 충격파, 효과음을 연결했습니다. 4초 이내 연속 탈출로 콤보, 5콤보부터 10초 피버와 점수 2배가 적용됩니다.
검증할 가설 · 보상 연출이 다음 수를 두고 싶은 동기로 이어질까?
이어갈 이유를
데모로 구체화하기.
아이템 5종, 보드 상태를 유지하는 이어하기, 일일 보상과 누적 별 보상을 구현했습니다. 효과와 비용을 실제 버튼·상태 변화로 확인할 수 있습니다.
검증할 가설 · 실패 뒤의 선택과 보상 목표가 재도전에 도움이 될까?
수치는 구현된 데모 규칙입니다.
초기 350코인, 클리어 보상 90~130코인, 이어하기 120/180코인·45초 추가·판당 최대 2회. 일일 보상은 100코인이며 광고 보상 데모와 지급 제한을 공유합니다. 적정 가격이나 구매 전환 효과가 검증된 수치는 아닙니다.
02 · AI COLLABORATION
방향을 요청으로 정하고,
구현과 검증을 연결했습니다.
이 Codex 프로젝트의 원래 제작 요청, 명령 실행, 테스트 출력, 커밋·배포 기록에서 확인되는 과정입니다. 제작자의 요구사항 설정과 Codex가 수행한 구현·검증을 구분합니다.
- 01
제작자 · 방향과 요구사항
무엇을 만들지 정의
Block Out!을 레퍼런스로 지정하고, 수익화 요소 분석, 퍼즐 장르 조합, 즉시 사용 아이템, 강한 타격감과 연출을 요구했습니다. 이 다섯 가지가 구현의 출발점입니다.
- 02
Codex · 분석과 구현
요구사항을 플레이어블로 연결
공식 스토어 자료를 확인하고 규칙·보상 모델과 화면 코드를 분리했습니다. 여섯 모드와 아이템, 상점·이어하기·재방문 보상, CSS/SVG 그래픽 및 효과음을 구현했습니다. 공개 자료의 상품 목록과 실제 매출 효과는 구분해 제작 노트에 남겼습니다.
- 03
Codex · 자동 검사와 수정
테스트 결과로 누락을 확인
규칙·DOM 테스트를 작성·실행했습니다. 첫 통합 검사에서는 README 링크 누락으로 1건이 실패했고, 문서를 추가한 뒤 DOM 검사를 다시 실행해 통과한 기록이 있습니다. 규칙 테스트도 별도로 통과했습니다.
- 04
Codex · 브라우저 확인과 배포
실행 가능한 공개 결과물로 전달
브라우저 실행과 홈페이지 이동 경로를 확인하고 GitHub Pages에 배포했습니다. 초기 구현은 커밋 24ffd68의 소스 ↗ (새 탭)에서 확인할 수 있습니다.
제작 기록에서 확인되지 않는 수작업 코드 분담 비율, AI 도입 전후의 생산성 수치, 사용자 피드백에 따른 반복 개선 이력은 기재하지 않았습니다. 레벨 생성은 해답 경로를 만드는 규칙 기반 생성기이며, AI가 실행 중 레벨을 생성하는 구조는 아닙니다.
03 · EVIDENCE & LIMITS
동작하는 규칙과,
아직 확인할 경험.
생성 보드 검사
여섯 모드의 생성 해답이 유효한 이동으로 끝까지 이어지는지 확인합니다. 임의의 다른 선택이 만든 교착까지 막는다는 뜻은 아닙니다.
규칙·DOM 테스트
규칙 10개와 DOM 통합 9개. 경로 충돌, 선행 조건, 모드 완주, 아이템·보상·저장·이어하기 등을 다룹니다.
브라우저와 배포
초기 제작 기록에 PC 브라우저 실행, 모바일 크기 화면과 공개 페이지 확인이 있습니다. 자동 검사와 브라우저 확인은 실기기·실사용자 검증과 구분합니다.
자동 검증은 구현의 정합성을 확인합니다. 실제 결제·광고 SDK, 서버 저장, 사용자 조사 결과와 스토어·UA 지표는 이 사례에서 확인된 성과로 제시하지 않습니다.
검증 명령과 원문 보기
2026.10.20 재실행 · 19개 통과, 실패 0개. DOM 검사는 테스트 폴더의 의존성 설치가 필요합니다. 설치 방법은 아래 README에 안내돼 있습니다.
node --test games/block-bloom/rules.test.mjs games/block-bloom/tests/ui.test.mjs04 · NEXT VALIDATION
다음은, 플레이어의 반응을 확인할 차례.
아래는 이 사례를 바탕으로 정리한 후속 실험 제안이며 아직 측정한 결과가 아닙니다. 첫 실험은 대표 모드인 컬러 탈출에 집중해 조작 이해와 실패 지점을 관찰하는 안입니다.
| 확인할 질문 | 관찰할 것 | 결과로 판단할 것 |
|---|---|---|
| 첫 판의 규칙을 이해하는가? | 설명 없이 첫 유효 이동까지 걸린 과정, 막힌 입력, 첫 판 완주 | 안내가 필요한 지점과 첫 보드의 난도 |
| 실패의 원인을 이해하는가? | 막힌 통로·시간 초과 후 선택, 아이템 사용 맥락 | 실패 안내와 재도전·이어하기 비용 |
| 다음 판을 시작하고 싶은가? | 다음 판 선택과 중단 이유, 보상 목표 이해 | 코어 반복과 보상 구조를 유지·수정할 근거 |
실사용 관찰 뒤 스토어·UA 검증으로 이어가려면 첫 판 완료·실패·이어하기·다음 판 시작을 구분해 기록할 필요가 있습니다. 실제 지표 수집은 현재 프로토타입에 연결돼 있지 않습니다.