Gemini API로 RPG 실내맵 그리기, Tilewise로 필드맵 타일 만들기

지금까지 AI로 맵을 만들고, 캐릭터를 뽑고, LoRA로 NPC를 양산하고, 지난 5편에서는 Excalibur.js로 실제로 걸어다니는 게임까지 만들었습니다. 이번 편은 그다음 이야기, 집 안으로 들어가는 이야기입니다.

AI로 고전RPG 만들기 6편 — 실내맵과 필드맵까지 갖추다

문제 — 집은 있는데 실내맵이 없다

게임에 마을을 만들었고 집도 있습니다. 그런데 문을 열고 들어가려고 하면… 들어갈 수가 없어요.

집 문 앞에서 "들어갈 수 없습니다…" — 실내맵이 없어서 못 들어가는 상태

이 게임은 타일맵이 아니라 단일 이미지를 레이어로 쓰는 방식이에요. 5편에서 통짜 맵 이미지를 그대로 쓰기로 했었죠. 그러니까 실내맵도 통째로 된 이미지가 한 장 필요합니다. 직접 그릴 실력은 없으니, 이번에도 AI한테 그려달라고 하겠습니다.

Stable Diffusion vs Gemini API — 탑뷰 실내맵 생성

처음엔 Stable Diffusion에게 탑뷰 실내맵을 그려달라고 했습니다. 그런데 프롬프트를 아무리 고도화해도 RPG 실내맵으로 쓸 만한 수준까지는 안 올라오더라고요.

그래서 고품질 이미지를 위해 Gemini API를 쓰기로 했습니다. 이전 편들에서는 비용 때문에 Gemini API를 마음껏 못 썼는데요. 이번엔 쓸 수 있었습니다. 왜냐하면… 드디어 제가 재취업에 성공했거든요. (1년전 이야기 입니다ㅠㅠ)

재취업 성공 기념 — 이제 Gemini API 비용을 감당할 수 있다

Gemini API로 뽑은 탑뷰 실내맵은 Stable Diffusion보다는 확실히 나아졌지만, 처음엔 여전히 어색한 이미지들이 나왔습니다. 여러 차례 프롬프트를 수정한 끝에 겨우 제대로 된 탑뷰 실내맵이 나왔어요.

AI로 생성한 탑뷰 실내맵

광고를 클릭해주시면 블로그운영에 큰 힘이 됩니다.

AI 이미지 부분 수정의 한계 — 계단 위치 옮기기 실패

그런데 계단 위치가 마음에 들지 않았습니다. 그래서 AI한테 “여기 계단 지우고 저기로 옮겨줘”라고 했죠.

Stable Diffusion으로도 해보고 Gemini API로도 해봤지만, 정확한 위치를 원하는 방향으로 수정하지는 못했습니다. 실패, 이것도 실패, 또 실패. 생성형 이미지 AI는 “분위기”는 잘 바꾸는데 “좌표”를 지정한 편집에는 아직 약하다는 걸 다시 확인했습니다.

결국 계단은 파이썬으로 직접 그렸습니다. 정확한 위치가 필요한 작업은 코드가 낫더라고요.

SAM3로 오브젝트 레이어 분리와 충돌 마스크 만들기

실내맵 이미지가 완성되면 끝이 아닙니다. 게임에서 쓰려면 두 가지가 더 필요해요.

SAM3로 오브젝트를 레이어로 분리 — 캐릭터가 가구 앞뒤로 자연스럽게 지나가도록
벽을 충돌 마스크로 만들기 — 캐릭터가 벽을 뚫고 지나가지 않도록

여기서 문제가 하나 있었습니다. 이미지마다 벽 색상이 달랐어요. AI가 그린 실내맵이라 집마다 벽 톤이 제각각입니다. 그래서 충돌 마스크는 색상 기반과 위치 기반을 섞은 혼합 전략으로 만들었습니다. 색만으로 벽을 찾으면 바닥과 비슷한 색에서 실수하고, 위치만으로 찾으면 방 구조가 바뀔 때마다 깨지니까요.

실내맵 완성 — 어머니와 촌장님 만나기

이제 내부 지도가 생겼으니 어머니를 만나러 가봅시다.

실내맵에서 어머니와 대화 — "아직 촌장님께 다녀오지 않았어? 어서 가봐."

마을의 두 번째 영역에 있는 촌장님도 만나러 가봅시다.

촌장님 집 실내맵 — NPC 대화창

집 밖에서 문 앞까지 걸어가고, 문을 열고 들어가서, 실내에서 NPC와 대화하는 흐름이 드디어 이어졌습니다.

필드맵은 타일 방식으로 — Gemini로 같은 화풍의 타일 그리기

여기서 중요한 결정을 하나 해야 했습니다. 마을 밖 필드맵은 타일 방식으로 하기로요.

