오늘 진행할 내용은 웹페이지의 그리드 디자인입니다. 포토샵과 같은 그래픽 툴에보면 [Grid]라는 메뉴가 있습니다. 이 메뉴를 선택하면 화면에 격자(모눈)가 표시됩니다. 그리고 그 격자에 맞춰 이미지를 제작합니다.
오늘 강좌에서 이야기할 그리드 디자인이란 바로 격자들을 어떤 모양으로 디자인 할 것인가 하는 것입니다. 다음 그림은 격자에 웹페이지의 아웃라인을 디자인한 것입니다. 이러한 디자인을 그리드 디자인이라합니다. 그리디 디자인을 통해 격자의 영역이 지정되고 이 영역에 컨텐츠가 배치 되는 것입니다.
1. 그리드 디자인과 유저의 시선 이동
웹페이지가 웹브라우저에 로딩되는 순간 우리는 뒤로가기 버튼을 클릭할까 말까 하는 갈등을 합니다. 그건 다름아닌 웹페이지에서 느껴지는 분위기 때문이죠. 접속한 웹페이지에서 뭔가 엉성한 느낌을 받게 되면 바로 페이지를 빠져나옵니다. 이 엉성한 느낌이 바로 그리드에서 나오는 것입니다.
그러나 일상에서는 그리드라는 말을 쓰는 것보다 레이아웃이라는 말을 많이 씁니다. 레이아웃은 디자인된 결과물을 의미하고 그리드는 레이아웃을 만들어가는 괴정 즉 시스템 또는 프로세스라보면 됩니다. 그래서 그리드 시스템(Gride System)이라는 말을 사용하는 것입니다.
다음 웹페이지는 메크로미디어 사의 한 제품에 대한 설명을 하고 있는 페이지입니다. 왼쪽 그림은 접속할 때 웹브라우저에 표시되는 페이지이고 오른쪽 그림은 이 페이지에 대한 그리드 시스템입니다. 그리드는 유저가 웹페이지에 접속하는 순간 수초 이내에 한눈에 들어오는 웹페이지의 레이아웃입니다. 따라서 웹페이지에 담겨진 정보의 내용을 볼 수 없습니다.
웹페이지 그리드가 마음에 든다면 유저는 페이지 상단에 위치한 회사의 로고를 보게 됩니다. 이 때부터 웹페이지에 있는 정보를 찾게 되는 것인데... 무의식 중으로 회사의 CI를 보는 것은 정보에 대한 신뢰를 결정해야하기 때문입니다. 정보에 대한 신뢰성 결정은 현재 웹페이지에 계속 머무를 것인지 아니면 떠날 것인지를 결정하는 매우 중요한 과정입니다.
CI(Corporate Identity:기업이나 공공단체가 갖고 있는 이미지를 시각적으로 체계화, 단일화 한 것)에서 웹페이지에 대한 정보의 신뢰성을 얻었다면 그 다음은 현재 페이지의 정보가 유저가 찾고 있는 정확한 정보인지를 웹페이지에 있는 이미지를 통해 얻어냅니다. 왜냐하면 텍스트의 내용을 읽고 정보가 정확한지를 판단하기엔 시간이 많이 걸리기 깨문입니다. 그러나 하나의 이미지로 웹페이지의 전체의 텍스트를 대신할 수 있다면 훨씬 더 효율적일 것입니다.이미지를 통해 정보의 정확성을 얻었다면 이제 세부적인 정보를 찾아야할 단계입니다. 다음 그림처럼 세부적인 정보는 표제어를 통해 얻게 되죠. 이 역시 전체 텍스트를 다 읽어볼 필요가 없이 표제어만으로 텍스트의 내용을 짐작할 수 있기 때문입니다.
· 해피레포트는 다운로드 받은 파일에 문제가 있을 경우(손상된 파일/설명과 다른자료/중복자료 등) 1주일이내 환불요청 시 환불(재충전) 해드립니다.
(단, 단순 변심 및 실수로 인한 환불은 되지 않습니다.)
· 파일이 열리지 않거나 브라우저 오류로 인해 다운이 되지 않으면 고객센터로 문의바랍니다.
· 다운로드 받은 파일은 참고자료로 이용하셔야 하며,자료의 활용에 대한 모든 책임은 다운로드 받은 회원님에게 있습니다.
저작권안내
보고서 내용중의 의견 및 입장은 당사와 무관하며, 그 내용의 진위여부도 당사는 보증하지 않습니다.
보고서의 저작권 및 모든 법적 책임은 등록인에게 있으며, 무단전재 및 재배포를 금합니다.
저작권 문제 발생시 원저작권자의 입장에서 해결해드리고 있습니다. 저작권침해신고 바로가기