이전에 포스팅했던 ‘불편했던 상세페이지 뜯어보기(GIF파일 편)’을 읽어보신 분은 아시겠지만, 저는 상세페이지나 홈페이지에서 gif파일, 즉 움짤 남발을 선호하지 않습니다. 이번에는 이미지 포맷 관점에서 조금 더 알아보려고 합니다. 이 포스팅은 지난 번 포스팅의 연장선입니다.

(여기서 ‘큰 용량’은 파일 하나당 약 15mb입니다. 주관적인 기준)

gif 특징 쓰윽 훑어보기

새우깡이 100원인 시절에 출시된 이미지 포맷

GIF파일은 ‘Graphics Interchange Format’의 약자입니다. 1987년에 미국 온라인 서비스 회사 ‘컴퓨서브’에서 개발했습니다. 자사 pc통신에서 이미지를 사용하기 위해 gif를 만들었다고 합니다. 최종 버전은 1989년에 발표된 GIF89a입니다.

출처: 구글에 검색한 각종 조각 정보들을 버무림

gif포맷은 기술이 지금보다 부족할 때 개발되었습니다. 1989년에 발표한 이후로 무려 약 34년이 지났습니다(2023년 기준). 반면 mp4 포맷의 코덱 중 하나인 h.264는 2019년까지도 꾸준히 업데이트 되었습니다. 1990년대 기술과 2010년대 후반 기술은 차이가 큽니다. 스마트폰이 보급된 시점도 10년 정도 밖에 되지 않았습니다. 기술 발전 속도를 생각하면 34년은 어마한 차이입니다.

256색까지만 표현할 수 있습니다.

gif파일은 웹 안전 컬러보다는 다양한 색상을 지원합니다. 하지만 투명을 포함해서 256가지 색만 담을 수 있답니다. 색상 수가 많은 사진을 gif로 변환하면 다른 포맷에 비해서 화질이 심하게 떨어져 보입니다.

왼쪽 사진은 웹 안전 컬러로, 오른쪽 사진은 이미지에 있는 색 위주로 저장된 gif입니다. 위 사진에서 오른쪽 ‘사용자 정의 색상’에도 계단 현상이 일어났습니다. 사진을 저장할 때 256가지 색으로 제한되므로 마치 손실 압축 포맷 같아 보입니다. 하지만 gif파일은 수정할 때는 사진이 손실되지 않는 비손실 압축 포맷입니다. (jpg는 수정과 저장을 반복할수록 화질이 손실되는 손실 압축 포맷입니다.)

그래도 gif를 쓰는 이유는?

오래되었기에 익숙하기 때문이라고 생각합니다. 비디오를 gif로 바꿔주는 툴도 많고, 포토샵을 사용하면 쉽게 접근할 수 있습니다.

gif파일, 남발하면 도발로

뭐든 적절히 쓰면 괜찮습니다. 하지만 문제는 언제나 욕심 아니겠습니까. 더 강조하고 이목을 끌고 싶은 마음에 더 크게, 더 길게, 화질은 더 좋게 제작합니다. 욕심을 부릴수록 파일이 무거워집니다.

CPU 사용으로 번개같이 배터리를 소모

동영상 재생은 원래 cpu가 담당했었습니다. 기술이 발전하여 요즘은 gpu(그래픽카드)가 영상을 재생합니다. gif파일은 gpu를 지원하지 않습니다. cpu를 사용합니다. 옛날 기술이니까요. 전력을 더 많이 사용하며 스마트폰에서 로딩하면 배터리가 더 빨리 닳습니다. 저사양 스마트폰이라면 더 무리가 갑니다. (누구나 플래그십 스마트폰을 사용하는 건 아니니까요.)

Lazy Loading과 합쳐지면 무한로딩의 늪으로

이미지 지연 로딩(Lazy Loading)은 페이지 안에 있는 이미지들이 실제로 보여질 때 로딩을 할 수 있도록 하는 기법입니다. 용량이 큰 gif파일과 합쳐지면 훌륭한 저혈압 치료제가 됩니다.

