웹 페이지의 감초, GIF를 파헤쳐보자
1인 1홈페이지 세상
포토샵(Adobe Photoshop) 사용이 대중화되고 웹 페이지 제작 툴이 보편화 되면서 누구나 하나쯤 홈페이지나 블로그를 소유한 세상이 되었습니다. 그만큼 일반 사용자들이 디자인 목적이 아닌 개인적인 홈페이지 제작 용도로 html 태그와 간단한 웹 디자인을 할 수 있게 되었습니다.
별도의 서버 사이드 스크립트(Server Side Script)를 사용하지 않는다고 가정하면, 일반적으로 기본적인 html 문법과 이미지 제작/편집 능력만 있으면 누구나 홈페이지를 만들 수 있습니다.
웹은 크게 이미지와 그 이미지들을 구성해주는 태그(Tag)로 나눌 수 있는데, 오늘은 그 이미지에 대해서 이야기 하려 합니다.
GIF가 무엇인고?
웹에서 가장 많이 사용하는 이미지 형식에는 크게 2가지가 있습니다. (실제로는 더 많은 종류의 이미지가 있지만, 웹 표준으로 제정되어 사용되는 이미지는 그리 많지 않습니다.) GIF와 JPEG가 바로 그것입니다. 오늘은 GIF에 대해서 알아보도록 하겠습니다.
GIF는 Graphics Interchange Format의 약자입니다. 1987년 미국의 컴퓨서브(CompuServe)사가 처음 개발하였으며 압축하면 최대 40%까지 이미지 크기를 줄일 수 있습니다. (어쩐지 GIF가 친숙하다는 느낌을 받았는데.. 저랑 연식(?)이 같아서 그랬나봅니다 ^^)
GIF는 JPEG에 비해 압축률이 떨어집니다. (JPEG에 대해서는 시간이 되는대로 관련 글을 올리도록 하겠습니다 ^^) 대신 이미지 사이즈가 작아 전송속도가 매우 빠르고, 압축을 적게 하므로 그만큼 원본 이미지의 손실률이 감소됩니다. GIF는 이미지와 문자열을 모두 담을 수 있습니다.
GIF는 인터넷 초창기에 많이 사용되었습니다. (물론 지금도 많이 사용되고 있습니다.) 바로 GIF의 특성 때문입니다.
이미지의 용량이 작고 전송 속도가 빠르기 때문에, 인터넷 회선의 속도가 느린 초창기에는 매우 빈번하게 사용되었습니다. 또한 GIF 속성인 인터레이스(Interlace) 때문에 많이 사용되기도 했습니다.
인터레이스란, 간단하게 설명하면 처음 이미지를 불러올 때 전체 이미지를 한번에 표시하는 것이 아니라 뭉개진 이미지를 우선 표시하고(이때의 이미지 사이즈는 전체 이미지 크기보다 훨씬 작아 불러오는 속도가 매우 빠릅니다.) 나머지 불러온 이미지를 천천히 표시해 주는 방식입니다. 이것 때문에 초기 인터넷 상에서 매우 각광받는 이미지였습니다.
움직이는 GIF(Animation GIF)와 투명 GIF(Transparent GIF)가 바로 그것입니다.
Animation GIF와 Transparent GIF
웹에서 아래와 같은 움직이는 이미지를 많이 보셨을 겁니다.
해당 그림을 "다른 이름으로 저장" 해보시면 아시겠지만, GIF 확장자를 가지고 있는 것을 확인하실 수 있을 것입니다. GIF는 이와같은 움직이는 이미지를 제작할 수 있습니다.
이러한 속성 외에도 자주 GIF가 사용되는 이유는 바로 투명한 배경 상태로 저장할 수 있다는 것입니다.
아래의 두 이미지를 비교해보면 하나는 배경이 검은 색상이고, 다른 하나는 흰색인데, 모두 동일한 이미지에 배경 색상만 다르게 준 것입니다.
|
|
|
이해를 돕기 위해 부연 설명을 하자면, 위의 이미지는 가로 사이즈가 200픽셀, 세로 사이즈가 100픽셀입니다. 실제로 이미지가 차지하는 영역은 그보다 작은 가로 44픽셀, 세로 29픽셀이지만 투명한 배경을 포함하고 있는 것입니다.
이러한 속성 때문에 배경색에 관계 없이 이미지를 표현하고자 할 때 자주 사용되고 있습니다.
GIF는 만능이다?
지금까지 설명한 내용을 정리하면, GIF는 이미지를 40%까지 압축하고, 용량이 작아 전송 속도가 매우 빠르며, 움직이는 애니메이션과 투명한 배경을 적용할 수 있습니다.
단순히 이러한 속성들만 나열한다면 웹에서는 이렇게 좋은 GIF만을 사용해야 할 것 같은데, 왜 JPEG니 PNG니 하는 다른 이미지들도 많이 사용하는 것일까요?
GIF는 하나의 파일 내에 표현할 수 있는 최대 색상이 정해져 있습니다. 256가지의 색상만으로 이미지 파일 내에 포함된 색상을 불러와야 하는데, 이는 포토샵에서 GIF를 저장할 때 확인할 수 있습니다.
붉은색 테두리 안쪽을 보면 "색상" 이라는 영역에 256이라고 적혀있는 것을 확인하실 수 있으실 겁니다. GIF는 최대 256색을 표현하기 때문에, 사진과 같이 엄청난 양의 색상 정보를 담고 있는 파일을 GIF로 저장한다면 원본 이미지가 손실될 우려가 있습니다.
때문에 사진은 GIF로 저장하지 않고 JPEG 등의 확장자로 저장하고 있습니다. 실제로 JPEG로 된 사진을 GIF로 저장하여 확인(확대하여)하면, 대부분의 색상과 이미지가 훼손된 것을 확인하실 수 있을 것입니다. 이 부분은 여러분들이 직접 포토샵을 이용하여 한번 해 보시기 바랍니다 ^^
꾸준히 사랑받는 GIF, 앞으로는?
웹의 짧은 역사 속에서 GIF는 꾸준한 인기를 누려 왔습니다. 물론 현재까지도 그렇지만, 과연 앞으로 이런 GIF가 지금과 마찬가지로 대중적으로 사용될 수 있을까요?
웹은 빠른 속도로 진화하고 있습니다.
GIF가 다양한 기능들과 작은 용량으로 승부했지만, 많은 양의 이미지 정보를 담을 수 없다는 한계에 직면했습니다.
웹은 지금 이시간도 변화하고 있습니다.
GIF의 기능을 그대로 가지고 있으면서, 보다 다양한 효과와 많은 양의 색상 정보를 담을 수는 없는걸까요?
그 궁금증은 다음 시간에 해결해 드리도록 하겠습니다. ^^
GIF는 8bit 컬러를 사용하고 있고 (최대 256색상) LZW(Lempel-Ziv-Welch) 압축기술을 사용합니다. LZW는 비손실 데이터 압축 알고리즘으로 Lempel과 Ziv가 1978년 공개한 LZ78 알고리즘을 Welch가 개선하여 1984년에 공개하였습니다.
LZW의 알고리즘을 보신 분들이라면 이 알고리즘이 가능하면 빠른 이식과 동작을 위해 고안되었다는 것을 아실 수 있으실 겁니다. 다만 제한적인 수행을 하므로 광범위하게 동작하지 않습니다. (모든 환경에서 최적화되어 수행되지 않는다는 말입니다 ^^)
이야기가 잠깐 삼천포로 빠졌네요 ^^;
GIF는 LZW 압축 알고리즘을 사용하여 무손실로 데이터를 압축합니다. 파일을 zip으로 압축한다고 해서 원본 파일이 훼손되지 않는 것 처럼, GIF도 손실 없이 이미지 정보를 압축합니다.
GIF 파일이 용량이 작은 이유는, 모든 이미지의 정보를 픽셀 단위로 저장하지 않고 일관된(유사한) 컬러를 몇 가지의 패키지로 묶어 저장하기 때문입니다.
일일히 픽셀 정보를 저장하지 않으므로 다양한 색상을 사용하거나 그라데이션(gradation)과 같이 연속적으로 분포되는 색상을 저장할 경우에는 용량이 기하급수적으로 증가합니다.
JPEG로 저장된 이미지 파일을 GIF로 저장하면 자칫 용량이 더 늘어나는 경우가 발생합니다. 색상 역시 8bit로 제한되어 있어 이미지가 뭉개지는(지금 글을 살펴보니 압축된다는 표현은 조금 정확하지 않습니다.) 현상이 발생합니다.
최대로 표현 가능한 색상이 한정되어 있으므로, 이를 넘어서는 색상은 유사한 색상으로 대체해버리기 때문입니다.
보다 많은 정보를 전달하기 위해 포스팅을 작성하기 보다는, 웹이라는 일상적인 내용을 흥미를 가지고 전달하기 위해 작성하다 보니 여기저기 실수하는 부분들이 많습니다.
앞으로도 여러분들의 따끔한 지적 부탁드립니다 ^^
다음 포스팅 예고
1. PNG, 너는 또 무엇이냐?
2. Color Palette, 그리고 Only web color
