일러스트 배경 투명하게 저장 PNG 확장자
Adobe에서 제공하는 Photoshop과 Illustrator는 공통적으로 배경이 보이지 않는 투명 PNG 파일을 만들 수 있습니다. 특히 Illustrator는 포토샵처럼 일일이 누끼를 따지 않아도 벡터(Vector) 그래픽을 기반으로 깔끔하게 배경을 없앤 이미지를 만들 수 있다는 점이 강점입니다.
일반적인 JPG와 달리 배경이 투명한 상태로 저장되면서도 선명한 품질을 유지하기 때문에, 용량은 다소 커지지만 로고나 아이콘, UI 컴포넌트처럼 고급 작업에 꼭 필요한 형식으로 많이 사용됩니다.
참고로 Adobe 프로그램이 없어도 이미지 배경을 투명하게 만드는 방법이 필요하다면 아래 글도 함께 보면 도움이 됩니다.
Illustrator는 포토샵에서 흔히 사용하는 PNG 저장 방식보다 선택지가 훨씬 다양한데요 현재도 여전히 사용할 수 있는 웹용으로 저장(레거시)부터, 최근 버전에서 권장되는 Export for Screens(화면용 내보내기)까지, 상황에 따라 맞는 방식을 고르면 속도·용량·품질을 동시에 챙길 수 있는 PNG 투명 배경을 만들 수 있습니다.
많은 분들이 처음 Illustrator를 열고 파일 → 다른 이름으로 저장으로 들어가 보면, 정작 PNG 옵션이 보이지 않아서 당황하곤 합니다.
기본 저장 메뉴에서는 주로 원본 작업 파일과 인쇄용 포맷 위주로 보여주기 때문에, 웹이나 앱에서 바로 쓰는 PNG는 다른 메뉴에서 찾게 되어 있습니다.
일러스트 다른 이름으로 저장 시 지원 포맷 정리
파일 → 다른 이름으로 저장 메뉴에서 보게 되는 포맷은 대부분 편집이나 인쇄 중심입니다.
- Adobe Illustrator “AI”
- Adobe PDF “PDF”
- Illustrator EPS “EPS”
- Illustrator Template “AIT”
- SVG
- SVG 압축 “SVGZ”
배경 투명 PNG는 여기서 바로 나오지 않지만, 어떤 용도로 쓰이는 포맷인지 알아두면 이후 내보내기 방식을 고를 때 판단하기가 훨씬 편해집니다.
| 포맷 | 주요 용도 | 배경 투명 지원 여부 |
|---|---|---|
| AI | 일러스트 원본 작업 보관, 재편집 | 편집용 포맷으로, PNG처럼 웹에서 직접 사용하지는 않음 |
| 인쇄용, 공유용, 클라이언트 검토용 | 투명 정보는 포함되지만, 웹 이미지보다는 문서 용도에 적합 | |
| EPS | 인쇄소 전달, 다른 벡터 프로그램과 호환 | 투명을 지원하지만, 웹·앱에서 직접 사용하기에는 불편 |
| SVG / SVGZ | 웹 아이콘, 로고, 반응형 벡터 그래픽 | 완전한 벡터 + 투명 지원. PNG 대신 쓰면 용량·확장성에서 유리 |
결국 PNG 투명 배경이 필요하다면 이 메뉴가 아니라, 아래에서 보는 웹용으로 저장(레거시)나 내보내기(Export) 계열 기능을 활용해야 합니다.
일러스트 PNG 배경 투명하게 저장하는 방법 3가지
웹용으로 저장(레거시)로 PNG 투명 배경 만들기
오래전부터 써오던 방식이지만, 2026년 지금도 여전히 많이 사용하는 방법이 웹용으로 저장(Save for Web, Legacy)입니다.
이름에 레거시가 붙어 있긴 하지만, 여전히 PNG 투명 배경을 만들 때 가장 직관적인 화면과 옵션을 제공해서 현업에서도 자주 쓰입니다.
단축키 : Alt + Shift + Ctrl + S (Windows) / Option + Shift + Command + S (Mac)
웹용으로 저장 화면에서 설정할 수 있는 기본 포맷은 다음 네 가지입니다.
| 포맷 | 특징 | 추천 상황 |
|---|---|---|
| GIF | 256색, 단순 색상·아이콘에 적합, 간단한 애니메이션 지원 | 예전 웹 배너, 단순 아이콘이 아니라면 요즘은 거의 사용하지 않음 |
| JPG | 사진에 최적화, 용량 작지만 투명 배경 미지원 | 배경이 있는 사진·비주얼, 썸네일 이미지 등 |
| PNG-8 | 256색 제한, 투명 지원, 대신 용량이 상대적으로 작음 | 단순한 로고·아이콘처럼 색이 많지 않은 그래픽 |
| PNG-24 | 풀컬러 + 알파 채널, 부드러운 그라데이션과 투명 가장자리 표현에 유리 | 대부분의 UI, 로고, 일러스트에 권장 |
일반적으로 배경을 완전히 투명하게 유지하면서 품질을 최우선으로 생각한다면 PNG-24 + Transparency 체크 조합을 가장 많이 사용합니다. 색 수가 적고 용량을 조금 더 줄이고 싶을 때만 PNG-8을 선택하는 정도로 기억해 두면 편합니다.
투명 영역이 있을 때는 디더(Dither) 방식을 선택할 수 있습니다. PNG-8처럼 색 수가 제한된 포맷에서 테두리가 깨져 보이지 않게 만드는 옵션이라고 보면 됩니다.
- 확산 투명도 디더
- 패턴 투명도 디더
- 노이즈 투명도 디더
로고나 UI 아이콘처럼 날카로운 경계를 살리고 싶다면 대체로 디더를 끄거나 최소화하는 편이 자연스럽습니다.
반대로 안티앨리어싱이 강하게 들어간 일러스트에서 테두리가 계단처럼 보인다면, 디더 옵션을 바꿔 보면서 가장 부드럽게 보이는 조합을 찾는 식으로 조정하는 편이 좋습니다.
저장 시에는 가시 범위, 선택 영역, 아트보드 등 내보낼 범위를 지정하고, Mac 또는 Windows 중 실제 사용하는 운영체제를 선택해 주면 됩니다.
실제 결과 파일의 품질 차이는 크지 않지만, 환경에 맞는 설정을 유지하면 폰트나 색감 이슈를 줄이는 데 도움이 됩니다.
일러스트 내보내기(Export As)로 PNG 투명 저장하기
두 번째 방식은 내보내기 > Export As를 활용하는 방법입니다.
이 기능은 일러스트 작업을 다양한 이미지 포맷으로 바꿔야 할 때 유용하고, 최근 Illustrator 업데이트에서도 꾸준히 손을 보고 있는 메뉴입니다.
내보내기에서는 별도의 복잡한 화면 없이, 선택한 아트보드나 오브젝트를 PNG, JPG, PSD 등 다양한 이미지·문서 포맷으로 바로 저장할 수 있습니다.
- Autodesk RealDWG “DXF”
- Autodesk RealDWG “DWG”
- BMP
- CSS
- Flash “SWF”
- Jpeg “JPG”
- Macintosh PICT “PCT”
- Photoshop “PSD”
- SVG
- TIFF
- Targa “TGA”
- Windows 메타파일 “WMF”
- 텍스트 포맷 “TXT”
- 확장 메타파일 “EMF”
아래에 보이는 것처럼 인쇄·웹·3D·동영상 등 여러 분야에서 쓰이는 확장자들이 한 번에 모여 있습니다.
| 확장자 | 특징 및 활용 |
|---|---|
| PSD | 레이어 유지가 가능해, Illustrator에서 작업한 그래픽을 포토샵으로 넘겨 후반 작업을 이어갈 때 유용합니다. |
| SVG | 반응형 웹·앱에서 로고와 아이콘을 벡터 그대로 사용하는 데 적합합니다. PNG 대신 쓰면 해상도에 구애받지 않고 선명하게 유지됩니다. |
| DXF / DWG | 도면 작업, 3D, CAD 연동이 필요할 때 사용합니다. 그래픽 디자인보다는 산업용·제품 설계 쪽에 가깝습니다. |
| TIFF | 고해상도 인쇄용 이미지에 적합합니다. 투명을 지원하지만, 웹용 PNG보다는 인쇄 환경을 염두에 둔 포맷입니다. |
2026년 현재 기준으로 보면, 웹과 모바일에서 바로 사용할 이미지를 만든다면 Export As 보다는 아래에서 보는 Export for Screens 쪽이 더 많이 쓰이고, Export As는 포토샵 연동이나 인쇄용·특수 포맷이 필요할 때 활용하는 경우가 많습니다.
화면용 내보내기(Export for Screens)로 배경 투명 PNG 일괄 저장
세 번째 방법이자, 최근 Illustrator에서 가장 많이 권장되는 방식이 Export for Screens, 화면용 내보내기입니다.
이 때 여러 개의 아트보드나 아이콘 세트를 한 번에 내보내야 할 때 특히 강력합니다.
단축키 : Alt + Ctrl + E (Windows) / Option + Command + E (Mac)
이 기능을 열면 아트보드 단위 또는 자산(Asset) 패널에 모아둔 오브젝트 단위로 1배, 2배, 3배 등 여러 배율의 PNG를 한 번에 내보내는 작업이 가능합니다.
PNG-8/24뿐 아니라 SVG, PDF, WebP까지 함께 뽑을 수 있어서, 디자인 시스템이나 앱·웹 UI를 여러 플랫폼에서 동시에 사용하는 환경에 잘 맞습니다.
특히 모바일 작업에서는 안드로이드(mdpi, xhdpi 등)와 iOS(@1x, @2x, @3x) 해상도에 맞춰 PNG를 여러 사이즈로 한번에 만들어야 하는 상황이 많은데, Export for Screens에서 1x / 2x / 3x를 한 번에 지정해 주면 반복 작업을 크게 줄일 수 있습니다.
배경 색상 역시 기본값이 투명으로 설정되어 있어, 별도로 색을 깔지 않았다면 PNG가 투명 배경으로 내보내지는지 꼭 확인해 보는 습관을 들이면 좋습니다.
마지막으로, 2026년 현재 Illustrator에서는 Export for Screens 안에서 PNG, JPG, SVG, PDF, WebP 등 여러 포맷을 한 번에 지정할 수 있습니다. UI용 PNG와 함께 SVG 아이콘, 개발자 공유용 PDF를 동시에 만들어야 할 때 꽤 편리하게 활용할 수 있습니다.
정리하자면, 단일 이미지 품질을 세밀하게 확인하고 싶다면 Save for Web, 여러 포맷과 사이즈를 한 번에 뽑고 싶다면 Export for Screens에 무게를 두고 쓰는 것이 일러스트레이트 2026년 기준 Illustrator에서 가장 현실적인 선택이라고 볼 수 있습니다.
일러스트 2026 PNG 배경 투명 저장 시 알아두면 좋은 팁
실무에서 PNG 투명 배경을 저장하다 보면, 배경이 흰색으로 나와 버리거나, 가장자리가 들쭉날쭉해 보이거나, 예상보다 용량이 너무 커지는 경우가 자주 생깁니다.
Illustrator를 기준으로 자주 부딪히는 상황을 몇 가지로 나눠서 생각해 볼 수 있습니다.
먼저 아트보드 색상과 실제 배경의 차이를 이해하는 게 중요합니다. Illustrator에서 회색 체크무늬가 보이지 않고 흰 배경만 보이더라도, 실제로는 배경이 없고 투명한 상태일 수 있습니다.
보기 메뉴에서 투명 그리드 표시를 켜서 진짜로 배경에 오브젝트가 있는지, 아니면 눈에 보이는 것만 흰색인지 확인해 보는 것이 좋습니다.
또 하나는 색 공간과 해상도입니다. 웹·모바일용 PNG는 sRGB 색 공간에서 작업하는 것이 보통이며, Export for Screens에서도 RGB 설정을 확인해 두면 다른 앱이나 브라우저에서 색이 탁해 보이는 문제를 줄일 수 있습니다.
해상도는 일반 웹용이라면 1배 기준으로 72~96ppi 정도면 충분하지만, Retina 디스플레이나 고해상도 모니터를 고려한다면 2배, 3배 사이즈 PNG를 함께 만들어 두는 쪽이 안전합니다.
마지막으로 SVG와의 역할 분담도 생각해 볼 필요가 있습니다. 단색 위주의 아이콘이나 로고, 선형 일러스트라면 SVG로 내보낸 뒤, 여의치 않은 환경에서만 PNG를 보조로 쓰는 구조가 훨씬 효율적입니다.
SVG는 완전한 벡터이기 때문에, 배경 투명은 기본이고 어떤 해상도에서도 뭉개지지 않는다는 장점이 있습니다. PNG는 여전히 호환성이 넓고 구현이 단순하다는 점에서, 지원이 애매한 환경이나 복잡한 브러시·효과가 많은 그래픽에서 백업용으로 가져가는 느낌으로 쓰면 좋습니다.
일러스트 PNG 배경 투명 저장 관련 자주 묻는 질문(FAQ)
PNG로 저장했는데 배경이 흰색으로 보이는 이유는 무엇인가요?
Illustrator에서 투명하게 만들어 PNG로 내보냈는데, 어떤 뷰어에서는 흰 배경이 깔려 보이는 경우가 있습니다.
이때는 실제 파일이 흰색인지, 이미지 뷰어가 투명 영역을 흰색으로 표시하는 것인지를 먼저 구분해야 합니다. 다른 이미지 위에 PNG를 올려 보거나, 다시 Illustrator나 포토샵으로 불러와 투명 그리드가 보이는지 확인해 보면 실제 상태를 정확히 알 수 있습니다.
Save for Web이나 Export for Screens에서 배경 색상(Background Color)이 White로 설정되어 있다면, 이 값을 반드시 Transparent로 바꿔야 합니다. 특히 팀에서 한 컴퓨터를 함께 쓰는 경우, 다른 사람이 저장해 둔 설정 때문에 모르게 흰 배경이 들어가는 일이 꽤 자주 발생합니다.
PNG-8과 PNG-24 중에 어떤 걸 써야 할지 헷갈립니다
가장 단순하게 생각하면, 색이 많고 그라데이션이 부드러운 일러스트라면 PNG-24, 단색 위주의 아이콘·로고라면 PNG-8 쪽이 유리합니다. PNG-8은 최대 256색만 사용하기 때문에 용량은 줄어드는 대신, 그라데이션이 많은 그래픽에서 계단 현상이 생길 수 있습니다. 반대로 PNG-24는 용량이 다소 늘어나지만, 투명 테두리 표현과 색 재현력이 뛰어나서 대부분 상황에서 안전한 선택입니다.
프로젝트 초반에는 PNG-24로 작업을 진행하다가, 실제 서비스에 올리기 직전에 용량을 체크한 뒤, 단순한 아이콘 그룹만 PNG-8로 바꾸는 식으로 조정하는 방식이 실무에서 많이 쓰입니다.
Export for Screens로 내보냈는데 PNG 배경 투명이 되지 않을 때는 어떻게 하나요?
Export for Screens에서 PNG가 흰색 배경으로 나오는 경우는 보통 두 가지입니다.
하나는 아트보드에 실제로 흰 사각형이 깔려 있는 경우이고, 다른 하나는 설정에서 배경 색상이 White로 지정된 경우입니다. 따라가는 메뉴 이름만 다를 뿐, 핵심은 배경에 오브젝트를 깔지 않았는지와 Export 설정의 Background 항목을 확인하는 데 있습니다.
Export for Screens의 톱니바퀴 아이콘을 눌러 Advanced 설정에 들어가면, 포맷별 세부 옵션을 볼 수 있습니다. 여기에서 PNG 포맷의 Background를 Transparent로 지정하고, 필요하다면 앞으로도 같은 설정을 쓰기 위해 프리셋으로 저장해 두면 이후 작업에서 실수를 줄일 수 있습니다.
PNG 대신 SVG만 써도 되는 상황은 언제인가요?
2026년 기준으로, 최근 브라우저와 모바일 환경은 대부분 SVG를 안정적으로 지원합니다. 단색이나 소수의 색으로 이루어진 로고, 선형 아이콘, 단순한 UI 심볼이라면, PNG 대신 SVG만으로도 충분한 경우가 많습니다. 이때 장점은 어떤 해상도에서도 또렷하고, 색상·사이즈를 코드에서 쉽게 수정할 수 있다는 점입니다.
다만 브러시 효과, 복잡한 블러·그라데이션, 여러 레이어가 섞인 일러스트는 SVG로 바꾸는 과정에서 파일이 너무 무거워지거나 구조가 지나치게 복잡해질 수 있습니다. 이런 경우에는 주요 로고·아이콘은 SVG, 복잡한 그래픽은 PNG처럼 역할을 나눠서 사용하는 편이 더 현실적입니다.
PNG 투명 이미지를 포토샵으로 넘길 때 주의할 점이 있을까요?
Illustrator에서 PNG로 뽑은 뒤 포토샵으로 다시 열면, 투명 영역은 그대로 유지되지만 벡터가 아닌 픽셀 상태가 됩니다. 확대·축소를 자주 해야 하는 작업이라면, 차라리 PSD로 내보내서 스마트 오브젝트 상태로 관리하는 쪽이 더 안정적입니다.
이렇게 하면 나중에 수정이 필요할 때 다시 Illustrator에서 벡터를 수정하고, 포토샵에서 자동으로 업데이트되는 구조를 만들 수 있습니다.
또 하나는 색 공간입니다. Illustrator와 포토샵 모두 sRGB로 맞춰 두지 않으면, PNG를 오가면서 색이 미묘하게 달라 보일 수 있습니다. 팀 작업이라면 프로젝트별 공통 색 설정을 미리 정해 두는 쪽이 안전합니다.
PNG 용량이 너무 클 때는 어떻게 줄이는 게 좋나요?
일러스트 PNG 배경 투명 저장에서 용량이 고민될 때는, 먼저 벡터 구조를 정리해서 불필요한 앵커 포인트와 숨겨진 오브젝트를 줄이는 것만으로도 꽤 차이가 납니다. 그 다음은 색 수가 많은지, 이미지 사이즈가 지나치게 큰지, PNG-24가 꼭 필요한 상황인지 차례로 체크해 보는 것이 좋습니다.
그래도 용량이 크다고 느껴진다면, 일단 Illustrator에서 품질 우선으로 저장한 뒤, 전용 PNG 압축 툴이나 WebP 변환 도구를 한 번 더 거치는 방식을 추천합니다. 이렇게 하면 디자인 단계에서는 최대한 깨끗한 PNG를 유지하면서, 실제 서비스 적용 단계에서만 용량을 줄이는 구조를 만들 수 있습니다.
