AI 생성 이미지를 게임 에셋으로 다듬는 픽셀화·벡터화 워크플로우

왜 변환 과정이 필요한가

AI 생성 이미지는 콘셉트 탐색에는 빠르지만 그대로 게임 에셋으로 쓰기에는 몇 가지 문제가 있다. 가장자리가 흐리거나 광원이 장면마다 달라질 수 있고 작은 해상도로 줄였을 때 형태가 무너지기도 한다. 또한 애니메이션용 스프라이트, UI 아이콘, 타일맵처럼 반복해서 쓰이는 에셋은 일관된 규칙이 특히 중요하다.

픽셀화와 벡터화는 서로 대체하는 작업이 아니다. 픽셀화는 제한된 해상도와 색상 안에서 읽기 쉬운 래스터 이미지를 만드는 데 적합하다. 벡터화는 윤곽과 면을 경로로 바꿔 해상도 변화에 강한 UI, 로고, 단순 아이콘을 만드는 데 유리하다.

flowchart TD
    A[AI 생성 원본] --> B[용도와 목표 해상도 결정]
    B --> C{에셋 성격}
    C -->|캐릭터·타일·이펙트| D[픽셀화]
    C -->|UI·로고·아이콘| E[벡터화]
    D --> F[수동 보정과 팔레트 정리]
    E --> G[경로 단순화와 도형 보정]
    F --> H[엔진 임포트 설정]
    G --> H
    H --> I[실제 화면에서 검수]

가장 먼저 정할 것은 도구가 아니라 최종 용도다. 월드에 놓일 32×32 타일과 4K 메뉴 배경은 같은 원본에서 출발해도 처리 기준이 완전히 다르다.

시작 전: 원본을 선별하는 기준

변환에 앞서 원본을 골라야 한다. 원본의 문제가 프롬프트로 교정될 수 있다면, 다시 생성하는 편이 수작업 보정보다 빠를 수 있다.

다음 항목을 확인한다.

실루엣이 작게 축소해도 구분되는가
손가락, 장식, 무기처럼 작은 구조가 서로 겹치거나 깨지지 않았는가
주광원 방향과 그림자가 프로젝트의 아트 방향과 맞는가
배경과 대상의 명도 차이가 충분한가
텍스처의 세부 묘사가 게임 카메라 거리에서 실제로 보일 가치가 있는가

AI 원본에서 실루엣과 광원 방향을 확인하는 예시

특히 캐릭터나 적 유닛은 색보다 실루엣을 먼저 본다. 화면에서 몇십 픽셀만 차지하는 오브젝트는 눈, 갑옷의 문양, 모공 같은 세부 표현보다 머리·몸통·장비의 외곽이 읽히는지가 중요하다.

픽셀화: 축소가 아니라 재해석에 가깝다

목표 해상도와 팔레트를 먼저 고정한다

픽셀 아트의 품질은 단순히 이미지를 작게 줄인 결과가 아니다. 목표 크기와 색상 규칙을 정한 뒤 중요한 형태를 제한된 픽셀에 다시 배치하는 과정에 가깝다.

예를 들어 탑다운 게임의 소형 아이콘이라면 32×32 또는 64×64처럼 최종 표시 크기를 먼저 정한다. 같은 그림도 32×32에서는 명암 단계를 줄이고 윤곽을 단순화해야 읽힐 수 있으며, 128×128에서는 재질 차이를 더 유지할 여지가 있다.

색상도 무한히 쓰지 않는 편이 관리하기 좋다. 피부, 금속, 천처럼 재질마다 밝은색·기본색·그림자색을 정해 두면 에셋 사이의 톤을 맞추기 쉽다. 자동 색상 감소는 출발점으로 쓸 수 있지만 중요한 경계에 원치 않는 색이 생기는지 반드시 확인해야 한다.

권장 작업 순서

원본에서 피사체만 분리하고 배경을 투명하게 만든다.
최종 크기로 줄인 뒤 최근접 이웃 보간으로 확대해 픽셀 단위로 확인한다.
큰 실루엣과 내부의 명암 덩어리를 먼저 고친다.
사용 팔레트를 제한하고 비슷한 색을 병합한다.
계단 형태의 외곽선, 점 하나짜리 잡음, 흐릿한 반투명 픽셀을 정리한다.
게임 카메라 거리와 실제 배경 위에서 다시 검수한다.

