<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1387208918241112&ev=PageView&noscript=1"/>

뉴스센터 목록으로 돌아가기

JPG vs PNG? 이미지 파일 형식에 숨겨진 비밀

위시켓 | 2020.02.18.

01_뉴스센터 페이스북

우리가 온라인에서 보는 모든 그래픽은 이미지 파일입니다. 그리고 종이나 플라스틱, 티셔츠에 인쇄된 모든 그래픽도 이미지 파일로 만든 것이죠. 이런 파일에는 다양한 포맷들이 있고, 각각의 포맷들은 특정한 용도에 최적화되어 있습니다. 디자인을 하는 데 있어서 가장 올바른 포맷을 사용하게 되면, 여러분이 의도한 대로 완벽한 이미지를 만들어 낼 수 있을 겁니다. 포맷을 제대로 선택하지 못하면, 인쇄했을 때 질이 떨어지거나 웹페이지의 그림이 엉망이 되어 페이지 로딩에 엄청난 시간이 걸릴 수도 있고, 이메일에 첨부한 그림이 제대로 보이지 않을 수도 있습니다.
그래서 이번 시간 IT 아웃소싱 플랫폼 위시켓은 이미지 저장 파일에 따른 특성과 이것을 어떻게 활용할 수 있는지 재미난 팁들을 알려드리고자 합니다. JPG? PNG? AI? 등 그동안 헷갈렸다면 지금 바로 읽어보세요:)


이미지는 래스터와 벡터로 나뉜다.

대부분의 이미지 파일들은 래스터(Raster) 파일과 벡터(Vector) 파일이라는 두 가지의 일반적인 카테고리로 분류할 수 있습니다. 그리고 이 두 개의 카테고리는 각각 특정한 용도를 가지고 있는데요. 그렇다고 이런 분류가 완벽한 것은 아닙니다. 예를 들면, 어떤 포맷들은 두 가지 타입의 속성을 모두 포함하고 있을 수도 있기 때문입니다. 그래도 이미지 포맷에 대해 알아볼 때는 적당한 분류가 되어줍니다.


래스터 이미지란 무엇일까?


래스터 이미지는 픽셀이라고 불리는 점들이 그리드(격자무늬) 형태로 모여서 하나의 그림을 완성하는 것입니다. 하나의 픽셀은 한 가지의 색상을 표현하고 있는데요. 벡터 이미지와는 다르게 래스터 이미지는 해상도에 따라서 달라지는데, 이는 사이즈가 하나로만 고정되어 있다는 것을 의미합니다. 래스터 이미지를 크게 변형하면 픽셀도 함께 커지게 되고, 결과적으로 픽셀이 쪼개지거나 이미지가 흐려지게 됩니다.

래스터 이미지는 일반적으로 사진, 디지털 아트워크, (배너 광고, 소셜 미디어 콘텐츠, 이메일 그래픽 등과 같은) 웹 그래픽에서 사용됩니다. 포토샵을 이용하면 래스터 이미지를 생성하고, 다자인하고, 편집하고, 기존의 이미지에 효과나 음영, 질감을 추가할 수 있습니다.

손실(Lossy) vs 무손실(Lossless)
모든 래스터 이미지는 포맷이 데이터를 어떻게 처리하는 가에 따라서 손실(Lossy) 이미지가 될 수도 있고, 무손실(Lossless) 이미지가 될 수도 있습니다. 일반적으로 손실 이미지 파일은 무손실 파일보다 훨씬 더 용량이 작기 때문에, 파일 크기와 다운로드 속도가 중요한 온라인에서 사용하기 아주 적합합니다.

무손실 이미지 포맷은 원본 파일에 있는 모든 데이터를 포함하고 있습니다. 원본 파일, 사진, 아트워크에서 손실된 데이터가 없기 때문에 '무손실'이라고 부르는데요. 파일이 압축되어 있는 경우에도 무손실 이미지라면 원래 상태로 재구성할 수 있습니다.

손실 이미지 포맷은 원래의 이미지가 가진 모습과 거의 비슷합니다. 예를 들면, 손실 이미지는 원래의 이미지에 있는 색상의 정보를 줄이거나 불필요한 데이터를 없앨 수도 있습니다. 이처럼 기술적인 처리 과정을 거치면서 원래 이미지의 품질이 떨어지기는 하지만, 파일 용량은 줄어들게 됩니다.


JPEG/JPG

(왼쪽: 압축하지 않은 무손실 이미지, 오른쪽: 압축을 많이 한 손실 이미지)


