W20801

	안녕하세요 ? 이번 주는 웹 디자인의 필수요소가 된 디지털 이미지 기초개념에 대해 다루고자 합니다. 웹은 원거리 네트웍을 통한 문자정보의 실시간 공유라는 점에서 많은 잇점이 있었지만 네트웍 속도의 향상과 함께 브로우져 상에서 그래픽 데이터를 볼 수 있게 되면서 주요한 대중 정보매체로 자리잡게 되었습니다. 문자로 가득찬 모니터를 바라보는 것은 즐거운 일은 아닙니다. 그보다는 폰트의 형태가 정밀하게 살아있는 인쇄물을 보는 편이 훨씬 즐겁습니다. 일본의 소니에서 한때 디지털 북이라고 하여 조그마한 액정모니터가 달린 워크맨 같은 기계에 카트리지 를 넣어 책을 읽을 수 있도록 한 매체가 개발된 적이 있습니다만 대중적인 인기를 얻는데는 실패하고 말았습니다. 역시 전자수첩이나 삐삐처럼 문자만을 보여주는 정보매체의 경우는 빠르게 주소를 검색해 준다거나 지속적으로 갱신되는 실시간 정보가 나온다 라고 하는 점이 응용되어야 하지 않나 생각됩니다. 문자를 이용한 커뮤니케이션 매체 주로 데이터 검색용 이나 실시간 통신용 장치에 많이 응용된다. 휴대용 매체가 아닌 웹에 있어서 그래픽요소의 중요성은 점차 증대되고 있으며 이제는 문자자료 마저 이미지로 처리하는 경향을 보이고 있습니다. 곧 100배 빠른 인터넷이 등장한다고 광고하는 것을 보았습니다. 정말 100배 빨라질지는 의심스럽지만 어쨌든 이제는 웹이 본격적인 멀티미디어 기능을 갖추어 나가고 있다는 생각이 듭니다. 즉 기존의 매체를 다루어 오던 전문가들의 안목과 노하우가 그대로 웹에 적용될 것입니다. 그리고 그 가운데에는 아날로그와 디지털데이터를 동시에 관리할 줄 아는 교차적 전문가들이 그 다리역할을 하게 될 것입니다. 즉 새로운 매체도 포괄적으로 이해하여 과거의 유산과 접목할 줄 알 때 그 빛을 발하게 될 것입니다. 이번 주 부터는 이러한 부분에 대한 논의가 많이 있을 것입니다. 그리고 본 강의는 아나로그 이미지와 디지털 이미지의 차이를 살펴보고 이러한 차이를 웹 디자인을 위해서는 어떻게 응용하는지에 대하여 알아보겠습니다. 이미지의 크기 (Orientation) 컴퓨터는 계산기입니다. 아주 발전하고 세련된 계산기입니다. 사실 컴퓨터는 계산 전문가를 지칭하던 용어였습니다. 전화 교환원(원: 그일에 관계하는 사람)이 교환기(기: 기계나 장치)로 바뀐 것과 마찬가지죠. 사람이 하는 계산과 다른 것은 그들은 이진법을 사용한다는 것입니다. 수학시간에 왜 이진법으로 바꾸고 16진법으로 바꾸고 했는지 이해할 수 없었습니다. 왜냐면 우리는 십진법이 편하니까요, 열 손가락이 있으니 십진법이 편할 수밖에 없습니다. 원시인이 그랬던 것 처럼. 하지만 컴퓨터는 손가락이 없습니다. 그들은 대신 전기로 계산을 하고 전류의 량이 많고 적음의 차이에서 0과 1을 추출하여 계산을 합니다. 그리고 그 이진법 정보 하나가 들어가는 공간을 비트(bit)라고 합니다. 여기서 우리와 컴퓨터간의 차이가 있습니다. 디지털은 원래 손가락 열 개를 뜻하는 라틴어에 그 어원을 두고 있습니다. 손가락으로는 한번에 1.5 등을 표현할 수 없습니다. 손가락을 쪼갤 수는 없는 일이지요 즉 계산을 하기 위해서는 정해진 숫자로 구분을 해야 합니다. 하지만 현실세계는 그렇지가 않습니다. 면적이나 길이 등도 정확하게 숫자로 떨어질 수 있는 것이 아니지요 그래서 연속적인 물리량을 표현하게 되고 이를 우리는 아날로그라고 부릅니다. 우리가 생활 속에서 이미지의 크기를 말할 때는 미터를 사용합니다. 현실세계의 단위입니다. 미터는 지구의 자오선을 백만분의 40으로 나눈 값입니다. 즉 지구의 단위입니다만 서양에서는 사람 신체의 각 부분(발이나 손)을 기준으로 한 피트(feet)를 사용합니다. 이들은 무척 현실 세계에 기초하고 있는 단위입니다만 컴퓨터의 세계에서는 아무 의미가 없습니다. 컴퓨터는 비트와 바이트와 킬로바이트, 메가 바이트 등을 사용하며 이는 이미지의 크기를 나타낼 때에도 똑같이 적용됩니다. 디지털 이미지의 크기를 말할 때는 우선 하나의 픽셀이 몇 비트의 정보량을 가지고 있는지에 대해 결정해 주어야 하며 그 픽셀이 몇 개가 있는지를 지정해야 합니다. 그러고 나면 비로소 그 이미지의 데이터 량을 알 수 가 있습니다. 즉 2비트 짜리 픽셀이 80개 있으나 8비트짜리 픽셀이 20개 있으나 컴퓨터의 입장에서 보면 아무런 차이가 없습니다. 전부 160 비트만 계산하거나 전송하면 되니까요. 그러나 사람의 입장에서 보면 이렇게 간단한 문제가 아닙니다. 우리는 이미지 데이터들이 스크린 상에 얼만한 크기로 펼쳐져 보일지 또는 출력을 했을 때 가로세로의 크기가 몇 센티가 되는지가 중요합니다. 그래서 인쇄를 위해서는 DPI(dots per inch), PPI(pixels per inch), LPI(lines per inch) 등 현실세계 단위와의 관계를 규정해 주는 특정단위를 사용하게 됩니다. 그러나 이들 단위는 웹 이미지에 있어서는 아무런 의미가 없습니다. 이는 출력을 위한 단위이지 컴퓨터 스크린의 정해진 픽셀크기로는 표현할 수 없는 단위이기 때문입니다. 웹에서는 그보다는 픽셀이 몇 개이고 가로세로의 비율은 어떻고, 하나의 픽셀이 가지는 정보량 즉 비트 수는 어떤지가 중요하게 됩니다. 그리고 이를 그래픽 프로그램에서는 색상의 심도(Color Depth)와 가로세로의 픽셀수(Pixels x Pixels)로 지정하게 되어 8비트 320 x 240 픽셀 이미지 등으로 표시하게 됩니다. 색상의 심도와 이미지 포맷 앞서 디지틀 이미지의 크기를 컴퓨터 입장에서 생각해야 함을 강조한 것은 웹 페이지이건 CD-ROM 이건 DVD이건 컴퓨터 스크린을 이용하는 매체의 저작물에 모두 필요한 개념이기 때문입니다. 전통적 으로 디자이너들은 이미지 자체의 아름다움에 관심이 많습니다만 그 뒤에 움직이고 있는 디지털 데이터에 더욱 관심을 가질 필요가 있습니다. 이는 사용자의 버튼클릭에 따라 이미지들이 얼만큼 빠르게 반응하는지, 서버에서 차지할 공간량은 얼마나 될 것인지, 스크린 상에서는 어떻게 보일지 등을 결정하며 이는 사용자의 쾌적한 사용환경에 중대한 역할을 하기 때문입니다. 이미지 크기를 줄이기 위해선 우선 하나의 픽셀이 표현할 수 있는 색상의 수를 제한하는 방법이 있습니다. 이는 픽셀에 대한 비트 수로 표현하는데 즉 24비트, 1680만 가지의 색상조합으로 구성된 이미지를 8비트의 256가지 색상조합으로 바꾸어 그 크기를 1/3로 줄이는 식의 방법입니다. 이때 대부분 그 이미지를 구성하는 대표적인 색상 256가지를 별도로 추출하여 팔래트로 만들고 함께 관리하는 방법을 사용하며 이러한 방법으로 이미지의 크기를 줄인 것이 웹 이미지 포맷중 하나인 GIF 포맷입니다. GIF 포맷은 컴퓨서브(CompuServe)사에서 네트웍을 통한 그래픽 파일전송을 위해서 개발한 포맷으로 모든 플랫폼이나 브로우저에서 똑같은 이미지를 볼 수 있도록 해주며 사진보다는 문자나 심볼 등의 그래픽 이미지를 저장할 때 이상적인 포맷이라고 할 수 있습니다. 또한 24비트 디지털 이미지를 그대로 웹에서 보이고자 할 때에는 JPEG (Joint Photographic Experts Group)포맷을 사용하며 이는 웹에서 사용하는 또 하나의 포맷입니다. 이는 네트웍 전용이 아니라 사진 이미지의 데이터 압축을 위하여 개발 된 포맷으로 그 압축과 해제기능이 뛰어나 현재 대부분의 브로우저에서 이를 볼 수 있습니다. JPEG나 GIF화일이 화면에 뜨는 속도를 비교하기란 어렵습니다. 네트웍속도, 컴퓨터의 속도, 비디오 램의 크기, 압축율, 픽셀당 비트 수 등 많은 변수들이 있기 때문입니다. 24비트 jpeg 포맷과 8비트 gif 포맷(맞춤팔래트가 적용된 경우)의 비교 양측 화일이 열리데 걸리는 시간은 네트웍 속도나 컴퓨터 속도에 따라 달라질 수 있습니다. 만약 샘플과 달리 다양한 색상의 사진의 경우라면 우측 사진이 좌측보다 색상이 부족해 보일 것입니다. 왜냐하면 8비트로 표현할 수 있는 색상의 가짓수는 일정하기 때문입니다. 8비트 Web color 포맷에 디퓨션 처리 유무에서 오는 차이 Web palette는 모든 컴퓨터에서 똑같이 보인다는 장점이 있으나 사진의 경우에는 한정된 색상의 조합으로만 보이는 단점이 있습니다. 만약 윗단의 두 사진과 밑단의 두사진이 같아보이면 사용자의 모니터 심도는 8비트 이고 그렇지 않다면 24비트 이상일 것입니다. 개인적으로 여러 가지 포맷과 색상의 가짓수로 이미지들을 만들어 브로우저 상에서 뜨는 시간을 비교해 본 적이 있습니다. 24비트 JPEG 이미지의 속도가 현저히 느릴 것을 기대했습니다만 의외로 8bit로 처리한 GIF 이미지를 여는것과 별다른 속도의 차이를 느낄 수 가 없었습니다. 또한 256가지의 대표색상(Adaptive color: 즉 8비트 비디오 보드에서 보여줄 수 있는 시스탬 파래트의 색상과 일치하지 않는..)으로 만든 GIF 이미지를 8비트의 시스템 스크린 상에서 열어 보았을 때는 자동으로 디퓨전(Diffusion: 색상 분산 혼합)효과가 생기는 것을 보며 프로그램 설계자들의 장인정신을 느낄 수 가 있었습니다. 역시 예상하지 못한 경우를 미리 예측하여 준비해 놓는 것은 여러모로 우리들을 편리하게 합니다. 브로우져 상에서 이미지가 열리는 속도는 역시 픽셀의 숫자에 더 많이 좌우됩니다. 가로세로의 픽셀수가 많은 이미지를 여는데는 아무래도 많은 기다림을 요구합니다. 꼭 크기가 커져야 한다면 JPEG 보다는 제한된 비트수의 GIF 포맷을 사용하는 것을 권합니다. 간혹 이미지를 포함한 전체 페이지가 30K 이하가 되도록 해야한다는 지침서를 보는 경우도 있습니다만 이러한 조건은 네트웍 속도의 차이에 기인하므로 사용환경과 페이지의 성격을 고려하여 최적화된 이미지 화질과 그 데이터 크기를 계획하는 것도 웹 디자인에서 빼 놓을 수 없는 중요한 과정입니다. 그래픽 프로그램 그래픽 프로그램에는 크게 벡터(Vector) 이미지를 위한 드로잉 프로그램과 래스터(Raster) 이미지를 위한 패인팅 프로그램이 있습니다. 벡터 이미지는 좌표상의 수치로 도형의 형태를 정의해 주는 방법으로 문자나 심볼 및 설계용 이미지들을 제작하는 데에 적합하며 사진이나 회화와 같이 기하학 적으로 정의하기 어려운 이미지들은 여러 가지 색상의 픽셀 조합으로 만들어 내게 되는데 이를 래스터 이미지라고 부릅니다. 컴퓨터 그래픽 작업이라고 하면 대부분 이 두가지 포맷 사이를 오가며 진행하게 되는 것이 보편적입니다. 플레시(Flash)와 같은 특수한 플러그 인을 설치한 경우를 제외하고는 웹 브로우저는 기본적으로 벡터이미지를 인식하지 못하므로 웹 페이지의 모든 이미지는 래스터 이미지로 준비되어야 합니다. 래스터 이미지 편집 프로그램의 사용은 이제 웹 디자인을 위한 필수적 도구입니다. 어도브(Adobe)사의 포토샵(Photoshop)은 아마도 가장 많이 사용되는 래스터 이미지 프로그램일 것입니다. 저에게도 포토샵은 처음으로 본격적인 디지털 이미지 작업에 관심을 가지도록 해준 프로그램으로 이제는 모든 그래픽 작업에 있어서 주축을 이루고 있으며 개인적으로 가장 좋아하는 프로그램이기도 합니다. 최근에는 포토샵을 구입하기 어려운 학생들의 하소연을 들으면서 포토샵을 대체할 수 있는 보다 저렴한 셰어웨어(Share ware)에 대해 관심을 가지게 되었고 몇몇 프로그램을 웹으로부터 다운로드 받아 테스트 해 보았습니다. 그 중에는 매킨토시 OS 사용자들을 위한 GraphicConverter(www.lemkesoft.de) 와 Windows 사용자를 위한 Paint Shop Pro(www.jasc.com), LView Pro(www.lview.com)가 있었는데 예상했던 것 보다 뛰어난 성능에 놀랐습니다. 사실 포토샵은 초기버전에 비해 그 크기가 커지고 기능이 다양화되면서 일반 사용자들과는 거리감이 생기게 되었습니다. 물론 여러 가지로 편리해진 것은 사실입니다 만 포토샵의 초기버전에서도 현재 포토샵이 할 수 있는 대부분의 일을 할 수 있었던 것을 생각해 볼 때 지금의 포토샵 모습이 꼭 바람직한 것만은 아니다라는 생각을 하게 됩니다. 그런 면에서 위에 소개한 셰어웨어에는 래스터 이미지 편집을 위한 기본적인 기능들이 마련되어 있어 포토샵 초기버전을 연상시키며 웹 이미지 편집을 위해 아주 유용하게 사용할 수 있겠다는 생각이 들었습니다. 래스터 이미지 프로그램에 있어서 앞서 설명한 픽셀(Pixel), 색상심도(Color depth), 포맷(Format)의 개념만 정확하게 이해하고 있으면 그 사용법을 습득하는 것이 무척 쉽습니다. 좋은 디자인은 제작 도구의 성능보다는 창의적인 사고와 그것을 현실화 시키는 응용능력에 달려있다는 것을 생각해 주기 바랍니다. 디자인 수업 중에 학생들이 진행작업의 그래픽 스타일에 대해 발표하면서 포토샵을 사용한 이미지라는 말을 듣고 깜짝 놀란 적이 있습니다. 그래픽 프로그램은 좋은 스타일을 만들기 위한 것이지 그 자체가 스타일이 될 수는 없는 일입니다. 만약 그렇다면 그것은 디자인의 역사적 맥락 속에 있지 못하는 단순한 시각적 효과에 머물 것이며 이의 생명은 그만큼 짧을 것입니다. 그래픽 프로그램을 이해하기 보다는 그 안에서 색상 데이터들이 움직이는 원리를 이해할 때 과연 이것으로 무엇을 할 수 있을 것인가에 대한 생각으로 발전할 것이며 이것이 전통적인 디자인 방법론을 디지털 매체에 올바르게 적용시키는 일이 될 것입니다. 이번주는 디지털 이미지의 본질과 그 그래픽 프로그램에 대해 알아 보았습니다. 다음주는 그래픽 스타일에 대해서 알아보도록 하겠습니다. 감사합니다. 끝

