노트버디 개발기 4: 초상화에서 픽셀 게임으로 · DK 기술 블로그

TL;DR

친구가 집과 마당을 오가는 픽셀 공간을 만들고, 방향과 동작에 맞는 그림을 골라 보여주도록 했습니다.
무료 초상화 변환과 AI 방향별 스프라이트는 서로 다른 선택입니다. 저장한 모습은 홈과 던전에서 함께 사용합니다.
바닥에 닿는 위치, 가구에 가려지는 순서, 걷고 멈추는 동작을 따로 맞췄습니다. 이미지 한 장을 만드는 것만으로 끝나는 작업은 아니더라고요.

들어가며

3편에서는 그림에서 친구를 만들고, 성격과 진화에 함께한 경험을 담은 이야기를 했습니다. 이번에는 그 친구를 화면 안에서 움직이게 만든 과정입니다.

처음 던전을 만들었을 때는 캐릭터 그림을 작게 줄여서 이동시키면 어느 정도 게임처럼 보일 거라고 생각했습니다. 그런데 직접 보니 제가 원했던 모습과는 꽤 달랐습니다. 그림 한 장이 흔들리며 이동하는 느낌이 강했거든요.

제가 떠올린 건 위에서 조금 비스듬히 내려다보는 픽셀 게임이었습니다. 친구가 마당을 걷다가 집에 들어가고, 가구 뒤를 지나갈 때는 몸이 가려지는 모습이요. 그래서 홈을 좁은 방 화면에서 집과 마당을 오가는 공간으로 바꾸면서, 캐릭터를 보여주는 방식도 함께 손보기 시작했습니다. 😊

처음 들어온 마당의 모습입니다. README와 스토어 소개에 사용하는 앱 UI 데모 캡처이고, 등장하는 Mori는 무료로 픽셀 변환한 기본 모습입니다. 아래에서 설명할 방향별 AI 스프라이트와는 다릅니다. 이미지는 누르면 크게 볼 수 있습니다.

픽셀로 줄이는 것과 걷는 모습을 만드는 건 달랐습니다

초상화를 작은 해상도로 줄이면 색과 실루엣은 유지할 수 있습니다. 비용도 들지 않고요. 다만 정면 그림 한 장에는 옆모습이나 뒷모습이 들어 있지 않습니다. 그림을 좌우로 뒤집는 것만으로 뒤돌아 걷는 모습을 만들기는 어렵겠죠.

그래서 방향별 자세를 한 장에 모은 스프라이트 시트를 사용하는 경로를 추가했습니다. 지금 요청하는 구성은 네 방향에 네 동작씩, 총 16칸입니다.

구분	한 장 안에 담는 내용
위에서 아래로 네 줄	정면, 왼쪽, 오른쪽, 뒷모습
각 줄의 네 칸	걷기 A, 기본 자세, 걷기 B, 눈 감기
걷는 동안	해당 방향의 걷기 A → 기본 → 걷기 B → 기본을 반복
멈춘 동안	기본 자세를 유지하고 가끔 눈 감기 표시

걷는 장면에서는 이 중 필요한 칸을 잘라 그립니다. 홈에서는 실제 이동한 거리에 맞춰 걷기 프레임을 바꾸고, 멈추면 기본 자세로 돌아오도록 했습니다.

몸의 형태도 신경 써야 했습니다. 다리가 없는 친구에게 걷는 다리를 새로 붙이면 다른 캐릭터가 되어버리니까요. 다리가 없으면 미끄러지거나 몸을 움직이는 방식으로, 머리가 여러 개면 그 수와 배치를 유지하도록 요청합니다. 물론 이런 지시를 적는다고 결과가 항상 맞지는 않습니다.

