PerfectVector
작성: Irene Kim8분 읽기

Adobe Animate Image Trace: 비트맵을 편집 가능한 그림으로

Adobe Animate Image Trace로 비트맵을 편집 가능한 벡터 디자인으로 변환하세요. 경로, 모서리, 노이즈, 채우기, 겹침을 조절하고 결과를 정리할 수 있습니다.

목차

Adobe Animate는 JPEG, PNG, PSD 등 래스터 이미지를 편집 가능한 벡터 디자인으로 추적할 수 있습니다. 현재 인터페이스에서 배치한 비트맵을 선택하고 Object > Trace Bitmap 또는 Modify > Bitmap > Trace Bitmap을 사용하세요. 프리셋이나 설정을 선택하고 결과를 미리본 뒤 새 도형을 확인하세요.

Adobe 도움말의 기능 이름은 Image Trace이고 명령 이름은 Trace Bitmap입니다. 어느 이름으로 검색했든 Animate의 이 작업을 뜻합니다. After Effects에서 작업한다면 Auto-Trace 마스크와 SVG 도형 레이어 가이드로 애니메이션에 적합한 객체 유형을 선택하세요.

실용적인 사용 순서
  1. 가장 깨끗한 래스터 원본을 가져오거나 배치하세요.
  2. 선택한 뒤 Trace Bitmap을 여세요.
  3. 가장 상세한 프리셋 대신 디자인에 맞는 프리셋으로 시작하세요.
  4. 색 모드, 경로, 모서리, 노이즈, 방식, 채우기, 스트로크의 변경을 미리보세요.
  5. 추적을 적용하고 결과의 편집 가능한 도형을 확인하세요.
  6. 점을 제거하고 의도하지 않은 조각을 합치며 불필요한 점만 단순화하세요.
  7. 래스터 참고 자료를 삭제하기 전에 최종 애니메이션이나 내보내기 크기에서 디자인을 비교하세요.

Adobe Animate의 Image Trace가 하는 일

Adobe의 현재 Animate Image Trace 문서는 이 기능이 JPEG, PNG, PSD 같은 래스터 이미지를 수정 가능한 벡터 디자인으로 바꾼다고 설명합니다. 스캔한 연필 스케치를 추적하여 새 그림의 바탕으로 삼을 수도 있습니다.

변환은 보이는 픽셀을 도형으로 재구성합니다. 원작자의 레이어, 브러시 설정, 편집 가능한 글자, 심볼, 리그, 숨겨진 도형을 복구하지 않습니다. 다른 애니메이션 작업의 경우 Moho 비트맵에서 벡터로 변환하는 가이드가 레이어 래스터를 유지할 때, 내장 추적을 쓸 때, 리그용 SVG 부품을 준비할 때를 설명합니다.

시작 이미지예상 결과잘 되지 않을 때의 선택
평면 아이콘이나 제한된 색의 일러스트분리된 채우기 벡터 영역추적 후 도형 정리
대비가 높은 선화나 로고흑백 채우기나 스트로크중요한 선이 이중으로 추적되면 다시 그리기
연필 스케치보이는 자국의 편집 가능한 해석노이즈를 줄이도록 먼저 잉크로 정리하거나 스캔본 보정
사진많은 색 도형이나 단순화된 포스터화 결과양식화가 목적이 아니면 래스터 유지
작거나 흐린 이미지흔들리거나 합쳐지거나 원본에 없던 것처럼 보이는 가장자리더 큰 원본을 찾거나 다시 그리기

비트맵 추적 단계

1. 래스터 원본을 준비하세요

불필요한 여백을 자르고 가능한 가장 좋은 원본을 사용하세요. 평면 일러스트는 추적 전에 압축 테두리와 의도하지 않은 배경 픽셀을 제거하세요. 스캔본은 의도한 세부 표현을 지우지 않으면서 종이와 자국의 대비를 조절하세요.