안녕하세요 ?
이번 주는 웹 디자인의 필수요소가 된 디지털 이미지 기초개념에 대해 다루고자 합니다. 웹은 원거리 네트웍을 통한 문자정보의 실시간 공유라는 점에서 많은 잇점이 있었지만 네트웍 속도의 향상과 함께 브로우져 상에서 그래픽 데이터를 볼 수 있게 되면서 주요한 대중 정보매체로 자리잡게 되었습니다. 문자로 가득찬 모니터를 바라보는 것은 즐거운 일은 아닙니다. 그보다는 폰트의 형태가 정밀하게 살아있는 인쇄물을 보는 편이 훨씬 즐겁습니다. 일본의 소니에서 한때 디지털 북이라고 하여 조그마한 액정모니터가 달린 워크맨 같은 기계에 카트리지 를 넣어 책을 읽을 수 있도록 한 매체가 개발된 적이 있습니다만 대중적인 인기를 얻는데는 실패하고 말았습니다. 역시 전자수첩이나 삐삐처럼 문자만을 보여주는 정보매체의 경우는 빠르게 주소를 검색해 준다거나 지속적으로 갱신되는 실시간 정보가 나온다 라고 하는 점이 응용되어야 하지 않나 생각됩니다.

문자를 이용한 커뮤니케이션 매체
주로 데이터 검색용 이나 실시간 통신용 장치에 많이 응용된다.

