[출처:http://experthomep.com.ne.kr]
"빨리 뜨는 페이지"를 디자인하기 위한 가이드
기존의 다른 매체의 디자인을 하던 그래픽디자이너들이 웹디자인을 시작하면서 가장 갈등을 겪게 되는 부분이 바로 "속도"에 대한 문제이다. 보기에 좋은, 화려한 사이트를 디자인하고 싶으나 속도 때문에 함부로 할 수가 없기 때문이다. "빨리 뜨는 페이지"를 디자인하기 위한 몇가지 가이드를 제시한다.
TEXT를 최대한 활용하라.
Image 사용을 최대한 자제하란 이야기다. 그림이 아무리 작다고 하더라도 TEXT 의 사이즈와 비교할 수는 없다. 국내사이트들은 필요 이상으로 그림을 과다하게 사용하는 경향이 있다. (대개는 홈페이지 제작업체의 의도라기보다는 인터넷을 잘 이해하지 못하는 고객사에서 요구하는 경우가 많다.) 테이블과 Text, 색깔을 적절히 활용하면 보기 좋은 모양을 만들어 낼 수 있다.
과다한 테이블의 사용
우리나라 사람은 표를 상당히 좋아한다. 각이 딱 맞추어진 정렬된 모습, 보기에는 좋을지 모르나 지나친 테이블의 사용은 이 역시 웹브라우저로 하여금 페이지의 로딩속도을 늦추도록 하는 주요원인 중의 하나이다. <pre>태그를 잘 사용해도 깨끗한 모습을 보여주면서 칸을 잘 맞추어 보여줄 수 있다.
가로로 된 테이블
상당히 기술적인 이야지이지만 세로로 길게 늘어진 테이블보다는 가로로 긴 테이블에 로딩이 빨리 된다.
GIF의 원칙
대부분의 웹서버(Apache등)는 문서를 불러오면서 4개의 GIF파일을 동시에 호출한다. (기술적인 이야기이다) 때문에 3개의 GIF를 불러오는 것과 4개 를 불러오는 것에는 거의 차이가 나지 않지만, 4개와 5개의 GIF를 불러오는 것에는 큰 차이가 난다. http"//www.search.com 등의 유명 검색엔진들은 이 때문에 화면에 절대로 4개를 넘는 GIF를 삽입하지 않는다.
특수문자의 사용
ASCII 코드에는 예쁜 그림을 대체할 수 있는 코드들이 적지 않게 있다. 이 들을 잘 사용한다면 그림을 집어넣지 않고도 예쁜 효과를 줄 수 있다. ♣, ☞ 등의 그림을 Font Color를 지정해주어 사용을 한다면 속도도 빠르며 예쁜 효과를 가질 수 있지 않을까?
1*1 Pixel의 Image
실적적으로 100*100 크기의 그림을 그려줄 필요는 없다. 1*1크기의 그림을 그려주고 WIDTH와 HEIGHT를 100씩으로 지정해주면 된다. 이 외에도 그림의 용량을 줄이는데에는 여러 가지 다양한 테크닉이 있다. 웹디자인 관련 서적에는 이런 노하우들이 잘 나와있다.
불필요한 태그는 사용하지 말 것
간단한 예를 들어 <body text="#000000">와 <body>라는 두 개의 태그는 전혀 다른 차이가 없다 기본적으로 아무런 색상도 지정해 주지 않으면 TEXT의 색상값을 #000000(검정)으로 인식을 하기 때문이다. 지정해주지 않아도 되는 태그, 혹은 옵션값들은 HTML 문서에 집어넣지 않는다. 글씨 하나도 데이터량이다.
그림에서 width와 height의 지정
이는 불필요한 속성이 아니다. 그림을 넣어줄 때에는 width와 height를 지정해주는 것이 브라우저가 HTML문서를 빨리 해석하는데 도움을 준다. 따라서 이는 적어주는 것이 좋다.
늦게 뜨는 Java Applet
Java Applet은 그것이 줄 수 있는 다양한 효과와 기능 덕분에 많은 사람들의 사랑을 받고 있다. 하지만 처음 로딩할 때 "Starting Java"라는 메시지만 뜨면 하염없이 기다려야 하기 때문에 이를 싫어하는 인터넷 사용자들이 매우 많다. Java Applet은 중간에 취소도 안된다. 가장 많이 사용되는 Applet이 글자가 흘러나는 Scrolling TEXT인데 꼭 사용해야 하는 경우를 제외하고는 최대한 자제할 것을 권유한다. (Java개발사인 SUN사의 웹사이트 초기 화면에도 Java Applet 은 등장하지 않는다.) |
|
|
|