JPEG는 무손실 래스터 이미지 포맷이며, JPEG라는 단어에는 이 포맷을 개발한 기술팀의 이름인 '사진 전문가 공동 그룹(Joint Photographic Experts Group)의 줄임말입니다.JPEG는 온라인에서 가장 널리 사용되는 포맷 중 하나이며, 사진 이메일 그래픽, 배너 광고 등의 커다란 이미지 등에서 일반적으로 사용되는데요. JPEG 이미지는 파일 크기를 엄청나게 줄일 수 있는 슬라이딩 스케일(Sliding scale) 압축 방식을 사용하기 때문에 이미지가 더 많이 압축될수록 부자연스럽고, 픽셀처럼 보이는 현상이 더 늘어나게 됩니다.


GIF

GIF는 그래픽 인터체인지 포맷(Graphic Interchange Format)의 약자로 무손실 래스터 포맷입니다. 여기서 잠깐 퀴즈 나갑니다. GIF는 어떻게 발음하는 걸까요? GIF를 만든 사람은 땅콩버터 브랜드처럼 '지프'라고 부릅니다. 그런데 GIF의 첫 글자인 그래픽이 발음이 'ㄱ'으로 시작되기 때문에 기프라고 읽는 사람도 많은데요. 사실 외국에서는 크게 상관없이 모두 사용된다고 합니다. GIF 역시도 웹 용도의 이미지 포맷으로 널리 사용되는데 배너 광고, 이메일 이미지, 소셜 미디어 아이콘 등에서 애니메이션 이미지로 많이 사용됩니다.GIF는 무손실 포맷이긴 하지만 색상이나 이미지 정보를 줄이는 등 설정값을 아주 다양하게 변경할 수 있기 때문에 파일 용량을 줄일 수 있습니다.


PNG

PNG는 포터블 네트워크 그래픽(Portable Network Graphics)의 약자입니다. PNG도 무손실 래스터 포맷이며, GIF의 다음 세대라고 생각할 수도 있는데요. PNG 포맷은 투명한 성질도 갖고 있고, 색상의 심도(depth)도 훨씬 더 깊기 때문에 수백만 가지의 색상을 표현할 수 있습니다. PNG는 웹에서는 하나의 표준이며, 온라인에서 가장 많이 사용되는 이미지로 빠르게 자리를 잡아가고 있습니다. 고퀄리티의 투명한 웹 그래픽이 필요한 경우에는 PNG를 사용하는 것이 좋습니다. 반면, 사진이나 아트워크 작업을 하는 경우에는 용량이 매우 커질 수 있기 때문에 JPEG를 사용하는 것이 더 적합합니다.


TIFF/TIF

TIFF(Tagged Image File Format)은 퀄리티가 아주 뛰어나기 때문에 사진이나 전자출판 같은 프로젝트에서 주로 사용되는 무손실 래스터 포맷입니다. 문서를 스캔하거나 전문 디지털카메라로 사진을 찍었을 때, 볼 수 있는 것이 바로 TIFF 파일입니다. TIFF 파일은 JPEG 이미지를 저장하는 용도로도 사용될 수 있는데요. 이런 경우에는 일반적으로 용량이 매우 큰 TIFF 파일보다는 훨씬 더 적은 용량을 가지게 됩니다.많은 브라우저에서 TIFF 형식을 지원하고 있기는 하지만 TIFF 파일은 프린트에 최적화된 포맷입니다. 따라서 인쇄용 고퀄리티 그래픽이 필요한 상황에서 사용하는 것이 좋습니다.



RAW

원래 그대로의 것을 의미하는 RAW 이미지 포맷은 디지털카메라나 스캐너가 읽어 들인 가공되지 않은 데이터를 말합니다. 일반적으로 이미지는 (색상, 화이트 밸런스, 노출 등에 대한) 처리 과정을 거친 다음에, (JPEG 또는 TIFF 등의) 다른 이미지 포맷으로 압축 변환됩니다. RAW 이미지는 처리되지 않은 데이터와 처리된 데이터 두 가지를 별도의 파일로 저장하기 때문에, 최고의 퀄리티를 가진 원본 이미지를 남겨 두었다가 포토샵과 같은 프로그램으로 편집하는 것이 가능합니다. RAW 포맷은 수십 가지의 종류가 있기는 하지만, 일반적으로 사용되는 포맷들로는 CRW(캐논), NEF(니콘), DNG(어도비) 등이 있습니다.


PSD

PSD는 포토샵 문서(Photoshop Document)의 약자로 어도비(Adobe)에서 만든 레이어 이미지 포맷입니다. PSD는 포토샵으로 생성된 디자인 원본 파일이며, 다양한 레이어와 이미지를 모두 편집할 수 있습니다. PSD는 주로 래스터 이미지를 만들고 편집하는데 사용되는데요. 특이한 점이 있다면 벡터 레이어도 포함시킬 수 있다는 것입니다. 그렇기 때문에 여러 가지 다양한 프로젝트에서 아주 유연하게 활용할 수 있습니다. PSD는 위에서 소개한 래스터 포맷들을 비롯한 다른 수많은 이미지 파일 포맷으로도 변환해서 내보낼 수 있습니다.


