AI와 함께 브라우저에서 구동되는 2D 격투 게임을 만들었습니다.
중간까지는 평범한 캐릭터들이 싸우는 게임이 될 예정이었습니다.
결국, 막대 인간(stick figure)으로 바뀌게 되었습니다.
완성된 작품의 이름은 'OFFICE CLASH - 정시 없는 싸움(定時なき戦い) -' 입니다.
사원들이 평소 업무에 대한 생각과 부서의 자존심을 걸고 싸우는, 직장인 공감대를 소재로 한 격투 게임입니다. 실제로 브라우저에서 플레이할 수 있습니다.
OFFICE CLASH完成版タイトル画面
완성판 'OFFICE CLASH - 정시 없는 싸움 -'. 영업부와 개발부가 싸우는 브라우저 격투 게임입니다.
개발 과정에서는 전투 로직, 캐릭터 고유 기술(skill), CPU 대전, 화면 전환 등을 단계적으로 구현했습니다. 하지만 그 과정에서 크게 방향을 변경한 부분이 있습니다.
바로 캐릭터의 비주얼입니다.
당초에는 AI 이미지 생성 기능을 사용하여 격투 게임용 캐릭터 스프라이트를 만들려고 했습니다. 그러나 이 방향으로는 완성까지 도달하기 어렵다고 판단했습니다.
이 글에서는 OFFICE CLASH를 만들기 시작한 순간부터, 비주얼 제작에 좌절하여 막대 인간으로 방향을 전환하고 최종적으로 완성할 때까지의 과정을 기록합니다.
가장 먼저 결정한 것은 회사 부서 간을 캐릭터로 한 격투 게임을 만드는 것이었습니다. MVP(Minimum Viable Product)에서 등장하는 캐릭터는 다음과 같습니다.
- 영업부 (Sales Department)
- 개발부 (Development Department)
OFFICE CLASH에서는 단순히 격투 게임으로서의 경쟁성만을 추구하기보다는, 회사 공감대 요소, 기술 이름, 연출, 캐릭터성, 대전 중 이해도를 중요하게 생각했습니다.
영업부는 앞으로 나아가 공격하는 타입입니다. 개발부는 설치기(設置技)나 카운터로 상대를 받아치는 타입입니다. 처음부터 많은 캐릭터를 만드는 대신, 이 두 캐릭터만으로 1대 1의 대전이 끝까지 성립하는 것을 MVP 범위로 설정했습니다.
営業部と開発部の旧キャラクターデザイン案
당초 예상했던 Sales / Developer. 이 단계에서는 일반적인 인물 캐릭터로 제작할 예정이었습니다.
OFFICE CLASH에서는 캐릭터 이미지보다 전투 로직을 먼저 만들었습니다. 게임 규칙을 다루는 Core 부분은 Pure TypeScript로 구현되었으며, 드로잉이나 연출을 담당하는 Phaser와 분리되어 있습니다.
Core 측면에서는 주로 다음과 같은 요소들을 관리합니다.
- 캐릭터 위치 및 이동 (Character position and movement)
- 히트박스 / 허트박스 (Hitbox / Hurtbox)
- 대미지 (Damage)
- 피격 경직 (Hit stun)
- 가드 (Guard)
- 넉백 (Knockback)
- 상태 전환 (State transition)
- 게이지 (Gauge)
- 캐릭터 고유 효과 (Character unique Effect)
- 승패 판정 (Win/Loss determination)
구조를 상당히 단순화하면 다음과 같습니다.
입력(Input)
↓
게임 코어(Game Core)
...
게임 규칙의 정합성(正)을 Presentation 측에 두지 않고, Core 측에서 결정된 결과를 화면에 반영하는 구조입니다. 이 분리 구조는 나중에 비주얼 방향 자체를 변경할 때도 유지되었습니다.
OFFICE CLASH만의 특징이 강하게 드러나는 부분은 영업부와 개발부의 기술들입니다. 단순히 이름만 회사 소재로 만든 것이 아니라, 그 이름에 맞게 동작까지 결정했습니다.
영업부에는 다음과 같은 기술들이 있습니다.
- 명함 잽 (Business card jab)
- 클로징 스트레이트 (Closing straight)
- 돌진 영업 (Rush sales)
- 이중 언어 라시 (Two-faced rush)
- 무리한 납기 설정 (Unreasonable deadline setting)
- 초필살기 '할 수 있습니다!'
이 중에서도 '무리한 납기 설정'은 단거리 전진 공격입니다. 이 기술이 명중하면 경기 남은 시간을 180 프레임 감소시킵니다. 60fps 기준으로 약 3초에 해당합니다. 즉, 상대의 납기를 실제로 짧게 만듭니다.
이 시간 감소는 화면상의 연출일 뿐만 아니라, Core가 가지고 있는 경기 타이머 자체에 적용됩니다.
반면 개발부에는 다음과 같은 기술들이 있습니다.
- 키보드 구타 (Keyboard beating)
- 요구사항 정의서 스윙 (Requirement definition document swing)
- 장애 대응 드롭 (Bug response drop)
- 사양 변경 카운터 (Specification change counter)
- 스파게티 코드 (Spaghetti code)
- 초필살기 '심야 3시 강제 롤백'
'사양 변경 카운터'는 방어형 기술입니다. 가드 상태에서 대상 공격을 받으면, 일반적인 피격이 아닌 카운터로 전환됩니다.
'스파게티 코드'는 바닥에 트랩을 설치하는 기술로, 상대가 접촉하면 대미지에 더해 일정 시간 동안 이동 속도가 저하됩니다.
영업부는 앞으로 나아가고. 개발부는 받아치는 방식으로 싸웁니다. 단순히 기술 이름뿐만 아니라 실제 전투 방식에도 부서별 차이를 두었습니다.
전투 Core 구현 후, Phaser 측에서 실제로 플레이 가능한 형태로 연결했습니다. OFFICE CLASH에는 다음과 같은 Scene이 있습니다.
- Title
- Character Select
- Pre Battle
- Battle
- Result
제목에서 캐릭터를 선택하고, 대전 전 화면을 거쳐 배틀(Battle)로 진입하며, 승패가 결정되면 결과(Result) 화면으로 넘어갑니다.
이 단계까지 진행되면서,
공격할 수 있다.
가드할 수 있다.
필살기가 나온다.
Super 게이지가 찬다.
CPU와 싸울 수 있다.
승패가 결정된다.
라는, 격투 게임으로서의 일련의 흐름을 만들 수 있었습니다.
여기까지는 단계적으로 구현을 진행할 수 있었습니다.
하지만 캐릭터 비주얼에 대해서는 사정이 달랐습니다.
당초에는 영업부와 개발부에 대해 AI 이미지 생성(AI image generation)을 사용한 2D 캐릭터 스프라이트(sprite)를 만들 계획이었습니다.
단발의 캐릭터 일러스트만 만드는 것이 아니라, 같은 인물을 게임 내에서 움직이기 위한 소재로 갖추려고 했습니다.
실제로,
- 얼굴 정면
- 측면
- 전신 정면
- 후면
- 사선(대각선)
- 뉴트럴 포즈(Neutral pose)
- 공격
- 공중 동작
- 피격
- 다운
등을 만들고 있습니다.
営業部キャラクターの格闘ゲーム用Key Pose一覧
1장의 그림이 아니라, 공격・공중 동작・피격・다운 등 게임에 필요한 키 포즈(Key Pose)까지 제작했습니다.
그 과정에서는,
- Text-to-Image
- ComfyUI
- Animagine XL
- LoRA
- ControlNet
- DWPose / OpenPose
- AnimateDiff
- AutoSprite
- VRoid Studio
- Mixamo
- Blender
- 3D 모델에서 2D 스프라이트로의 변환
등을 검증했습니다.
하지만 격투 게임에서는 1장의 완성도가 높다고 끝이 아닙니다.
같은 캐릭터로,
서다.
걷다.
웅크리다(しゃがむ).
점프하다.
공격하다.
가드하다.
피격당하다.
다운되다.
필살기를 쓰다.
와 같은 다수의 상태를 갖추어야 합니다.
실제로 생성을 진행하면서,
- 포즈에 따라 다른 인물이 된다.
- 의상이 안정적이지 않다.
- 캐릭터의 방향성이 불안정하다.
- 신체 일부가 무너진다(崩れる).
- 불필요한 사지(手足)가 생성된다.
- 공격 모션으로서의 연속성을 유지하기 어렵다.
와 같은 문제들이 발생했습니다.
그럼에도 불구하고, 캐릭터의 레퍼런스(Reference), 턴어라운드(Turnaround), 키 포즈(Key Pose), 실루엣(Silhouette) 등을 정리하여 런타임 에셋(Runtime Asset)으로 게임에 가져다 놓는 단계까지 검토했습니다.
旧キャラクターのRuntime Asset構成案
런타임용 에셋 구성까지 검토했습니다. 하지만 이 규모의 소재를 일관성을 유지한 채 양산하는 것이 과제였습니다.
이미지 생성 쪽을 더 정교하게 만들려고 하자, 이번에는 LoRA나 ControlNet 등을 포함한 생성 환경 자체의 설계가 필요해졌습니다.
3D를 사용하는 방법도 검토했습니다.
그 경우에는,
라는 별도의 제작 파이프라인(pipeline)이 필요합니다.
여기까지 오니, 캐릭터 소재 제작 자체가 하나의 프로젝트에 가까운 규모가 되어 있었습니다.
제가 완성하고 싶은 것은, 캐릭터 생성 환경 그 자체가 아니라 브라우저에서 즐길 수 있는 격투 게임입니다.
그래서 이 방향을 계속하는 것을 멈췄습니다.
비주얼 제작에서 좌절했습니다.
방향 전환 후 결정한 비주얼 전략(Visual Strategy)은,
Minimal Readable Presentation — Stick Figure Edition (최소 가독성 표현 — 막대 인간 버전)
입니다.
캐릭터를 막대 인간으로 했습니다.
棒人間化後のOFFICE CLASH戦闘画面
비주얼 방침을 변경하여, 막대 인간을 MVP의 공식 사양으로 채택했습니다.
다만, 막대 인간을 일시적인 임시 소재로 둔 것은 아닙니다.
Phase 7 이후, 막대 인간을 OFFICE CLASH MVP의 공식 비주얼 사양으로 삼았습니다.
그리고 비주얼의 우선순위도 변경했습니다.
최우선으로 한 것은,
Gameplay Readability (게임플레이 가독성)
입니다.
그림을 세밀하게 하는 것보다,
- 어떤 행동을 하고 있는지
- 공격이 시작되었는지
- 가드하고 있는지
- 피격당했는지
- 카운터 대기 중인지
- Super가 발동했는지
알 수 있는 것을 우선했습니다.
두 경우 모두 막대 인간이 되기 때문에, 캐릭터 차이는 얼굴이나 의상이 아니라 자세(姿勢)와 모션(Motion)으로 부여하고 있습니다.
영업부의 방향성은,
Forward / Open / Energetic (전진적 / 개방적 / 활력 넘치는)
입니다. 전방 경사 자세, 큰 제스처(Gesture), 전방으로 퍼져나가는 이펙트(Effect)를 사용합니다.
개발부는,
Grounded / Compact / Controlled (접지된 / 컴팩트한 / 통제된)
입니다. 낮은 무게 중심, 작은 제스처, 방어적이고 정밀한 이펙트를 사용합니다.
캐릭터 이미지를 간략화한 만큼, Presentation 측에서는 다음 요소들을 추가했습니다.
- Hit Spark
- Guard Effect
- Counter Effect
- Skill Effect
- Hitstop
- Camera Shake
- Trail
- Super 연출
- K.O. 연출
Developerの仕様変更カウンターが成立した戦闘画面
개발자 '사양 변경 카운터': 캐릭터를 간략화했음에도 불구하고, 자세와 Effect로 상태가 파악되도록 했습니다.
Super에서는 화면을 어둡게 처리하고 기술명을 크게 표시합니다.
Salesの超必殺技「できます！」発動画面
세일즈의 필살기 '할 수 있습니다!': 막대 인간으로 변한 후에는 Character Art보다 기술명이나 Effect 등의 Presentation에 중점을 두었습니다.
K.O. 연출에도 회사를 테마로 한 표현을 넣었습니다.
K.O.時にINCIDENT CLOSEDと表示される戦闘画面
K.O. 연출 역시 회사 테마에 맞춰 'INCIDENT CLOSED'로 처리했습니다.
완성판에서는 상세한 인물 일러스트 대신, Motion, Effect, Super, K.O., Result 등의 Presentation을 통해 캐릭터성을 표현하고 있습니다.
Presentation을 만들면서는,
겉모습만 그럴싸하게 움직이면 되는 것이 아니다
라는 문제가 있었습니다.
Core에서 실제로 일어나고 있는 일과 화면상에서 표현되는 것을 일치시켜야 합니다. 예를 들어 영업부의 '무리한 납기 설정' 같은 경우입니다.
이 기술의 TIME_PENALTY는 일정 시간 동안 지속되는 상태가 아닙니다. 히트하는 순간, Core의 경기 타이머에서 180 프레임을 감소시킵니다. 따라서 Presentation 측에서 'TIME_PENALTY 상태'를 별도로 관리할 필요가 없습니다. 히트한 타이밍에 시계나 납기를 나타내는 연출을 보여주고 거기서 끝입니다.
반면, 개발부의 '스파게티 코드'로 발생하는 SLOW는 Core 쪽에 일정 시간 존재하는 Effect입니다. 이 경우는 Core에서 Effect가 적용되었을 때 표시를 시작하고, Effect가 종료될 때 사라지게 합니다.
Trap 자체도 Presentation 측만으로 수명을 관리하지 않고, Core에 Trap이 존재하는 동안에만 표시합니다.
여기서는,
Presentation 측에 또 다른 게임 규칙을 만들지 않도록 정리했습니다.
막대 인간으로 바뀜으로써 Presentation은 크게 바뀌었습니다. 하지만, 게임 규칙 자체까지 Presentation 쪽으로 옮기지는 않았습니다.
OFFICE CLASH에서는 수동 플레이뿐만 아니라 자동 테스트도 사용하고 있습니다. 주로,
- TypeScript의 타입 체크
- ESLint
- Vitest
- 전투 시뮬레이션 테스트
- Playwright E2E (End-to-End)
- Visual Regression
- Combat Diagnostics
등입니다.
Core를 Presentation으로부터 분리했기 때문에, 전투 로직은 브라우저 렌더링 없이도 검증할 수 있습니다. 반면, 실제 화면 조작, Scene 전환, Canvas 위의 시각적 요소 등은 Playwright 등을 사용해 확인하고 있습니다.
격투 게임에서는 하나의 수정이,
히트 판정(当たり判定).
guard.
counter.
Effect.
프레임 진행.
승패 판정.
등, 다른 부분에 영향을 줄 가능성이 있습니다. 따라서 변경한 부분만 보는 것이 아니라, 기존 테스트까지 포함하여 확인하는 방식으로 진행했습니다.
이번 개발에서는 AI를 상당히 많이 사용했습니다. 하지만,
'격투 게임을 만들어줘'
라고 한 번 요청했다고 해서 그 답변이 완성된 것은 아닙니다. 실제로는 개발을 단계로 나누었습니다.
요건을 결정한다.
사양을 고정한다.
Core를 구현한다.
캐릭터 고유 기술을 구현한다.
Super를 추가한다.
Battle Flow를 만든다.
Presentation을 구현한다.
테스트한다.
문제가 있으면, 사양 또는 구현으로 돌아간다.
이 반복 과정입니다.
기본적으로는 'AI'로 묶고 있지만, 구현에는 Codex나 Antigravity 등도 상황에 따라 사용했습니다. 한편,
- 무엇을 만들 것인지
- MVP(Minimum Viable Product)를 어디까지 할지
- 어떤 사양을 정답으로 삼을지
- 구현 결과를 채택할지
- 방향 자체를 변경할지
와 같은 판단은 제가 했습니다.
비주얼 역시 AI 이미지 생성을 그대로 따라가기보다는, 검증 결과를 바탕으로 Phase 7에서 Visual Strategy 그 자체를 변경했습니다.
이번 개발을 통해 전투 코어(Combat Core), 캐릭터 고유기, CPU 대전, 화면 전환 등을 단계적으로 구현할 수 있었습니다.
반면, 캐릭터 비주얼의 경우 AI 이미지 생성(AI image generation), LoRA, ControlNet, 3D를 통한 방법 등을 검증했지만, MVP 범위 내에서 일관된 격투 게임용 캐릭터 소재를 양산하는 단계까지는 나아가지 못했습니다.
그래서 이미지 생성 측면을 더 깊이 파고들기보다는, 게임 자체의 비주얼 전략(Visual Strategy)을 변경했습니다.
- 막대 인간(Stick figure)을 공식 사양으로 채택합니다.
- 게임 플레이 가독성(Gameplay Readability)을 우선시합니다.
- 캐릭터 차이는 모션(Motion)과 이펙트(Effect)로 표현합니다.
이러한 방향 전환을 거쳐, OFFICE CLASH가 완성되었습니다.
저에게 이번에 가장 인상 깊었던 것은, AI가 계속 만들게 하는 것보다, 중간까지 만든 결과물을 보고 이 방향을 유지할지 바꿀지를 판단하는 과정이었습니다.
AI와 함께 개발하면서, 먼저 실제로 작동하는 결과물을 만들고 그 결과를 보면서 다음 판단을 내리는 방식으로 진행할 수 있었습니다.
만들기 전에 계속 생각만 하는 것이 아니라, 형태를 갖춘 것을 실제로 만져본 후에 지속할지 바꿀지를 판단하는 것. 이번 막대 인간으로의 방향 전환도 그 예 중 하나였습니다.
처음에 상상했던 비주얼과는 다릅니다. 그럼에도 불구하고, 그 차이를 받아들이고 방향을 바꾼 덕분에 격투 게임으로서 끝까지 완성할 수 있었습니다.
"AI와 함께 개인적으로 브라우저 격투 게임을 만들 수 있을까?"라는 의문에서 시작한 OFFICE CLASH였지만, 실제로 진행하면서 전투 로직과 캐릭터 비주얼에서는 다른 종류의 문제들이 발생했습니다.
그리고 저는, 비주얼 제작에서 좌절하여 막대 인간을 선택했습니다. 결과적으로 그 막대 인간이 OFFICE CLASH의 공식적인 비주얼이 되었습니다.
당초 예정했던 모습과는 다르지만, 최종적으로는 처음부터 끝까지 플레이할 수 있는 격투 게임으로 완성되었습니다.
관심이 있다면, 영업부와 개발부를 꼭 싸워보세요.
OFFICE CLASH - 정시 없는 싸움 -
