AI 그림 게임 에셋 만들 때 투명 배경, 크기, 스프라이트 시트 기본

2026.10.18 · 밥

게임 개발 커뮤니티에서 AI 로 뽑은 캐릭터의 흰 배경을 지웠더니 캐릭터 흰 부분까지 같이 날아갔다는 글이 올라온 적이 있다. 사이드뷰 스프라이트 시트를 남들은 어떻게 만드는지 묻는 글도 있었고. 여러 동작을 한 장에 모으려면 칸 크기와 자르는 규칙도 맞춰야 하니, 투명도와 칸 규격부터 알아 두면 덜 헤맨다.

먼저 답부터. AI 그림을 게임 에셋으로 쓸 때 볼 건 세 가지다. 처음부터 투명 배경 PNG 로 받았는지, 한 칸 크기가 게임에서 쓸 크기와 맞는지, 그리고 여러 동작을 한 장에 담는 스프라이트 시트를 엔진이 어떤 규칙으로 자르는지. 아래는 2026년 10월 18일에 연 OpenAI, Godot 4.7, Unity 6.6 문서와 이 PC 에서 직접 돌려 본 작은 예제 기준이다.

AI 그림 투명 배경, 흰색을 지우면 안 되는 이유

흰 배경은 겉보기엔 비어 보여도 실제로는 흰 픽셀로 꽉 차 있다. 이걸 눈으로 확인하려고 이 PC 에서 64x64 짜리 작은 캐릭터를 두 벌 만들었다. 파란 몸통에 흰 눈 두 개. 하나는 흰 배경을 깔아서, 하나는 배경 없이 저장했다. 그다음 흰 배경판에서 빨강, 초록, 파랑 값이 모두 240 이상인 픽셀을 투명으로 바꿔 봤다. 흔히 하는 배경 지우기를 단순하게 흉내 낸 거다.

휴대폰에선 그림 글자가 작으니 같은 출력을 글자로도 붙여 둔다.

> check
hero_white.png  64x64  channels=3  hasAlpha=false  corner alpha=255
hero_clear.png  64x64  channels=4  hasAlpha=true  corner alpha=0
> remove white (>=240) from hero_white.png
eye pixels made transparent: 90 / 90
> sprite sheet
hero_sheet.png  256x64  hasAlpha=true
cell 64x64  columns=4  rows=1  frames=4

이번에 만든 흰 배경판은 RGB 로 저장해서 channels=3, 파일 안에 투명도를 담는 칸이 없다. 배경 없이 저장한 쪽은 channels=4 에 모서리 투명도가 0 이다. 문제는 흰색을 지운 결과. 눈 안쪽에 검사 영역으로 정한 90픽셀이 모두 투명해졌다. 배경과 캐릭터 흰 부분은 색만 보고는 구분이 안 되니까 당연한 결과다. 실제 그림은 테두리 근처에 배경이 살짝 섞인 픽셀도 있어서 더 지저분해지기 쉽다.

그래서 순서가 거꾸로다. 지우는 방법을 고민하기 전에 처음부터 투명 배경으로 받을 수 있는지를 먼저 보자. OpenAI 이미지 생성 가이드에는 API 로 만들 때 background 를 "transparent" 로 주고 출력 형식을 png 나 webp 로 하라고 나온다. 배경 값은 투명, 불투명, 자동 셋이다. JPEG 는 형식 목록엔 있지만 투명 배경 설명에는 없다. 다른 그림 도구도 투명 배경 옵션이 있는지부터 찾아보고, 없으면 그때 지우는 걸 생각하는 게 덜 망가진다.

받은 파일이 정말 투명한지는 .png 라는 이름이나 채널 수만으로는 모른다. 투명도 칸이 있어도 값이 전부 불투명일 수 있어서다. 위처럼 배경 부분의 투명도 값이 0 인지 보거나, 그림 편집기에서 아래에 다른 색 레이어를 깔아 배경이 비치는지 보면 된다.

게임 에셋 크기, 한 칸부터 정한다

같은 가이드에 권장 크기로 1024x1024, 가로 1536x1024, 세로 1024x1536 이 나온다. 사용자 크기도 되지만 조건이 붙고. 지금 가이드에 나온 모델 기준으로 가로세로가 16의 배수, 비율은 1:3 에서 3:1 사이, 한 변은 3840픽셀 이하, 전체 픽셀은 655,360 에서 8,294,400 사이다. 그러니 16의 배수라고 64x64 를 바로 받을 수 있을까? 안 된다. 근데 게임에서 캐릭터 한 칸이 64x64 나 32x32 라면 이 큰 그림을 그대로 쓰진 않는다. 결국 줄여야 하니까. 그림을 뽑기 전에 게임 안에서 한 칸을 몇 픽셀로 쓸지부터 정해 두는 게 순서다. 칸 크기가 정해져야 시트 크기도 계산이 된다.

Unity 를 쓴다면 칸 크기와 함께 Pixels Per Unit 도 같이 보면 좋고. Sprite 텍스처 설정 문서에는 그림의 몇 픽셀이 게임 세계의 한 단위가 되는지 정하는 값이라고 나온다. 칸이 64 인데 이 값이 다르면 같은 캐릭터가 장면마다 크기가 달라 보일 수 있다.

스프라이트 시트 규격, 같은 크기 칸으로 자를 때

