스토리보드 설계하기

정보설계

• 프로젝트 관련 디자인 개발에 필요한 요소를 파악할 수 있다.
• 인터페이스(interface) 필요 요소와 항목들을 분석할 수 있다.
• 전체적인 와이어 프레임(wire frame)을 작성할 수 있다.

1. 디자인 가이드를 위한 스토리보드

스토리보드(Storyboard)란 본래 영화나 애니메이션, 광고와 같은 영상매체를 만들기 전, 주요 장면을 사진 혹은 일러스트와 같은 시각적 형태로 정리해 놓은 문서를 의미하며, 영상매체를 제작하는 과정에서 스텝들 간의 원활한 의사소통을 하기 위해 제작된 문서이다.

1.1 스토리보드의 구성

• •스토리보드는 표지, 개정 이력, 화면 설계, 서비스 흐름도의 구성으로 하며, 프레임의 사용 여부와 메뉴의 구성 위치, 콘텐츠의 위치 등 전체적인 화면 구성을 보여 주어야 한다. 이 때 메뉴 구성을 포함한 페이지의 구성은 디자인 요소 중 아주 중요한 부분을 차지하게 된다.
• • 각 페이지의 정보를 요약하며, 저장될 디렉터리, 파일 이름, 페이지 타이틀 등을 메모하듯이 작성한 후 링크 정보를 정리하여 작성하고 다양한 방법으로 후반 작업에 유리하도록 작성하고, 스크립트 기능, ASP나 PHP 등의 프로그램을 표시하고, 그 기능을 적는다.

1.2 스토리보드의 서비스 흐름도

• 1단계
  표지와 사이트 구조도를 작성한다. 사이트 구조도는 의뢰자가 요청한 내용과 제작자의 아이디어, 벤치마킹을 통한 개선 부분, 최근 인터넷의 흐름 등 기획적인 요소를 복합 적으로 고려하여 작성한다. 사이트 구조도를 작성할 때에는 우선 페이지 내에 들어가 야 할 모든 내용을 나열한 다음 콘텐츠의 특성에 따라 그룹화하고, 이를 트리 구조로 엮어 완성한다.
• 2단계
  사이트 맵을 작성하는데, 이는 스토리보드의 목차 역할을 한 다음 웹 사이트 제작의 기초가 된다. 이 사이트 맵에는 기획된 모든 페이지를 구성한다.

1.3 스토리보드의 화면 스케치

스토리보드 화면을 스케치할 때에는 디자인적 요소를 표현하는 것이 아니라 페이지에 노 출되는 정보, 즉 주요한 구성요소가 표현되도록 하며 제작자의 의도가 정확하게 전달될 수 있도록 자세하게 작성하는 것이 중요하다. 스토리보드는 화면 설계와 더불어 화면 설명이 매우 중요하다. 즉, 실질적인 페이지 디자 인 작업을 수행하기 위해 각 페이지의 구성 요소에 대해 설명이 반드시 명시되어야 한다. 스토리보드는 다양한 기능 및 콘텐츠 등 최대한 상세한 정보를 나타내야 하며, 화면 설명 으로만 부족할 때에는 보다 자세한 설명을 위하여 별도의 서비스 프로세스 페이지가 필요 하다.

2. 웹 디자인의 정보

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

3. 웹 디자인의 정보 구조화

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

4. 웹사이트 레이아웃 구조

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

4.1 헤더(header)

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

4.2 내비게이션(navigation)

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

4.3 바디(Body)

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

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

4.3 푸터(Footer)

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

4.4 광고(Advertising)

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

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

5. 반응형 웹 정보설계

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

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

6. 내비게이션

사용자가 원하는 정보를 빠르고 정확하게 찾고(검색:Search), 이동(탐색: Browsing)하기 위해 제공하는 모든 것을 의미한다

• 1. 검색 기능(Search)
• 2. 사용자의 위치정보(Context)
• 3. 내비게이션 막대(Navigation Bars)
• 4. 풀 다운 메뉴(Pull-Down Menu)
• 5. 내용 목록과 인덱스(Index)
• 6. 사이트 맵(Site Map)

7. 레이브링(Labeling)

제작하는 모든 웹 페이지의 정보 체계에 이름을 지어주는 것을 의미한다. 여기에서의 레 이블링은 사용자들에게 혼동하지 않도록 정보의 구조와 체계, 위치를 정확하게 알릴 수 있도록 하여야한다. 앞에서 제시한 정보의 체계화 방법, 정보의 종류, 웹 사이트 구조의 특징과 구조화 방법, 내비게이션 관련 기본 사항, 레이블링 방법은 웹 제작 기획에서 인지 해야할 주요 사항이다. 또한 웹 사이트 구조를 이해해야만 다음 단계의 작업이 가능하다.

8. 와이어 프레임

와이어 프레임(Wireframe)이란 정보설계와 내비게이션 시스템(Navigation System), 인터페이스 구성요소를 위주로 각 페이지의 전체적 레이아웃을 간단한 선(Wire)으로 단순하게 표현한 스케치를 의미하며, 대략적인 화면 구조 및 각 페이지 간의 연결 구조 등을 파악하기 위해 사용된다.

8.1 웹 브라우저용 와이어 프레임

8.2 모바일 전용 와이어 프레임

8.3 스마트 워치용 와이어프레임

9. 페이지 레이아웃

페이지 레이아웃(Page Layout)이란 한 페이지 안에 인터페이스 구성요소와 콘텐츠가 효과 적으로 배치되도록 작업하는 것을 의미하며, 사용자에게 사이트의 콘셉트 및 콘텐츠를 보 다 효과적으로 전달하기 위하여 다양한 그리드 시스템(Grid System)을 활용할 수 있다. 헤더, 내비게이션, 콘텐츠, 영역분할, 푸터, 광고 등 각 구성 요소들을 이해하고 구성요소를 배치한다