휴대용 매체가 아닌 웹에 있어서 그래픽요소의 중요성은 점차 증대되고 있으며 이제는 문자자료 마저 이미지로 처리하는 경향을 보이고 있습니다. 곧 100배 빠른 인터넷이 등장한다고 광고하는 것을 보았습니다. 정말 100배 빨라질지는 의심스럽지만 어쨌든 이제는 웹이 본격적인 멀티미디어 기능을 갖추어 나가고 있다는 생각이 듭니다. 즉 기존의 매체를 다루어 오던 전문가들의 안목과 노하우가 그대로 웹에 적용될 것입니다. 그리고 그 가운데에는 아날로그와 디지털데이터를 동시에 관리할 줄 아는 교차적 전문가들이 그 다리역할을 하게 될 것입니다. 즉 새로운 매체도 포괄적으로 이해하여 과거의 유산과 접목할 줄 알 때 그 빛을 발하게 될 것입니다. 이번 주 부터는 이러한 부분에 대한 논의가 많이 있을 것입니다. 그리고 본 강의는 아나로그 이미지와 디지털 이미지의 차이를 살펴보고 이러한 차이를 웹 디자인을 위해서는 어떻게 응용하는지에 대하여 알아보겠습니다.

이미지의 크기 (Orientation)

컴퓨터는 계산기입니다. 아주 발전하고 세련된 계산기입니다. 사실 컴퓨터는 계산 전문가를 지칭하던 용어였습니다. 전화 교환원(원: 그일에 관계하는 사람)이 교환기(기: 기계나 장치)로 바뀐 것과 마찬가지죠. 사람이 하는 계산과 다른 것은 그들은 이진법을 사용한다는 것입니다. 수학시간에 왜 이진법으로 바꾸고 16진법으로 바꾸고 했는지 이해할 수 없었습니다. 왜냐면 우리는 십진법이 편하니까요, 열 손가락이 있으니 십진법이 편할 수밖에 없습니다. 원시인이 그랬던 것 처럼. 하지만 컴퓨터는 손가락이 없습니다. 그들은 대신 전기로 계산을 하고 전류의 량이 많고 적음의 차이에서 0과 1을 추출하여 계산을 합니다. 그리고 그 이진법 정보 하나가 들어가는 공간을 비트(bit)라고 합니다. 여기서 우리와 컴퓨터간의 차이가 있습니다. 디지털은 원래 손가락 열 개를 뜻하는 라틴어에 그 어원을 두고 있습니다. 손가락으로는 한번에 1.5 등을 표현할 수 없습니다. 손가락을 쪼갤 수는 없는 일이지요 즉 계산을 하기 위해서는 정해진 숫자로 구분을 해야 합니다. 하지만 현실세계는 그렇지가 않습니다. 면적이나 길이 등도 정확하게 숫자로 떨어질 수 있는 것이 아니지요 그래서 연속적인 물리량을 표현하게 되고 이를 우리는 아날로그라고 부릅니다.

