웹 디자인 레이아웃 #2

웹 페이지 레이아웃의 영역은 크게 헤더(Header) 영역, 콘텐츠(Contents) 영역, 푸터(Footer) 영역으로 나뉜다.

 

웹 페이지 레이아웃의 영역과 요소

영역	요소		내용
헤더 (Header)	로고타입(Logotype)		- 아이덴티티를 나타내는 이미지이다. - 모든 웹 페이지의 시작 부분에는 웹 사이트를 나타내는 타이틀 영역을 배치한다. 타이틀 에는 CI로 제작된 심벌이나 로고 등을 사용하여 해당 사이트의 아이덴티티와 통일성을 드러낸다. - 로고타입의 형태와 걸러는 사용자가 웹 사이트를 더 쉽게 인지하고 더 오래 기어할 수 있는 것으로 고른다.
헤더 (Header)	유틸리티(Uility)		- 로그인, 화원 가입, 마이 페이지, 언어 선택, 장바구니등 웹사이트를 이용할 때 유용한 메뉴를 배치하는 영역이다. 항상 모든 페이지에서 사용할 수 있는 메뉴들로 구성한다.
헤더 (Header)	글로벌 내비게이션 (Global Navigation)		- 글로벌 내비게이션 시스템은 웹 사이트의 모든 페이지에서 사용자가 쉽게 이동할 수 있도록 만든 수단으로, 방문자들의 서핑을 유도하는 중요한 역할을 한다. - 상단에 메인 메뉴가 들어가는 스타일 중 가로형 메뉴가 가장 많이 쓰인다. - 사각적으로 쉽게 인지할 수 있는 위치, 형태, 컬러를 고른다.
콘텐츠 (Contents)	서브 메뉴 (Sub Menu) 또는 로컬 내비게이션 (Local Navigation)		- 주요 메뉴에 속하는 하위 메뉴이다. - 특정 페이지에서만 사용되는 메뉴이다. - 메인 페이지보다는 하위 페이지의 구성 요소이다.
콘텐츠 (Contents)	콘텐츠(Contents)		- 각각의 콘텐츠 특성에 맞게 독자적으로 구성한다. - 각각의 콘텐츠 정보를 상세히 보여 줘야 하므로 내용에 맞춰 적절히 나눈 다음 그리드에 맞춰 배치한다. -웹 페이지를 구성하는 요소는 크게 글자 요소와 이미지 요소로 나뉜다. - 양이 많은 내용 요소는 주제별로 나눈 다음 그리드 방식에 맞춰 화면을 수직 또는 수평으로 분할하여 만든 영역에 배치한다.
콘텐츠 (Contents)	링크(Link) 또는 배너(Banner)		- 추천 사이트와 관계사와 스폰서 링크, 교환 광고나 상업 광고 배너이다. - 배너 광고는 광고 수요자가 적극적이고 능동적으로 참여할 수 있도록 만들어야 한다. 배너 광고는 정보 제공형과 흥미 유발형으로 나뉜다. - 배너 광고의 위치는 주로 클릭하기 쉽게 중상단과 상단 오른쪽에 배치한다. - 많은 광고를 수용해야 하는 경우라면 일정한 자리를 정하고 디자인도 일관된 형태를 유지해 통일성을 주는 것이 좋다.
푸터 (Footer)	인포 메뉴(nfo Menu )		- 회사 소개나 웹 사이트와 관련한 주요한 정보를 담는다. - 쇼핑몰이라면 내용이 자세해야 웹 사이트의 신뢰도가 높아지므로 비교적 넓은 영역을 차지한다.
푸터 (Footer)	저작권(Copyright)		- 저작권, 개인 정보, 보안성 등의 법적 정책을 고지한다. - 모든 웹 페이지의 푸터에는 권리 표시, 보호 연도, 권리 보유, 계열사명, 피드백을 위한 운영자의 전자우편 주소, SNS 링크 등이 포함된다. - 하단에 배치하며 선이나 배경색을 넣어 내용을 구분한다.

 

■ 레이아웃의 영역별 구분

레이아웃의 기본형은 아래와 같다. A는 헤더, B와 C는 콘텐츠 영역, D는 푸터 영역이다.

A
B	C	B
			D

• 헤더 :  헤더 영역은 A 영역이다. 주로 웹 사이트의 아이덴티티를 규정짓는 요소(로고, 메인 이미지), 웹 사이트의 주요 기능, 웹 사이트에 항상 노출되는 요소(글로벌 내비게이션, 유틸리티)를 넣는다. 사용자 편의를 높이기 위해 검색 창을 두기도 한다. 위치를 고정시켜 메인 페이지는 물론 서브 페이지에도 일관되게 나타나도록 한다. 항상 노출되는 유틸리티에는 로그인, 회원 가입, 검색 같은 기능을 배치하고, 웹 사이트 성격에 따라 장바구니, 배송 조회. 마이 페이지, 언어 선택. SNS 아이콘 등을 배치한다.
• 콘텐츠 영역 : 콘텐츠 영역은 B와C 영역이다. B 영역에는 이벤트, 서브 콘텐츠 링크, 관련 사이트 링크, 프로모션 타사 광고 등이 배치된다. 외부 웹 사이트 링크와 외부 모듈 등이 보이는 가변적 메뉴 영역이다. C 영역에는 뉴스, 이벤트와 웹 사이트에 있는 주요 내용, 서비스, 제품 소개 등이 배치된다. 모든 메뉴의 실제 내용이 나타나는 영역이다. 링크 기능만 제공하는 내비게이션 메뉴로 구성되기도 한다.
• 푸터 : 푸터는 [그림 4-기의 D 영역이다. 특정 카테고리에 포함되지 않는 범용 메뉴가 들어가는 영역(계열사 링크 포함)이다 . 저작권 영역과 인포 메뉴 영역으로 구성된다. 레이아웃은 웹 페이지를 제작할 때 기초이자 필수가 되는 작업이다. 사용자에게 전달하려는 내용을 시각적으로 제공하여 공감을 불러일으키고, 결과적으로 내용에 담긴 메시지를 더 쉽고 빠르게 이해시키는 레이아웃이야말로 성공적인 레이아웃이다.

 

3. 전형적인 페이지 레이아웃

■ 전형적인 페이지 레이아웃의 개념

페이지 레이아웃은 한 페이지 내에서 콘텐츠를 배치하는 방식이다. 전달하려는 내용이 고객에게 확실히 전달될 수 있도록 주요 요소를 어디에 배치할지 그리드로 표시하고 글꼴과 같은 세부 사항 등도 결정하는 부분이다. 전형적인 페이지 레이아웃은 그리드가 명확하고 페이지와 페이지 사이의 일관성이 뛰어나 사용자들이 웹 사이트에 쉽게 적응하여 원하는 정보를 빠르게 찾을 수 있는 레이아웃을 말한다. 대부분의 정보 사이트 Iniomation Site는 전형적인 페이지 레이아웃에 속한다. 예를 들면, 대형 포털 사이트, 신문사 사이트, 커거뮤니티 사이트, 쇼핑몰 사이트 등이다. 이러한 웹 사이트 중에는 독하 고 심미성이 뛰어난 웹 사이트도 있지만, 목표는 하나같이 '사용자들이 정보를 빠르게 찾을 수 있도록 돕는다'이다 . 전형적인 페이지 레이아웃 작업을 충분히 경험하고 작업해 봐야 독특하고 감각적인 페이지 레이아웃도 설계할수 있다. 전형적인 페이지 레이아웃을 설계하는 방법을 정확히 알아보자.