웹에 이미지가 여러 개 들어있을 때 브라우저가 모든 이미지를 한번에 로딩하지 않습니다. 아이쇼핑을 자주 하시는 분이라면 한번씩 경험하셨을 겁니다. 긴 상세페이지 화면에서 End키를 눌러서 스크롤을 바로 내려보세요. 중간 이미지는 로딩되지 않습니다. 스크롤을 슬금슬금 올려 필요한 타이밍이 오면 그때서야 이미지가 로딩됩니다.

이렇게 지연 로딩은 페이지 속도와 용량을 최적화합니다. 불필요한 이미지는 로딩되지 않으니까요. 크롬 브라우저는 지연 로딩을 기본으로 지원합니다. 한국에서는 pc로는 70%, 모바일에서는 35%정도가 크롬을 사용합니다. 많은 인터넷 유저들이 지연 로딩이 적용된 페이지를 보게 됩니다.

이 지연 로딩이 용량 듬직한 gif 파일들과 만나면 기묘한 현상이 일어납니다. 먼저 처음에 gif 세 장 정도가 보여집니다. 로딩이 되고 스크롤을 아래로 내리면 계속 gif파일이 로딩됩니다. 내려도 내려도 끝이 없습니다.

크라우드 펀딩 사이트 와디즈에서 어떤 제품 페이지를 보았습니다. 큰 gif파일이 겨우 로딩되었는데 아래로 내리니까 다른 gif파일이 로딩되고, 아래로 내리니까 또 로딩되고… 결국 스마트폰이 견디지 못해 페이지를 닫아야 했습니다. 그 제품은 뭐였는지는 기억나지 않습니다. (빛을 못 본 움짤들은 어쩌면 디자이너의 피·땀·노동이 아니었을까요?)

gif파일 똑똑하게 사용하기

gif는 오래된 포맷이라 느리고, 표현 색도 적습니다. 하지만 아직도 많은 사람들이 gif파일을 사용하고 있습니다. 그만큼 익숙함이 무섭습니다. 간단한 아이콘으로, 혹은 필요한 부분에 적재적소로 활용하세요. 큰 파일을 남발하지만 않아도 보다 최적화된 페이지를 만들 수 있습니다.

포토샵cc 기준으로 설명드립니다. 상세페이지를 만들면서 많이 쓰기도 하며, 영상을 비교적 쉽게 편집하고 gif 파일로 만들 수 있습니다.

색상, 길이, 크기, 프레임 조금씩 밑장빼기

들어가는 색상 수와 gif 재생 길이, 가로 세로 사이즈, 프레임을 조금씩 줄여서 용량을 확보할 수 있습니다. 제일 무난한 방법입니다.

색상 줄이기

움짤 레이어 패널 맨 위에 Adjust Layer 중 Levels를 추가해주세요. (한글로는 ‘조정 레이어’입니다.) Output Levels에서 최소값과 최대값을 적절히 조절합니다. 이미지에서 제일 밝은 부분을 어둡게 만들고 제일 어두운 부분을 조금 더 밝게 조절합니다.

대비가 약해지면서 원본보다 이미지가 탁해질 수 있습니다. 색상보다 움직임을 보여주는 것이 더 중요하다면 색을 조금 조절해서 gif 용량을 줄여보세요.

이미지 사이즈 줄이기

가로·세로 길이 자체를 줄이는 방법입니다. 움짤을 1,000px로 만들었다면 900px로, 800px로 만들었다면 700px로 조금씩 줄여보세요. 필요없는 부분은 과감히 잘라냅니다. 요점을 강조하면서 용량도 줄일 수 있습니다.

프레임 수 줄이기