우리가 생활 속에서 이미지의 크기를 말할 때는 미터를 사용합니다. 현실세계의 단위입니다. 미터는 지구의 자오선을 백만분의 40으로 나눈 값입니다. 즉 지구의 단위입니다만 서양에서는 사람 신체의 각 부분(발이나 손)을 기준으로 한 피트(feet)를 사용합니다. 이들은 무척 현실 세계에 기초하고 있는 단위입니다만 컴퓨터의 세계에서는 아무 의미가 없습니다. 컴퓨터는 비트와 바이트와 킬로바이트, 메가 바이트 등을 사용하며 이는 이미지의 크기를 나타낼 때에도 똑같이 적용됩니다. 디지털 이미지의 크기를 말할 때는 우선 하나의 픽셀이 몇 비트의 정보량을 가지고 있는지에 대해 결정해 주어야 하며 그 픽셀이 몇 개가 있는지를 지정해야 합니다. 그러고 나면 비로소 그 이미지의 데이터 량을 알 수 가 있습니다. 즉 2비트 짜리 픽셀이 80개 있으나 8비트짜리 픽셀이 20개 있으나 컴퓨터의 입장에서 보면 아무런 차이가 없습니다. 전부 160 비트만 계산하거나 전송하면 되니까요. 그러나 사람의 입장에서 보면 이렇게 간단한 문제가 아닙니다. 우리는 이미지 데이터들이 스크린 상에 얼만한 크기로 펼쳐져 보일지 또는 출력을 했을 때 가로세로의 크기가 몇 센티가 되는지가 중요합니다. 그래서 인쇄를 위해서는 DPI(dots per inch), PPI(pixels per inch), LPI(lines per inch) 등 현실세계 단위와의 관계를 규정해 주는 특정단위를 사용하게 됩니다. 그러나 이들 단위는 웹 이미지에 있어서는 아무런 의미가 없습니다. 이는 출력을 위한 단위이지 컴퓨터 스크린의 정해진 픽셀크기로는 표현할 수 없는 단위이기 때문입니다. 웹에서는 그보다는 픽셀이 몇 개이고 가로세로의 비율은 어떻고, 하나의 픽셀이 가지는 정보량 즉 비트 수는 어떤지가 중요하게 됩니다. 그리고 이를 그래픽 프로그램에서는 색상의 심도(Color Depth)와 가로세로의 픽셀수(Pixels x Pixels)로 지정하게 되어 8비트 320 x 240 픽셀 이미지 등으로 표시하게 됩니다.

