괴산골 초당옥수수 |
|
이지휠킥보드 |
|
김고은 전병 |
|
산골짜기농장 새싹삼 |
|
강동상사 |
|
베일통상 |
|
선기획 |
|
테라링크 스마트톡톡 |
|
황토배농원 |
|
한샘토탈 |
|
(주)한국캐비치 |
|
키친홈글라스 |
|
나나푸드 |
|
쿨매트 |
|
스마트지앤피 |
|
|
|
|
|
|
|
작성일 : 09-06-26 18:43
조회 : 12,730
|
웹디자이너의 십계명
▶ 사용자의 주머니를 항상 생각하라.
지금 여러분의 홈페이지를 방문하는 사용자는 아주 멀고도 험한 길을 걸어 이곳에 왔습니다.
그들은 아깝고도 소중한 돈과 시간을 쪼개서 이곳을 방문하였습니다. 사용자의 시간을 소중하게
생각하는 것은 웹 디자인의 중요한 원칙입니다. 사용자가 원하는 정보를 빠르게 찾을 수 있도록
다양한 방법을 강구해야 합니다. 그 길만이 사용자를 여러분의 고객으로 친구로 만들 수 있는
유일한 길입니다.
일단 이미지 파일의 크기를 줄이는 것은 대단히 중요합니다. 이미지 파일은 일반 텍스트에 비해
전송되는 속도가 현저하게 느리기 때문에 이미지는 꼭 필요한 곳에만 사용하고 사용할 때에는
이미지 파일 크기를 작게 할 필요가 있습니다. 부하가 많이 걸리는 태그는 가급적 피하는 것이
좋습니다. 특히 테이블 사용은 꼭 필요하지 않으면 피하는 것이 좋습니다. 테이블은 테이블 안에
포함된 모든 요소를 읽어 들인 다음 화면에 표시해야 합니다. 따라서 테이블 안의 요소를 읽어
들이는 동안 화면에는 아무 것도 표시되지 않는다. 테이블을 꼭 사용해야 할 경우에는 몇 개의
테이블로 나눠 표현하는 것이 좋습니다.
▶ 이미지 요소를 아껴라.
웹이 갖고 있는 화려함 때문에 홈페이지를 디자인하다 보면 이미지를 많이 사용하게 됩니다.
이것은 비록 멋진 홈페이지로 보일지는 모르지만 이곳을 방문하는 사용자에게는 대단히 곤혹스런
일이 아닐 수 없습니다. 이미지가 많이 들어가면 들어갈수록 전송되는 속도는 떨어지고 사용자들이
모니터 앞에서 기다리는 시간은 길어지게 됩니다. 사용자를 이미지로 현혹시키려 하지 말아야
합니다. 사용자는 여러분의 홈페이지를 방문하기까지 무수히 많은 홈페이지를 보아왔습니다.
그들은 세계적으로 유명한 예술가, 그래픽 전문가들이 만든 홈페이지도 보아왔습니다. 홈페이지를
만드는 여러분에게는 아무리 멋진 이미지라 하더라도 사용자에는 식상하고 볼품없는 것이 될 수도
있음을 명심해야 합니다. 어쨌든 홈페이지에 들어가는 이미지는 작은 파일 크기로 꼭 필요한 경우에만
사용하는 것이 좋습니다. 지나침은 오히려 없는 경우보다 못할 수도 있다는 점을 항상 명심하고
디자인하는 것이 중요합니다.
▶ 사용자를 서성거리게 하지마라.
사용자가 여러분의 홈페이지에 머무는 시간이 얼마나 되리라고 생각하십니까? 10-20초 그 짧은
시간에 사용자가 한치의 서성거림도 없이 원하는 정보로 빠르게 이동하도록 해야합니다.
웹페이지 중간 중간에 다양한 형태의 안내판을 넣는 것은 가장 기본적인 일입니다. 안내판은
사용자가 현재 어디에 있는지 어디로 가야 원하는 정보를 찾을 수 있는지 항상 알려주어야
합니다. 웹페이지 상단이나 하단에 홈페이지에서 서비스하는 다양한 내용을 텍스트바로 처리해
놓은 것은 흔히 볼 수 있는 안내판입니다. 또한 많은 자료를 보고 있을 때 뒤로나 앞으로 버튼을
사용하여 정보를 빠르게 검색하게 하는 방법도 효과적입니다. 마이크로소프트 홈페이지 상단에는
해당 사이트에서 제공하는 모든 서비스를 텍스트 버튼으로 표시해 놓았습니다. 따라서 언제
어디서든지 사용자가 원하는 곳으로 바로 이동할 수 있습니다.
▶ 파일 이름을 일목요연하게 하라.
홈페이지에는 무수히 많은 이미지가 사용됩니다. 메인 이미지, 서브 이미지, 텍스트 바, 아이콘,
버튼 등 제대로 된 홈페이지를 만들려면 수십, 수백 개의 이미지가 사용됩니다.
이미지 파일명을 일목요연하게 하는 것은 홈페이지를 만들 때 반드시 필요한 일입니다. 서비스
메뉴별로 구분하여 파일명을 붙이거나 형태별로 구분하여 파일명을 붙이면 작업하기도 편리하고
나중에 수정하기도 편리합니다. 하나의 홈페이지를 만드는데 필요한 HTML 문서도 엄청나게 많습니다.
또한 HTML 문서들은 서로 복잡하게 연결되어 있습니다. HTML 문서들은 마치 징검다리를 건너 듯이
하이퍼텍스트를 매개로 하여 이 문서에서 저 문서로 건너뜁니다. 일목요연하게 저장된 HTML 문서는
홈페이지의 제작 및 문서 관리를 편리하게 하는 열쇠입니다.
▶ 기준을 잡아라.
일반적으로 워드프로세서로 만드는 문서는 출력할 때의 용지 크기에 맞춰 문서를 작성합니다.
A4이든 A3이든 용지 크기는 절대적인 크기를 갖습니다. 컴퓨터 상에 보이는 페이지 형태는 단지
과정일 뿐 궁극적으로는 종이 출력을 목적으로 만들어집니다. 웹디자인의 최종 출력물은 모니터
화면에 표시됩니다. 모니터는 그 크기부터 다종 다양합니다. 14", 17", 21" 등 크기가 서로 다를
뿐만 아니라, 640×480, 800×600, 1024×768 등 해상도도 다릅니다. 웹디자인을 할 때 제일
먼저 해야할 일은 기본이 될 화면 해상도를 결정하는 일입니다. 예를 들어 여러분이 640×480의
해상도를 기준으로 작업하였다면 800×600 해상도를 사용하는 사용자의 모니터에는 웹페이지가
다소 작게 표시될 것입니다. 만일 사용자가 1024×768의 해상도를 사용한다면 여러분이 만든
웹페이지는 모니터에 반정도 크기로 표시될 것입니다. 또한 해상도에 따라 동일한 크기의 이미지나
텍스트도 작게 또는 크게 보인다는 점도 고려해야 합니다. 예를 들어 800×600 해상도를 기본으로
작업한다면 이미지의 가로 폭을 650픽셀(웹브라우저의 창과 여백 고려)까지 지정하는 것이 좋습니다.
만일 이 이미지를 640×480 모니터로 보면 한 화면에서 볼 수 없고 좌우 스크롤바로 이동해야 합니다.
따라서 640×480을 기준으로 할 때에는 이미지의 가로 폭을 500픽셀 이내로 지정해야 합니다.
텍스트도 마찬가지입니다. 800×600 해상도에서는 태그를 지정한 본문 크기의 텍스트는 적당하게
보이지만, 640×480 해상도에서는 다소 크게 보입니다. 결국 어떤 해상도를 기준으로 할 것인가는
여러분의 홈페이지를 주로 방문할 대상이 누구인가에 따라 결정합니다. 즉 모뎀을 통해 접속하는 일반
사용자가 주 대상이라면 800×600 해상도를 기본으로 하며, 전용선을 사용자까지 고려한다면
1024×768 해상도를 기본으로 합니다.
▶ 해상도는 특히 다음과 같은 경우에 큰 영향을 준다.
첫째는 홈페이지의 백그라운드에 부분 타일 이미지를 넣을 때입니다. 예를 들어 부분 타일 이미지의
가로 폭을800pixe1s로 지정하였다면 640×480, 800×600 해상도 사용자에게는 제대로 보이지만,
1024× 768 해상도 사용자에게는 화면 우측에 부분 타일이 다시 한번 표시됩니다.
이때는 무조건 부분 타일 이미지의 가로 폭을 1024픽셀로 지정합니다. 둘째는 이미지 좌우측에
긴 텍스트가 들어갈 경우입니다. 텍스트의 행의 폭은 화면 해상도에 따라 자동으로 조절됩니다.
따라서 800×600 해상도에서는 이미지 좌측에 텍스트가 알맞게 조절되어 있더라도 640×480
해상도 사용자에게는 일부 행이 이미지 밑에 위치할 수도 있으며, 1024×768 사용자에게는
이미지의 세로 길이에 턱없이 모자랄 수도 있습니다. 그렇지만 테이블을 사용하지 않는 한 텍스트
행의 길이를 고정된 폭으로 할 수는 없습니다. 따라서 이때는 기준 해상도를 어느 것으로 정하는가가
대단히 중요합니다.
▶ 절대와 상대를 적절하게 배합하라.
절대와 상대의 문제는 웹 디자인에서 중요하게 고려해야 할 사항입니다. 절대와 상대는 이미지나
하이퍼링크의 URL을 지정할 때, 테이블이나 선의 길이를 지정할 때 특히 중요합니다.
일단 URL을 지정할 때에는 상대 경로 지정을 원칙으로 합니다. URL을 상대 경로로 지정하면
자신의 컴퓨터 상에서 홈페이지의 형태나 연결상태를 확인할 수 있어 좋습니다. 또한 서버의
주소가 바뀌더라도 별도의 수정을 거치지 않고 그대로 업로드 할 수 있으므로 편리합니다.
물론 절대 경로를 지정해야 하는 경우도 있습니다. 다른 인터넷 서버에 있는 자원에 연결할
때에는 절대 경로를 사용해야 합니다.
테이블이나 선 등의 길이를 지정할 때에는 절대값과 상대값에 따라모양이 달라집니다. 절대값을
지정하면 화면 해상도와 관계 없이 고정된 크기가 들어갑니다. 반대로 상대값을 지정하면 화면
해상도에 따라 크기가 달라집니다. 절대값은 길이나 폭(Width, Height)를 지정할 때 별도의
단위를 지정하지 않고 그냥 수치만 입력합니다(Width = 600, Height=300). 상대값을 지정할
때에는 수치 뒤에 %를 지정합니다(Width=80%, Height=70%).
길이를 절대값으로 지정할 것인가 상대 값으로 지정할 것인가는 오로지 디자이너의 역량에
달려있습니다. 즉 특별한 원칙이 없다는 이야기입니다. 페이지의 전체적인 형태가 그대로
유지되야 할 경우에는 절대값을 지정하며, 화면 해상도에 따라 모양이 자동으로 변경되도록
하려면 상대값을 지정합니다.
▶ 이미지 파일의 크기를 작게 하라.
웹디자인의 성패는 이미지에 달려 있다고 해도 과언이 아닙니다. 이미지를 어떻게 다루는가는
그 만큼 중요한 일입니다. 이미지의 질을 생각하면 이미지 파일의 크기는 커지고, 속도를 생각하면
이미지 파일의 크기는 작아집니다. 기본적인 원칙은 이미지의 질이 크게 떨어지지 않는 범위내에서
파일의 크기를 작게 하는 것입니다. 물론 이것은 말처럼 그리 쉬운 일은 아닙니다.
이미지 파일의 크기는 이미지의 크기와 포함된 색상에 따라 결정됩니다. 이미지의 크기는 페이지의
전체적인 형태에 따라 결정되므로 크게 고려할 사항은 아닙니다. 다만 동일한 크기의 이미지라도
포함된 색상에 따라 파일 크기가 크게 달라진다는 점은 반드시 기억해야 합니다.
포토샵에서 이미지에 포함되는 색상 수는 Indexed Color 대화상자에서 지정합니다.
3bits/pixel(8Color), 4bits/pixel(16Co1or), 5bits/pixel(32Co1or), 6bits/pixel(64Co1or),
7bits/pixel(128Co1or), 8bits/pixel(256Co1or)
등을 지정할 수 있습니다. 이미지에 포함되는 컬러 수가 많을수록 이미지 질은 좋아지지만
파일 크기는 커집니다. 이미지에 여러 가지 컬러 수를 지정해 보고 이미지 질이 크게 떨어지지
않으면서도 컬러 수가 적은 것을 선택해야 하는데, 이것은 사용자의 많은 경험을 통해서
올바른 선택을 할 수 있습니다.
포토샵의 기능 중에서 컬러 수를 많이 포함하는 몇 가지 기능이 있습니다. 그라디언트와 블러
기능은 색상이나 농담의 변화가 순차적으로 일어나므로 많은 수의 컬러를 포함합니다. 따라서
이러한 기능은 꼭 필요한 경우에만 사용하는 것이 좋습니다.
▶ 먹기 좋게 만들어라.
속담에 "보기 좋은 떡이 먹기도 좋다"라는 말이 있습니다. 인터넷에서는 보기 싫은 떡은
쳐다보지도 않습니다. 그 만큼 사용자들은 많은 정보를 접하고 있으며, 여러분의 홈페이지
이외에도 가야할 곳이 많은 사람들입니다.
덩치가 큰 정보는 작게 잘라 먹기 좋게 만듭니다. 예를 들어 큰 이미지 파일을 넣을 때에는
작은 이미지 파일을 미리 보여주어 사용자의 선택 권한을 줍니다. 즉 작은 이미지에서 이미지의
대략적인 형태를 보고 작은 이미지를 클릭하면 큰 이미지가 표시되게 하는 방법입니다
(하이퍼링크를 사용). 특히 속도가 느린 JPG 이미지를 넣을 때 작은 크기의 GIF 이미지를 미리
보여주는 방법은 널리 사용됩니다. 많은 자료나 긴 문서를 보여줄 때에도 정보를 몇 개의
화면으로 나눠 표현하는 것이 좋습니다. 이때 앞으로나 뒤로 버튼을 두어 사용자가 쉽게 정보를
검색하도록 처리하는 것이 좋습니다. 보통 홈페이지는 한 화면에 표시되는 이미지 수를 20개로
제한하고 뒤로, 앞으로 버튼을 두어 검색을 편리하게 하는 것이 좋습니다.
▶ 특정 웹브라우저에만 적용되는 태그는 피하라.
현재 인터넷 사용자들이 가장 많이 사용하는 웹브라우저는 넷스케이프와 익스플로러입니다.
어떤 태그나 속성은 넷스케이프에만, 또 어떤 태그나 속성은 익스플로러에만 적용되는 것이 있습니다.
되도록이면 두 웹브라우저가 모두 지원하는 표준규약을 사용하여 HTML 문서를 작성하는 것이 좋습니다.
▶ 자주 청소하라.
누구든지 벽이 다 허물어지고 이곳 저곳에 거미줄이 쳐진 집을 들어가고 싶지 않을 것입니다.
홈페이지를 만들어 놓고 한번도 정보 갱신하지 않은 곳, 서비스 메뉴마다 공사중 표말이 붙은
곳을 좋아하는 사용자는 없습니다. 홈페이지는 만드는 것 못지않게 관리하는 것이 중요합니다.
여러분의 홈페이지가 거미줄 쳐진 빈 집으로 남을 것인가 아니면 사람의 온기가 넘치는 집으로
남을 것인가는 오로지 홈페이지 관리에 달려있습니다.
출처 : [자료출처] 디자이너를 위한 전문취업포털, 디자이너잡
|
|
|
|