검토가 끝날 때까지 추적 결과 옆에 원본을 유지하세요. 결과가 깔끔해 보여도 글자 내부 공간, 얼굴 특징, 작은 실루엣이 달라질 수 있습니다.

Adobe의 가져온 비트맵 가이드는 Animate의 비트맵 자산 처리를 설명합니다. 비트맵을 가져오는 것과 추적하는 것은 별개입니다. 배치는 픽셀을 유지하고 Trace Bitmap은 새 벡터 디자인을 만듭니다.

2. Trace Bitmap을 여세요

배치한 래스터를 선택하세요. Adobe는 다음 경로를 안내합니다.

  • 상황에 맞는 메뉴에서 Object > Trace Bitmap 선택.
  • Properties 패널의 Bitmap 컨트롤에서 Edit 선택.
  • Modify > Bitmap > Trace Bitmap 선택.

옵션을 조절할 때 Preview를 켜세요. Adobe는 배치한 이미지의 해상도가 추적 속도에 영향을 준다고 설명합니다. 매우 큰 원본은 추가 세부 표현이 최종 크기의 그림을 개선하지 않더라도 시간이 더 걸릴 수 있습니다.

3. 시작점으로 프리셋을 선택하세요

Animate에는 고충실도나 저충실도 사진, 회색 음영, 흑백 로고 같은 넓은 용도의 프리셋이 있습니다. 프리셋은 품질 점수가 아니라 초기 설정 묶음입니다.

디자인에 실제로 필요한 세부 표현을 유지하는 가장 단순한 프리셋을 사용하세요. 단색 세 가지로 구성한 로고가 사진처럼 작은 영역이 쌓인 결과가 되어서는 안 됩니다. 추적이 끝났다는 이유만으로 부드러운 사진이 간결한 편집용 일러스트가 될 것이라고 기대해서도 안 됩니다.

4. 모드와 팔레트를 의도적으로 선택하세요

기본 컨트롤에는 Preset, Mode, Palette, Colors가 있습니다. 색 모드는 컬러, 회색조, 흑백 중 어떤 결과를 사용할지 결정합니다. 이후 사용 가능한 팔레트와 색 컨트롤이 Animate에서 만드는 영역 수에 영향을 줍니다.

색이 많으면 작은 명암 변화를 보존할 수 있지만 편집이나 애니메이션이 어려운 조각도 만들 수 있습니다. 남은 모든 구분에 목적이 생길 때까지 팔레트를 줄이세요.

추적 컨트롤
픽셀 가장자리에 맞춘 경로, 모서리 강조, 노이즈 제거, 인접하거나 겹친 색 영역, 깔끔한 편집 가능한 새 모양의 결과를 보여주는 개념 추적 컨트롤 도식
컨트롤은 충실도와 복잡도 사이를 조절합니다. 의도한 디자인에 맞춰 설정한 뒤 미리보기뿐 아니라 편집 가능한 도형을 평가하세요.

고급 컨트롤 이해하기

Adobe의 현재 정의는 첫 조정을 안내할 만큼 구체적입니다.

Paths

Paths는 추적한 도형이 원래 픽셀 가장자리를 얼마나 가깝게 따르는지 조절합니다. Adobe는 값이 낮을수록 더 가깝게, 높을수록 더 느슨하게 맞춘다고 설명합니다.

가깝게 맞춘다고 항상 좋은 것은 아닙니다. 완성 그림에 필요 없는 압축 돌기나 손그림 흔들림을 보존할 수 있습니다. 느슨하게 맞추면 매끄러워질 수 있지만 의도한 세부 표현이 줄어들 수 있습니다.

Corners

Corners는 급격한 꺾임을 모서리 점으로 얼마나 강하게 만드는지 조절합니다. 값이 높으면 모서리가 많아집니다. 각진 배지나 네모난 글자에는 높이고, 둥근 유기적 형태가 딱딱해지면 낮추세요.

Noise

