픽셀 캐릭터 애니메이션을 GIF로 내보낼 때 색상 변화를 방지하는 방법

GIF는 최대 256개 항목이 들어가는 색상표를 통해 픽셀 색상을 저장합니다. GIF는 전역 색상표와 개별 이미지에 연결된 지역 색상표를 지원하므로 애니메이션 전체가 반드시 256색으로 제한되는 것은 아닙니다. 하지만 인코딩된 각 이미지는 제한된 활성 색상표를 사용합니다. 이러한 규칙은 원본 GIF89a 사양에 정의되어 있습니다.

원본에 선택한 내보내기 팔레트로 표현할 수 없는 색상이 있으면, 내보내기 도구는 해당 색상을 사용 가능한 항목에 대응시켜야 합니다. Aseprite는 색상이 너무 많은 RGB 스프라이트, 레이어 혼합, 흐릿한 영역, 발광 효과를 GIF 색상 변화의 잠재적 원인으로 명시합니다. 실용적인 권장 사항은 RGB 스프라이트에서 256색 미만을 사용하거나 Indexed 모드에서 직접 작업하는 것입니다. Aseprite의 GIF 내보내기 색상 변화 설명을 참조하세요.

색상 패널에 팔레트 항목이 몇 개만 보인다고 해서 아트워크에 그 색상만 쓰였다는 뜻은 아닙니다. Aseprite의 RGB 모드에서는 표시된 팔레트에 없는 색상도 픽셀에 포함될 수 있습니다. Indexed 모드에서는 페인팅할 때 팔레트 항목만 사용할 수 있습니다. 이 차이는 색상 막대와 팔레트에 설명되어 있습니다.

내보내기 설정을 바꾸기 전에 애니메이션을 별도의 내보내기용 사본으로 저장하세요. 기준으로 삼을 색상을 몇 가지 선택합니다. 몸통의 기본 채움색, 가장 어두운 윤곽선 색, 하이라이트, 그리고 후반 프레임에만 나타나는 강조색을 고르세요.

다음 진단 순서를 사용하세요. 이는 문서에 설명된 동작을 바탕으로 한 문제 해결의 출발점이며, 겉모습만으로 확정할 수 있는 진단은 아닙니다.

관찰한 현상	먼저 확인할 항목	유용한 비교 방법
단색 채움 영역의 RGB 값이 내보낸 뒤 달라짐	팔레트 선택과 색상 감소	내보내기 전후의 불투명한 내부 픽셀을 샘플링합니다
포즈에 따라 색상이 달라짐	팔레트에 모든 프레임의 색상이 포함됐는지 여부	여러 포즈에서 같은 의도된 채움색을 비교합니다
실루엣에만 옅거나 어두운 테두리가 생김	부분 투명도와 매트 설정	밝은 배경과 어두운 배경 모두에서 미리 봅니다
애플리케이션마다 GIF가 다르게 보임	색상 프로필 해석과 표시 설정	원본 편집기에서 GIF를 다시 열고 값을 비교합니다
단색 영역 내부에 새 점이 생김	내보내기 디더링	디더링을 끄고 다른 사본을 내보냅니다

같은 캔버스 좌표에 있는 무관한 픽셀끼리 비교하지 말고, 렌더링된 프레임에서 서로 대응하는 부분을 비교하세요. 모양을 판단할 때 배경과 확대율을 일정하게 유지합니다. RGB 숫자가 바뀌었는지, 화면상 모양이 바뀌었는지, 아니면 둘 다 바뀌었는지 기록하세요. 이 구분에 따라 다음 단계가 결정됩니다.

일관된 색상을 중심으로 설계한 캐릭터라면 모든 포즈에 적용되는 계획된 팔레트를 사용하세요. 다른 표정, 액세서리의 하이라이트, 밑면의 다른 음영처럼 움직임에 따라 드러나는 색상도 포함합니다. 첫 프레임만으로 만든 팔레트에는 이런 색상이 빠질 수 있습니다.

