티스토리 뷰
정보설계
• 프로젝트 관련 디자인 개발에 필요한 요소를 파악할 수 있다.
• 인터페이스(interface) 필요 요소와 항목들을 분석할 수 있다.
• 전체적인 와이어 프레임(wire frame)을 작성할 수 있다.
1. 디자인 가이드를 위한 스토리보드
스토리보드(Storyboard)란 본래 영화나 애니메이션, 광고와 같은 영상매체를 만들기 전, 주
요 장면을 사진 혹은 일러스트와 같은 시각적 형태로 정리해 놓은 문서를 의미하며, 영상
매체를 제작하는 과정에서 스텝들 간의 원활한 의사소통을 하기 위해 제작된 문서이다.
1.1 스토리보드의 구성
- 스토리보드는 표지, 개정 이력, 화면 설계, 서비스 흐름도의 구성으로 하며, 프레임의 사
용 여부와 메뉴의 구성 위치, 콘텐츠의 위치 등 전체적인 화면 구성을 보여 주어야 한
다. 이 때 메뉴 구성을 포함한 페이지의 구성은 디자인 요소 중 아주 중요한 부분을 차 지하게 된다. - 각 페이지의 정보를 요약하며, 저장될 디렉터리, 파일 이름, 페이지 타이틀 등을 메모하
듯이 작성한 후 링크 정보를 정리하여 작성하고 다양한 방법으로 후반 작업에 유리하도
록 작성하고, 스크립트 기능, ASP나 PHP 등의 프로그램을 표시하고, 그 기능을 적는다.
1.2 스토리보드의 서비스 흐름도
- (1) 1단계
- 표지와 사이트 구조도를 작성한다. 사이트 구조도는 의뢰자가 요청한 내용과 제작자의
- 아이디어, 벤치마킹을 통한 개선 부분, 최근 인터넷의 흐름 등 기획적인 요소를 복합
- 적으로 고려하여 작성한다. 사이트 구조도를 작성할 때에는 우선 페이지 내에 들어가
- 야 할 모든
내용을 나열한 다음 콘텐츠의 특성에 따라 그룹화하고, 이를 트리 구조로 엮어 완성한다.
- (2) 2단계
- 사이트 맵을 작성하는데, 이는 스토리보드의 목차 역할을 한 다음 웹 사이트 제작의
- 기초가 된다. 이 사이트 맵에는 기획된 모든 페이지를 구성한다.
1.3 스토리보드의 화면 스케치
- 스토리보드 화면을 스케치할 때에는 디자인적 요소를 표현하는 것이 아니라 페이지에 노
- 출되는 정보, 즉 주요한 구성요소가 표현되도록 하며 제작자의 의도가 정확하게 전달될
- 수 있도록 자세하게 작성하는 것이 중요하다.
- 스토리보드는 화면 설계와 더불어 화면 설명이 매우 중요하다. 즉, 실질적인 페이지 디자
- 인 작업을 수행하기 위해 각 페이지의 구성 요소에 대해 설명이 반드시
명시되어야 한다.
- 스토리보드는 다양한 기능 및 콘텐츠 등 최대한 상세한 정보를 나타내야 하며, 화면 설명
- 으로만 부족할 때에는 보다 자세한 설명을 위하여 별도의 서비스 프로세스 페이지가 필요 하다.
2. 웹 디자인의 정보
- 정보디자인(Information Design), 유저 인터페이스 디자인(User Interface Design), 그래픽 디
- 자인(Graphic Design), 컴퓨터그래픽(Computer Design) 운영 등 필요 지식을 기반으로 정보
- 를 계층화하고 설계해야한다.
1. 웹 사이트의 정보 구조 이해
2. 정보 내비게이션 구조의 이해 및 분석 능력
3. 웹 사이트 구축에 대한 제반 기능의 이해와 사용 툴의 운용 능력 보유
- 정보 구조란 웹 사이트 설계에서 사이트의
시각적 설계와 웹 내용을 협의적으로 표현한
- 것을 의미한다.
- (1) 내비게이션
- (2) 정보체계와 정보의 구조화
3. 웹 디자인의 정보 체계화
- 나누어져 있는 각각의 정보들을 하나의 그룹으로 묶는 것을 의미한다.
- 1. 특징이 명확한 정보: 자음 순, 날짜 순, 지리적 위치 순 등으로 체계화 한다.
- 2. 특징이 불명확한 정보: 주제별, 기능별, 상징별, 연령별 등으로 체계화 한다.
4. 웹 디자인의 정보 종류
- 디지털 콘텐츠를 기반으로 사용자에게 전달되는 정보는 다음과 같다.
- 1. 구체적 사실(Facts): 실제의 사실을 말하며, 특별한 설명이 없어도 이해할 수 있는 구체
- 적인 정보
- 2.
개념(Concept): 대상을 이해하기 쉽도록 나타내는 정의
- 3. 절차(Procedures): 순차적으로 진행되어야하는 과정에 대한 정보
- 4. 과정(Process): 특정한 주제를 전달되는 원리에 대한 정보
3. 웹 디자인의 정보 구조화
- 체계화된 정보 체계를 연결시키는 작업으로, 일반적으로 웹사이트 구조에서는 하향식 계
- 층 구조를 갖는 것이 특징이다.
- 웹사이트의 계층 구조 중에서 좁고 깊은 계층구조는 사용자의 접근성이 떨어지며, 넓고
- 얇은 계층 구조는 하나의 페이지에 너무 많은 양의 정보를 담고 있어 복잡하고 콘텐츠가
- 빈약하게 보아는 단점이 있다.
- 가장 적절한 계층구조는 폭(Width)은 최소5개에서 최대 9개까지의 메뉴((Function)로
구성
- 하고 깊이는 (Depth) 최대 5단 이하로 제한하여야 한다.
4. 웹사이트 레이아웃 구조
- 웹사이트의 레이아웃 구조는 일반적으로 헤더, 내비게이션, 콘텐츠 영역, 어사이드, 푸터로
- 이루어진다.
4.1 헤더(header)
- 헤더(header) 헤더는 주로 페이지 상단에 위치하며, 레이아웃에 따라 왼쪽이나 오른쪽, 하단에 위치하는
- 경우도 있다. 헤더 영역 안에는 로고를 비롯하여 글로벌 내비게이션 바, 로그인, 회원가입,
- 사이트맵, 다국어 선택, 검색창 등이 위치하며, 사이트의 첫 인상과 전체적인 아이덴티티
- 를 결정하는 중요한 요소이다.
4.2 내비게이션(navigation)
- 내비게이션이란 본래‘항해’, ‘운항’을 뜻하는 단어이지만, 오늘날에는
사용자의 위치
- 를 기준으로 사용자가 목표하는 지점까지 도달할 수 있도록 길을 안내하는 기기 및 프로
- 그램을 지칭한다. 웹에서의 내비게이션 역시, 많은 정보와 서비스가 담긴 사이트 안에서
- 사용자가 원하는 정보나 서비스를 쉽고 빠르게 찾을 수 있도록 도와주는 안내 시스템을
- 의미한다. 글로벌 내비게이션을 비롯하여 로컬 내비게이션, 브레드크럼, 검색창 등이 내비
- 게이션 시스템에 해당된다.
4.3 바디(Body)
- 사용자에게 전달하고자 하는 실질적 정보들이 담기는 영역이다.
- (1) 콘텐츠(Contents) 영역 콘텐츠는 사이트에서 제공하는 텍스트 기반의 정보뿐 아니라 이미지, 사운드, 동영상,
- 나아가 사이트에서 이용할 수 있는 서비스까지 아우르는 개념이다.
- 콘텐츠 영역은 사이트를 통해 사용자에게 전달하고자 하는 주요 내용들이 위치하는 영역으로, 각 페이
- 지별 특성에 따라 구성 방법 및 표현 방법이 달라진다.
4.3 푸터(Footer)
- 푸터는 페이지의 가장 아래쪽에 위치하는 영역으로, 사이트에 대한 저작권 정보와 기업 로고 및 기업명·주소·대표전화번호·담당자 이메일·사업자 등록번호 등의 제작자 정
- 보, 패밀리사이트 링크와 SNS 아이콘, 개인정보처리방침·이메일무단수집거부·개인정보 보호정책에 대한 정보 등으로 구성된다.
- 푸터 영역은 정보통신망법에서 명시하도록 규정하고 있는 정보 전송자의 명칭, 전송자의
- 전자우편 주소, 전송자의 전화번호, 전송자의 주소, 수신 거부에 대한 안내 사항과 수신
- 거부할 수 있는 링크)를 담고 있는 공간이기 때문에
대부분의 푸터 영역은 비슷한 형태를
- 유지하고 있다.
4.4 광고(Advertising)
- 다양한 형태와 크기의 배너 형태로 구성된다. 가로 혹은 세로 형태로 유연하게 구성되는
- 데, 콘텐츠의 구성을 방해하지 않는 위치와 크기를 선택하는 것이 중요하다.
- (1) 링크
- 하이퍼링크(Hyperlink)와 마이크로링크(Microlink)로 구분된다.
- 콘텐츠가 빈약하게 보이는 단점이 있다.
- (2) 하이퍼링크
- 하이펴링크는 페이지 또는 사이트 단위로 연결되는 링크를 말하며, 마이크로링크는 작
- 은 링크라는 의미로 페이지 내의 연결을 말한다
5. 반응형 웹 정보설계
- PC, Mobile 등 다양한 디바이스에서 하나의
사이트를 보여주는 것이다. 웹 사이트에 있는 다양한 정보들을 각 디바이스에 맞게 사용자가 손쉽게 찾을 수 있도록 정보 콘텐츠를 구 조화 하는 것이 중요한 요소 이다.
- 정보를 구성하는데 필요한 뎁스 구분 체계 정립
- 정보 콘텐츠 접근이 용이하게 네이밍 구성
- 유사한 정보들 끼리 유기적으로 연결될 수 있게 그룹화 구성
- 정보 탐색 시간의 최소화를 위해 효과적인 정보 접근 구성
6. 내비게이션
- 사용자가 원하는 정보를 빠르고 정확하게 찾고(검색:Search), 이동(탐색: Browsing)하기 위
- 해 제공하는 모든 것을 의미한다.
- 검색 기능(Search)
- 사용자의 위치정보(Context)
- 내비게이션 막대(Navigation Bars)
- 풀 다운 메뉴(Pull-Down Menu)
- 내용 목록과 인덱스(Index)
- 사이트 맵(Site Map)
7. 레이브링(Labeling)
- 제작하는 모든 웹 페이지의 정보 체계에 이름을 지어주는 것을 의미한다. 여기에서의 레
- 이블링은 사용자들에게 혼동하지 않도록 정보의 구조와 체계, 위치를 정확하게 알릴 수
- 있도록 하여야한다. 앞에서 제시한 정보의 체계화 방법, 정보의 종류, 웹 사이트 구조의
- 특징과 구조화 방법, 내비게이션 관련 기본 사항, 레이블링 방법은 웹 제작 기획에서 인지
- 해야할 주요 사항이다. 또한 웹 사이트 구조를 이해해야만 다음 단계의 작업이 가능하다.
8. 와이어 프레임
- 와이어 프레임(Wireframe)이란 정보설계와 내비게이션 시스템(Navigation System), 인터페
- 이스
구성요소를 위주로 각 페이지의 전체적 레이아웃을 간단한 선(Wire)으로 단순하게 표
- 현한 스케치를 의미하며, 대략적인 화면 구조 및 각 페이지 간의 연결 구조 등을 파악하
- 기 위해 사용된다.
8.1 웹 브라우저용 와이어 프레임
- 웹 브라우저, 모바일 웹 등 다양한 매체가 등장함에 따라 매체의 화면 비율을 고려하여
- 와이어프레임 툴이나 핸드 드로잉(Hand Drawing)으로 작성한다.
- 웹 브라우저용 와이어 프레임
8.2 모바일 전용 와이어 프레임
8.3 스마트 워치용 와이어프레임
9. 페이지 레이아웃
- 페이지 레이아웃(Page Layout)이란 한 페이지
안에 인터페이스 구성요소와 콘텐츠가 효과
- 적으로 배치되도록 작업하는 것을 의미하며, 사용자에게 사이트의 콘셉트 및 콘텐츠를 보
- 다 효과적으로 전달하기 위하여 다양한 그리드 시스템(Grid System)을 활용할 수 있다.
- 헤더, 내비게이션, 콘텐츠, 영역분할, 푸터, 광고 등 각 구성 요소들을 이해하고 구성요소
- 를 배치한다
- 메인 페이지에서 기능별 영역의 구성을 스케치 한다.
- 페이지 간의 계층적 내비게이션 구성
메인 페이지에서 내비게이션을 통한 각 페이지로의 이동 및 화면 전환 등의 기능들을 구
성하고 이를 스케치한다.