로고 파일을 요청받았을 때 SVG가 더 좋은지 PNG가 더 안전한지 헷갈릴 수 있습니다. 어디에서 어떤 크기로 쓰는지에 따라 필요한 파일이 달라집니다. 원본 형태, 투명 배경, 받는 도구의 지원을 순서대로 확인해 봅니다.
사용 목적을 한 문장으로 확인하기
웹사이트 상단 로고인지, 문서에 붙일 그림인지, 인쇄업체에 보낼 자료인지 먼저 확인합니다. “로고 주세요”라는 요청에는 사용할 도구, 표시 크기, 배경색을 물어보세요. 목적을 알면 어떤 파일을 준비해야 할지 좁힐 수 있습니다.
받는 쪽에서 SVG를 지원하지 않으면 PNG 같은 지원 형식이 필요할 수 있습니다. 반대로 화면 크기가 여러 가지로 바뀌는 사용처라면 벡터 원본이 도움이 됩니다. 인쇄는 해상도뿐 아니라 색상과 제작 조건도 따로 안내받아야 합니다.
SVG 안의 내용도 확인하기
SVG는 벡터 도형을 표현할 수 있지만 이미지가 포함된 파일일 수도 있습니다. 낮은 해상도 사진을 SVG 안에 넣었다고 그 사진의 세부가 새로 생기는 것은 아닙니다. 확대했을 때 선과 글자가 어떻게 보이는지 확인하세요.
로고에 글자가 있다면 다른 환경에서도 같은 모양으로 표시되는지 점검합니다. 글꼴에 의존하는 요소나 외부 참조가 있으면 전달할 때 결과가 달라질 수 있습니다. 편집 원본과 전달용 사본을 구분하고, 받는 도구에서 열어볼 수 있는 파일로 준비하는 편이 좋습니다.
PNG는 크기와 투명도를 함께 점검하기
PNG로 내보낼 때는 실제 표시 크기와 필요한 픽셀 수를 정합니다. 작은 PNG를 여러 번 확대해서 쓰는 것보다 원본에서 필요한 크기의 사본을 만드는 편이 낫습니다. 웹에 쓸 파일과 문서에 쓸 파일의 이름도 구분하세요.
투명 배경이라면 흰 화면만 보지 말고 어두운 배경에도 올려봅니다. 흰 테두리, 불필요한 여백, 잘린 선이 있는지 확인할 수 있습니다. 배경을 지운 사진과 원래 벡터 로고는 작업 방식이 다르므로, 배경 제거만으로 로고 원본을 복원했다고 표현하지 않습니다.
전달 묶음에는 용도를 남기기
파일을 보낼 때는 수정 가능한 원본과 바로 쓰는 사본을 구분합니다. 가상 파일명으로 logo-web-transparent.png와 logo-vector.svg처럼 용도가 보이게 정리할 수 있습니다. 필요하다면 배경이 있는 확인용 미리보기를 별도 첨부하되 실제 로고 파일과 혼동하지 않도록 적어주세요.
최종 전달 전에 사본을 새로 열어 모양, 배경, 크기, 누락된 요소를 확인합니다. “SVG니까 무조건 선명합니다”라는 설명 대신 어떤 도구와 크기에서 확인했는지 남기는 편이 정확합니다. 받는 쪽의 확인 결과를 받은 후 해당 파일을 최종본으로 보관하세요.
확인 자료와 적용 범위
- MDN — SVG introduction — 벡터와 포함 이미지 등 SVG 구성