최근접 이웃 보간은 픽셀 경계를 유지한다. 반면 Bilinear나 Bicubic 보간은 주변 픽셀의 색을 보간해 경계를 부드럽게 만들 수 있으므로 픽셀 아트 확대에는 보통 적합하지 않다.

축소 결과를 확대해 외곽선과 제한된 팔레트를 보정하는 픽셀 아트 작업 화면

Unity 임포트 설정

Unity에서는 텍스처의 필터 방식과 압축 설정이 결과를 크게 바꾼다. 픽셀 아트 스프라이트는 대체로 다음 설정에서 시작하면 안전하다.

Texture Type: Sprite (2D and UI)
Sprite Mode: Single 또는 Multiple
Filter Mode: Point (no filter)
Generate Mip Maps: Off
Compression: None
Wrap Mode: Clamp 또는 용도에 맞는 Repeat
Pixels Per Unit: 프로젝트 기준값으로 통일

Pixels Per Unit 값은 모든 스프라이트에서 통일하는 것이 좋다. 예를 들어 16픽셀을 월드의 1유닛으로 정했다면 16×16 타일과 32×32 캐릭터가 의도한 상대 크기로 배치된다. 카메라가 정수 픽셀 경계에 맞지 않으면 움직일 때 화면이 흔들려 보일 수 있으므로 Pixel Perfect Camera 같은 보정 방식도 함께 검토한다.

셰이더나 후처리로 픽셀화할 때의 주의점

화면 전체를 픽셀화하는 효과와 에셋 자체를 픽셀 아트로 만드는 작업은 목적이 다르다. 전자는 연출에 유용하지만 원본의 형태 문제를 해결하지는 못한다.

다음은 UV가 화면 전체의 0~1 범위를 덮는 풀스크린 패스에서 격자에 맞춰 샘플링하는 개념 예제다. Varyings, 텍스처 선언, URP 포함 파일 등 셰이더 템플릿 구성은 생략했다.

float2 PixelateUV(float2 uv, float2 screenSize, float pixelSize)
{
    float2 grid = screenSize / pixelSize;
    return (floor(uv * grid) + 0.5) / grid;
}

float4 frag(Varyings input) : SV_Target
{
    float2 snappedUV = PixelateUV(input.uv, _ScreenParams.xy, _PixelSize);
    return SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, snappedUV);
}

이 방식은 양수인 pixelSize와 화면 해상도에 따라 격자 크기가 달라진다. UI까지 함께 픽셀화할지, 월드 렌더링에만 적용할지도 렌더 패스 구성에 따라 분리해서 결정해야 한다.

벡터화: 자동 추적 후 도형을 정리한다

벡터화에 적합한 이미지

벡터화는 윤곽이 뚜렷하고 색 면이 비교적 단순한 이미지에서 좋은 결과를 낸다. 게임 로고, 인벤토리 아이콘, 퀘스트 마커, 단순한 몬스터 초상화가 대표적이다.

반대로 사진 같은 질감, 복잡한 반사광, 미세한 털 표현이 많은 이미지는 자동 벡터화 후 경로 수가 지나치게 많아질 수 있다. 이 경우에는 원본을 유지하거나 필요한 외곽선과 색 면만 새로 그리는 편이 더 가볍고 수정하기 쉽다.

자동 추적의 결과를 그대로 쓰지 않는 이유

자동 추적 도구는 설정에 따라 비슷한 색의 경계를 세밀하게 따라갈 수 있다. 보기에는 원본과 비슷해도 수천 개의 앵커 포인트가 생기면 SVG 용량이 커지고 수정도 어려워질 수 있다.

따라서 자동 추적 뒤에는 다음을 수행한다.

보이지 않는 작은 경로와 중복 도형을 제거한다.
곡선의 앵커 포인트를 줄여 형태를 단순화한다.
같은 의미의 색 면을 합치고 색상 수를 제한한다.
스트로크와 채우기 규칙을 프로젝트 UI 스타일에 맞춘다.
작은 크기에서도 선 두께와 빈 공간이 유지되는지 확인한다.

자동 벡터 추적 뒤 앵커 포인트를 줄이고 색 면을 정리하는 UI 아이콘 예시

