색이 있는 배경 위에 로고를 올렸다가 이미지 둘레에 흰 네모가 그대로 남는 일을 겪어 봤다면, 원인은 파일 형식이었습니다. PNG는 바로 그 문제를 풀기 위해 만들어졌습니다. 투명 배경이 필요하거나 저장할 때 화질이 떨어지면 안 되는 이미지라면 기본으로 쓰는 형식입니다.
PNG는 무엇의 줄임말인가요?
PNG는 Portable Network Graphics의 줄임말로, 우리말로 옮기면 이식 가능한 네트워크 그래픽입니다. 1995년에 GIF를 대신할 개방형·무료 형식으로 만들어졌고, 곧 웹에서 가장 널리 쓰이는 이미지 형식 가운데 하나가 되었습니다. JPG와 달리 PNG는 무손실 압축을 쓰기 때문에 저장할 때 픽셀 정보를 하나도 버리지 않습니다.
PNG는 어떻게 동작하나요?
PNG는 ZIP 파일에도 쓰이는 DEFLATE라는 압축 알고리즘에 픽셀 예측 필터를 더해 압축합니다. 이미지 안에서 반복되는 패턴을 찾아 더 효율적으로 기록할 뿐, 원본 정보를 버리지는 않습니다.
그래서 PNG는 열 번을 저장하고 다시 열어도 원본과 픽셀 하나까지 똑같습니다. 화면 캡처나 로고, 여러 번 손볼 이미지처럼 원본 그대로가 중요한 작업에 잘 맞는 이유입니다.
PNG에는 알파 채널이라는 특별한 채널도 있어서 픽셀마다 투명도를 따로 지정할 수 있습니다. 한 픽셀은 완전히 불투명할 수도, 완전히 투명할 수도, 그 사이 어느 정도로 반투명할 수도 있습니다. 덕분에 가장자리가 부드럽게 처리되고 그림자에도 진짜 투명도를 줄 수 있습니다.
PNG의 장점
- 알파 채널 투명도: 반투명과 부드러운 가장자리까지 포함해 투명도를 온전히 지원합니다. 어떤 배경 위에 올려도 흰 네모가 생기지 않는, 널리 지원되는 유일한 형식입니다.
- 무손실 압축: 몇 번을 저장하고 다시 열어도 원본 품질이 그대로 남습니다.
- 또렷한 글자와 그래픽에 적합: 곧은 선과 글자, 단색 면이 PNG에서는 아주 또렷하게 나오고, JPG에서 보이는 지저분한 압축 자국이 생기지 않습니다.
- 어디서나 열리는 호환성: 모든 브라우저와 운영체제, 이미지 편집 프로그램에서 지원합니다.
- 넓은 색 심도: PNG는 8비트(256색)와 24비트(1,670만 색)를 지원하고, 전문 작업용으로는 48비트까지 다룹니다.
PNG의 한계
- 사진에서는 파일이 큼: 사진에서는 무손실 압축이 JPG의 손실 압축보다 효율이 떨어집니다. 눈으로 보기에 같은 품질이라도 PNG 사진은 JPG보다 파일이 5~10배 클 수 있습니다.
- 애니메이션 미지원: PNG는 정지 이미지 형식입니다. 투명도가 있는 움직이는 이미지가 필요하면 WebP나 APNG(움직이는 PNG)를 쓸 수 있지만 지원 범위는 더 좁습니다.
- 웹사이트 사진에는 부적합: 웹사이트에 올리는 사진을 PNG로 두면 로딩 속도가 크게 나빠질 수 있습니다. 사진에는 언제나 JPG나 WebP가 맞습니다.
💡 간단한 기준: 투명 배경이 있거나 로고, 아이콘, 화면 캡처처럼 글자와 또렷한 선이 들어간 그래픽이라면 PNG를 쓰세요. 웹사이트에 올릴 사진은 JPG나 WebP가 낫습니다. 눈에 띄는 손실 없이 훨씬 가볍습니다.
PNG-8과 PNG-24는 무엇이 다를까요?
| 항목 | PNG-8 | PNG-24 |
|---|---|---|
| 색 수 | 최대 256색 | 최대 1,670만 색 |
| 투명도 | 픽셀 단위로 있거나 없거나 | 알파 채널 전체(256단계) |
| 파일 용량 | 더 작음 | 더 큼 |
| 추천 용도 | 단순한 아이콘, 색이 적은 그래픽 | 로고, 반투명이 있는 이미지 |
요즘 쓰임새 대부분, 특히 로고나 가장자리가 부드러운 이미지에는 PNG-24가 알맞습니다. 어떤 불투명도에서도 투명도를 온전히 표현하기 때문입니다.
PNG는 언제 쓰나요?
다음과 같은 상황에서 PNG를 쓰면 됩니다:
- 로고와 브랜드 이미지: 색이 서로 다른 배경 위에 흰 네모 없이 로고를 올려야 할 때 씁니다.
- 화면 캡처: 화면이나 대시보드, 시스템 창은 PNG로 저장하면 글자가 아주 또렷하게 남습니다.
- 아이콘과 UI 요소: 가장자리가 깔끔해야 하는 버튼과 일러스트, 인터페이스 요소에 씁니다.
- 편집할 이미지: 열고 고치고 저장하기를 반복할 이미지라면, PNG는 JPG처럼 화질 손실이 쌓이지 않습니다.
- 글자가 들어간 인포그래픽: 글자와 그래픽이 섞인 이미지는 PNG에서 훨씬 또렷하게 나옵니다.
PNG · JPG · WebP 전체 비교
| 항목 | PNG | JPG | WebP |
|---|---|---|---|
| 압축 방식 | 무손실 | 손실 | 둘 다 지원 |
| 투명도 | 지원(알파 채널) | 없음 | 지원 |
| 사진에 적합 | 없음 | 지원 | 지원 |
| 로고와 아이콘에 적합 | 지원 | 없음 | 지원 |
| 사진 파일 용량 | 매우 큼 | 작음 | 매우 작음 |
| 로고 파일 용량 | 작음에서 보통 | 보통(압축 자국 발생) | 작음 |
| 어디서나 지원 | 지원 | 지원 | 최신 브라우저 |
PNG 용량은 어떻게 줄이나요?
무손실 형식이라 해도 PNG 용량은 꽤 많이 줄일 수 있습니다. 색 수가 적은 이미지라면 색 심도를 PNG-24에서 PNG-8로 낮추고, 필요 없는 메타데이터를 지우고, ImageTools의 압축 도구가 쓰는 것처럼 더 효율적인 압축 알고리즘을 적용하는 방법이 있습니다. 이렇게 하면 눈에 보이는 손실 없이 용량을 30~50%까지 줄이는 경우가 많습니다.