색상의 심도와 이미지 포맷

앞서 디지틀 이미지의 크기를 컴퓨터 입장에서 생각해야 함을 강조한 것은 웹 페이지이건 CD-ROM 이건 DVD이건 컴퓨터 스크린을 이용하는 매체의 저작물에 모두 필요한 개념이기 때문입니다. 전통적 으로 디자이너들은 이미지 자체의 아름다움에 관심이 많습니다만 그 뒤에 움직이고 있는 디지털 데이터에 더욱 관심을 가질 필요가 있습니다. 이는 사용자의 버튼클릭에 따라 이미지들이 얼만큼 빠르게 반응하는지, 서버에서 차지할 공간량은 얼마나 될 것인지, 스크린 상에서는 어떻게 보일지 등을 결정하며 이는 사용자의 쾌적한 사용환경에 중대한 역할을 하기 때문입니다.
이미지 크기를 줄이기 위해선 우선 하나의 픽셀이 표현할 수 있는 색상의 수를 제한하는 방법이 있습니다. 이는 픽셀에 대한 비트 수로 표현하는데 즉 24비트, 1680만 가지의 색상조합으로 구성된 이미지를 8비트의 256가지 색상조합으로 바꾸어 그 크기를 1/3로 줄이는 식의 방법입니다. 이때 대부분 그 이미지를 구성하는 대표적인 색상 256가지를 별도로 추출하여 팔래트로 만들고 함께 관리하는 방법을 사용하며 이러한 방법으로 이미지의 크기를 줄인 것이 웹 이미지 포맷중 하나인 GIF 포맷입니다. GIF 포맷은 컴퓨서브(CompuServe)사에서 네트웍을 통한 그래픽 파일전송을 위해서 개발한 포맷으로 모든 플랫폼이나 브로우저에서 똑같은 이미지를 볼 수 있도록 해주며 사진보다는 문자나 심볼 등의 그래픽 이미지를 저장할 때 이상적인 포맷이라고 할 수 있습니다. 또한 24비트 디지털 이미지를 그대로 웹에서 보이고자 할 때에는 JPEG (Joint Photographic Experts Group)포맷을 사용하며 이는 웹에서 사용하는 또 하나의 포맷입니다. 이는 네트웍 전용이 아니라 사진 이미지의 데이터 압축을 위하여 개발 된 포맷으로 그 압축과 해제기능이 뛰어나 현재 대부분의 브로우저에서 이를 볼 수 있습니다. JPEG나 GIF화일이 화면에 뜨는 속도를 비교하기란 어렵습니다. 네트웍속도, 컴퓨터의 속도, 비디오 램의 크기, 압축율, 픽셀당 비트 수 등 많은 변수들이 있기 때문입니다.

