| |
Advanced Graphics on WWW- Wanna be an WWW Designer ? |
Juno Park (박 준)
TABLE OF CONTENTS
1980년대 말, 사용자들의 환경이나 거리에 크게 국한받지 않으며 학술정보들을 공유하기 위하여 제안되었던 월드 와이드 웹 (World Wide Web)은 비슷한 환경에서 제공되는 여타의 온라인 서비스와는 비교하기 어려울 정도로 급성장을 하며 오늘에 이르렀다. 웹의 인기는 그 성장세를 기하급수에 비유할 만큼 급격히 상승하고 있는데, 굳이 외국으로 시각을 옮기지 않고 국내만을 바라보더라도, 온라인과 관련된 최근 2년간의 보도자료나 사회 일반의 관심 등을 볼 때 각종 인터넷과 관련된 사업이나 매체가 나타나고, 일반인들이 개인 기업 등에서 제공하는 인터넷 접속 서비스를 이용하여 시간과 공간을 초월한 네트워킹을 즐길 수 있게 되는 등, 80년대 중반 이후에 국내에 불었던 컴퓨터 교육의 바람과는 상대가 될 수 없을 정도의 폭발적인 인기를 누리고 있다.
이렇듯 폭발적인 성장을 하게 된 배경에는 여러가지 요인이 있겠지만, 그중 가장 특징적인 것으로 웹 자체가 갖고 있는 특성 (character) 을 예로 들 수 있을 것이다. 좀 더 구체적으로 말하자면, 웹은 초기에 제안된 모델이나 현재까지 구현하고 있는 컨셉트 (concept) 가 워낙 유연한 형태 (flexible document form) 이기 때문에 그 기본을 이루는 골격을 그대로 유지하면서 갖가지 색다르고 진보된 시도를 할 수 있었고, 특히 넷스케이프 커뮤니케이션즈사 (1)의 넷스케이프 네비게이터 (2)나 마이크로소프트사 (3)의 인터넷 익스플로러 (4)와 같은 진보적인 웹 브라우저들의 속출은 이같은 발전의 가속도를 더욱 붙게 하는 요인이 되었다. 간단한 글자들과 기본적인 그림만을 보여줄 수 있도록 제안되었던 초기의 모델과는 달리, 유연한 컨셉트를 바탕으로 한 갖가지 시도는 웹 자체의 발전은 물론 정보통신사회의 변화마저 불러 일으킬 만큼 그 여파가 컸다.
웹의 초창기에는 당시의 선구자적인 과학기술인들이 주축이 되어 새로운 패러다임을 이끌어 갔으며, 최근에 이르러서야 그 영역이 서서히 넓어져 가기 시작했다. 하기야 웹은 고사하고 인터넷 자체만을 따져본다 하더라도 그것이 대중화 되기 시작한 시기를 구태여 논하지 않더라도, 인터넷이 일반인들에게 알려진 것도 불과 몇년 전에 불과하다. 물론 소위 정보통신 선진국이라는 곳들에서는 좀 사정이 다르겠지만, 우리나라와 같은 곳에서는 허리케인과 같은 "인터넷 열풍"이 불기 전까지는 몇몇 극소수에 해당하는 "선택받은 사람들"만이 인터넷을 사용할 수 있었으며 특히 인터넷 상에서 제공되는 여러가지 서비스 중 웹을 접할 수 있는 기회를 갖은 사람은 아주 적었다.
하지만 급속도로 변하는 정보사회에서 살아가는 사람들은 여러 사회나 집단, 그리고 각종 매체 등에서 정보통신의 근간 (infrastructure) 으로 인터넷을 지목하게 되었으며, 그중에서도 가장 가능성이 두드러지고 주목할 만한 매체로 웹을 지목하게 되었다. 앞에서도 밝혔지만 웹은 그 자체가 갖고 있는 유연한 컨셉트를 장점으로 삼아서 괄목할 만한 발전을 하게 되었는데, 그 발전의 정도는 실로 형언할 수 없을만큼 큰 것이기 때문에 최근 약 2년간의 웹과 그 초기 모습은 크나큰 차이를 보일 수 밖에 없다. 인터넷상의 다른 매체에 비하여 상대적으로 역사도 짧으며 초기에는 침체될 수 밖에 없었던 웹이 갑자기 이렇게 인기를 누릴 수 있게 된 요인으로는 여러가지를 들 수 있겠지만, 일반 네티즌들의 관점이나 개발자들의 관점에서 봤을 때 가장 두드러진 특징으로는 단연 "멀티미디어"가 지원된다는 점일 것이다. 초창기의 컨셉트들 (5) 은 90년대 초반 이후에 속속들이 나타나는 그래픽 지원의 웹 브라우저들, 특히 다른 브라우저들에 비하여 좀 더 진보적이라 할 수 있는 넷스케이프 네비게이터의 탄생으로 인하여 빛을 볼 수 있었으며 시간이 지남에 따라 초창기에는 감히 상상조차 할 수 없었던 갖가지 진보된 모습을 보일 수 있게 되었다.
웹이 정보통신사회의 한 매체 (media) 로서 인식되기 시작하고, 진보된 웹 브라우저들에서 제안하는 갖가지 특성들 (browser extensions) 은 웹 브라우저를 통한 갖가지 시도가 가능하게 하였으며, 과학기술자들과 엔지니어, 컴퓨터 프로그래머들을 주축으로 하던 웹 사회에서는 서서히 디자인에 눈을 돌릴 수 있는 계기가 되었다. 그래서 1990년대 초반부터 서서히 디자인이 가미된 새로운 매체로서 웹이 나타나기 시작하였으며, 인터넷과 관련된 갖가지 제반 환경들이 점차 나아지고 네티즌들의 주된 인터넷 활동 무대 (6) 가 웹이 되어가면서 웹 페이지에서의 디자인이 차지하는 중요성은 점차 그 비중이 커져가기 시작했다.
개인용 컴퓨팅 환경의 개선이나 높아진 개인용 컴퓨터의 성능 등과 함께 GUI (Graphic User Interface) 환경이 보편화 되면서, 대부분의 경우에 그래픽이 함께 지원되는 브라우저를 사용하여 웹을 즐기게 되었다. 그래픽 디자이너가 웹과 관련된 그래픽 작업을 하게 될 때 만날 수 있는 가장 큰 문제중의 하나가 바로 팔레트 (palette) 와 관련된 것이다. 자신과 익숙해져 있는 그래픽 환경에서 작업한 후에 웹 브라우저를 통하여 그것을 보게 되면, 처음에 의도했던 바와 많이 차이가 날 경우가 있는데 그러한 요인을 만드는 가장 큰 것이 바로 브라우저 자체가 갖고 있는 팔레트 때문이다.
자사의 운영체계를 바탕으로 하는 마이크로소프트 인터넷 익스플로러와 같은 것은 운영체계 자체에서 지원하는 팔레트를 사용하기 때문에 그다지 큰 차이가 없지만 '팔레트'란 측면에서 가장 골치아픈 것이 바로 넷스케이프 네비게이터인데 그것은 이 브라우저가 자체적으로 팔레트를 갖고 있으며 이것을 통하여 보이는 모든 그래픽 파일의 팔레트를 조절하기 때문이다. [Siegel 96] 에 의하면 넷스케이프 네비게이터는 자체적으로 216가지의 팔레트를 가지고 있으며, 이것을 잘 이용하는 것이 좀 더 깨끗한 웹 그래픽을 구현할 수 있는 한 방법이기도 하다.
[그림 1]을 이용하는 방법은 무척 간단한데, 웹상에서 그림을 다운로드 받은 후에 포토샵 (8)에서 파일을 열고, 'Mode'에서 'Color Table...'을 선택한 후 컬러 테이블로 불러 사용할 수 있도록 다시 저장하면 된다.
[그림 1] 넷스케이프 네비게이터 팔레트
URL : http://www.killersites.com/images/color_cube_colors.gif
Anti-alias란 것은 비트맵 (bitmap) 그림의 외곽선을 처리함에 있어서 소위 '계단현상'이 나타나지 않도록 중간색 등을 이용하여 부드럽게 처리하는 것을 의미한다. 웹에서 구현되는 그래픽은 아주 일부를 제외하고는 거의 대부분이 비트맵이기 때문에 특별한 목적으로 사용할 경우를 제외한다면 anti-alias 처리를 하는 것이 보기에 더 좋다.
하지만 경제성이나 효율성과 같은 부분을 따져 본다면, anti-alias 처리를 한 그림과 안한 그림의 크기는 같은 면적을 차지한다 하더라도 anti-alias 처리를 거친 그림의 크기 (file size) 가 더 크다.
CompuServe에서 시작한 GIF 포맷은 자체적으로 이미지를 압축하여 저장하고 있다. 하지만 비슷한 느낌의 그림을 같은 과정을 거쳐서 GIF 파일로 저장하더라도 그 파일 크기에서 약간의 차이가 나는 것을 볼 수 있는 경우가 있는데, 이러한 것은 GIF 포맷이 사용하는 Lempel-Ziv-Welch scheme 압축 알고리즘과 관련이 있다.
일반적으로, 사용하는 색상이 적을 수록 파일의 크기가 작아지며, 같은 양의 비트맵 비율을 차지하더라도 사선보다는 직선이, 수직선보다는 수평선이 더 작은 파일 크기를 갖게 된다.
JPEG 포맷의 압축 효율은 무척 뛰어난데, 대부분의 JPEG 파일을 다룰 수 있게 되어 있는 유틸리티 프로그램을 보면 기본적으로 파일을 저장할 때에 압축률을 설정할 수 있게 되어 있다. 흔히 25%의 단계마다 (25%, 50%, 75%, 100%) 손쉽게 선택할 수 있도록 되어 있으며, 그 양단은 이미지의 품질 (quality) 과 압축률 (compression) 로 이뤄져 있다.
JPEG는 GIF나 PNG 포맷에 비하여 무척 손실률이 높은 이미지 압축기법을 사용하고 있기 때문에, 이미지의 크기가 줄어들 수 있다고 하여 단순히 압축률이 높은 것을 선호할 수는 없다. 또한 JPEG 포맷도 자체적으로 갖고 있는 압축 알고리즘이 큰 영향을 끼치므로, 각 단계별로 별도 저장하여 이미지의 품질에 큰 손상이 가지 않도록 주의해야 한다.
CompuServe GIF 89a 포맷의 특성을 이용하여 여러장의 파일을 단 하나의 파일에 여러 레이어 (layer) 를 사용하여 저장하고, 이것을 사용하여 간단한 셀 애니메이션 (cell animation) 할 수 있게 한 것이 바로 GIF Animation의 개요라 할 것이다.
1996년도에 들어와 일반인들에게 널리 알려지게 된 GIF Animation은, 간단한 그래픽으로 큰 효과를 내 줄 수 있기 때문에 여러가지 용도로 다양한 분야의 웹 페이지에서 사용되고 있다. GIF Animation을 제작할 수 있는 프로그램은 제 2장에서 다루고 있는데, 이 프로그램들은 GIF의 여러 레이어에 각종 효과들과 함께 이미지를 저장해 주는 기능을 갖고 있기 때문에 애니메이션을 위한 각각의 셀들은 이미지를 만드는 프로그램들을 활용하여 제작해야 한다.
각종 표를 구현하기 위하여 제안된 Table 태그 (<TABLE>) 는 일반인들에게도 유명한 여러 곳들 중에서 색다른 레이아웃이나 타이포그라피를 보여주는 곳들을 포함한 상당수의 웹 사이트들에서 적용하고 있는데, 그것에서 두드러지는 공통점은 표의 테두리 (border) 를 안보이게 하여 마치 '표를 사용하지 않은 것 처럼' 레이아웃을 구현한다는 것이다.
<TABLE BORDER=0> 태그를 사용하여 레이아웃을 구현하는 것은 HTML 문서의 측면에서 본다면 무척 복잡하고 번거로운 일이지만 화면의 레이아웃을 조절할 수 있다는 점에서 무척 큰 장점으로 받아들여졌고, FrontPage나 NetObjects Fusion (9) 같은 진보된 웹 저작 도구들에서는 화면의 기본 구성을 이같은 개념에서 구현하고 있다.
하나의 브라우저 화면을 여러개의 창 (frame) 으로 나누어 구현하는 것이다. 개념이 제안된 초기에는 각광받는 특성이었으나, 디자인의 측면에서 봤을 때에 테두리가 나타난다는 것이 단점으로 지적받아 약간 그 열기가 수그러들었다. 하지만 최근에 들어서 표 태그와 마찬가지로 테두리를 안보이게 하거나, 각각의 셀들에 색상을 지정한다거나 테두리에도 색상을 지정할 수 있게 되면서 그 가능성과 효용성이 다시금 재검토 되고 있다.
특정한 기능을 계속해서 화면에 구현한다거나, 특히 툴바 (tool bar) 등과 같은 것을 웹에서 구현하고자 할 때에 자주 사용되는 태그이다.
아무리 인터넷 회선이 증가하고 모뎀의 속도가 빨라지며 개인용 컴퓨터의 성능이 워크스테이션을 방불케 한다고 할지라도 전세계에 있는 불특정 다수의 네티즌을 대상으로 하여 웹 사이트를 준비한다고 할 때에는 여러가지 제한 사항이 따를 수 밖에 없다. 그중에는 그림의 면적이나 파일의 크기, 구현하는 색상 및 여러가지 사항들이 있을 수 있는데, 경제성이나 효율성의 관점에서 봤을 때 의도한 바를 충분히 나타낼 수 있을 만큼만 된다면 가급적 파일의 크기를 줄여서 다른 사람들이 쉽게 웹 사이트에 접근할 수 있도록 하는 배려가 필요할 것이다.
이러한 배려를 하기 위해서는 그래픽과 관련된 각종 사항들에 대하여 염두에 두고 있는 것이 좋다. 3.3, 3.4 에서도 다룬 바와 같이 압축을 하는 파일의 특성을 아는 것도 중요하며, 이러한 특성과 관련하여 자신이 작업한 이미지 파일의 팔레트 수를 줄이는 것은 특히 중요한 일이라 할 수 있다. 의도했던 이미지의 품질이 손상되는 것은 반드시 피해야 할 일이겠지만, 응용 프로그램에 따라서 사용하지 않은 팔레트의 정보들 까지도 함께 저장하는 것들이 많기 때문에 적절한 것을 선택하여 사용한 색상의 정보를 줄이는 것이 큰 효과를 가져다 줄 수 있다.
또는 간단한 선과 같은 것을 구현한다고 할 때에 그것의 가장 작은 단위를 제작하여 <IMG WIDTH= HEIGHT=> 속성을 사용하여 조절한 후 보여주는 것도 하나의 방법이라 할 수 있을 것이다.
이미지에서 사용한 색상의 수를 줄여서 팔레트의 정보를 절감하는 것과 일맥상통하는 것이라 할 수 있는데, 최종 이미지를 잘 살펴서 불필요한 anti-alias 처리된 부분이나 동일색으로 처리될 수 있는 부분, 다른 색상이 첨가된 배경색 등과 같은 것을 세세히 처리함으로써 좀 더 효율적이고 경제적인 이미지 파일을 제작할 수 있을 것이다.
각각의 웹 브라우저들은 나름대로의 특성을 지니고 있으며, 이것을 충분히 파악하고 잘 활용하는 것이 해당 브라우저를 사용하여 웹을 여행하는 네티즌이나 그것을 제작하는 사람들에게 도움이 될 것이다. 특히, " 모든 브라우저에서 다 잘 보일 수 있는 " 웹 페이지를 구현한다는 것은 무척 어려운 일이며, 어찌보면 불가능한 일일 지도 모르기 때문에 이러한 점을 명심해야 하며, 자신이 작업한 웹 사이트를 방문하는 네티즌들은 각각 자신들의 브라우저를 사용하여 그곳을 보기 때문에 일일이 모든 웹 브라우저들을 다 시험해 볼 수 없는 제작자들로는 무척 어려운 일이 아닐 수 없다.
일반인들이 가장 많이 사용하는 두가지 브라우저 - 넷스케이프 네비게이터, 마이크로소프트 인터넷 익스플로러 - 를 예로 들자면, 앞에서 밝힌 바와 같이 이미지 파일을 구현하는 데 있어서 사용하는 팔레트 정보가 다르며, 이밖에도 디자이너가 유념해야 할 여러가지 요소들이 있다. 그중에서 가장 차이가 많이 나는 것이 화면 글꼴 (font) 과 브라우저 자체가 갖고 있는 여백 (offset) 일 것이다. 특히 이중에서 웹 브라우저가 HTML 문서를 해석하면서 화면에 보여주는 과정에서 배경 (background) 과 본문 (foreground) 사이에는 그 여백을 처리함에 있어서 큰 차이를 보이고 있다.
[Siegel 96]에 따르면, 넷스케이프 네비게이터와
마이크로소프트 인터넷 익스플로러에서 구현하는 여백은 큰 차이가 나며,
특히 윈도용 넷스케이프 네비게이터는 각 버전들마다 그것이 기본적으로 갖고
있는 여백에 큰 차이가 있다는 것을 알 수 있다. [그림 2] [그림 3] [그림 4]
[그림 5] [그림 6]
현재까지는 이러한 것에 '표준'이 존재하지 않기 때문에 웹 페이지를
디자인하는 사람들은 브라우저들의 새버전들이나 각종 모델들을 아래의 그림과
같은 방법을 통하여 비교하고, 적절한 레이아웃을 추구하는 것이 바람직하다
하겠다.
마이크로소프트 인터넷 익스플로러에서는
<BODY LEFTMARGIN=0 TOPMARGIN=0>
와 같이 속성을 삽입하면 브라우저의 왼쪽 상단에 딱 들어맞게 할 수 있다.
[그림 2] 윈도용 넷스케이프 네비게이터 1.2N - 17 pixels down, 10 pixels
right
URL: http://www.killersites.com/1-design/tables/NavWin1.2N.gif
[그림 3] 윈도용 넷스케이프 네비게이터 2.0/골드 2.0 - 15 pixels down, 10
pixels right
URL: http://www.killersites.com/1-design/tables/NavWin2.gif
[그림 4] 매킨토시용 넷스케이프 네비게이터 (모든 버전) - 8 pixels down, 8
pixels right
URL: http://www.killersites.com/1-design/tables/NavMac2.gif
[그림 5] 윈도용 마이크로소프트 인터넷 익스플로러 2.0 - 20 pixels down, 10
pixels right
URL: http://www.killersites.com/1-design/tables/MSIEWin2.gif
[그림 6] 매킨토시용 마이크로소프트 인터넷 익스플로러 2.0 - 8 pixels down,
8 pixels right
URL: http://www.killersites.com/1-design/tables/MSIEMac2b2n.gif