[용어정리] PNG와 SVG의 개념과 차이점

회사의 주요사업에 대한 웹 소개 페이지를 모바일로 리뉴얼하는 프로젝트를 진행하고 있다.

화면 구성이나 전체적인 무드는 이미 윗선에서 결정되었기 때문에, 나는 구상된 것이 실현되게 관리하는 역할을 맡았다.

작은 PM 이 된 것이다.

 

나, 개발자, 디자이너 세명의 단톡방이 파지고 다양한 의견을 주고 받으며 프로젝트는 잘 끝나가는 듯 했다.

 

대략적인 사이트 구현이 완료되었다는 메신저를 받고, 개발자가 건네준 테스트 URL 에 들어간 브리는 깜짝 놀랐다.

디자이너가 작업한 아이콘과 텍스트가 모두 번져보이는 것.

무언가 흐리멍덩하고 깨져보이는 현상이 생겼는데, 이를 어떻게 고쳐달라고 말해야 할지 몰라 디자이너에게 가서 쩔쩔맸다.

 

"제 폰으로 확인했을때는 약간 번져 보이는데... 약간 깨진 것 같기도 하고요. 좀 더 쨍하게 볼 수 있는 방법이 있을까요? 해상도의 문제일까요?"

 

디자이너는 잠깐 보더니, 개발자에게 메신저를 보냈다.

 

"아이콘과 텍스트 섹션을 나눠서, 이미지 다시 전달 드릴게요. 아이콘은 svg 파일로 드리고, 텍스트 섹션도 아이콘과 동일한 크기로 다시 드릴게요. 기존 프로토타입은 아이폰x 375*812 로 설정해서 진행했는데, 이미지 넓이를 몇 width로 해서 진행하면 좋을지 확인 부탁드립니다."

 

그러자 개발자는 이렇게 답했다.

 

"width 는 넉넉하게 450 으로 주시면 될 것 같아요. 그리고 svg 적용이 가능한지 확인해봐야 해서, 확인 후 다시 말씀 드리겠습니다."

 

나는 뭔 소린가 싶었지만, 일단 호응했다. 일이 잘 풀려나가고 있는 것 같았다.

그렇게 약간의 시간이 흐르고 그들은 페이지를 수정하여 다시 URL 에 들어가 볼것을 요청했다. 아이콘과 텍스트가 쨍해졌다! 

그리고 나는 집에 와서 맥북을 켰다. 그래서 그게 정확히 무슨 차이인건데 ?

 

---

 

내가 서칭한 바에 따르면 PNG 와 SVG 파일 형식 모두 웹 사이트 및 앱의 반응 형 디자인에서 자주 사용되는 이미지 파일 형식이다.

그럼 PNG와 SVG의 차이는 무엇일까? (아래 이미지를 참고하면 더욱 직관적으로 알 수 있다.)

 

 

PNG(Portable Network Graphics)란 

고정된 수의 픽셀(pixel)로 구성된 래스터 기반 파일 형식이다. 개별 픽셀은 작은 정사각형이고, 이 정사각형들이 모여서 전체 이미지를 구성한다고 생각하면 된다. PNG 파일을 이루는 픽셀의 수는 고정돼 있는데, 화면상에서 이미지를 확대하면, 각 픽셀이 더 큰 영역을 차지해야 하므로 이미지는 뿌예지게 된다. 👉🏻 내가 문제를 겪었던 구간이 이 부분이다.

 

SVG(Scalable Vector Graphic)란

벡터 이미지 파일 형식이다. 모든 SVG 비주얼은 해상도를 잃지 않고 모든 크기로 확장 가능하다. 반응형이며(웹상 움직이는 모든 아이콘은 svg 파일이다), 화면 크기에 따라 그래픽 크기가 변경 가능하고, CSS로 사용자 정의 할 수 있다.

 

---

 

그럼 PNG 와 SVG 를 어떻게 구분하여 써야할까?

이에 대한 답으로는 현직 디자이너 분의 블로그 포스팅을 참고하였다(링크)

 

1. 반응형이 아닌 디지털 디자인 또는 인쇄 디자인을 디자인하는 경우 PNG로 다운로드하십시오.

   - 선명하게 유지하기 위해 가능한 한 가장 큰 크기를 사용하십시오.

 

2. 앱 또는 반응 형 웹 사이트의 UI / UX 디자인 아이콘을 사용하는 경우 SVG로 다운로드하십시오.

  - 색상 및 레이어 측면에서 일러스트레이션을 편집 할 수 없게하려면 PNG로 다운로드하십시오.

  - 나중에 색상이나 디자인 레이어를 전체적으로 변경하려면 SVG로 다운로드하십시오. 👉🏻 CSS로 사용자 정의할 수 있기 때문

​

3. 이제 고객을 위한 로고를 디자인 한다고 가정 해보십시오 . 어떤 파일 형식을 보내 시나요?

  - 가장 좋은 방법은 PNG를 보내는 것입니다. 웹 사이트 헤더, 모든 디지털 또는 인쇄 디자인에서 이를 사용할 수 있습니다.

     그들에게 세 가지 버전을 보내십시오; 저품질, 중품 질 및 고품질.

  - 앱 또는 웹 사이트의 커스텀 아이콘 을 디자인하는 경우 어떻게 됩니까?

     PNG와 SVG 파일을 모두 클라이언트에게 보냅니다. 브랜드에 대한 모든 옵션을 제공하는 것이 가장 좋습니다.

​

 

더 궁금한 점은 Giii님 브런치 글을 참고하였다.(링크)

 

4. PNG가 깨지는 것을 방지하기 위해 다양한 데이터를 추가하여 개선할 수는 있다.

     단, 로드하는데 시간이 겁나 소요된다. 웹성능을 고려하지 않은 디자이너가 되는 지름길.

    (실제 웹페이지가 로딩되는데 3초 이상 소요되면 이탈한다는 말도 있다.)

 

5. SVG는 반대로 코드로 이루어져 있기 때문에 바이트도 안되는 크기로 이루어져 있어 용량적인 측면에서 훨씬 우세하다.

    웹사이트의 속도를 훨씬 빠르게 만들어 준다.

 

6. SVG의 가장 큰 장점중에 하나는 애니메이션 효과를 지원한다는 거다. CSS, JavaScript 를 통해 동적 이미지를 제공할 수 있다.

 

 

---

마치며...

 

번외로, 찾아본 바에 따르면 오래된 브라우저 및 이메일 응용 프로그램은 때때로 SVG를 읽을 수 없다고 한다. 개발자가 SVG 적용이 가능한지 확인해보겠다는 말은 이것을 의미한 것.

 

이제, 내가 했던 요청 내용을 조금 더 말 잘 통하는 협업자 스타일로 바꾸어보자.

 

"제 폰으로 확인했을때는 약간 번져 보이는데... 약간 깨진 것 같기도 하고요. 좀 더 쨍하게 볼 수 있는 방법이 있을까요? 해상도의 문제일까요?"

👉🏻 아이콘이 일부 깨져보이는 느낌이 있어, SVG 형식으로 변환하여 적용해주세요. 텍스트는 해상도 높여서 이미지로 제작하는게 좋을지, 아니면 html에 텍스트로 작성하는게 좋을지. 웹성능 및 소요시간 고려하시어 의견 부탁드리겠습니다. 개발자분은 SVG 형식이 적용 가능한지 확인 부탁드려요!