수안이의 컴퓨터 연구실

Staff 10/01/2000

이미지가 없다면 월드 와이드 웹(WWW: the World Wide Web)이 무슨 소용있을까? 이 특강에서는 GIF형식과 JPEG형식을 구분하는 방법과 두 파일 형식의 기능을 향상시키는 방법을 배운다.

시장에는 그래픽을 다루는 프로그램들이 많이 있지만 전문 디자이너들은 어도비 포토샵(Adobe PhotoShop)을 선택한다.

하지만 많은 사람들이 포토샵에 있는 복잡한 기능들을 보고 많이 좌절한다. 이런 현상을 기능충격이라고 부른다. 포토샵을 마스터하는 데는 어려움이 많지만 일단 시도를 해야 한다.

시간과 노력을 들이다보면 점점 잘하고 있는 자신을 발견할 것이고 머지않아 별 노력 없이도 멋진 이미지를 만들 수 있을 것이다.

그것을 염두에 두고 포토샵에서 웹 이미지를 최적화시키는 방법을 찾아보자. 포토샵은 특히 개인 웹사이트 개발하는데 유용하다. 여기에서는 공동(모두 가지고 있는) 클립아트를 쓸 것이다.

포토샵에는 웹 그래픽을 매력적으로 만들어주는 수십가지 도구들이 있다.

하지만 웹 이미지를 만들기 전에 한가지 기억할 것이 있다. 프로젝트를 확실히 성공시키기 위해서 해야 될 가장 중요한 일 중 하나는 적당한 파일 형식으로 가장 쓰기 쉽게 이미지를 저장하는 것이다.

웹 그래픽에 사용할 전송 형식을 결정하다보면 대체로 GIF와 JPEG 두 개로 정해진다. 다행히 포토샵은 이 두 가지 형식으로 이미지를 저장할 수 있다.

비트맵 기반의 이 두 형식은 브라우저로 더 빨리 자료를 올리고 웹 서버의 디스크 공간을 덜 차지하도록 그래픽 파일의 정보를 압축한다.

불행하게도 정확한 이미지 포맷을 고르는 구체적인 방법은 없다. 그래서 원본 그래픽의 복잡한 정도와 웹브라우저에 나타나게 하고 싶은 이미지에 따라 결정해야한다.

GIF형식과 JPEG형식의 기본 특징에 대해 살펴보자.

GIF
GIF(The Graphic Interchange Format)는 웹에서 가장 보편적으로 쓰이는 이미지 파일 형식이다.

전형적인 로고와 라인 아트 그림, 화면, 캡쳐의 경우 GIF를 쓰는 것이 최고다. 왜냐면 대부분 이미지의 질을 바꾸지 않고 포토샵에서 만들어진 그대로 웹에 나타나기 때문이다.

하지만 GIF는 8 비트 파일 형식에 쓰이는 인덱스 컬러 팔렛트의 한계인 256색을 넘지 않는 범위 내에서만 쓸 수 있다. 복잡한 컬러 혼합 방식을 쓴 그래픽은 GIF형식에서는 종종 깨져서) 나타난다.

GIF의 기능
GIF는 RGB 그래픽의 크기를 2/3 정도로 줄이는 StuffIt이나 PKZip같은 유명한 도구들과 동일한 데이타 압축 기술을 사용한다. TIFF로 파일을 저장하면 96KB인 것이 GIF 파일 형식으로 저장하면 64KB로 압축할 수 있다.

GIF의 특징
포토샵을 쓰면 GIF인덱스 팔렛트에서 컬러 하나를 투명색으로 지정할 수 있다. 이것은 희미하거나 겹치는 이미지 같은 특수 효과를 만드는 데 유용한 기능이다.

또 포토샵은 웹 브라우저로 저해상도의 이미지 버전을 처음에 즉시 올리고 차차 화질을 향상시키는 GIF 혼합 기법(interlacing GIF)을 제공한다(이 장치는 거의 모든 웹 디자인에 이상적이다).

또한 GIF로 간단한 애니메이션을 만들 때는 GifBuilder와 GifAnimator 같은 셰어웨어 프로그램을 쓸 수 있다.

JPEG
JPEG(The Joint Photographic Experts Group)형식은 사진 이미지와 지속적인 톤 유지를 필요로하는 세밀한 일러스트레이션에 가장 좋은 방법이다.

JPEG은 미묘한 음영의 변화를 정확하게 보여주기 위해서 만들어졌기 때문에 단색의 큰 면적이나 복잡한 가장자리가 있는 화면 캡쳐와 같은 그래픽에는 별로 좋지 않다.

JPEG은 모든 비트수를 지원하지만 일반적으로 24비트와 32비트 이미지에만 쓰인다.

JPEG의 기능
JPEG은 사실 원본 파일에 있는 일부 정보를 없애면서 압축된 이미지를 모방한다.

이런 손실압축은 인간의 눈이 보여지는 모든 컬러를 시각적으로 처리하지 못하기 때문에 일부 컬러나 세부묘사가 사라지더라도 JPEG 이미지가 원본과 거의 같게 보인다는 가정하에 일어난다.

GIF로 대략 64KB 크기가 나오는 96KB의 TIFF 이미지가 JPEG 파일로 바뀌면 32KB로 줄어든다.