AI야 고전RPG 필드맵 그려줘

새 타일을 처음부터 그리면 기존 마을과 화풍이 안 맞을 테니, 기존 맵 이미지를 Gemini에 같이 넘겨서 “이 화풍으로 타일을 그려줘”라고 했습니다.

Gemini로 생성한 필드맵 기본 타일 — 흙길, 풀밭, 숲, 바위, 모래, 물

타일 경계 처리 — Tilewise로 심리스 타일 만들기

필드맵 타일 시스템을 만들면서 가장 어려웠던 부분은 경계 처리였어요. 풀밭이 물과 만나는 곳, 숲이 평지와 만나는 곳. 이런 곳들의 경계가 자연스럽게 이어지지 않으면 게임이 굉장히 조잡해 보입니다.

타일 경계 처리 — 풀밭과 물이 만나는 부분

그래서 Tilewise라는 서비스를 활용했습니다. 기본 타일 이미지만 올리면 게임용 심리스(seamless) 타일을 바로 뽑아주는 서비스예요. 지형 타일을 빠르게 확인하고 실험하는 데 정말 유용했습니다.

Tilewise — 심리스 텍스처와 게임 엔진용 타일셋을 만들어 주는 AI 서비스

오토타일 원리 — 0~15 인덱스로 4x4 시트에서 고르기

경계 타일을 고르는 원리는 이렇습니다. 각 타일 주변에 특정 지형이 몇 방향에 있느냐에 따라 0에서 15번 인덱스를 계산하고, 그 인덱스에 해당하는 4x4 시트의 셀을 골라 그리는 거예요. 흔히 오토타일(비트마스크 타일링)이라고 부르는 방식입니다.

원리를 코드로 옮기면 대략 이런 모양입니다:

// 상(1)·우(2)·하(4)·좌(8) 네 방향에 같은 지형이 있으면 비트를 켠다 → 0~15
function autotileIndex(map, x, y, terrain) {
  let index = 0;
  if (map.get(x, y - 1) === terrain) index |= 1;
  if (map.get(x + 1, y) === terrain) index |= 2;
  if (map.get(x, y + 1) === terrain) index |= 4;
  if (map.get(x - 1, y) === terrain) index |= 8;
  return index;
}

// 4x4 타일 시트에서 해당 인덱스의 셀을 잘라 그린다
const col = index % 4;
const row = Math.floor(index / 4);

타일 시트 자체는 아까 Tilewise가 다 만들어 주니까, 저는 코드에서 시트를 인식하도록 바이브 코딩만 하면 됐습니다.

필드맵 지형 배치도 — 풀밭·숲·물·길 영역

이렇게 해서 필드맵까지 나가서 움직이는 게 가능해졌습니다.

정리 — RPG 실내맵·필드맵 만들기에서 배운 것

탑뷰 실내맵: Stable Diffusion보다 Gemini API가 낫다. 다만 프롬프트를 여러 번 다듬어야 한다.
AI 이미지 부분 수정: “계단을 저기로 옮겨줘” 같은 위치 지정 편집은 아직 실패. 정확한 좌표가 필요하면 파이썬으로 직접 그리는 게 빠르다.
충돌 마스크: AI가 그린 맵은 벽 색이 제각각이라 색상 기반 + 위치 기반 혼합이 필요하다.
필드맵: 넓은 맵은 타일 방식. 기존 맵을 Gemini에 같이 넘기면 화풍이 맞는 타일을 그려 준다.
타일 경계: Tilewise로 심리스 타일을 만들고, 오토타일(0~15 인덱스, 4x4 시트)로 경계를 고른다.

시리즈 흐름

1편: SDXL Turbo로 맵, SAM v3로 지형 마스크. 캐릭터는 실패
2편: Gemini(Nano Banana Pro)로 캐릭터 일관성 해결. API 비용 문제
3편: 로컬 OpenPose + Canny 파이프라인, 뒷모습만 Gemini 하이브리드
4편: LoRA 학습 + SAM3 데이터 증강 + 리터치 자동화. GPU 병목
5편: Excalibur.js로 맵 이동 구현 + 시청자 추천 PixelLab 발견
6편(이번): Gemini API로 실내맵, Tilewise로 필드맵 타일과 오토타일 경계 처리

다음엔 뭘 하면 좋을까요? AI에게 배경음악 작곡을 부탁해 볼까요, 아니면 전투씬을 만들어 볼까요? 원하시는 걸 댓글로 남겨 주시면 그것부터 먼저 시도해 보겠습니다.

다음 영상에서 만나요.

Gemini API로 RPG 실내맵 그리기, Tilewise로 필드맵 타일 만들기 — 오토타일 경계 처리까지 (AI RPG 6편)