UX 디자이너가 알아두어야 할 PNG와 JPEG의 차이
적절한 이미지 선택은 웹 사이트 이탈률 예방의 지름길!
안녕하세요 뷰저블입니다. 이전 시간에는 웹 사이트의 로드 시간이 길면 사용자의 이탈률이 높아진다고 말하였습니다. 또한 이 로드 시간의 주범은 주로 '무거운 이미지'라고 말씀드렸습니다. 그렇다면 이미지 파일 사이즈를 줄이면서도 화질에 미치는 영향을 최소화하려면 어떻게 해야 할까요? 오늘은 UX 디자이너가 반드시 알아두어야 할 PNG와 JPEG의 차이에 대해 설명드리겠습니다.
이전 글
웹 사이트 이미지는 파일 사이즈에 따라 이탈률에 큰 영향을 미칩니다.
웹 사이트에 적절히 삽입된 이미지는 단순히 텍스트만으로 소구 하였을 때보다 효과를 배로 증가시키고 사람들의 주의를 환기시킵니다. 하지만 이미지가 복잡할수록, 사용된 색상 수가 많을수록, 사이즈가 클수록 파일 사이즈 또한 함께 커져버리기 때문에 이는 '무거운 웹 사이트'를 만들어버리고 이탈률의 원인이 됩니다.
실제로 think with google에 따르면 페이지의 요소가 많을수록, 이미지의 개수가 많을수록, 느릴수록 페이지 이탈률이 증가한다고 합니다. (더 자세한 내용은 아래 링크에서 확인해주세요.)
이 때문에 UX 디자이너들은 어떻게 하면 최적의 파일 사이즈를 지니는 이미지를 만들 수 있을지를 고민할 수 있어야 합니다. 웹 사이트에 사용되는 기본적인 이미지는 PNG, JPEG가 기본입니다. PNG, JPEG는 이미지 파일 포맷을 말하며 이미지를 파일로 저장하면 이후에도 재현해주는 구조를 지닙니다. 이 둘 외에도 GIF, TIFF, BMP 등이 있고, .gif, .bmp처럼 파일명 뒤에 확장자를 가지고 있습니다.
PNG와 JPEG를 구분하는 기준은 자연 이미지인가, 제작된 이미지인가에 따라 나뉩니다.
사진, 인물, 경치, 음식, 식물과 같은 자연 이미지 및 그라데이션이 다수 사용된 이미지는 JPEG
스크린 숏, 단순한 그림, 아이콘처럼 제작된 이미지는 8bit PNG
자연 이미지와 제작된 이미지가 섞여 있다면 직접 테스트
ㄱ. 자연 이미지 = JPEG
자연 이미지는 사람의 피부색, 식물, 하늘, 풍경처럼 빛의 변화에 따라 다양하게 색이 바뀔 수 있는 것들을 상상할 수 있습니다. 수십수백수천 가지의 색이 연속적으로 변화하는 이미지들을 예로 들 수 있습니다. 이 경우 JPEG로 저장합시다. JPEG는 1,600만 색상까지 재현이 가능하기 때문에 이러한 자연 이미지에 적합합니다.
ㄴ. 제작된 이미지 = PNG
제작된 이미지는 단순한 색상으로 구성되어 있으며 우리가 흔히 접하는 GUI나 스크린 숏 등을 떠올릴 수 있습니다. 적은 수의 색상을 보유하고 있으며 담겨 있는 정보 구성 또한 간결합니다. 이 경우에는 PNG가 적절합니다. 또한 빨간색이 중요한 역할을 하는 이미지라면 PNG를 권장합니다. 보통 빨간색이 JPEG로 저장되면 원래의 청명한 빨간색보다는 자색에 가깝게 표현되는 경우가 많기 때문입니다. 또한, 그라데이션 이미지 같은 경우에는 디자이너의 손에 의해 제작된 이미지이지만, 연속적으로 변화하는 색상을 보유하고 있어 PNG보다는 JPEG를 권장합니다.
ㄷ. 자연 이미지와 제작된 이미지가 섞여 있는 경우 = 직접 테스트
이미지 : GS SHOP (www.gsshop.com)커머스 서비스의 배너 광고를 떠올려보세요. 자연 이미지와 제작된 이미지가 뒤섞여 있을 것입니다. 이 경우에는 어떻게 해야 할까요? 인물 또는 풍경 비중이 더 크니까 JPEG를 사용할 거야라고 단순하게 생각할 수 있지만 이 경우에는 두 가지 이미지 포맷으로 모두 저장해본 뒤 실제 저장된 이미지를 가지고 차이를 비교하여 선택할 것을 추천드립니다.
개발자 도구를 통해 살펴보니 GS SHOP에서는 위 이미지가 삽입된 캐러셀 UI 내 이미지들을 모두 JPEG로 저장하고 있었습니다.
반면 색상수가 적게 사용된 로고는 PNG 인 것을 보면 이해가 가실 것입니다.
*JPEG와 PNG 외에도 SVG라는 파일 포맷이 존재합니다. 에스브이지라고 부르며 백터 방식으로 저장합니다. 로고, 아이콘, 그래프의 경우에 추천하는 방식입니다.
PNG 및 JPEG 이미지 파일 올바르게 저장하기
PNG - Bit 수로 저장하기 (8, 16, 24)
JPEG - Image Quality로 품질 수치 지정하여 저장하기 (보통 0~100까지 지정)
먼저 PNG는 Bit수로 저장할 수 있습니다. 보통 웹 사이트에서는 8Bit로 많이 저장을 하는데 8Bit에서는 최대 256가지의 색상 수를 표현할 수 있습니다. Bit 수를 선택할 때는 몇 가지 패턴의 색상수를 사용하는지를 판단하여 선택해봅시다.
JPEG는 이미지 품질 수치를 설정해야 합니다. 수치가 높을수록 이미지의 퀄리티가 높아지지만 반면 사이즈 또한 함께 커져버립니다. 0~100까지의 품질 수치를 지정할 수 있다고 한다면 보통 75~90 정도를 기준으로, 파일 사이즈 및 실제 재현된 이미지를 확인하며 저장하는 경우가 많습니다. 불가역성의 법칙에 따라 한번 저하된 품질의 이미지를 다시 원래 대로 되돌릴 수는 없기 때문에 이 점을 유의하며 저장해주세요.
이미지 메타 데이터 삭제하기
이미지에는 이미지 파일에 대한 정보를 담는 메타 데이터라는 것이 존재합니다. 디지털카메라 제조 업체, 촬영 일자, 플래시 사용 유무, 사용한 소프트웨어 정보 등을 포함하고 있습니다. 이러한 정보를 마지막으로 삭제하면 일부이기는 하지만 파일 사이즈가 줄어들게 됩니다. 윈도우라면 '이미지 속성 > 자세히 > 속성 및 개인 정보 제거' 영역에서 삭제하실 수 있습니다. 맥이라면 exif를 삭제해주는 별도의 프로그램을 설치하면 간편히 삭제할 수 있습니다.
뷰저블로 이미지 개선 전후의 사용자 행동의 변화 확인하기
삽입된 이미지를 적절한 포맷으로 변경하였나요? 그렇다면 웹 로드 속도가 어떻게 달라졌는지를 먼저 판별해봅시다. 모바일 사이트라면 구글에서 제공하는 성능 테스트를 이용해 보세요.
속도가 달라졌나요? 그렇다면 이제는 뷰저블을 활용하여 성과를 살펴볼 차례입니다. 페이지 로드 타임이 줄어든 웹 사이트의 스크롤 도달률이 기간 별로 어떻게 달라졌으며, 구간 별 체류시간은 어떻게 바뀌었을까요? 이와 함께 콘텐츠 전환 성과는 어떻게 달라졌는지를 뷰저블로 파악해볼 수 있습니다.
참고하면 좋은 글 :
뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.
뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.
경쟁사는 이미 시작했습니다!
UX 데이터 분석을 위한 All in one 툴 : 뷰저블 홈페이지
https://www.beusable.net/
실제 웹 사이트 위에 UX 데이터를 시각화합니다 : 뷰저블리 홈페이지 (베타 기간 무료)
https://www.beusably.net/