SVG를 게임에서 사용할 때

Unity UI Toolkit에서는 Vector Graphics 패키지를 통해 SVG를 UI Toolkit Vector Image 에셋으로 가져와 사용할 수 있다. 다만 Unity 6 문서는 벡터 지원이 개발 중이며 제한적으로 제공된다고 설명하고 래스터 이미지를 권장하므로, 대상 Unity 버전·플랫폼·UI 시스템의 지원 범위를 확인해야 한다. 런타임 지원이 불확실하거나 머티리얼 효과가 필요하다면 최종 해상도별 PNG를 함께 준비하는 편이 안전하다.

벡터 원본은 수정 가능한 마스터 에셋으로 보관하고 빌드에는 필요한 크기의 래스터 결과물을 넣는 방식도 실용적이다. 이때 아이콘의 여백, 기준선, 9-slice 적용 여부를 문서화하면 UI 확장 작업에서 재사용하기 편하다.

스프라이트 시트와 타일맵으로 확장하기

단일 이미지가 괜찮아 보여도 반복 배치하면 문제가 드러난다. 타일 경계의 명도 차이, 그림자의 방향, 가장자리의 투명 픽셀은 맵 위에서 눈에 띈다.

타일은 네 방향으로 반복해 경계를 확인해야 한다. 캐릭터 프레임은 걷기 애니메이션으로 재생해 발 위치와 몸의 중심이 흔들리지 않는지 살핀다. AI 생성 원본을 프레임별로 단순 변형해 애니메이션을 만들면 형태가 프레임마다 바뀌기 쉽다. 중요한 캐릭터는 기준 포즈를 먼저 정하고 그 위에서 각 프레임을 직접 수정하는 방식이 안정적이다.

Unity 에디터에서 여러 스프라이트를 일괄 설정해야 한다면 AssetPostprocessor를 사용할 수 있다.

using UnityEditor;
using UnityEngine;

class PixelArtImporter : AssetPostprocessor
{
    void OnPreprocessTexture()
    {
        if (!assetPath.Contains("/PixelArt/")) return;

        var importer = (TextureImporter)assetImporter;
        importer.textureType = TextureImporterType.Sprite;
        importer.filterMode = FilterMode.Point;
        importer.mipmapEnabled = false;
        importer.textureCompression = TextureImporterCompression.Uncompressed;
        importer.alphaIsTransparency = true;
    }
}

이 코드는 Assets/PixelArt/ 아래 텍스처에만 적용하도록 범위를 제한했다. 프로젝트 전체에 일괄 적용하면 배경 이미지나 일반 UI 텍스처까지 의도치 않게 바뀔 수 있으므로 경로 규칙을 명확히 두는 편이 좋다.

이 편집기 스크립트는 Editor 폴더나 Editor 전용 어셈블리에 둬야 한다.

품질 검수 체크리스트

변환이 끝났다면 편집기 확대 화면만 보지 말고 실제 게임 조건에서 확인한다.

목표 해상도와 카메라 거리에서 실루엣이 읽히는가
밝은 배경과 어두운 배경 모두에서 대상이 묻히지 않는가
투명 가장자리에 밝거나 어두운 테두리가 생기지 않는가
필터링, 밉맵, 압축 때문에 픽셀이 흐려지지 않는가
동일한 종류의 아이콘과 타일에서 선 두께·색상·광원 방향이 일관적인가
라이선스와 사용 조건을 프로젝트 정책에 맞게 기록했는가

AI 도구의 출력물 이용 조건과 학습 데이터에 관한 공개 범위는 서비스마다 다를 수 있다. 상용 프로젝트라면 생성 도구의 현재 약관, 팀의 에셋 관리 정책, 필요한 경우 법률 검토 기준을 별도로 확인해야 한다.

마무리

AI 생성 이미지는 완성 에셋을 즉시 얻는 버튼이라기보다 시각적 출발점을 빠르게 만드는 도구에 가깝다. 픽셀화에서는 목표 해상도와 팔레트, 벡터화에서는 경로 수와 도형의 단순성이 핵심이다. 어느 쪽이든 게임 안에서 반복 배치하고 실제 카메라로 확인하는 단계까지 마쳐야 일관된 에셋으로 사용할 수 있다.