HUD를 시안 조각으로 다시 그렸다

전투 HUD가 게임과 어울리지 않았다. 처음 만든 HUD는 남색 판에 얇은 청동 테를 두른 모양이었는데, 종이 인형 세계 위에 얹으니 따로 노는 느낌이 났다. 왼쪽 위 상태판은 너무 컸고, 오른쪽 아래 스킬 칸은 모바일 게임처럼 보였다. 배치를 몇 번 고쳐 봤지만 결국 있던 부품을 코드로 옮겨 놓는 것에 가까웠고, 디자인이 바뀌지는 않았다.

배치와 그림을 나눴다

로컬 이미지 생성 모델(Qwen Image)은 그림 한 장은 잘 뽑지만, 화면 전체를 맡기면 칸 개수나 비율을 슬쩍 바꾼다. 그래서 역할을 나눴다.

• 시안: 화면 배치와 분위기는 따로 뽑아 온 시안 한 장으로 정한다.
• 생성 모델: 시안을 부품 단위로 잘라 넣고, 글자와 아이콘만 지운 깨끗한 부품으로 다시 그리게 한다.
• 코드: 부품을 9칸 나누기로 늘려 조립하고 배치만 맡는다.

시안은 크림색 종이를 골판지 받침에 겹쳐 붙이고, 종이 라벨과 테이프와 나뭇잎으로 꾸민 크라프트 종이 판이었다. 종이 세계관이 UI에 자연스럽게 묻어나서 이걸 UI 방향으로 정했다.

부품 만들기

시안에서 상태판, 스킬 판, 아이템 판, 칸, 키 칩, 게이지, 미니맵 틀을 좌표로 잘랐다. 작은 조각을 그대로 넣으면 결과가 흐려서 긴 변을 1024로 키워 참고 그림으로 넣었다. 프롬프트는 "질감과 찢긴 가장자리는 그대로 두고 글자와 칸만 지운 빈 판"으로 했다. 부품마다 시드 두 개로 뽑아 나은 쪽을 골랐다.

게이지는 빨간 막대 하나만 그리게 하고, 빨간 부분의 색상만 돌려서 빈 홈, 체력, 마나, 경험치 네 가지를 만들었다. 베이지 테와 테두리 선은 채도가 낮아 그대로 남는다. 판은 Godot의 NinePatchRect로 가로를 늘리되, 탭이나 나뭇잎이 있는 모서리는 고정 구역에 넣어 찌그러지지 않게 했다.

게임에 맞춘 배치

시안을 그대로 쓰지는 않았다. 게임은 스킬이 12칸(A–H, Shift+A–H)이라 6칸씩 두 줄로 줄였다. 초상화는 빼고 체력, 마나, 경험치만 남긴 상태판은 왼쪽 위로 올렸다. 숫자 키로 쓰는 아이템 칸은 왼쪽 아래, 손이 자주 가는 스킬은 오른쪽 아래에 두고 가운데는 비워 전투 화면을 넓혔다. 아이템은 퀵슬롯 다섯 칸과 물약 한 칸으로 정리했다.

감수한 것

스킬 칸을 두 줄로 넣느라 시안의 한 줄 칸보다 작다. 퀵슬롯을 여섯에서 다섯으로 줄여서 예전 저장의 여섯째 칸은 빠진다. 가방, 상점, 스킬 창, 대화창은 아직 예전 남색 판이라 지금은 화면 안에 두 스타일이 섞여 있다.