shadcn.io— shadcn/ui 블록 수천 개
본문으로 건너뛰기

PNG일까 JPG일까? 제가 십 년째 쓰는 판단 규칙

PNG와 JPG는 「이 이미지를 저장해」라는 물음의 두 가지 기본 답으로 20년 넘게 자리해 왔습니다. 그리고 대부분은 우연으로 둘 중 하나를 고릅니다. 내보내기 대화상자의 기본값이 무엇이었느냐로요. 그건 9MB짜리 스크린샷을 누군가에게 메일로 보내거나, 로고 둘레에 흉한 회색 후광을 두른 채로 내보내는 날까지는 잘 통합니다. 그러면 갑자기 선택이 중요해집니다.

핵심은 이겁니다. 이 결정은 정말로 단순합니다. 제가 약 십 년째 던져 온 하나의 질문으로 갈리고, 지금껏 단 한 번도 저를 배신한 적이 없습니다.

그 하나의 질문

이 이미지는 가장자리로 되어 있는가, 빛으로 되어 있는가.

그게 다입니다. 글자, 로고, 아이콘, 스크린샷, 도표, 선화, 또렷한 경계와 평평한 색 면을 가진 모든 것은 가장자리입니다. 사진, 그러데이션, 매끄럽게 이어지는 톤과 수천 가지 미묘한 색 변화를 가진 모든 것은 입니다.

가장자리는 PNG를 원합니다. 빛은 JPG를 원합니다. 거의 모든 것이 여기서 따라 나옵니다.

가장자리가 PNG를 원하는 이유

PNG는 무손실입니다. 저장한 모든 픽셀이 몇 번을 다시 열어도 영원히 정확히 그대로 돌아옵니다. PNG는 같은 색이 이어지는 구간을 찾아 압축하는데, 가장자리 기반 이미지가 바로 그런 것으로 가득합니다. 단색 버튼, 흰 배경, 검은 선처럼요. PNG는 그런 걸 게걸스럽게 먹어 치우면서도 면도날처럼 또렷하게 남습니다.

알파 채널도 있어서 진짜로 투명해질 수 있습니다. 색이 있는 배경에 얹고 싶은 모든 로고가 PNG여야 하는 이유입니다. JPG에는 투명함이 전혀 없습니다. 그 영역을 흰색으로 채우는데, 흉한 후광이 거기서 나옵니다.

실패하는 경우는 사진입니다. 사진을 PNG로 저장하면 센서 잡음 한 점, 미세한 그러데이션 하나까지 온전한 충실도로 성실히 기록하고, 파일은 부풀어 오릅니다. PNG가 낭비스러운 건 나빠서가 아닙니다. 눈이 기꺼이 눈감아 줄 디테일에 정직해서 낭비스러운 겁니다.

빛이 JPG를 원하는 이유

JPG는 손실입니다. 눈이 잘 못 알아채는 정보, 즉 미세한 색 변화와 고주파 디테일을 버리는데, 사진에서 이걸 놀랄 만큼 잘 해냅니다. 그런 건 정확히 사진에 남아도는 것입니다. 결과는 용량이 몇 분의 일인 파일이고, 무엇이 빠졌는지 눈으로는 보이지 않습니다.

하지만 JPG를 가장자리에 겨누면 무너집니다. 또렷한 경계, 특히 글자 둘레에 흐릿한 잡티를 번지게 합니다. 또렷한 가장자리야말로 JPG가 버리도록 설계된 바로 그 고주파 디테일이기 때문입니다. 코드 스크린샷을 JPG로 만들면 글자마다 둘레가 살짝 지저분해 보입니다. 모니터 탓이 아닙니다. 형식이 잘못된 입력에서 설계대로 작동하는 것입니다.

이걸로 끝나는 용량 표

같은 두 원본 이미지를, 적당한 설정으로 두 방식 다 저장했습니다.

이미지PNG로JPG로
사진 — 1200만 화소~14MB~3MB
글자가 있는 UI 스크린샷~600KB~900KB
평평한 2색 로고~20KB~85KB

양방향으로 읽어 보세요. 사진은 JPG로 거의 5배 작은데 눈에 보이는 손실은 없습니다. 하지만 스크린샷과 로고는 JPG로 더 크고, 후광과 번짐으로 보기에도 더 나쁩니다. 어느 쪽이 더 작으냐는 그림에 무엇이 담겼느냐에 따라 완전히 뒤집힙니다. 세 줄에 담긴 교훈이 전부입니다.

예외 (알아 둘 만한 건 딱 둘)

투명함은 PNG를 강제합니다. 이미지의 어느 부분이라도 비쳐 보여야 한다면, 내용과 무관하게 JPG는 후보에서 빠집니다. 물리적으로 알파 채널을 저장할 수 없기 때문입니다. 투명한 배경에 오려 낸 사진조차 PNG(또는 WebP)여야 합니다.

사진 위 글자는 재량 판단입니다. 자막이 새겨진 사진은 반은 빛, 반은 가장자리입니다. 대체로 사진이면 JPG로 가고 글자가 살짝 무른 걸 받아들이거나, 글자가 또렷해야 하고 용량을 감당할 수 있으면 PNG로 갑니다. 깔끔한 승자는 없습니다. 어느 흠을 더 견딜지 고르는 겁니다.

이미 잘못된 형식을 갖고 있을 때

대개는 내보낼 때 고르는 게 아니라, 누군가 이미 잘못 저장한 파일에 갇혀 있는 상황입니다. 사진작가가 14MB짜리 PNG를 건넸거나, 디자이너가 로고를 후광 두른 JPG로 보냈거나요. 그건 그냥 변환입니다.

똑똑한 방향으로 가는 것, 즉 너무 무겁게 저장된 사진을 PNG에서 JPG로 바꾸는 건 확실한 이득이고, 여기 브라우저 안에서 돌아가서 파일이 기기를 절대 벗어나지 않습니다. 반대 방향인 JPG에서 PNG로는 정직하지만 한계가 있습니다. 파일을 이 시점부터 무손실로 만들어 주는데, 편집 전에 원하는 바로 그것이지만, JPG가 이미 새겨 넣은 잡티를 지워 주지는 못합니다. 손실은 한 방향 문입니다. PNG로 바꿔도 그 문을 되돌아 통과시키지는 않고, 다만 더 잃는 것을 멈춰 줄 뿐입니다.

그 하나의 질문, 가장자리냐 빛이냐를 물으면 거의 매번 맞을 겁니다. 저는 지금도 내보낼 때마다 물어봅니다. 반 초면 되고, 덕분에 수많은 회색 후광을 면했습니다.

관련 글


전체 글