게임을 만들다 보면 여러 곳에서 구한 이미지를 한 프로젝트에 넣게 됩니다. 어떤 건 512×512 PNG, 어떤 건 가로로 긴 JPG, 어떤 건 WebP입니다. 엔진에 넣으려면 같은 크기와 형식으로 맞춰야 하는데, 이걸 그림 프로그램에서 한 장씩 하면 시간이 꽤 듭니다. 이 글은 이 사이트에서 여러 장을 한 번에 같은 규격으로 맞추는 방법입니다.
먼저 규격부터 정하세요
변환을 시작하기 전에 세 가지를 정해 두면 헷갈리지 않습니다.
- 형식: 투명 배경이 필요한 캐릭터, 아이콘, UI 이미지는 PNG(또는 WebP). 배경 이미지나 사진처럼 투명이 필요 없고 용량이 중요한 것은 JPG.
- 크기: 예를 들어 아이콘은 256×256, 타일은 64×64처럼 용도별로 정합니다. 엔진에 따라 2의 거듭제곱(64, 128, 256, 512, 1024) 크기를 권장하는 경우가 많고, 블록 압축 텍스처는 4의 배수 크기를 요구하는 경우가 많으니 사용하는 엔진의 문서를 확인하세요.
- 비율이 다른 원본을 어떻게 할지: 아래의 맞춤 방식 중에서 고릅니다. 이 선택이 결과 품질을 가장 크게 좌우합니다.
같은 규격으로 맞추는 순서
- 이미지를 모두 한꺼번에 끌어다 놓습니다. 형식이 섞여 있어도 됩니다. 각 파일의 실제 형식은 자동으로 감지됩니다.
- 저장할 형식을 고릅니다(예: PNG).
- 변환 옵션의 크기에서 **직접 지정(가로×세로)**을 고르고 가로·세로 px을 입력합니다. 자주 쓰는 크기는 버튼으로 바로 고를 수 있습니다.
- 맞추는 방법과 이미지 위치를 고릅니다.
- 변환한 뒤 ZIP으로 한꺼번에 내려받습니다. 파일 이름은 원래 이름을 유지하고 확장자만 바뀝니다.
맞추는 방법 네 가지, 언제 무엇을 쓸까
256×128 이미지를 256×256으로 만든다고 가정해 보겠습니다.
| 방법 | 결과 | 이럴 때 |
|---|---|---|
| 비율 유지 + 여백 채우기 | 이미지는 그대로, 위아래 64px씩 빈 공간 | 스프라이트, 아이콘, 로고처럼 모양이 변하면 안 되는 이미지 |
| 늘리거나 줄여서 맞춤 | 세로로 두 배 늘어나 찌그러짐 | 원본이 이미 같은 비율이거나, 텍스처처럼 찌그러져도 상관없는 경우 |
| 비율 유지 + 꽉 채우기 | 좌우가 잘리고 정사각형으로 가득 참 | 배경, 썸네일, 카드 일러스트처럼 빈틈이 없어야 하는 이미지 |
| 원본 크기 유지 + 중앙 배치 | 크기 변화 없이 가운데에 놓임(캔버스가 작으면 잘림) | 이미 알맞은 크기의 이미지를 캔버스만 넓히고 싶을 때 |
실제로 256×128 이미지를 256×256 "비율 유지 + 여백 채우기"로 변환해 확인해 보면, 이미지는 위에서 64번째 줄부터 191번째 줄까지에 그대로 놓이고 위아래는 투명으로 남습니다.
여백은 투명? 색?
PNG, WebP, GIF, ICO는 여백이 투명으로 남습니다. JPG와 BMP는 투명을 표현할 수 없어서 배경색(기본 흰색)으로 채워집니다. PNG에서도 여백을 색으로 채우고 싶다면 "투명·여백을 배경색으로 채우기"를 켜고 색을 고르세요. 투명이 필요한 게임 이미지라면 JPG가 아니라 PNG로 저장해야 합니다.
이미지 위치
기본은 가운데지만 3×3 격자에서 위치를 바꿀 수 있습니다. 예를 들어 캐릭터 스프라이트를 아래쪽 정렬로 맞추면 크기가 다른 캐릭터들의 발 위치가 같은 줄에 놓입니다. 꽉 채우기에서는 정렬한 쪽을 기준으로 반대쪽이 잘립니다. 인물 일러스트를 위쪽 정렬로 자르면 얼굴이 잘리는 것을 피할 수 있습니다.
도트(픽셀 아트)는 따로 주의하세요
일반적인 확대·축소는 픽셀 사이를 부드럽게 보간합니다. 사진에는 좋지만, 도트 이미지를 키우면 가장자리가 번져서 도트의 느낌이 사라집니다. 이럴 때는 **"도트(픽셀 아트) 그대로 확대·축소"**를 켜세요. 보간 없이 픽셀을 그대로 키우므로 가장자리가 선명하게 유지됩니다. 16×16을 64×64로처럼 정수 배율로 키울 때 가장 깔끔하고, 배율이 정수가 아니면 일부 픽셀이 더 넓게 보일 수 있습니다.
아이콘(ICO)을 만들 때
ICO는 한 변이 최대 256px입니다. 512×512처럼 더 큰 크기를 지정해도 비율을 유지한 채 256×256 이하로 맞춰서 저장됩니다. 윈도우용 게임 아이콘이나 웹 파비콘을 만들 때는 256×256 정사각형 PNG를 만든 뒤 ICO로 바꾸는 흐름이 간단합니다.
한 번 정한 설정은 기억됩니다
마지막으로 쓴 형식, 크기, 맞춤 방식, 정렬 같은 옵션은 이 브라우저에 기억됩니다. 같은 규격으로 계속 작업할 때 매번 다시 고르지 않아도 됩니다. 기본값으로 돌리려면 옵션 상단의 "설정 초기화"를 누르세요. 설정은 이 기기의 브라우저에만 저장되고 서버로 전송되지 않습니다.
알아 둘 한계
- 크기는 px 단위로만 지정합니다. 인치·DPI 기준 해상도 설정은 없습니다.
- 자르기는 정렬 위치(9칸)만 고를 수 있고, 이미지 안의 임의 영역을 직접 지정해 자르는 기능은 없습니다.
- 움직이는 GIF·WebP는 첫 장면만 변환됩니다. 스프라이트 시트(여러 프레임이 한 장에 들어 있는 이미지)는 한 장의 이미지로 취급되므로 프레임 크기 배율을 고려해 크기를 정하세요.