같은 로고 하나가 웹사이트 내비게이션에서는 높이 24픽셀에 불과할 수 있고, 전시회 배너에 인쇄될 때는 폭 2미터로 커집니다. PNG와 SVG 중 무엇을 고를지는 먼저 어느 장면에 들어가는지에서 시작합니다. 웹과 제품 인터페이스에서는 SVG가 우선입니다. 로고가 경로로 기록되어 어떤 크기든 소프트웨어가 다시 그립니다. 비트맵만 받는 업로드 입구(소셜 프로필, 일부 사무 문서)에는 투명 PNG를 내고, 포스터, 간판, 인쇄물에는 SVG 또는 여기서 내보낸 벡터 파일을 써야 확대해도 흐려지지 않습니다. 당장 PNG 한 장만 있어도 뒤엎고 다시 시작할 필요는 없습니다. 장면에 필요한 형식을 먼저 확인하고 없는 것을 보충하세요.
핵심 요약
- 웹, 인터페이스, 반복적으로 확대·축소하고 색을 바꿔야 하는 장면에는 SVG를 쓰세요. 그래픽이 경로로 기록되고 확대할 때 다시 그려져 가장자리가 흐려지지 않습니다.
- 비트맵 업로드만 받는 입구(소셜 미디어 프로필, 일부 사무 소프트웨어)에는 투명 PNG를 쓰고, 플랫폼의 SVG 지원을 억지로 요구할 필요는 없습니다.
- 그래픽 로고와 로고타입은 SVG 마스터 파일을 준비할 가치가 있고, 사진 스타일 마스코트와 복잡한 텍스처를 담은 브랜드 이미지는 고해상도 PNG를 유지하세요.
- SVG가 PNG보다 반드시 작지는 않습니다. 파일 크기는 그래픽 복잡도에 달려 있고, 선택 기준은 용도이지 용량이 아닙니다.
세 가지 사용 장면에서 선택 시작하기
가장 흔한 세 가지 납품 과제가 로고 파일의 거의 모든 행선지를 덮습니다.
웹사이트 내비게이션 로고. 내비게이션 바, 푸터, 모바일 인터페이스의 로고는 서로 다른 화면 밀도에서 서로 다른 크기로 표시됩니다. SVG가 가장 적합합니다. 브라우저가 경로를 실시간으로 그려 작은 아이콘 폭부터 푸터의 큰 배너까지 선명함을 유지하고, 색을 바꿀 때도 파일이나 코드에서 곧바로 처리되며 같은 파일을 디자이너에게 그대로 넘겨 계속 편집할 수 있습니다.
소형 소셜 미디어 프로필. 프로필 업로드 입구는 보통 JPG와 PNG만 받으므로 투명 배경 PNG 한 장을 준비하면 충분합니다. 플랫폼이 프로필을 원형이나 정사각형으로 잘라도 로고 주위에 흰 배경 조각이 따라 나오지 않습니다. 프로필 표시 크기가 제한적이라 비트맵의 선명도로 충분하고 이 장면에는 SVG가 필요하지 않습니다.
대형 포스터와 인쇄물. 포스터, 롤배너, 간판은 로고를 수십 배 확대합니다. SVG는 원천에서 확장 문제를 해결합니다. 경로는 해상도와 무관하고 출력 크기는 사용 단계에서 정합니다. 작은 PNG 한 장만 있을 때 그대로 확대하면 흐림과 계단 현상이 나타나고, 이 장면에서야말로 벡터 파일이 정말 필요합니다.
PNG와 SVG의 차이는 어디서 나오나
두 형식의 근본적인 차이는 그래픽을 기록하는 방식입니다. PNG는 픽셀 격자를 씁니다. 각 점이 한 가지 색을 기록하고 파일이 아무리 커도 픽셀 총수는 고정되어 있어, 원본 픽셀을 넘어 확대하면 소프트웨어가 기존 픽셀을 늘려 채울 수밖에 없고 가장자리가 흐려지며 계단이 생깁니다. SVG는 경로와 도형으로 그래픽을 서술합니다. 선이 어디서 시작하고 곡선이 어떻게 휘고 영역에 무슨 색이 채워지는지를 담아, 확대할 때 소프트웨어가 이 서술대로 다시 그려 가장자리가 언제나 매끄럽습니다.
투명 배경은 두 형식 모두 지원하지만 방식이 다릅니다. PNG는 투명 픽셀 채널로 로고 주위의 빈 공간을 유지하고, SVG는 애초에 '바탕'이 없고 그래픽 자체가 경로의 집합입니다. 이후 편집은 더 큰 갈림길입니다. SVG는 열자마자 전체 색을 바꾸고 앵커를 조정하고 분해·재조립할 수 있지만, PNG는 픽셀 단위로만 다룰 수 있어 색 영역 하나를 바꾸는 데도 비트맵 소프트웨어에서 영역을 수선해야 합니다.
파일 용량은 자주 오해를 받습니다. 그래픽이 단순하면 SVG는 적은 경로만 기록해 보통 작습니다. 그러나 그라데이션이 풍부하고 노이즈가 뚜렷한 비트맵을 SVG로 바꾸면 수많은 조각 경로로 쪼개져 용량이 원래 PNG를 훨씬 넘을 수 있습니다. 'SVG가 더 작다'는 말은 성립하지 않고, 성립하는 것은 '단순한 그래픽의 SVG는 작다'입니다.
장면과 형식 선택표
소재 유형은 형식 파라미터보다 선택을 더 많이 결정합니다. 세 가지 흔한 브랜드 그래픽별 권장은 다음과 같습니다.
| 소재 유형 | 그래픽 특징 | 권장 | 이유 |
|---|---|---|---|
| 그래픽 로고, 로고타입 | 경계가 또렷하고 색 영역이 적음 | SVG 마스터 파일 준비, 투명 PNG 함께 저장 | 경로가 깔끔해 편집 가능, SVG가 확대를 담당, PNG는 SVG 미지원 장면의 대안 |
| 사진 스타일 마스코트 | 연속 그라데이션, 풍부한 음영 | 고해상도 PNG 유지 | 벡터화하면 수많은 조각 경로로 쪼개져 편집이 어렵고, 적은 경로로 자유 확대하는 의미도 사라짐 |
| 복잡한 텍스처를 담은 브랜드 이미지 | 디테일 많고 입자감 강함 | 비트맵 위주로, 필요한 부분만 선별 벡터화 | 전체 변환은 보통 손해. 더 큰 크기가 필요할 때는 고해상도 비트맵 재출력이 우선 |
판단 규칙 하나만 기억하면 충분합니다. 경계가 또렷하고 색 영역이 적을수록 벡터화할 가치가 크고, 화면이 사진에 가까울수록 비트맵 형식에 남겨야 합니다.
PNG만 있을 때 SVG 보충하기
SVG가 필요하다고 확인한 뒤라면 변환은 전체 일의 작은 한 토막입니다. 이미지→벡터에 그 PNG를 업로드하세요. 도구는 PNG, JPG, WebP를 받고 가로·세로 모두 256픽셀 이상이어야 하며, 로그인 후 한 번에 한 장을 변환하고 완료 후 SVG 파일을 내려받습니다. 업로드, 점검, 다운로드 각 단계의 화면 스크린샷은 같은 시리즈의 'PNG와 JPG를 SVG로 바꾸는 방법' 튜토리얼에 전체 과정이 있어 여기서는 반복하지 않습니다.
변환이 끝나도 결과는 용도별로 정리해야 합니다. 결과 패널에는 1배, 2배, 4배 확대가 있고 납품 전 곡선, 빈 공간, 가는 선이 깔끔한지 중점적으로 보세요. 두 가지는 미리 받아 들여야 합니다. 글자는 윤곽 경로로 변하며 변환이 편집 가능한 원래 폰트로 되돌려 주지 않으므로 카피 수정은 디자인 도구에서 다시 입력해야 합니다. 가장자리 품질은 원본이 결정하므로 압축이 심한 PNG는 변환 결과의 가장자리가 거칠고, 더 선명한 원본으로 바꾼 뒤 변환하세요. 이런 원본 다듬기 방법은 '로고를 벡터로 바꿨을 때 가장자리가 거칠면 어떻게 하나'에서 따로 다룹니다.
브랜드 파일 납품 패키지 정리법
형식이 정해진 뒤에는 로고를 이름 붙은 파일 묶음으로 정리해 누구에게 넘겨도 다시 요청할 일이 없게 만드세요. 최소한으로 쓸 만한 납품 패키지는 이렇습니다.
| 파일 | 용도 | 이름 예시 |
|---|---|---|
| SVG 마스터 파일 | 웹, 인쇄물, 확대, 이후 편집의 유일한 원본 파일 | acme-logo.svg |
| 투명 배경 PNG | 소셜 프로필, 사무 문서 등 비트맵만 받는 장면 | acme-logo-transparent.png |
| 어두운 배경 미리보기 | 어두운 배경에서 로고 가독성 확인 | acme-logo-preview-dark.png |
| 밝은 배경 미리보기 | 밝은 배경에서 로고 표현 확인 | acme-logo-preview-light.png |
이름은 통일된 접두어에 용도 접미어를 붙이고 버전이 바뀔 때는 버전 번호를 갱신하세요. 새 이름을 복사해 만들면 언젠가 패키지 안에 logo-final-2.png와 logo-최종본.png가 공존하는 상황이 옵니다. 어두운 배경과 밝은 배경 미리보기는 같은 폴더에 넣을 것을 권합니다. 넘겨줄 때 상대가 두 배경에서 로고를 쓸 수 있는지 한눈에 확인할 수 있습니다.
인쇄 단계의 파일은 따로 다루세요. 인쇄소가 벡터 PDF, 지정 색상 모드, 재단 여유 치수를 요구할 때 이런 생산 파일은 해당 디자인 과정이 처리합니다. SVG를 원본으로 삼아 디자인 소프트웨어에서 변환과 내보내기를 마치고 색 기준은 인쇄소와 항목별로 확인하세요. 이미지→벡터 도구의 출력은 SVG 파일이며 인쇄용 생산 파일을 직접 만들지 않습니다.
자주 묻는 질문
SVG가 항상 PNG보다 작나요?
아니요, 파일 크기는 내용 복잡도에 달려 있습니다. 단순한 그래픽의 SVG는 적은 경로만 기록해 보통 작지만, 그라데이션, 음영, 노이즈가 풍부한 비트맵을 SVG로 바꾸면 수많은 조각 경로가 생겨 용량이 오히려 더 클 수 있습니다. 형식 선택의 기준은 용도와 확장 필요이지 용량이 아닙니다.
PNG를 확대하면 흐려지는데 반드시 벡터로 바꿔야 하나요?
이 로고의 앞으로의 용도를 보세요. 가끔 한 번씩 확대하는 것이라면 더 높은 해상도의 PNG를 다시 내보내는 것으로 충분합니다. 반복 확대, 전체 색 변경, 인쇄 사용, 장기 브랜드 마스터 파일 역할이 필요할 때 비로소 SVG를 보충할 가치가 있습니다. 사진 스타일 로고는 변환하더라도 편집 어려운 조각 경로가 나오므로 고해상도 비트맵 유지가 더 실용적입니다.
인쇄소에서 PDF를 요구하면 어떻게 하나요?
인쇄소의 구체적인 요구에 맞춰 해당 디자인 과정에 맡기세요. SVG 마스터 파일을 디자인 소프트웨어에 넣고 상대가 지정한 PDF 유형으로 내보내며, 색상 모드, 재단 여유 등 파라미터는 인쇄소와 항목별로 확인합니다. 이미지→벡터 도구가 출력하는 것은 SVG 파일이고 인쇄 생산용 PDF는 디자인 단계에서 완성됩니다.
PNG만 있다면 먼저 SVG 한 부 보충
납품 패키지에서 빠진 항목부터 시작하세요. PNG 버전만 있다면 먼저 이미지→벡터로 SVG를 보충하고 어두운 배경과 밝은 배경 미리보기에서 한 번 점검한 뒤 마스터 파일이 될 수 있는지 결정하세요. 이 단계가 끝나면 웹, 프로필, 포스터 세 장면 모두에 대응 형식의 파일이 갖춰집니다.