24비트 jpeg 포맷과 8비트 gif 포맷(맞춤팔래트가 적용된 경우)의 비교
양측 화일이 열리데 걸리는 시간은 네트웍 속도나 컴퓨터 속도에 따라 달라질 수 있습니다.
만약 샘플과 달리 다양한 색상의 사진의 경우라면 우측 사진이 좌측보다 색상이 부족해 보일 것입니다.
왜냐하면 8비트로 표현할 수 있는 색상의 가짓수는 일정하기 때문입니다.

8비트 Web color 포맷에 디퓨션 처리 유무에서 오는 차이
Web palette는 모든 컴퓨터에서 똑같이 보인다는 장점이 있으나
사진의 경우에는 한정된 색상의 조합으로만 보이는 단점이 있습니다.

만약 윗단의 두 사진과 밑단의 두사진이 같아보이면 사용자의 모니터 심도는 8비트 이고
그렇지 않다면 24비트 이상일 것입니다.

개인적으로 여러 가지 포맷과 색상의 가짓수로 이미지들을 만들어 브로우저 상에서 뜨는 시간을 비교해 본 적이 있습니다. 24비트 JPEG 이미지의 속도가 현저히 느릴 것을 기대했습니다만 의외로 8bit로 처리한 GIF 이미지를 여는것과 별다른 속도의 차이를 느낄 수 가 없었습니다. 또한 256가지의 대표색상(Adaptive color: 즉 8비트 비디오 보드에서 보여줄 수 있는 시스탬 파래트의 색상과 일치하지 않는..)으로 만든 GIF 이미지를 8비트의 시스템 스크린 상에서 열어 보았을 때는 자동으로 디퓨전(Diffusion: 색상 분산 혼합)효과가 생기는 것을 보며 프로그램 설계자들의 장인정신을 느낄 수 가 있었습니다. 역시 예상하지 못한 경우를 미리 예측하여 준비해 놓는 것은 여러모로 우리들을 편리하게 합니다. 브로우져 상에서 이미지가 열리는 속도는 역시 픽셀의 숫자에 더 많이 좌우됩니다. 가로세로의 픽셀수가 많은 이미지를 여는데는 아무래도 많은 기다림을 요구합니다. 꼭 크기가 커져야 한다면 JPEG 보다는 제한된 비트수의 GIF 포맷을 사용하는 것을 권합니다. 간혹 이미지를 포함한 전체 페이지가 30K 이하가 되도록 해야한다는 지침서를 보는 경우도 있습니다만 이러한 조건은 네트웍 속도의 차이에 기인하므로 사용환경과 페이지의 성격을 고려하여 최적화된 이미지 화질과 그 데이터 크기를 계획하는 것도 웹 디자인에서 빼 놓을 수 없는 중요한 과정입니다.