스프라이트 시트는 걷기나 점프 같은 동작 프레임을 한 장에 격자로 늘어놓은 그림이다. 예제에서는 투명 프레임 네 장을 가로로 이어 256x64 시트를 만들었다. 64 칸으로 나누면 4열 1행, 프레임 넷. 같은 크기 칸으로 자르는 방식이라면 프레임마다 칸 크기가 같아야 한다. AI 가 동작별로 따로 뽑아 준 그림은 크기와 캐릭터 위치가 조금씩 다를 수 있으니, 시트로 묶기 전에 같은 칸 크기와 같은 발 위치로 맞춰 두는 게 먼저다. 크기가 다른 영역을 하나씩 따로 지정하는 방법도 엔진마다 있지만, 여기서는 같은 크기 격자만 본다.

Godot 에서는 두 가지 길이 있다. Sprite2D 문서를 보면 hframes 는 시트의 열 수, vframes 는 행 수, frame 은 지금 보여 줄 프레임이다. 예제 시트라면 hframes 4, vframes 1 이고 frame 은 0부터 3까지. 2D 스프라이트 애니메이션 문서는 AnimatedSprite2D 를 쓰는 방법도 보여 준다. SpriteFrames 패널에서 시트로 프레임을 추가하는 메뉴를 고르고, 가로세로 칸 수를 시트에 맞춘 뒤 쓸 프레임을 고르는 식이다.

Unity 는 Sprite Editor 문서 기준으로 텍스처의 Sprite Mode 를 Multiple 로 바꿔야 한 장에 여러 스프라이트를 담을 수 있다. 자르는 방식은 넷이다. Automatic 은 투명 픽셀을 경계로 그림을 찾아내고, Grid By Cell Size 는 같은 크기 칸으로, Grid By Cell Count 는 행과 열 수로 자른다. 나머지 Isometric Grid 는 마름모 칸용. Slice 설정 문서에 Pixel Size 는 칸의 가로세로 픽셀, Offset 은 격자 위치 조정, Padding 은 칸 사이 간격이라고 나온다. 예제 시트면 Grid By Cell Size 에 64x64, 간격 0 이다.

여기서 투명 배경 얘기가 다시 나온다. Unity 의 Automatic 은 투명 픽셀로 그림 사이를 나누니까, 흰 배경 시트에서는 기대한 대로 나눠지지 않을 수 있다. 문서 설명을 보고 한 추측이고 에디터에서 직접 시험하진 않았다.

좌우 방향은 그림 두 벌 대신 뒤집기

사이드뷰 게임이면 오른쪽 보는 프레임과 왼쪽 보는 프레임이 다 필요하다. AI 한테 양쪽을 따로 그려 달라고 하면 좌우 그림이 미묘하게 다르게 나올 수 있다. 엔진에서 뒤집으면 한 벌로 끝난다. Godot Sprite2D 는 flip_h 를 켜면 가로로 뒤집히고, Unity 는 SpriteRenderer.flipX 가 X 축으로 뒤집는다. 다만 칼을 늘 오른손에 드는 것처럼 좌우가 달라야 하는 캐릭터라면 뒤집기로는 안 되니 그때만 따로 그린다.

픽셀아트 에셋이 흐려질 때

도트 그림을 키워서 쓰면 테두리가 뿌옇게 번질 때가 있다. 왜 그럴까? 엔진이 확대하면서 주변 픽셀을 섞어서. Godot 는 노드마다 texture_filter 를 정할 수 있는데, CanvasItem 문서 설명으로 Nearest 는 가장 가까운 픽셀 하나만 읽고 Linear 는 주변 네 픽셀을 섞는다. 프로젝트 전체 기본값은 ProjectSettings 문서의 rendering/textures/canvas_textures/default_texture_filter 다. 도트 게임이면 여기를 Nearest 로 두는 게 편하다. Unity 쪽은 텍스처 설정의 Filter Mode 를 Point 로. 문서에는 가까이서 보면 각진 모양이 된다고 나오는데, 도트 그림에선 그게 원래 모양이다.

배율도 같이 본다. Godot 해상도 문서는 픽셀아트라면 stretch mode 를 viewport 로, scale mode 를 integer 로 두라고 한다. 정수 배율로만 키워서 픽셀 크기가 들쭉날쭉해지는 걸 막는 설정이다. 640x360 화면을 1366x768 창에 띄우면 2배인 1280x720 으로 그리고 남는 곳은 검은 띠로 채운다는 예시도 있다.

에셋으로 넣기 전에 보는 순서

받은 그림은 배경이 실제로 투명한지부터 본다. 같은 크기 칸으로 시트를 만들 거면 프레임마다 칸 크기와 발 위치를 맞추고, 시트 크기가 칸 크기로 나누어떨어지는지 확인한다. 엔진에 넣은 뒤에는 잘린 범위랑 확대했을 때 모양까지.

이번 예제는 sharp 로 만든 작은 그림으로 돌린 거고, 엔진 에디터에서 직접 불러와 자른 건 아니다. 메뉴 이름은 엔진 버전마다 바뀔 수 있으니 쓰는 버전 문서를 한 번 더 보자.

다음엔 혼자 만든 게임에 넣을 무료 폰트와 음원의 라이선스, OFL 이랑 CC 를 읽는 법을 적으려고 한다.