움직이는 이미지는 정지된 이미지를 연속으로 보여주는 원리입니다. 이 이미지 낱장을 프레임이라고 합니다. 영화는 1초에 24장, tv 방송은 30장을 사용합니다. 중간에 이미지를 몇 장 쇽쇽 빼가도 차이를 크게 느끼지 못합니다. 이렇게 프레임 수를 줄여서 용량을 줄이는 방법도 있습니다.

이 기능은 포토샵에서 video timeline으로 만들었을 때만 사용할 수 있습니다. frame animation으로 만들면 해당 항목이 없습니다.

Timeline 패널에서 Set Timeline Frame Rate…를 누릅니다. 프레임 수를 너무 줄이면 원본 영상보다 부드러운 느낌이 줄어듭니다. 끊기는 느낌이 드니까 적정 선에서 줄여주세요. 15~20fps 정도를 추천합니다.

보정 전후 이미지를 비교해보자

영상을 받은 후 gif파일로 만들었습니다. 위의 방법대로 하기 전과 후의 용량 차이가 꽤 나는 편입니다. 2.45mb에서 787kb까지 떨어졌습니다. 크기가 큰 이미지라면, 이미지 수량이 더 많아지면 용량 차이를 더 크게 실감하실 수 있습니다.

두 이미지를 나란히 놓고 비교하면 프레임도 끊겨보이고 이미지도 탁해보일 수 있습니다. 너무 걱정 마세요. 단독으로 사용하면 체감이 덜하므로 적절히 타협하시면 됩니다.

(로딩 문제로 이미지를 숨겨두었습니다. 아래 토글을 누르면 확인할 수 있습니다.)

보정 전 / 보정 후 이미지 비교하기

항목	보정 전	보정 후
이미지
색상 수	256	64
가로 길이	450 px	350 px
1. Output Level	0 ~ 255	35 ~ 235
2. Saturation	변화 없음	Saturation -15
3. 프레임 수 조절	25	15
용량	2.45 mb	787 kb (-32%)

gif파일을 통으로 만들지 말고 나누어주세요

움직이는 부분이 가운데에 있을 때 전체 이미지를 gif로 만드는 경우가 있습니다. 불필요한 부분이 반복되면서 용량이 더 커집니다. 뿐만 아니라 사진이 끼어있다면 색상 단계도 더 떨어집니다. gif포맷의 단점만 가져가는 방법입니다. 통으로 만들어도 괜찮은 건 통감자 뿐입니다.

포토샵에서 Slice 툴로 이미지를 나눠준 후 Save for Web으로 저장하세요. 움직임이 없는 부분은 단일 이미지로, 움직이는 부분은 자동으로 애니메이션으로 저장됩니다. (확장자를 다르게 지정할 수도 있지만 조금 번거로울 수 있습니다.)

움짤을 빛내주는 정지 이미지, 필요한 곳에만 부분으로 사용

상세페이지를 만들 때는 정지 이미지를 주로 넣고 꼭 필요할 때만 gif를 사용합니다. 제목과 일반 본문에는 최대한 gif 이미지를 배제하고 제품의 움직임을 강조해야 할 때 gif를 사용하세요. 그래야 움직이는 이미지가 상대적으로 더 잘 보입니다.

중요한 혜택이나 이벤트로 이목을 끌기 위해서 사용할 수도 있습니다. 움직임보다는 혜택이 잘 보이도록 단순하게 만드세요. 깜빡임 정도가 좋습니다. 단지 장식을 위한 gif는 줄이셔야 합니다.

마치며

종종 gif파일을 너무 많이 업로드한 펀딩 프로젝트를 보고 안타까운 마음에 포스팅하였습니다. 저도 상세페이지를 만드는 입장입니다. 열심히 만든 작업물이 로딩도 전에 외면당한다면 좀 속상할 것 같아요. 조금만 더 보완해보세요. 읽기 쉽고 눈에도 쏙쏙 들어오는 상세페이지 만들 수 있습니다.

잊지 마세요. 별과 별 사이에 어둠이 있어야 별이 더욱 빛납니다. ✨👀