반응형
Figma는 기본 기능만으로 JPG/PNG 같은 래스터 이미지를 “자동 벡터화(트레이싱)” 하는 기능이 강하지 않은 편이라, 이미지→벡터 변환이 필요할 때 플러그인을 많이 씁니다. 그중 Image Tracer는 이미지를 벡터 레이어로 변환해주고, 컬러 레이어 추출/마스크용 트레이싱 같은 작업을 빠르게 처리하는 용도로 자주 사용됩니다. oai_citation:0‡image-tracer.com
1) 다운로드(설치) 방법
방법 A: Figma Community에서 설치
- Figma Community에서 “Image Tracer”를 검색
- 플러그인 페이지에서 Install을 눌러 설치
(설치 후에는 내 플러그인 목록에서 바로 실행할 수 있습니다.) oai_citation:1‡Figma Help Center
방법 B: 파일 안에서 바로 찾아 설치
- Figma 파일을 열고 Resources(리소스) 패널에서 Plugins 탭으로 이동 → “Image Tracer” 검색 → 설치/실행 흐름으로 접근합니다. (UI는 업데이트로 조금씩 바뀌지만, “Community에서 설치” 또는 “파일 안 Resources에서 검색”의 큰 흐름은 동일합니다.) oai_citation:2‡Figma Help Center
2) 기본 사용 방법 (가장 많이 쓰는 흐름)
- Figma 캔버스에 이미지(PNG/JPG 등) 를 올립니다.
- 이미지를 선택합니다.
- Image Tracer 플러그인을 실행합니다.
- 미리보기에서 결과를 확인하며 옵션을 조정합니다.
- Preview options: 원본/가공된 이미지/트레이싱 결과 미리보기 전환, 포인트/경로 표시, 이미지 페이드 등 oai_citation:3‡image-tracer.com
- 결과를 적용하면 이미지가 벡터 레이어(패스) 로 생성됩니다. oai_citation:4‡image-tracer.com
3) 결과를 바꾸는 핵심 옵션들 (이것만 알아도 성공률이 올라감)
(1) 흑백 기반 트레이싱 품질: Pre-processing
- Invert: “어느 부분을 따낼지” 반전(검/흰 뒤집기) oai_citation:5‡image-tracer.com
- Blur: 디테일을 부드럽게 해서 더 매끈한 트레이스 유도 oai_citation:6‡image-tracer.com
- Threshold: 어떤 밝기 기준으로 경계를 따낼지(0~255 컷오프) oai_citation:7‡image-tracer.com
(2) 컬러 벡터로 만들기
- Number of colours: 이미지에서 주요 색을 몇 개 뽑아 레이어로 트레이싱 oai_citation:8‡image-tracer.com
- Stack colours: 색 레이어를 “각각 따로” 둘지, “겹쳐 누적”할지 선택(틈/gap 줄이려면 누적이 유리한 경우가 많음) oai_citation:9‡image-tracer.com
(3) 점/노이즈 정리와 곡선 부드럽게: Tracing
- Ignore less than: 작은 점(스펙클) 노이즈를 픽셀 기준으로 무시 oai_citation:10‡image-tracer.com
- Smoothness: 모서리를 얼마나 부드럽게 만들지 oai_citation:11‡image-tracer.com
- Curve optimisation: 포인트 수를 줄이고 곡선을 정리(값이 클수록 더 매끈하지만 정확도는 약간 손해) oai_citation:12‡image-tracer.com
4) 실전 팁 (짧게)
- 로고/아이콘처럼 단순한 이미지: Threshold + Smoothness만 잘 잡아도 깔끔하게 나옵니다. oai_citation:13‡image-tracer.com
- 사진(인물/풍경): 완전한 “일러스트급 벡터”를 기대하면 실망하기 쉽습니다. 이런 경우는 컬러 수를 줄여 “포스터라이즈 느낌”으로 쓰는 편이 현실적입니다. oai_citation:14‡image-tracer.com
- 마스크 용도: 배경 제거/실루엣 따기용이면 디테일보다 경계가 중요하니 Blur/Threshold를 먼저 잡는 게 빠릅니다. oai_citation:15‡image-tracer.com
반응형