이는 작업 흐름에 대한 권장 사항이지, 모든 GIF가 전역 팔레트를 사용해야 한다는 요구 사항은 아닙니다. 파일 형식에서 지역 팔레트도 허용합니다. 공유 팔레트의 장점은 정의된 색상 집합을 한 번에 살펴보고 모든 프레임이 그 안에 들어가는지 확인할 수 있다는 것입니다.

Aseprite에서 내보내기용 사본을 Indexed로 변환하기 전에 RGB 모드에서 아트워크를 살펴보세요. Indexed 픽셀은 팔레트 항목을 참조하므로 항목을 편집하면 그 항목을 참조하는 모든 픽셀이 바뀝니다. 투명 레이어에는 지정된 투명 인덱스도 필요하며, 보통 인덱스 0을 사용합니다. Aseprite의 색상 모드 문서를 참조하세요.

공유 색상표 하나를 사용하는 투명 GIF라면 불투명 색상은 최대 255개, 투명 항목은 하나로 제한하세요. 이는 색상표가 256개 항목을 수용하며 GIF가 투명도에 팔레트 인덱스를 사용하기 때문입니다. 불투명 애니메이션은 보이는 색상에 256개 항목을 모두 사용할 수 있습니다. GIF89a의 색상표 및 투명도 정의를 참조하세요.

예를 들어 애니메이션 전체에 서로 다른 불투명 색상이 24개 있다고 가정해 보세요. 투명 항목을 추가하면 25개가 되므로 팔레트 용량은 충분합니다. 그렇다고 내보내기 도구가 정확히 그 24개 색상을 선택했다는 뜻은 아닙니다. 결과 색상표를 확인하고 기준 픽셀을 샘플링하세요. 하이라이트가 빠졌다면 다시 변환하기 전에 팔레트를 수정하세요.

색상 프로필은 RGB 값을 어떻게 해석할지 지정합니다. Aseprite 문서에서는 sRGB를 인터넷 이미지에 일반적으로 사용되는 색 공간으로 설명하며, Edit > Preferences > Color에서 색상 관리 설정을 제공합니다. 일반적인 웹 표시를 염두에 둔 애니메이션이라면 내보내기용 사본을 sRGB로 준비하는 것이 실용적인 출발점입니다. Aseprite의 색상 프로필 문서를 참조하세요.

원본이 다른 알려진 프로필을 사용한다면 변환(Convert)과 할당(Assign)의 차이를 구분하세요. Aseprite의 Sprite > Properties 대화상자에서 할당은 픽셀 값을 그대로 두고 해석 방식만 바꿉니다. 변환은 가능한 한 기존 모양을 유지하도록 색 공간 간 픽셀 값을 조정합니다. 두 작업은 Sprite Properties에 설명되어 있습니다.

필요한 프로필 변환은 내보내기 팔레트를 확정하기 전에 수행한 뒤 기준 색상을 새로 샘플링하세요. 그렇지 않으면 의도적인 RGB 값 변화를 GIF 내보내기 오류로 오인할 수 있습니다. 원본 프로필을 모른다면 여러 프로필을 계속 할당하기 전에 원본 아트워크를 어떤 방식으로 해석하려 했는지 확인하세요.

GIF 투명도는 해당 인덱스의 픽셀을 표시하지 않고 기존 화면을 그대로 두도록 지정합니다. 픽셀마다 독립적인 알파 값 범위를 저장하지는 않습니다. 따라서 부분 투명한 캐릭터 가장자리는 내보내기 전에 명확히 처리해야 합니다. 이러한 동작은 GIF89a 사양에 정의되어 있습니다.

가장자리가 선명한 픽셀 아트라면 내보내기용 사본에서 윤곽선을 살펴보고 의도하지 않은 부분 불투명도를 제거하세요. 의도된 가장자리 픽셀은 완전히 불투명하게, 빈 픽셀은 완전히 투명하게 유지합니다. 그러면 실루엣이 변환 과정의 결과가 아니라 의도적인 그림의 일부가 됩니다.

캐릭터에 부드러운 가장자리가 의도적으로 있다면 내보내기 전에 배경 처리 방식을 선택하세요. Adobe 문서에 따르면 매트 설정은 부분 투명 픽셀을 선택한 색상과 혼합합니다. 매트 색상을 알려진 단색 배경과 일치시키면 가장자리가 그 배경에 자연스럽게 섞일 수 있습니다. 한 배경에 맞춰 준비한 매트는 다른 배경에서 드러날 수 있습니다. Adobe Animate의 투명도 및 매트 안내를 참조하세요.

