선명한 가장자리를 유지하며 픽셀 아트를 벡터로 변환하기

픽셀 아트를 벡터로 바꿀 수 있지만 사각 픽셀이 보여야 하는지 먼저 정하세요. 원래 모습을 유지하려면 격자나 객체 모자이크로 재구성하세요. 스프라이트를 매끄러운 일러스트로 만들려면 윤곽 벡터화를 쓰세요. 서로 다른 출력이며 일반 추적기가 대신 선택하지 못합니다.

Scratch에서 게임 스프라이트를 편집한다면 Convert to Vector 버튼은 비트맵을 추적하지 않고 편집 모드만 바꿉니다. Scratch 코스튬 편집 가능성 점검으로 픽셀 유지, 부분 다시 그리기, 추적 SVG 가져오기 중 선택하고 대체 코스튬의 중심을 원본과 비교하세요.

목표가 웹사이트나 게임에서 선명한 픽셀 아트를 표시하는 것뿐이라면 SVG가 필요 없을 수 있습니다. 적절한 크기의 PNG와 최근접 이웃 방식 확대가 더 작고 원본에 충실한 경우가 많습니다. 웹의 image-rendering 속성은 선명한 가장자리를 유지하는 crisp-edges와 pixelated 동작을 제공합니다.

도구 전에 결과를 선택하세요

• 크기가 이미 맞고 선명한 래스터 표시만 필요하면 PNG를 유지하세요.
• 모든 사각형과 계단형 가장자리가 디자인 일부이면 격자 SVG를 만드세요.
• 의도적으로 매끄러운 실루엣과 편집 가능한 곡선을 원하면 윤곽 벡터화를 쓰세요.
• 매끄럽게 바꾼 결과를 ‘픽셀 아트 보존’이라고 부르지 마세요. 벡터 재해석입니다.

서로 다른 세 작업을 위한 세 출력

형식의 우열보다 블록의 의미가 중요합니다. 픽셀 아트의 계단형 가장자리는 의도적인 경우가 많습니다. 매끄럽게 바꾸는 것은 선 그림에 흐림을 더하는 것만큼 해로울 수 있습니다.

격자 보존과 윤곽 매끄럽게 하기는 다른 작업입니다

방법 1: 픽셀 격자를 정확히 유지하기

가장 직접적인 변환은 래스터 셀을 벡터 사각형으로 바꿉니다. 빨간 픽셀은 빨간 사각형이 됩니다. 이웃한 빨간 픽셀은 별도 사각형으로 유지하거나 실루엣이 바뀌지 않는다면 큰 사각 도형으로 합칠 수 있습니다.

시작 전에 실제 격자 치수를 찾으세요. 800 × 800으로 표시되는 스프라이트도 32 × 32 격자를 최근접 이웃으로 확대한 것일 수 있습니다. 재현할 것은 확대된 표시 크기가 아니라 32 × 32 구조입니다.

Illustrator Object Mosaic 과정

Adobe는 내장 비트맵을 모자이크로 바꾸는 방법을 설명합니다.

1. Illustrator에 원본을 배치하고 내장하세요.
2. 선택한 뒤 Object > Create Object Mosaic를 쓰세요.
3. 알고 있다면 원본 픽셀 격자와 타일 수를 맞추세요.
4. 정사각형 타일과 컬러 출력을 쓰세요.
5. 모자이크 검사까지 원본을 유지한 뒤 제거하거나 숨기세요.
6. 큰 배율에서 바깥 실루엣, 내부 틈, 팔레트를 원본과 비교하세요.

Create Object Mosaic 문서는 명령, 정사각 타일, 색상 설정, 원본 래스터 처리를 설명합니다. 픽셀 아트 과정은 문서화된 모자이크 기능의 실용적인 활용입니다.

구조적으로 충실해도 비효율적일 수 있습니다. 64 × 64 스프라이트에는 합치기 전 4,096셀이 있습니다. 완전히 투명한 셀을 제거하고 가능한 곳에서 이웃한 같은 색 사각형을 합치며 최종 SVG에 보이지 않는 객체를 남기지 마세요.

방법 2: Illustrator 없이 격자 SVG 만들기

픽셀을 고려하는 스크립트나 전용 변환기로 같은 파일을 만들 수 있습니다. 앱보다 원칙이 중요합니다.

1. 원래 격자 크기로 원본을 읽으세요.
2. 투명하지 않은 각 픽셀을 정확한 벡터 사각형으로 대응시키세요.
3. 안티앨리어싱 없이 팔레트 값을 유지하세요.
4. 보이는 격자가 그대로일 때만 이웃 셀을 합치세요.
5. 원래 격자 치수와 맞는 SVG viewBox로 내보내세요.
6. 정수와 비정수 표시 크기에서 시험하세요.

오픈 소스 vectorize-pixelart 프로젝트는 픽셀 전용 변환 유틸리티의 예입니다. 크거나 복잡한 격자가 무거운 SVG를 만든다는 일반적인 한계도 보여 줍니다. 오래된 유틸리티는 먼저 연구 자료로 취급하고 제작 과정에 넣기 전에 코드와 유지보수 상태를 검토하세요.

SVG 마크업에 익숙하다면 작은 스프라이트를 <rect>로 수동 재구성할 수도 있습니다. 12 × 12 아이콘에는 합리적이지만 세밀한 장면으로 오후를 보내는 것은 적절하지 않습니다.

방법 3: 의도적으로 도형을 매끄럽게 만들기