Noise는 추적 중 Animate가 무시할 수 있는 픽셀 영역 크기를 설정합니다. 값이 높을수록 제거되는 작은 영역의 크기 기준이 커집니다. 먼지나 압축 점에 유용하지만 유지하려던 주근깨, 질감 점, 작은 글자 내부 공간도 지울 수 있습니다.

Method

Adobe는 두 방식을 설명합니다.

  • Abutting은 이웃 가장자리가 맞닿는 잘라낸 경로를 만듭니다.
  • Overlapping은 인접 도형과 조금 겹치는 쌓인 경로를 만듭니다.

Abutting은 평면 모자이크로 이해하기 더 쉽습니다. 겹침은 일부 합성 상황에서 가는 틈을 피할 수 있지만 가려진 도형을 만듭니다. 디자인을 어떻게 편집하고 움직일지에 따라 선택하세요.

채우기, 스트로크, 흰색

흑백 모드에서 Animate는 채우기 영역을 만들고 충분히 좁은 요소를 스트로크로 처리할 수 있습니다. Ignore White 옵션은 흰 영역을 생략하여 흰 종이 배경이 큰 도형이 되지 않게 할 때 유용합니다.

실제 결과를 확인하세요. 가는 검은 선에서 하나의 중심선을 예상했더라도 채워진 띠 주변의 두 가장자리로 추적될 수 있습니다. 편집 가능한 단일 스트로크가 중요하다면 다시 그리거나 중심선에 맞춘 작업 방식을 사용하세요.

애니메이션 전에 추적 디자인을 정리하세요

첫 미리보기 결과를 바로 움직이지 마세요. 벡터 결과를 선택하고 확인하세요.

  • 독립된 점과 눈에 보이지 않는 잔여물을 삭제하세요.
  • 글자와 도형 안의 구멍 및 내부 공간을 확인하세요.
  • 이웃 색이 의도대로 맞닿는지 확인하세요.
  • 의도하지 않은 배경 사각형을 제거하세요.
  • 하나의 객체로 작동해야 할 조각을 합치세요.
  • 실루엣을 바꾸지 않으면서 불필요한 노드를 단순화하세요.
  • 독립적으로 움직일 부분을 분리하세요.
  • 도형이 정리된 후에만 재사용할 그림을 심볼로 바꾸세요.

노드로 확대하는 것뿐 아니라 최종 감상 크기로 축소하세요. 작은 오류는 움직일 때 중요하지 않을 수 있지만 과도한 추적은 편집을 불필요하게 느리게 할 수 있습니다.

내보내거나 Animate 안에 유지하세요

추적이 Animate 프로젝트의 일부라면 원본 비트맵과 정리한 벡터 디자인을 이름 있는 별도 레이어에 두고 편집 가능한 프로젝트 원본을 유지하세요. 나중에 수정하면서 충실도 문제가 드러날 때 참고할 수 있습니다.

SVG 전달이 필요하면 Animate의 문서화된 SVG 내보내기 작업을 사용하고 받을 애플리케이션에서 내보낸 파일을 확인하세요. 프레임 내보내기는 추적에 없던 원본 레이어나 편집 가능한 글자를 재현하지 않습니다. Synfig의 경우 직접 SVG 가져오기와 Inkscape SIF 내보내기를 비교하고, 애니메이션 전에 움직일 부분과 그룹 원점을 확인하세요. Toon Boom 프로젝트라면 Harmony 벡터화와 SVG 가져오기 가이드가 Harmony 자체 드로잉 윤곽선, 비트맵 외피, Harmony 25 가져오기의 드로잉 및 팔레트 선택을 설명합니다.

Adobe는 현재 Animate가 유지보수 모드에 있다고 안내합니다. 앱은 계속 제공되고 지원, 보안 업데이트, 버그 수정을 받지만 새로운 기능은 계획하지 않습니다. 기존 작업에서 Image Trace가 사라지는 것은 아니지만 새로운 장기 제작 파이프라인을 선택할 때 고려해야 합니다.

