기능은 다 되는데 화면 연출이 심심하다

게임기는 3부까지 기능적으로 완성됐습니다. 레버를 당기면 맥주가 차고, 버튼을 치면 블랙잭이 돌아갑니다. 그런데 화면을 가만히 보고 있으면 뭔가 아쉽습니다. 정확하게 동작하는 화면과 살아있는 화면은 다릅니다. 오락실 기계의 절반은 촐싹대는 연출입니다.

그래서 하루를 통째로 연출에 썼습니다.

HMI 화면 애니메이션 다섯 종 세트

HMI 화면 애니메이션은 매 프레임 코드가 컨트롤 속성을 바꿀 수 있어서, 엔진 확장 없이 코드만으로 만들어집니다. 다섯 개를 한 번에 넣었습니다.

  • 판정 펀치 — PERFECT가 화면에 그냥 뜨지 않고, 60% 커진 채 등장해서 스르륵 제자리를 찾습니다. 종이에 도장 찍는 맛입니다.
  • 목표 근접 점멸 — 수위가 목표선 ±5%에 들어오면 목표선이 깜빡이기 시작합니다. “지금 놔!” 하는 신호입니다. 손에 땀이 나는 구간이 생겼습니다.
  • 점수 카운트업 — 최종 점수가 0부터 드르륵 올라갑니다. 끝에서 감속하는 이징까지. 숫자가 구르는 동안은 다들 화면만 봅니다.
  • 거품 — 따르는 동안 수면 위에 크림색 거품층이 부풀고, 잠그면 서서히 가라앉습니다. 맥주의 절반은 거품이니까요.
  • 줄기 분출 — 밸브를 여는 순간 줄기가 꼭지에서 아래로 쭉 뻗고, 따르는 동안 주파수가 다른 사인파 두 개를 섞어 콸콸 넘실댑니다. 기계적 반복이 없는 출렁임입니다.

전부 “값이 바뀐 프레임에만 대입”하는 기존 성능 원칙 안에서 돌아갑니다.

코드로 그린 술집 배경

술집 배경도 손봤습니다. 어두운 나무 판벽, 좌우 선반의 술병들, 천장의 펜던트 램프 세 개, 그리고 화면 하단을 가로지르는 바 카운터입니다. 이제 맥주잔이 허공이 아니라 카운터 위에 올라앉아 있습니다.

코드로 그린 술집 배경 — 판벽, 술병 선반, 펜던트 램프, 바 카운터

이 배경은 이미지 에디터가 아니라 코드로 그렸습니다. 판자 폭, 병 배치(시드 고정 랜덤), 조명 글로우, 비네트까지 전부 스크립트 파라미터라 “램프 하나 더” 같은 수정이 코드 한 줄입니다.

캐릭터 코드 드로잉 수난기 — 도형 곰 4대의 몰락

원작 〈Root Bear〉에는 따르는 걸 지켜보는 곰 손님이 있습니다. 우리도 넣기로 했습니다. 따르는 양에 따라 표정이 변하는 캐릭터입니다 — 목표에 다가가면 눈을 반짝이고, 넘치면 식은땀을 흘리고, 판정에 웃거나 웁니다.

문제는 그림이었습니다. 코드로 도형을 조립해 곰을 그리기 시작했는데…

곰 4대의 진화 — 플랫 도형, 코믹 왕눈, 전신, SVG 곡선. 그리고 전부 탈락

네 번을 다시 그렸습니다. 플랫 도형 곰 → 왕눈 코믹 곰 → 전신 곰 → 베지어 곡선 곰. 버전마다 나아지긴 했는데, 평은 한결같았습니다.

“도형으로만 끼워맞춘 캐릭터잖아.”

맞는 말이었습니다. 원과 사각형과 곡선을 아무리 정성껏 쌓아도 일러스트는 안 됩니다. 곰을 접고 바텐더(술집이니까)로 컨셉을 바꿔 SVG로 한 번 더 그렸지만 —

SVG로 그린 바텐더 — 여전히 도형 사람

여전히 도형 사람이었습니다. 코드 드로잉의 한계를 인정할 시간이었습니다.

AI가 브라우저를 열고 생성 AI에게 일러스트를 시켰다

여기서 이 프로젝트에서 제일 이상한 장면이 나옵니다. 화면을 만들던 AI가 직접 크롬을 열고, Gemini에게 그림을 주문했습니다.