JPEG의 특징
원본 이미지의 비트수를 줄이는 JPEG의 압축 비율은 조절이 가능하다. 압축 비율이 낮수록 이미지의 질은 더 좋아진다. 하지만 결과적으로 그런 파일은 더 많은 디스크 공간을 차지한다.

최선의 선택
대부분의 일상적인 웹 이미지의 경우 사람들은 웹 파일 형식으로 대부분 GIF를 선택할 것이다. 하지만 전문적인 이미지를 웹 디자인에 적용하는 경우에는 JPEG으로 할 것이다.

형식을 선택하기 어려우면 그냥 두 가지 압축 기술로 이미지를 변환해 보고 애용하는 웹 브라우저를 통해 비교해보면 된다. 견본용 그래픽은 도안 A(using-1.gif)에서 볼 수 있다.

GIF 파일은 이미지 컬러혼합 기술을 약간만 쓰지만 컬러의 미세한 부분을 더 많이 포함하고 있다는 사실을 명심하자. JPEG 이미지는 실제로 깊이감과 색조 혼합 기능을 향상시켰다. 반면에 멋진 세부묘사 부분을 사라지게 만들었다.

그래픽 디자인에서는 흔히 있는 일이듯이 선택은 이미지의 어떤 점이 자신에게 가장 중요한가에 달려있다.

인터넷에 쓸 GIF 준비
GIF를 인터넷에 올리기 위해 저장할 때는 몇가지 고려할 선택 사항이 있다. 컬러의 양을 줄일 수도 있고, 새 컬러 팔렛트를 고를 수도 있고, GIF를 혼합할 수도 있고, 이미지의 컬러를 투명하게 바꿀 수도 있다.

Gif89a에 대한 이야기
Gif89a 필터는 포토샵에 포함되어 있다. 이 필터를 쓰면 컬러를 선택해서 투명하게 바꾸고 GIF 이미지를 혼합할 수 있다. GIf89a를 써서 GIF를 변환시키는 방법을 실제로 알아보려면 먼저 이미지 하나를 연다. 예를 들어 도안 B(using-2.gif)에 나온 RGB 이미지를 써보자.

그 다음 웹 브라우저에 보이고 싶은 이미지의 일부를 선택하고 새 레이어 선택으로 넘어간다. 도안 B에 나온 것처럼 선택 도구(Selection tools)를 사용해서 기린만 선택한다.

그리고 바탕 레이어에서 선택한 부분을 잘라 새로운 레이어에 그것을 붙여넣는다. 그렇게 하려면 레이어 메뉴 아래의 새 메뉴에서 Layer Via Cut을 선택한다. 그러면 포토샵이 새 레이어에 선택한 부분을 붙여준다.

이제 기린만 옮기려면 바탕 레이어를 숨기면 된다. 그러기 위해선 레이어 팔렛트 안의 배경 레이어 옆에 있는 눈 모양 아이콘을 선택한다. 그리고 이미지를 보낸다.

다음에 GIF89a Export를 파일 메뉴 아래 Export 메뉴에서 선택한다. 그러면 포토샵이 자동으로 투명 인덱스 컬러를 기준 웹 브라우저의 회색으로 맞춘다.

하지만 회색 컬러 견본(gray color swatch)을 클릭하고 컬러선택 대화상자(Color Picker dialog box)에서 새로운 컬러를 골라서 색을 바꿀 수도 있다.

투명 인덱스 컬러를 바꾸는 것 외에 가지고 있는 이미지의 컬러도 바꿀 수 있다. GIF89a Expert 대화 상자(GIF89a Export dialog box)를 쓰면 컬러 팔렛트를 바꾸거나 새 팔렛트를 더하거나 이미지에 사용되는 컬러의 수를 바꿀 수 있다. 예를 들어 적용 팔렛트(Adaptive palette)를 선택하고 컬러 텍스트 상자(Colors text box)에 임의로 255라는 숫자를 써넣을 수도 있다.

다음에는 내보낼 GIF 이미지를 혼합하기 위해 비월주사 체크 상자(Interlaced check box)를 작동시킨다. 대부분 이미지 형식에서 컴퓨터는 정보를 읽고 상하 좌우로 이미지를 그린다.

이 과정에서 사용자가 이미지가 나타나기를 기다리는 약간 지루한 시간이 걸린다. 포맷을 비월주사시키면 컴퓨터가 전체 이미지를 바로 그릴 수 있도록 이미지를 형성한다. 처음에는 해상도가 낮다가 몇 분이 지나면 다운로드가 끝나면서 컴퓨터가 나머지 이미지를 완성한다.

계속해서 OK 클릭
마지막으로 파일의 이름을 정하고 저장한다. 웹에 쓸 이미지를 만드는 것이기 때문에 이미지의 이름을 정할 때 PC에서 이름을 정하는 일정한 관습을 따르는 것이 좋다. (012Web.GIF처럼 8자 이내의 문자와 마침표 다음에 3자로 된 확장자를 사용)

파일의 이름을 정하고 저장하기 위해서 GIF89 Expert 대화 상자(GIF89a Export dialog box)에서 OK 버튼을 클릭한다. 저장대화상자(Save dialog box)에서 만들어놓은 GIF의 이름을 써넣고 저장을 클릭한다.

그러면 할 일이 다 끝났다. 이제 어느 웹 페이지에나 띄울 수 있는 비월주사 그래픽을 만들었다.