별도 벡터화 도구를 사용할 때

같은 문서에서 디자인을 정리하고 움직일 때 Animate의 내장 추적이 적합합니다. 더 넓은 Image Trace와 AI 벡터화 도구 비교는 절충점을 설명합니다. Animate 밖에서 변환하거나 여러 원본을 비교하거나 애니메이션 전에 재사용할 SVG 원본을 만들고 싶다면 별도 도구가 더 적합할 수 있습니다.

PerfectVector의 이미지에서 벡터로 변환하는 작업 흐름은 브라우저에서 지원하는 래스터 이미지를 편집 가능한 벡터 도형으로 재구성합니다. 같은 원본으로 Animate 추적과 미리보기를 비교하세요. 다음을 평가하세요.

  • 보이는 실루엣과 내부 도형의 충실도.
  • 같은 세부 수준에서의 앵커 수.
  • 유용한 색 분리.
  • 파일 정리에 필요한 시간.
  • Animate로 가져온 후의 동작.

수정이 덜 필요한 결과를 사용하세요. 어느 방법도 저품질 비트맵에 더 이상 없는 원래 서체, 숨겨진 레이어, 정확한 곡선을 추론할 수 없습니다.

FAQ

Adobe Animate에 Image Trace가 있나요? 네. Adobe 도움말은 이 기능을 Image Trace라고 부르며 현재 명령에는 Object > Trace Bitmap과 Modify > Bitmap > Trace Bitmap이 있습니다.

Adobe Animate에서 PNG를 벡터 그림으로 바꿀 수 있나요? 네. Trace Bitmap은 보이는 PNG 픽셀을 수정 가능한 벡터 디자인으로 재구성합니다. 원래 레이어, 편집 가능한 글자, 심볼, 숨겨진 세부 요소를 복구하지 않습니다.

Animate Image Trace의 Paths, Corners, Noise는 무엇을 하나요? Paths는 도형이 픽셀 가장자리에 맞는 정도를, Corners는 꺾임이 모서리 점으로 바뀌는 강도를, Noise는 추적 중 무시하는 픽셀 영역 크기를 조절합니다.

Animate에서 Abutting과 Overlapping 중 무엇을 써야 하나요? 공유 가장자리에서 맞닿는 인접한 잘라낸 경로에는 Abutting을 사용하세요. 이웃을 조금 덮는 쌓인 도형에는 Overlapping을 사용하세요. 편집하고 움직일 방식에 따라 결과를 확인하세요.

Adobe Animate가 단종되었나요? 아니요. Adobe는 Animate가 유지보수 모드이며 계속 제공되고 지원, 보안, 버그 수정을 받지만 새로운 기능은 계획하지 않는다고 설명합니다.

Sources

  1. Adobe — Animate의 Image Trace — 현재 추적 명령, 프리셋, 미리보기 작동 방식, 모드, 고급 컨트롤 정의.
  2. Adobe — Animate의 가져온 비트맵 — 현재 비트맵 가져오기와 처리 맥락.
  3. Adobe — Animate에서 SVG 파일 내보내기 — 현재 SVG 내보내기 작업과 전달 맥락.
  4. Adobe — Capture FAQ — Animate가 지원과 수정을 받지만 새 기능 계획은 없는 유지보수 모드로 제공된다는 Adobe의 현재 설명.
  5. PerfectVector — 이미지에서 벡터로 변환 — 현재 브라우저 벡터화 작업 흐름, 미리보기, 출력, 제품 범위.

정리를 시작하기 전에 다른 결과를 비교하고 싶다면 같은 비트맵을 브라우저에서 벡터화하고, 두 경로 집합을 확인하여 더 적은 수정으로 그림을 보존하는 버전을 유지하세요.

블로그의 다른 글

이미지를
깔끔하고 편집 가능한 벡터 패스로 바꿔보세요