때로 픽셀은 정체성이 아니라 초안입니다. 캐릭터, 꽃, 아이콘을 둥근 윤곽의 스티커, 인쇄 그래픽, 로고로 만들고 싶을 수 있습니다.

의도적으로 그런 해석을 원한다면 PerfectVector가 윤곽 방식에 적합합니다. 보유한 가장 큰 최근접 이웃 버전을 올리고 새 일러스트로 판단하세요.

1. 먼저 안티앨리어싱을 제거하세요. 부드러운 가장자리 픽셀이 추가 색상과 작은 도형을 만듭니다.
2. 팔레트를 제어하세요. 원본이 8색이면 압축이나 흐림 때문에 추적이 수십 색을 만들어서는 안 됩니다.
3. 계단형 대각선을 검사하세요. 직선이 될 부분과 곡선이 될 부분을 정하세요.
4. 구멍과 1픽셀 틈을 확인하세요. 이웃 영역을 단순화하면 작은 구멍이 닫힐 수 있습니다.
5. 노드 수를 검토하세요. 매끄럽게 하는 목적은 모든 사각 모서리를 여러 작은 곡선으로 대체하는 것이 아닙니다.
6. 사용 크기에서 시험하세요. 포스터 크기의 좋은 곡선이 아이콘 크기에서는 얼굴이나 손을 지울 수 있습니다.

이 방식은 작품을 바꿉니다. 정확한 보존 버전으로 오해하지 않도록 SVG 옆에 원본 PNG를 저장하세요.

모든 방식에 불리한 준비 문제

매끄러운 보간으로 크기를 바꾼 원본. 원래 스프라이트로 돌아가거나 최근접 이웃 보간으로 조정하세요. 섞인 가장자리 색상이 고정되면 원래 격자 복원이 어렵습니다.

JPG 파일. 압축이 모든 선명한 픽셀 경계 주변에 색상 블록과 링잉 현상을 만듭니다. 가능하면 원본 PNG를 쓰세요.

투명 배경이 흰색이 됐습니다. 흰 배경은 수천 개 불필요한 셀이나 큰 추적 도형이 됩니다. 변환 전에 투명도를 복원하고 대비되는 캔버스에서 확인하세요. 투명 SVG 배경 안내가 점검을 설명합니다.

반투명 효과가 있습니다. 발광, 그림자, 부분 불투명도는 전통적인 픽셀 셀이 아닙니다. 래스터 효과로 유지할지, 단색으로 양자화할지, 벡터용으로 다시 디자인할지 정하세요.

웹사이트에 벡터가 필요한가요?

반드시 그렇지는 않습니다. 게임 스프라이트나 인터페이스 아이콘은 PNG가 적절한 원본일 수 있습니다. 원래 크기 자산을 쓰고 가능하면 정수배로 확대하며 브라우저나 렌더링 엔진을 픽셀화 또는 최근접 이웃 보간으로 설정하세요.

격자 SVG는 팔레트를 객체로 편집하거나 크게 인쇄하거나 전달 시스템이 벡터를 요구할 때 유용합니다. 작은 화면 자산이 자동으로 가벼워지지는 않습니다. 셀마다 벡터 객체를 두면 작은 PNG보다 무거울 수 있습니다.

‘SVG는 끝없이 확대된다’가 맞지만 불완전한 경우입니다. 계속 확대돼도 저장, 편집, 렌더링 비용이 커질 수 있습니다. PNG와 SVG 안내는 넓은 형식 선택을, 이미지 벡터화의 의미는 일반 추적이 픽셀 격자보다 도형을 선호하는 이유를 설명합니다.

최종 사전 점검

전달 전에 원래 크기와 최종 크기에서 비교하세요.

• 격자 치수가 원본과 맞습니다.
• 안티앨리어싱 가장자리 색상이 추가되지 않았습니다.
• 투명 셀은 투명합니다.
• 보존 방식에서 계단형 실루엣이 유지됐습니다.
• 윤곽 방식의 매끄러운 경계는 의도적입니다.
• 1픽셀 틈, 눈, 하이라이트, 내부 구멍이 제대로 보입니다.
• 그림이 같게 남는 곳에서만 반복된 같은 색 셀을 단순화했습니다.
• SVG에 실수로 원본 래스터를 내장하지 않았습니다. 내장하면 확장자와 달리 픽셀화될 수 있습니다.

절충을 명확히 밝히는 방식이 가장 깔끔합니다. 픽셀이 작품이면 격자를 유지하고, 새 해석을 원하면 윤곽을 매끄럽게 하며, 벡터가 유용한 제어를 추가하지 않으면 PNG를 유지하세요.

Sources

1. Adobe Illustrator — 스케치와 모자이크 만들기 — Object Mosaic, 정사각 타일, 색상 출력, 래스터 내장 요구사항입니다.
2. MDN — CSS image-rendering — 웹 픽셀 아트의 최근접 이웃 방식 렌더링입니다.
3. W3C — PNG 명세 제3판 — PNG의 무손실 래스터 모델과 알파 채널입니다.
4. W3C — SVG 기본 도형 — 직접적인 격자 셀 SVG의 사각형 도형입니다.
5. W3C — SVG 좌표계와 viewBox — 원래 격자 좌표계를 SVG 뷰포트에 대응시키는 방식입니다.

---

격자 보존 대신 매끄러운 윤곽을 원한다면 PerfectVector로 변환하고, 사용 전에 실루엣, 1픽셀 틈, 작은 디테일을 픽셀 원본과 비교하세요.