생성된 그림을 읽을 때는 16개의 몸체를 구분할 수 있는지, 서로 겹치거나 가장자리가 잘렸는지, 크기가 지나치게 다른지 확인합니다. 칸이 정상이라는 검사와 친구를 닮았다는 판단은 별개라서, 방향과 외형의 자연스러움은 여전히 눈으로 봐야 하더라고요. 이 처리는 스프라이트 생성·판독 모듈에 들어 있습니다.

처음 홈에 들어갈 때 모습을 고르게 했습니다

처음에는 친구를 만들 때 이동용 그림까지 함께 생성하는 방안도 생각했습니다. 지금은 해당 외형으로 홈에 처음 들어왔을 때 직접 고르는 방식으로 정리했습니다.

AI 픽셀 캐릭터: 저장된 외형 설명으로 방향별 시트 한 장을 요청합니다. 이미지 생성 요청 한 번을 사용합니다.
무료 기본 이미지: 현재 초상화를 앱에서 픽셀 변환합니다. 추가 AI 요청은 없지만 방향별 자세가 새로 생기지는 않습니다.

AI 경로도 원본 초상화를 직접 편집하는 image-to-image 방식은 아닙니다. 3편에서 소개한 것처럼 이미 읽어둔 외형 특징을 글로 전달합니다. 따라서 초상화와 작은 캐릭터 사이에 생김새 차이가 남을 수 있습니다.

저장한 뒤에는 홈에 들어갈 때마다 다시 만들지 않습니다. 친구가 걷거나 집 안으로 이동할 때도 AI를 부르지 않고요. 진화 등으로 초상화가 바뀌면 그 외형에 맞는 모습을 준비하지만, 같은 그림을 그대로 쓰는 상황에서 재입장이나 레벨 상승만으로 자동 생성하지는 않습니다.

배경과 가구, 친구를 따로 그렸습니다

방 전체를 예쁜 이미지 한 장으로 만들면 보기에는 좋을 수 있습니다. 하지만 그 안에 그려진 의자를 옮기거나, 친구가 책장 뒤로 지나가게 하려면 각각을 따로 다룰 수 있어야 했습니다.

지금은 바닥과 벽을 그리고, 그 위에 집이나 가구를 놓고, 친구를 별도로 그립니다. 마당의 잔디와 길은 반복되는 작은 칸으로 만들고, 집과 가구는 준비된 개별 이미지에서 가져옵니다. 홈을 열 때 방 전체를 AI로 새로 그리는 구조는 아닙니다.

집 안은 마당과 별도의 공간입니다. 기존 Mori 데모로 1.4.15 테스트 UI를 새로 캡처했으며, 실제 사용자 데이터나 새 AI 요청은 사용하지 않았습니다.

이때 눈에 많이 띄는 건 작은 위치 차이였습니다. 그림의 가운데를 좌표에 맞추면 프레임마다 몸이 뜨거나 발이 바닥 안으로 들어갈 수 있습니다. 그래서 발이나 몸의 아래쪽을 같은 바닥 위치에 맞춰 그렸습니다.

가려지는 순서도 중요합니다. 홈에서는 바닥에 깔리는 러그와 벽 장식을 먼저 그리고, 나머지 가구와 친구는 바닥 쪽 세로 위치에 따라 그리는 순서를 정합니다. 친구가 가구 뒤에 있으면 가구가 나중에 그려져 몸을 가리고, 앞으로 나오면 친구가 나중에 그려지는 식입니다.

움직임은 미리 계산한 경로를 따라 이어집니다. 출발할 때 속도를 올리고 목적지에 가까워지면 늦추며, 잠깐 멈춘 뒤 다음 장소로 향하도록 했습니다. 카메라도 친구의 위치를 따라 움직입니다. 홈 화면 코드와 이동 코드를 나눠 둬서, 공간을 그리는 일과 걷는 동작을 각각 조정할 수 있게 했습니다.

빈 마당은 조금씩 채워갈 수 있게요