내보낸 가장자리를 밝은 배경과 어두운 배경에서 미리 보세요. 내부 색상은 일치하는데 테두리만 눈에 띄게 달라진다면 몸통 팔레트를 다시 만들기 전에 불투명도와 매트 설정을 확인하세요.

단색 픽셀 아트는 우선 내보내기 디더링을 끈 상태에서 시작하세요. Adobe는 디더링이 사용할 수 없는 색상을 흉내 내는 방식이며, 주로 단색으로 이루어진 이미지는 디더링 없이 잘 표현될 수 있다고 설명합니다. 그라데이션에는 다른 절충안이 필요할 수 있습니다. 해당 옵션이 있다면 Web Snap도 끄세요. 이 옵션은 색상을 웹 팔레트에 가까운 색으로 의도적으로 이동시킵니다. Adobe Animate의 GIF 최적화 옵션을 참조하세요.

이를 시작 설정으로 삼고 결과를 확인하세요. 디더링을 끄자 대체된 색상이 넓은 영역에 나타났다면, 불일치 위에 패턴을 더하기보다 팔레트의 색상 범위를 바로잡으세요. 직접 그린 픽셀 질감은 변환 과정에서 추가된 디더링과 구분해 유지하세요.

내보내기 도구에 정확한 색상 보호 기능이 있다면 어떤 조건에서 작동하는지 확인하세요. Photoshop의 문서화된 preserveExactColors 옵션은 색상표에 이미 있는 색상을 확산 디더링으로부터 보호합니다. 색상표에 빠진 색상을 추가해 주지는 않습니다. Adobe의 GIF 저장 옵션 참고 문서를 참조하세요.

내보낸 뒤 GIF를 새 문서로 여세요. 내보내기 대화상자의 미리보기만 믿지 마세요. Aseprite 문서에는 GIF를 열고 각 프레임을 PNG 시퀀스로 저장하는 방법이 설명되어 있어, 개별 프레임을 살펴보는 또 다른 방법을 제공합니다. Aseprite FAQ를 참조하세요.

최종 점검은 다음과 같이 진행하세요.

1. 준비된 내보내기용 사본과 다시 연 GIF의 기준 색상을 비교합니다.
2. 첫 포즈에는 없던 색상이 포함된 모든 프레임을 살펴봅니다.
3. 불투명한 내부 픽셀과 투명한 가장자리를 따로 확인합니다.
4. 전체 반복 애니메이션을 재생해 채움색이나 하이라이트가 의도치 않게 바뀌는지 살펴봅니다.
5. GIF를 실제 사용할 크기와 배경에서 미리 봅니다.

불투명한 채움 영역의 RGB 값이 다르면 팔레트 대응이나 프로필 변환을 다시 확인하세요. 값은 같은데 애플리케이션마다 다르게 보인다면 다시 칠하기 전에 표시 방식의 해석을 살펴보세요. 조정 효과를 확인할 수 있도록 테스트 내보내기에서는 한 번에 설정 하나만 바꾸세요.

편집 가능한 원본, 준비된 내보내기용 사본, 최종 GIF를 각각 따로 보관하세요. 재현 가능한 내보내기 과정은 색상을 확인한 원본에서 시작해 팔레트와 투명도에 관한 결정을 명확히 하고, 파일을 다시 열어 비교하는 것으로 끝납니다. 이렇게 하면 캐릭터의 의도된 모양을 보존하고 남은 절충점을 파악할 수 있습니다.

• GIF89a 사양 — CompuServe, W3C 호스팅
• 자주 묻는 질문 — Aseprite
• 색상 막대와 팔레트 — Aseprite
• 색상 모드 — Aseprite
• 색상 프로필 — Aseprite
• Sprite Properties — Aseprite
• 이미지 및 애니메이션 GIF 내보내기 옵션 — Adobe Animate
• GIF 저장 옵션 — Adobe Photoshop 개발자 문서