그래픽 프로그램

그래픽 프로그램에는 크게 벡터(Vector) 이미지를 위한 드로잉 프로그램과 래스터(Raster) 이미지를 위한 패인팅 프로그램이 있습니다. 벡터 이미지는 좌표상의 수치로 도형의 형태를 정의해 주는 방법으로 문자나 심볼 및 설계용 이미지들을 제작하는 데에 적합하며 사진이나 회화와 같이 기하학 적으로 정의하기 어려운 이미지들은 여러 가지 색상의 픽셀 조합으로 만들어 내게 되는데 이를 래스터 이미지라고 부릅니다. 컴퓨터 그래픽 작업이라고 하면 대부분 이 두가지 포맷 사이를 오가며 진행하게 되는 것이 보편적입니다. 플레시(Flash)와 같은 특수한 플러그 인을 설치한 경우를 제외하고는 웹 브로우저는 기본적으로 벡터이미지를 인식하지 못하므로 웹 페이지의 모든 이미지는 래스터 이미지로 준비되어야 합니다. 래스터 이미지 편집 프로그램의 사용은 이제 웹 디자인을 위한 필수적 도구입니다. 어도브(Adobe)사의 포토샵(Photoshop)은 아마도 가장 많이 사용되는 래스터 이미지 프로그램일 것입니다. 저에게도 포토샵은 처음으로 본격적인 디지털 이미지 작업에 관심을 가지도록 해준 프로그램으로 이제는 모든 그래픽 작업에 있어서 주축을 이루고 있으며 개인적으로 가장 좋아하는 프로그램이기도 합니다. 최근에는 포토샵을 구입하기 어려운 학생들의 하소연을 들으면서 포토샵을 대체할 수 있는 보다 저렴한 셰어웨어(Share ware)에 대해 관심을 가지게 되었고 몇몇 프로그램을 웹으로부터 다운로드 받아 테스트 해 보았습니다. 그 중에는 매킨토시 OS 사용자들을 위한 GraphicConverter(www.lemkesoft.de) 와 Windows 사용자를 위한 Paint Shop Pro(www.jasc.com), LView Pro(www.lview.com)가 있었는데 예상했던 것 보다 뛰어난 성능에 놀랐습니다. 사실 포토샵은 초기버전에 비해 그 크기가 커지고 기능이 다양화되면서 일반 사용자들과는 거리감이 생기게 되었습니다. 물론 여러 가지로 편리해진 것은 사실입니다 만 포토샵의 초기버전에서도 현재 포토샵이 할 수 있는 대부분의 일을 할 수 있었던 것을 생각해 볼 때 지금의 포토샵 모습이 꼭 바람직한 것만은 아니다라는 생각을 하게 됩니다. 그런 면에서 위에 소개한 셰어웨어에는 래스터 이미지 편집을 위한 기본적인 기능들이 마련되어 있어 포토샵 초기버전을 연상시키며 웹 이미지 편집을 위해 아주 유용하게 사용할 수 있겠다는 생각이 들었습니다. 래스터 이미지 프로그램에 있어서 앞서 설명한 픽셀(Pixel), 색상심도(Color depth), 포맷(Format)의 개념만 정확하게 이해하고 있으면 그 사용법을 습득하는 것이 무척 쉽습니다. 좋은 디자인은 제작 도구의 성능보다는 창의적인 사고와 그것을 현실화 시키는 응용능력에 달려있다는 것을 생각해 주기 바랍니다.

디자인 수업 중에 학생들이 진행작업의 그래픽 스타일에 대해 발표하면서 포토샵을 사용한 이미지라는 말을 듣고 깜짝 놀란 적이 있습니다. 그래픽 프로그램은 좋은 스타일을 만들기 위한 것이지 그 자체가 스타일이 될 수는 없는 일입니다. 만약 그렇다면 그것은 디자인의 역사적 맥락 속에 있지 못하는 단순한 시각적 효과에 머물 것이며 이의 생명은 그만큼 짧을 것입니다. 그래픽 프로그램을 이해하기 보다는 그 안에서 색상 데이터들이 움직이는 원리를 이해할 때 과연 이것으로 무엇을 할 수 있을 것인가에 대한 생각으로 발전할 것이며 이것이 전통적인 디자인 방법론을 디지털 매체에 올바르게 적용시키는 일이 될 것입니다.
이번주는 디지털 이미지의 본질과 그 그래픽 프로그램에 대해 알아 보았습니다. 다음주는 그래픽 스타일에 대해서 알아보도록 하겠습니다.
감사합니다.

끝