프롬프트의 핵심은 “같은 캐릭터로 표정 5개를 한 장에 그려줘”였습니다. 따로따로 생성하면 캐릭터가 매번 달라지는데, 한 장의 스프라이트 시트로 요청하면 일관성이 저절로 보장됩니다. 생성된 원본을 내려받아 배경을 자동으로 벗겨내고, 다섯 조각으로 잘라 게임에 꽂는 것까지 — 사람이 한 건 “응, 그거 좋네” 한마디였습니다.

최종 바텐더 — 잔 닦기, 눈 반짝, 진땀, 엄지척

한 장으로 뽑은 바텐더 스프라이트입니다. 왼쪽부터 잔 닦기(대기) · 눈 반짝(목표 근접) · 진땀(넘침) · 엄지척(성공). 실패했을 때의 시무룩한 얼굴은 아래 게임 화면에 나옵니다.

콧수염 바텐더가 바 카운터 뒤에 상체만 내밀고 서서, 제가 따르는 걸 지켜봅니다. 목표에 다가가면 눈이 반짝이고(✦), 넘치면 수건으로 진땀을 닦고, 성공하면 엄지를 치켜들고, 망치면 눈물 한 방울과 함께 시무룩해집니다.

실제 게임 화면에서는 이렇습니다. 따르는 동안은 잔을 닦으며 곁눈질하다가 —

따르는 중 — 바텐더는 잔을 닦으며 지켜본다

BAD가 뜨는 순간, 같이 웁니다.

BAD 판정 — 바텐더도 눈물을 흘린다

도형 곰 네 마리의 명복을 빕니다. 너희의 희생으로 워크플로우가 완성됐습니다.

내친김에 타이틀·블랙잭 배경까지 전부 생성

배경 이미지는 같은 Gemini 대화에서 전부 뽑았습니다. 타이틀은 햇살 드는 라운지 (블러와 크림 베일을 얹어 UI가 앞으로 튀게), 블랙잭은 샹들리에와 슬롯머신 실루엣이 있는 카지노 홀입니다. 세 화면이 각자의 공기를 갖게 됐습니다.

게임 선택 타이틀 — 밝은 라운지

블랙잭 베팅 화면 — 샹들리에와 슬롯머신이 있는 카지노 홀

베팅 화면입니다. 카드가 깔리기 전이라 배경이 그대로 보입니다 — 샹들리에, 커튼, 안쪽의 슬롯머신 실루엣. 아래쪽은 펠트 테이블 위입니다.

블랙잭 — 카드가 깔리면 이렇게. 27로 BUST

판이 시작되면 그 위로 카드가 깔립니다. 3부에서 만든 색상 배지(BUST=빨강)도 그대로입니다.

여담이 하나 있습니다. 블랙잭용으로 딜러 캐릭터까지 뽑았었는데 — 날카로운 인상에 팔짱 끼고, 제가 이기면 화들짝 놀라고 지면 씩 웃는 얄미운 친구였습니다 — 화면에 세워 보니 카드와 자리 싸움이 나서 최종 탈락했습니다. 생성은 몇 분이라 이런 시도와 폐기가 부담이 없습니다. 그게 이 워크플로우의 진짜 힘입니다.

화면 연출과 AI 일러스트 워크플로우 교훈

  • 연출은 기능의 장식이 아니라 게임의 절반입니다. 같은 로직인데 거품 하나, 점멸 하나에 손맛이 달라집니다.
  • 도구마다 잘하는 게 다릅니다. 배경처럼 기하학적인 그림은 코드가 빠르고, 캐릭터처럼 유기적인 그림은 생성 AI가 압도적입니다. 네 번 그려보고 나서야 인정했습니다.
  • AI가 AI를 쓰는 건 이제 워크플로우입니다. 에이전트가 브라우저를 조작해 생성 모델에 외주를 주고, 결과물을 후처리해 제품에 꽂는 파이프라인이 대화 몇 마디로 돌아갑니다.

기하학적인 배경은 코드로, 유기적인 캐릭터는 생성 AI로 — 도구를 나눈 것이 이번 편의 결론입니다.

다음 편

화면은 살아났으니 이제 실물 차례입니다. 터치 패널 재배포, 3D 프린트 버튼 케이스 조립, 그리고 ERM 진동 레버 — 손끝의 하드웨어가 이 화면과 만나면 시리즈 완결입니다.

▶️ 5부(완결): 떨리는 레버, 두 번의 헛다리 — 그리고 측정이 이겼다

🍺 이전 편: 1부 · 2부 · 3부

문의