벡터 이미지란 무엇일까?

벡터 이미지는 점, 선, 곡선 등을 컴퓨터가 계산하는 디지털 아트워크입니다. 벡터 이미지 안에는 기본적으로 수많은 수학 방정식을 포함하고 있으며, 각각의 '방정식'들은 색상, 스트로크(stroke), 두께 등에 관한 정보를 갖고 있기 때문에 이를 이용해서 특정한 모양을 만들어낼 수 있습니다. 래스터 이미지와는 다르게 벡터 이미지는 해상도에 의존적이지 않습니다. 벡터 이미지는 줄이거나 늘리더라도, 그 안의 디테일이 사라진다거나 픽셀 현상이 나타나지도 않죠. 크기에 상관없이 이미지가 언제나 동일한 모습을 유지하기 때문에, 벡터 이미지에서는 손실 또는 무손실 타입이라는 것이 없습니다. 벡터 이미지는 일반적으로 로고, 아이콘, 폰트, 디지털 일러스트 등에 사용됩니다.



PDF

우리가 자주 사용하는 PDF는 포터블 문서 포맷(Portable Document Format)의 줄임말로, 사용하는 기기나 응용 프로그램, 운영체제, 웹 브라우저에 관계없이 문서와 그래픽을 정확하게 보여주기 위해 사용됩니다.PDF 파일들은 그 중심부에 강력한 벡터 그래픽 기반을 갖고 있지만, 래스터 그래픽부터 폼 필드와 스프레드시트에 이르기까지 모든 것들을 보여줄 수 있는데요. PDF는 거의 보편적인 표준이라고 할 수 있기 때문에, 출력물을 제작할 때 인쇄업체들에서는 최종 디자인 결과물로 PDF 파일을 요청하는 경우가 많습니다. 어도비의 포토샵과 일러스트레이터 모두 PDF를 생성할 수 있기 때문에, 디자인에서부터 시작해서 출력 준비까지 쉽게 작업할 수 있습니다.


EPS


EPS는 캡슐화된 포스트스크립트(Encapsulated Postscript)라는 뜻의 이미지 포맷입니다. EPS 파일은 주로 벡터 포맷으로 사용되기는 하지만, 벡터 데이터와 래스터 이미지 데이터를 포함할 수도 있습니다. 일반적으로 EPS 파일은 하나의 디자인 요소만을 포함하고 있는 경우가 많은데, 보다 커다란 디자인 작업에서 사용하기 쉽게 하기 위한 것입니다. EPS 파일을 이용하면 크기에 관계없이 정확한 해상도가 구현되기 때문에 디자이너 또는 인쇄업체에게 벡터 로고를 보내야 하는 경우에 사용하면 좋습니다.



AI


AI는 어도비 일러스트레이터(Adobe Illustrator)의 약자로, 어도비(Adobe) 사에서 개발한 벡터 이미지 포맷입니다. 이 포맷은 역시 어도비에서 개발한 EPS와 PDF 표준을 기반으로 하고 있습니다. 물론 래스터 이미지를 내장하거나 포함할 수 있기는 하지만, 다른 포맷들처럼 AI 파일 역시도 주로 벡터 기반의 포맷입니다.AI 파일은 (검토와 인쇄에 용이한) PDF와 EPS 파일로 모두 전환해서 내보낼 수 있으며, (웹에서 사용하거나 나중에 편집할 수 있는) JPEG, PNG, GIF, TIFF, PSD 형식으로도 전환해서 내보낼 수 있습니다.




이번시간에는 위시켓과 함께 디자인 파일 저장형식이 가지고 있는 특성과 사용방법에 대해서 알아보았습니다. 그동안 무심코 다운로드 받았던 이미지들에 이처럼 각각의 형식과 특성을 가지고 있다는 사실이 놀라운데요. 여러분이 이미지 작업을 하게 될 때, 이번 시간의 디자인팁이 큰 도움이 되었으면 좋겠습니다.

만약 전문적으로 디자인을 해야할 일이 있다면 위시켓을 방문해주세요:) 여러분의 프로젝트를 빛내줄 7만개의 디자인업체와 프리랜서들을 만나볼 수 있습니다.

  •  본문 내용은‘Image file formats: when to use each file type'을 각색/참고하여 작성되었습니다.


  • 위시켓 | 2020.02.18.

    '뉴스센터'의 다른 글 보기

    애플이 주목하는 페이스북 이후의 세상은?

    99%의 성공한 개인이 일찍부터 시작한 9가지 성공습관

    JPG vs PNG? 이미지 파일 형식에 숨겨진 비밀

    한국이 최초였던 5G, 중국이 노린다.

    프론트엔드 개발자 VS 웹 퍼블리셔, 무엇이 다를까?

    뉴스센터 더 보기 >