|
디자인은 웹 사이트의 지팡이?
자~ 이제 웹 사이트를 제작하여 본다.
그 이전에 웹 디자인이란 무엇일까?
내용물을 좀 더 아름답고 근사하게 표현하기 위해서? 보는이들로 하여금 즐거움을 주는 것이 디자인일까? 물론 정답이다.
하지만 이것이 전부가 아니란 것은 다 알고 계시리라~
웹 사이트가 제공하는 메시지, 가치들을 보다 사용하기 편리하게, 또한 사용자가 원하는 정보들을 찾아가기에 도움을 주는 즉 웹 사이트의 "지팡이" 혹은 나침반과 같은 역할을 하는 것이 웹 에서의 디자인이라 할 수 있겠다.
(다시 말하면 유저 인터페이스와 네비게이션의 구조까지 디자인의 영역이라 할 수 있는데 유저 인터페이스와 네비게이션의 중요성은 다음 CHAPTER에 자세히 다룰 예정입니다.)
자~ 그럼 디자인을 시작해보자.
지팡이 역할을 잘하기 위해서 어떠한 것들을 알아야할까?
웹 사이트는 컴퓨터에서 작업하고 컴퓨터 화면(모니터)으로 그 결과물을 본다. 최종 결과물의 형태는 다르지만 컴퓨터에서 제작을 한다는 것이 전자출판과 조금은 비슷하다. 인쇄 매체쪽의 디자인을 하기 위해서 인쇄에 관련된 실제 작업 프로세스를 알아야 효율적인 작업을 할 수 있듯 웹 페이지 제작시에도 기본적인 것들을 바탕으로 한 여러가지 고려해야 할 사항들이 있다.
우선 제작하고자 하는 웹 페이지의 타깃 사용자들을 분석한다.
기획단계에서 주로 이루어지는 작업이긴 하지만 사용자들의 연령층, 웹 사이트 접속 목적등을 분석하면 컴퓨터의 사양, 접속환경과 형태등을 예측 할 수 있다.
예측된 결과치는 사이트 디자인 컨셉, 레이아웃을 기획하는데 적용한다.
사용자들은 주로 유저 인터페이스 디자인이 잘 되어 있어 쉽고 편리한 네비게이션이 가능한 웹사이트들을 선호할 것이다. 경우에 따라서는 실험적인 웹 사이트를 선호하는 경우도 있겠지만 기본적으로 사용자들에게 좀 더 편리하고 친숙한 웹 사이트를 위한 디자인적인 요소들이 어떠한 것들이 있는지 알아본다.
디스플레이에 영향을 주는 변수는 사용자의 모니터와 통신속도 그리고…
■ 모니터 해상도 800*600, 256칼라(8비트)를 기본으로 한다.
웹에서 디스플레이에 영향을 주는 변수는 사용자의 모니터와 통신속도이다. 이 변수들 덕택에 디자이너의 모니터에서 보여지는 웹 사이트의 모습과 각각의 사용자들과는 많은 차이가 생긴다.
인쇄물인 경우 누구나 같은 색상, 같은 크기와 질감으로 보게 되지만 웹은 제작자의 의도와는 상관없이 사용자들이 설정해 놓은 모니터의 색상 값과 비디오카드에 따른 하드웨어의 사양, 각각의 운영체제, 웹 브라우저의 차이등에 따라서 서로 다른 색, 다른 화면, 다른 이미지와 느낌으로 보게 된다.
대다수의 많은 사용자들이 800 * 600모드, 256칼라(8비트)로 보고 있으며 아직까지14인지의 모니터 사용자들도 많다. IT 산업의 발전으로 인하여 17인지 이상의 모니터 해상도1024 * 768이상의 모드, 하이칼라(16비트), 트루칼라(24,32비트)로 보는 사용자들도 적지 않지만 최저의 조건을 기준으로 모니터 해상도800 * 600모드, 256칼라(8비트)를 기본으로 웹 페이지를 제작하는 것이 보다 많은 사용자를 확보 하는 길이다.
☞ 때론 전략에 따라 모니터해상도와 웹 브라우저의 기준을 임의로 정해놓고 서비스하는 경우가 있는데 이러한 경우를 제외하고는 최소한의 사양까지 고려해서 보다 많은 사용자들을 확보하고 만족시키는 것이 좋겠죠?
■ JPG, GIF포맷의 차이를 알자.
웹 사이트의 로딩시 가장 비중을 차지 하는 것은 이미지의 사이즈이며 그러한 이미지의 특성을 잘 알아 두면 보다 효율으로 로딩속도를 계산할 수 있다. 또한 특정 그래픽의 성격에 맞게 압축하는 방법도 달라진다.
웹 페이지에서 사용 가능한 이미지 포맷은 JPEG와 GIF 가 있는데 이 두가지 파일 포맷은 압축율이 뛰어나고 여러 가지 장점이 있어 널리 쓰이는 그래픽 포맷이다.
GIF(Graphics Interchange Format)포맷은 파일 크기를 최소화 하기 위해 주로 사용된다.
이미지가 손상되지 않으면서 압축되는 기법(LZW:Lempel Zev Welch) 즉 손실이 없는 압축기법이다. GIF87A와 GIF89A 두가지가 있으며 투명도와 인터레이싱을 지원하며 GIF89A는 에니메이션을 지원한다.
이러한 GIF포맷은 256컬러로 압축을 하고 칼라 수를 지정할 수 있으며 칼라 수가 작아질수록 사이즈도 줄어들어 색의 변화가 적은 이미지등에 쓰인다. 특히 애니메이션 그림(여러 개의 그림으로 하나의 움직이는 그림을 만듦)과 배경이 투명한 그림을 만들 수 있다는것이 큰 장점이다.
JPG, JPEG(Joing Photographic Experts Group)포맷은 압축률이 높은 손실 압축 기법이다.
압축시 이미지 퀄리티와 원하는 압축률 조정이 가능하고 사진이나 색상수가 많거나 그라데이션이 있는 이미지를 저장할 때 주로 쓰인다. 한번 압축한 이미지는 데이터가 손실되기 되어 원래의 상태로 복구할 수 없다.
압축전에 백업파일을 저장하는 습관을 들이자~!
PNG(Portable Network Graphics)포맷은 투명도를 지원하는 비트맵 포맷이며 GIF파일 형식의 문제점을 해결하면서 확장된 기능을 제공하기 위해 고안되었다. Macromedia Fireworks의 원본 포맷이기도 한 PNG 포맷은 현재 넷스케이프 4, 익스플로러 4이상에서 지원된다.
GIF포맷보다 압축율이 뛰어나지만 GIF에니메이션과 같이 에니메이션 파일을 만들 수 없다.
■ 브라우저 안전색상과 디더링을 하는 이유?
Netscape 사의 Netscape Communicator와, Microsoft 사의 Internet Explorer등이 사용자층을 가장 많이 확보하고 있는 웹 브라우저이다.
이 두 부라우저는 모두 동일한 팔레트 관리과정을 공유한다.
하지만 각 브라우저들의 색상 팔레트들은 각각의 플랫폼(맥, 윈도우 95. 98, 윈도우 3.1등)에 따라 해당 시스템 팔레트와 함께 작동하기 때문에 다른 색상 표현을 하게 된다.
즉 어떠한 운영체제냐에 따라 서로 다른 팔레트 값을 가지게 되는 것이다.
다행히도 256시스템 팔레트 범위안에는 공통 색상이 있으며 이러한 공통 색상은 각각의 브라우저, 운영체제, 플랫폼에 보편적으로 적용된다. 이 256색상에서 버튼, 아이콘, 인터페이스등 해당 운영체제의 그래픽 인터페이스 요소를 위해 40칼라를 할당하고 남은 216칼라는 어떠한 운영체제에서든 동일한 시스템 팔레트 과정을 공유하게 된다.
그러므로 이러한 공통 색상(216색상 팔레트)으로 작업을 하면 비슷한 색상표현을 할 수 있게 되며 다양한 운영체제, 플랫폼(윈도우, 맥, 유닉스등), 브라우저 화면에서도 비슷한 색상표현을 하려면 8비트, 216색상팔레트로 작업을 하면 된다.
그러나 무조건적으로 이미지를 256칼라(8비트)를 적용시켜서 작업을 해야 하는 것은 아니며 사진이미지의 경우는 부라우저는 디더링이라는 작업을 하기 때문에 이미지를 각색(adaptive)팔레트나 24비트 파일 포맷으로 그대로 두는 것이 가장 좋다.
디더링
16색이나 256색의 이미지일 겨우 그 색을 표현 할 수 있는 색상수가 제한되기 때문에 색을 표현할 수 있는 장치의 수가 적을 때는 각 이미지의 도트 좌우에 다른 색을 적절하게 분포(병렬합)시켜서 여러 색깔로 착각하게 만드는 기법이다. 디더링은 이렇 듯 몇 가지 색의 혼합으로 눈의 착각을 유발시키는 방법이다. 서너 개 색상의 잉크만 가진 컬러 프린터로 65,000가지 혹 은 1,600만가지 이상의 색을 표현하는 것이 이런 원리이다. 디더링이 파일크기를 약간 증가 시키긴 하지만 그보다는 이미지의 질을 훨씬 높여준다. |
■ 로딩 속도를 위한 몇가지 자연법칙(~!)
디자이너들에게 가장 고민이 되는 부분이 이 [속도]에 관한 문제 일 것이다.
나름대로 화려하고, 구미에 맞는 페이지 디자인을 하고는 싶지만 아직은 모뎀으로 인터넷을 접속하는 많은 사용자들을 위해서라도 무시할 수 없는 부분이 속도 문제이다.
1) TEXT의 사용
로딩 속도는 파일(웹 사이트) 크기와 반비례!
포탈사이트의 등장으로 텍스트 위주의 레이아웃 방식이 많이 사용되고 있긴 하지만 특별한 경우를 제외하고는 이미지의 사용을 자제하는 것이 좋다.
필요한 부분에 적절히 이미지를 사용하는 법도 익히는 것이 좋을 것이고, 이왕이면 TEXT를 많이 사용해서 작업하는 것이 좋다. TEXT와 TABLE태그를 적절히 잘 이용하면 보기 좋은 페이지를 연출할 수가 있다.
2) 이미지를 효과적으로 다이어트하기
앞서 파일 포맷이야기에서 나왔듯이GIF이미지의 경우 컬러수를 지정 할 수 있는데 컬러수를 적절히 줄일수록 파일 사이즈는 작아진다. JPG이미지의 경우는 압출율을 조절하면 파일사이즈 감량하는데 도움이 된다.
또한 이미지 주변의 불필요한 부분을 최대한 잘라내고 큰 이미지의 경우 조각으로 나누어 필요한 부분만 html로 코딩한다.
3) IMG태그의 WIDTH, HEIGHT
IMG태그를 사용할경우 WIDTH와 HEIGHT의 속성을 지정하여 주는 것이 웹 부라우저가 HTML문서를 보다 빨리 읽는데 효과적이다.
4) 프레임
예전에는 프레임을 지원하지 않는 웹 브라우저를 사용하는 사람들을 위한 배려로 <noframe>페이지를 따로 제작하였었다. 필요하다면 제작을 하여도 무방하다.
그러나 프레임이 많은 웹 페이지는 그만큼 로딩하는데 시간이 더 걸린다는 것을 유념해 둬야한다. 프레임으로 작업을 할경우 검색엔진에서 해당 프레임만 검색이 된다는 것도 알아야 한다. 요즘은 포탈 사이트를 비롯하여 프레임없는 페이지가 늘어나는 추세이다.
프레임 없이 모든 웹 페이지를 제작 할 경우 업데이트와 웹 페이지 관리하기에 불편함을 느낀다면 SSI 와 같은것으로 제작하는것도 하나의 방편일 것이다.
SSI (Server Side Include)
웹페이지를 작성시 중복되는 내용의 부분을 별도의 문서로 만들어 문서가 브라우저로 전달될 때 서버쪽에서 같이 포함해서 전달하는 방법이 있는데 이것이 바로 SSI (Server Side Include)이다. |
5) 테이블
웹 페이지에서 화면 편집을 주로 테이블 태그를 많이 이용한다.
테이블 태그를 적절히 잘 사용한다면 웹 페이지에서 표현할 수 없는 레이아웃은 거의 없다.
하지만 과다한 테이블 태그도 로딩속도의 적이 된다는것도 유념해야한다.
웹 브라우저가 HTML 태그를 하나하나 읽어 내려가다 보면 많은 테이블 태그가 걸림돌이 될 수 있다는 이야기다.
" 화면 해상도 800*600모드를 기본으로 하고, 이미지는 JPG포맷과 GIF포맷중 사진이미지, 그림이미지등 성격에 맞게 로딩속도를 고려해서 압축을 하고……. 이미지 해상도는 72dpi로 하고…"
이렇게 해야하고, 저렇게 해야하는 그런 규칙이 꼭 있는 것은 아니다.
좀 더 많은 사용자들을 위한 페이지를 제작하기 위해서 고려해야하는 사항들일 뿐이다.
제작하고자 하는 웹 페이지의 기본 컨셉, 어떠한 계층, 성격을 가진 사용자들을 대상으로 하는 웹 페이지인지, 어떠한 내용을 담을 페이지인지를 먼저 파악을 한 후에 그에 맞추어 나가는 요령도 필요하다. 가령 로딩속도를 무조건적으로 줄이기 위해서 시각적으로 보여져야 할 부분이 많은 웹 사이트에서 이미지들을 최대한 줄이고, 텍스트들로만 제작을 할 필요는 없다는 이야기다.
정보찾아 삼만리~ 길 잃는 것은 싫어!
■ 유저 인터페이스를 고려해 디자인한다
인간과 컴퓨터 간에 이루어지는 커뮤니케이션의 모든 것 즉 커뮤니테이션 하는 도구 방법등을 인터페이스라 한다.
웹 에서의 인터페이스는 사용자, 개발자, 제공하는 가치등이 서로 상호 작용하는 모든 것을 말하며 그러한 것과 더불어 화면의 요소들이 사용자들로 하여금 보다 효율적으로 편리한 구조로 디자인 되어야한다.
■ 편리한 네비게이션은 나를 미아로 만들어 주지 않는다.
웹 사이트에서 길을 잃는 경우는 많다.
어디서부터 어떠한 경로를 통해 클릭하여 이곳까지 왔는지 ~
해당 웹 사이트를 제작한 사람이 아닌 경우 접속한 웹 사이트의 맵을 알 길이 없어서 쉽게 미아가 될 수 있다. 편리한 네비게이션은 사용자가 쉽게 원하는 페이지로의 접근을 용이하게 하며 편리했던 네비게이션의 기억은 재 방문으로 유도하는 하나의 방법이기도 하다 |