웹 디자인 정보

웹 디자인 정보

정보디자인(Information Design), 유저 인터페이스 디자인(User Interface Design), 그래픽 디자인(Graphic Design), 컴퓨터그래픽(Computer Design) 운영 등 필요 지식을 기반으로 정보를 계층화하고 설계해야한다.

웹 디자인의 정보 종류

디지털 콘텐츠를 기반으로 사용자에게 전달되는 정보는 다음과 같다.

• 구체적 사실(Facts): 실제의 사실을 말하며, 특별한 설명이 없어도 이해할 수 있는 구체적인 정보
• 개념(Concept): 대상을 이해하기 쉽도록 나타내는 정의
• 절차(Procedures): 순차적으로 진행되어야하는 과정에 대한 정보
• 과정(Process): 특정한 주제를 전달되는 원리에 대한 정보

웹 디자인의 정보 구조화

체계화된 정보 체계를 연결시키는 작업으로, 일반적으로 웹사이트 구조에서는 하향식 계층 구조를 갖는 것이 특징이다. 웹사이트의 계층 구조 중에서 좁고 깊은 계층구조는 사용자의 접근성이 떨어지며, 넓고 얇은 계층 구조는 하나의 페이지에 너무 많은 양의 정보를 담고 있어 복잡하고 콘텐츠가 빈약하게 보아는 단점이 있다. 가장 적절한 계층구조는 폭(Width)은 최소5개에서 최대 9개까지의 메뉴((Function)로 구성하고 깊이는 (Depth) 최대 5단 이하로 제한하여야 한다.

웹사이트 레이아웃 구조

웹사이트의 레이아웃 구조는 일반적으로 헤더, 내비게이션, 콘텐츠 영역, 어사이드, 푸터로 이루어진다

헤더(header)

헤더는 주로 페이지 상단에 위치하며, 레이아웃에 따라 왼쪽이나 오른쪽, 하단에 위치하는 경우도 있다. 헤더 영역 안에는 로고를 비롯하여 글로벌 내비게이션 바, 로그인, 회원가입, 사이트맵, 다국어 선택,검색창 등이 위치하며, 사이트의 첫 인상과 전체적인 아이덴티티를 결정하는 중요한 요소이다.

내비게이션(navigation)

내비게이션이란 본래‘항해’, ‘운항’을 뜻하는 단어이지만, 오늘날에는 사용자의 위치를 기준으로 사용자가 목표하는 지점까지 도달할 수 있도록 길을 안내하는 기기 및 프로그램을 지칭한다. 웹에서의 내비게이션 역시, 많은 정보와 서비스가 담긴 사이트 안에서 사용자가 원하는 정보나 서비스를 쉽고 빠르게 찾을 수 있도록 도와주는 안내 시스템을 의미한다. 글로벌 내비게이션을 비롯하여 로컬 내비게이션,브레드크럼, 검색창 등이 내비게이션 시스템에 해당된다

바디(Body)

사용자에게 전달하고자 하는 실질적 정보들이 담기는 영역이다.

• 콘텐츠(Contents) 영역 : 콘텐츠는 사이트에서 제공하는 텍스트 기반의 정보뿐 아니라 이미지, 사운드, 동영상, 나아가 사이트에서 이용할 수 있는 서비스까지 아우르는 개념이다. 콘텐츠 영역은 사이트를 통해 사용자에게 전달하고자 하는 주요 내용들이 위치하는 영역으로, 각 페이지별 특성에 따라 구성 방법 및 표현 방법이 달라진다.
• 어사이드(Aside) : 주요 콘텐츠 이외에 배너 광고나 바로가기 버튼, Top 버튼, 쇼핑 히스토리나 카트 등의 사용자 이용 정보, 그외 기타 기능들이 배치되는 공간이다.

푸터(Footer)

푸터는 페이지의 가장 아래쪽에 위치하는 영역으로, 사이트에 대한 저작권 정보와 기업로고 및 기업명·주소·대표전화번호·담당자 이메일·사업자 등록번호 등의 제작자 정보, 패밀리사이트 링크와 SNS 아이콘, 개인정보처리방침·이메일무단수집거부·개인정보 보호정책에 대한 정보 등으로 구성된다. 푸터 영역은 정보통신망법에서 명시하도록 규정하고 있는 정보 전송자의 명칭, 전송자의 전자우편 주소, 전송자의 전화번호,전송자의 주소, 수신 거부에 대한 안내 사항과 수신거부할 수 있는 링크)를 담고 있는 공간이기 때문에 대부분의 푸터 영역은 비슷한 형태를 유지하고 있다.

광고(Advertising)

다양한 형태와 크기의 배너 형태로 구성된다. 가로 혹은 세로 형태로 유연하게 구성되는데, 콘텐츠의 구성을 방해하지 않는 위치와 크기를 선택하는 것이 중요하다.

• 링크 : 하이퍼링크(Hyperlink)와 마이크로링크(Microlink)로 구분된다. 콘텐츠가 빈약하게 보이는 단점이 있다.
• 하이퍼링크: 하이펴링크는 페이지 또는 사이트 단위로 연결되는 링크를 말하며, 마이크로링크는 작은 링크라는 의미로 페이지 내의 연결을 말한다

반응형 웹 정보설계

PC, Mobile 등 다양한 디바이스에서 하나의 사이트를 보여주는 것이다. 웹 사이트에 있는 다양한 정보들을 각 디바이스에 맞게 사용자가 손쉽게 찾을 수 있도록 정보 콘텐츠를 구조화 하는 것이 중요한 요소 이다.

• 정보를 구성하는데 필요한 뎁스 구분 체계 정립
• 정보 콘텐츠 접근이 용이하게 네이밍 구성
• 유사한 정보들 끼리 유기적으로 연결될 수 있게 그룹화 구성
• 정보 탐색 시간의 최소화를 위해 효과적인 정보 접근 구성