처음부터 장식이 가득한 집을 주기보다는 친구와 지내면서 채워가는 공간으로 만들고 싶었습니다. 현재 가구는 실내 12종, 마당 36종으로 총 48종입니다.

꾸민 마당과 보유 가구를 함께 보는 화면입니다. 캡처용 임시 코인으로 가구를 사고, 규칙을 통과한 배치를 적용한 데모입니다. 실제 사용자의 구매 내역이나 이 장면을 위한 AI 배치 결과는 아닙니다.

사용자는 가구를 고르고, 어디에 놓을지는 친구에게 맡깁니다. 가구를 샀다고 바로 AI가 움직이지는 않고, 직접 ‘꾸며 줘’를 요청할 때 배치를 제안하게 했습니다. 그 뒤 운반하고 이동하는 모습은 저장된 결과를 보여주는 연출이고요.

여기에도 “예쁘게 놓아줘” 외에 확인할 것이 꽤 있습니다. 정말 가진 가구인지, 길을 막지는 않는지, 저장 중 상태가 바뀌지는 않았는지 같은 부분인데요. AI에게 어디까지 맡기고 코드에서 무엇을 확인하는지는 다음 편에서 이어서 다뤄보겠습니다.

집에서 보던 친구가 던전에도 들어갑니다

집과 던전의 캐릭터를 따로 관리하면 한쪽만 새 모습으로 바뀌는 문제가 생기기 쉽습니다. 실제로 친구를 바꾼 뒤에도 던전에서 이전 모습이 보이는 문제를 확인한 적이 있었습니다.

그래서 현재 친구와 성장 단계, 원본 초상화가 맞는지 확인한 뒤 저장된 이동 모습을 사용하도록 했습니다. 그림을 불러오는 동안 친구가 바뀌었을 때 뒤늦게 도착한 이전 그림을 붙이지 않는 것도 함께 확인합니다. 준비된 방향별 시트가 있으면 홈과 던전에서 같이 사용하고, 시트가 없는 경우에는 초상화 기반의 기본 표현을 사용합니다.

심해 궁전의 입장 전 미리보기입니다. 마당에서 만난 Mori가 같은 초상화 기반 모습으로 등장합니다.

던전은 산책 중 확률로 발견합니다. 발견한 시점부터 24시간 동안 열리고, 클리어하거나 닫히기 전에는 다른 던전이 나오지 않습니다. 안에서는 친구가 자동으로 이동하고 카메라가 따라가며, 사용자는 갈림길에서 선택합니다. 직접 방향키로 계속 조작하는 방식은 아닙니다.

출시 후에도 다듬어갈 부분은 남아 있습니다

앞선 글에서는 심사를 기다리고 있다고 적었는데요. 그사이 노트버디 1.4.13이 승인돼 Anna 스토어에 공개됐습니다. 여기서 앱을 만나볼 수 있습니다.

심사 피드백에는 전투 화면의 친구 외형이 다른 화면보다 거칠고, 초상화와의 스타일 일관성이 아쉽다는 내용도 있었습니다. 출시를 막는 문제는 아니었지만, 제가 계속 다듬어야 할 지점을 짚어준 의견이었습니다.

방향별 그림을 준비하고 발 위치와 가림 순서를 맞춘 뒤에도, 모든 친구가 자연스럽게 움직인다고 말하기는 어렵습니다. 체형이 복잡할수록 작은 화면에서 특징을 살리기 어렵고, 생성된 옆모습이 원래 친구와 다르게 나올 수도 있으니까요. 지금은 이 구조 위에서 그림과 움직임을 조금씩 맞춰가는 단계입니다.

다음 5편에서는 ‘AI에게 어디까지 맡길 것인가’를 주제로, 가구 배치와 게임의 보상·상태를 다루는 기준을 소개하겠습니다. 친구가 자기 취향대로 집을 꾸미는 것과, 게임 규칙까지 마음대로 바꾸는 것은 어디서 구분했는지 이야기해보려 합니다.