Chapter 03. 웹 디자인 레이아웃.

Presentation on theme: "Chapter 03. 웹 디자인 레이아웃."— Presentation transcript:

1 Chapter 03. 웹 디자인 레이아웃

2 전형적인 페이지 레이아웃을 설계하는 방법에 대해서 알아본다. 플로우 차트와 스토리 보드가 무엇인지 알아본다.
학습목표 전형적인 페이지 레이아웃을 설계하는 방법에 대해서 알아본다. 플로우 차트와 스토리 보드가 무엇인지 알아본다. 플로우 차트와 스토리 보드 작성을 실습해 본다.

3 Section 4: 화면설계와 웹 디자인 레이아웃
페이지 레이아웃 한 페이지에서 컨텐츠가 배치되는 방식이다. 전달하려는 내용이 고객에게 확실히 전달될 수 있도록, 주요요소를 어디에다 배치할 것인지 그리드로 표시하고 서체 등의 세부적인 사항도 결정한다. 전형적인 페이지 레이아웃’이란 그리드가 명확하고 각 페이지 간에 일관성이 뛰어나 사용자들이 쉽게 사이트에 적응하여 원하는 정보를 빠르게 찾을 수 있는 쉽고 편리한 사이트 대형 포탈 사이트, 신문사 사이트, 커뮤니티 사이트, 쇼핑몰 사이트 등에서 주로 사용 기본적이고 전형적인 페이지 레이아웃 작업을 충분히 경험해야만 독특하고 감각적인 페이지 레이아웃 역시 가능 하다.

4 Section 4: 화면설계와 웹 디자인 레이아웃
전형적인 페이지 레이아웃’을 설계하는 방법 명확한 컨텐츠 그룹핑 사이트의 목적에 따라 가장 비중 있는 요소의 우선 배치 그리드는 큰 컨텐츠에서 작은 컨텐츠 중심으로 세부적인 그리드는 시선의 이동을 고려하여 자연스럽게 메인 페이지와 일관성 있는 서브 페이지 레이아웃

5 Section 4: 화면설계와 웹 디자인 레이아웃
명확한 컨텐츠 그룹핑 그룹핑이 쉽고 명확하게 되어 있는 웹 사이트 사례 다양한 카테고리의 많은 정보가 한 페이지 내에 담겨 있어 복잡할 수 있는 구조이지만, 효과적인 그룹핑과 레이블링을 통해서 원하는 컨텐츠를 쉽게 찾아볼 수 있다. 메인 화면에 나와 주는 각각의 컨텐츠 들은 외곽선을 사용하여 다른 컨텐츠들과 쉽게 구분되며 확실하게 그룹핑 되어 있다.

6 Section 4: 화면설계와 웹 디자인 레이아웃
사이트의 목적에 따라 가장 비중 있는 요소의 우선 배치 쇼핑몰 사이트의 핵심 요소를 부각시킨 사례 쇼핑몰 사이트는 보통 사이트보다 3~4배의 스크롤이 생기는 긴 페이지를 가지고 있기 때문에, 스크롤하지 않고 볼 수 있는 상단 공간에 가장 중요한 요소를 최대한 효과적으로 배치하고 있다. 가운데의 큰 영역에 가장 비중이 큰 이벤트 3개를 번갈아 돌리고 있고, 다음 단에 중요 기획상품의 전시와 계절을 이용한 핵심 상품을 전시하고 있다.

7 Section 4: 화면설계와 웹 디자인 레이아웃
사이트의 목적에 따라 가장 비중 있는 요소의 우선 배치 신문사 사이트의 핵심 요소를 부각시킨 사례 중앙일보, Joins CNN 월간중앙 뉴스 사이트는 신문과 잡지를 대신하는 역할을 한다. Joins.com 의 경우 joins에서 서비스하고 있는 섹션을 크게 6가지로 두고, 각 섹션의 메인 왼쪽 상단에는 섹션 별 최신 뉴스를 강조해서 구성하고 있다. 최신 뉴스의 영역을 가장 먼저 배치하고 강조했기 때문에 가장 먼저 시선이 가게 된다.

8 Section 4: 화면설계와 웹 디자인 레이아웃
그리드는 큰 컨텐츠에서 작은 컨텐츠 중심으로 컨텐츠의 크기 순으로 효율적인 레이아웃을 설계한 웹 페이지 사례 큰 컨텐츠를 중심으로 작은 컨텐츠를 붙여 나가 구성한 쇼핑몰 레이아웃의 활용 대부분 쇼핑몰의 상단 영역을 차지하는 것은 이벤트나 기획상품 이다. 그 아래 부분을 보면 모두 상단보다 작은 영역들을 차지하고 있음을 알 수 있다. 크고 중요한 영역부터 배치를 하고 큰 컨텐츠를 중심으로 작은 컨텐츠를 붙여 나가면 쉽게 레이아웃을 잡을 수 있다.

9 Section 4: 화면설계와 웹 디자인 레이아웃
그리드는 큰 컨텐츠에서 작은 컨텐츠 중심으로 시선의 흐름을 유도하는 레이아웃 사례 시선이 가장 먼저 가는 영역에 중요 핵심 내용을 배치하고, 세부 설명 내용은 아래쪽으로 배치를 하게 되면 시선이 자연스럽게 상단에서 하단으로 흐르게 된다. 자연스러운 흐름 중에서도 강조하고자 하는 부분이 있으면 중요한 부분은 돋보이도록 컬러를 강조하여 사용하거나 넘버링을 하여 큰 흐름 속에서도 중요한 부분들을 쉽게 찾을 수 있도록 포인트를 주어 배치하였다.

10 Section 4: 화면설계와 웹 디자인 레이아웃
그리드는 큰 컨텐츠에서 작은 컨텐츠 중심으로 시선의 흐름을 유도하는 레이아웃 사례 잼버거; 시간차를 이용한 시선유도 레이아웃의 배치와 화면이 뜨는 순서 또한 화살표 방향으로 시선의 흐름을 유도하는 효과적인 방법을 사용

11 Section 4: 화면설계와 웹 디자인 레이아웃
메인 페이지와 일관성 있는 서브 페이지 레이아웃 일관성 있는 레이아웃이 구축된 웹 사이트 사례 메인 페이지와 서브 페이지가 동일한 구조로 이루어진 포스코 웹 사이트 CI, 글로벌 네비게이션의 컬러, 크기, 위치와 이미지 영역의 크기 등 메인 페이지의 요소를 서브 페이지에서 그대로 사용한 경우이다. 그 외에 죄측 칼럼의 사용이나 메인 페이지에서 사용된 라운딩 형태의 사진 프레임 등을 통해서 철저하게 일관성을 지키고 있다.

12 Section 4: 화면설계와 웹 디자인 레이아웃
메인 페이지와 일관성 있는 서브 페이지 레이아웃 일관성 있는 레이아웃이 구축된 웹 사이트 사례 전체 그리드 안에서 칼럼(column)을 효과적으로 응용해서 사용한 교보리얼코 웹 사이트 큰 격자의 그리드를 가지고 있고, 격자 그리드를 바탕으로 자유롭게 칼럼을 분리, 합체해서 사용하고 있다.

13 Section 4: 화면설계와 웹 디자인 레이아웃
메인 페이지와 일관성 있는 서브 페이지 레이아웃 일관성 있는 레이아웃이 구축된 웹 사이트 사례 일정한 전체 그리드 안에서 칼럼(column)을 효과적으로 응용해서 사용한 북앤라이프 웹 사이트

14 Section 4: 화면설계와 웹 디자인 레이아웃
연습문제 전형적인 페이지 레이아웃의 사례를 찾아 보자. 1) 그룹핑이 쉽고 명확하게 되어 있는 웹 사이트 레이아웃 사례 2) 사이트의 목적에 따라 가장 비중 있는 요소의 우선 배치한 레이아웃 사례 3) 컨텐츠의 크기순으로 레이아웃을 설계한 웹 사이트 사례 4) 자연스러운 시선의 이동을 고려하여 세부적인 그리드를 그려 배치한 레이아웃 사례 5) 서브 페이지와 메인 페이지를 일관성 있게 설계한 레이아웃 사례

15 Section 4: 화면설계와 웹 디자인 레이아웃
스토리 보드 작성하기 플로우 차트 (FC: Flow Chart) 플로우 차트 (FC: Flow Chart)란? 플로우 차트(Flow Chart)란 웹사이트를 접속하여 어떠한 플로우를 거쳐서 네비게이션하는가를 나타내는 것이다. 그리고 전체적인 사이트의 흐름도를 도식적으로 표현한 설계기법중의 하나이다. 플로우 차트의 표현 요소들 기능 명시 기능상의 내용에 대한 설명 분기 선택 기능상의 연결관계 표시

16 Section 4: 화면설계와 웹 디자인 레이아웃
플로우 차트 (FC: Flow Chart) 회원 가입 플로우 차트 사례 회원 가입 및 변경에 대한 플로우 차트 위의 사례처럼 플로우 차트는 가능한 상세하게 도식화시켜야 한다. 각 주제마다 다른 컬러로 구분이 가도록 하는 것도 좋은 방법이다. 작성된 플로우 차트의 개수와, 스토리보드 장수는 일치하는 것이 좋다. [실습1]하나의 사이트를 정하여 회원가입 및 변경에 대한 플로우 차트를 작성해 보자.

17 Section 4: 화면설계와 웹 디자인 레이아웃
플로우 차트 (FC: Flow Chart) 상담기능에 대한 플로우 차트 사례 상담 기능에 대한 플로우 차트 사례 [실습2]하나의 사이트를 정하여 주요 기능을 살펴보고 주요 기능에 대한 플로우 차트를 작성해 보자.

18 Section 4: 화면설계와 웹 디자인 레이아웃
스토리 보드 작성하기 스토리보드 (Storyboard) 스토리보드 (Storyboard) 란? 스토리 보드란 웹 기획에 있어서 가장 중요하다고 해도 과언이 아닌, 사이트 개발의 중요한 설계도이며 구체적인 작업 지침서이다. 사전에서는 스토리 보드를 드라마나 영화의 주요 장면을 간단하게 그린 그림을 나란히 붙인 널빤지라고 설명하고 있다. 웹 사이트에서는 웹 페이지의 모든 화면들에 대한 구성 요소들을 설계해 놓은 계획서쯤으로 이해하면 좋을 것이다. 스토리보드가 완성된다는 것은 기획단계가 완료되었음을 의미 한다. 잘못된 설계도를 가지고 작업하면 잘못된 개념의 집을 짓게 되어 기초가 무너지게 되는 것처럼 스토리보드는 정확하고 치밀하게 작성되어야 한다. 스토리보드의 장수와 완성된 웹사이트의 홈페이지 개수는 일치하여야 한다.

19 Section 4: 화면설계와 웹 디자인 레이아웃
스토리 보드 작성하기 스토리보드 (Storyboard) 의 구성 예

20 Section 4: 화면설계와 웹 디자인 레이아웃
스토리 보드 작성하기 스토리보드 (Storyboard) 의 구성 예 1. 페이지 주제: 해당 화면의 주제를 명시 2. 페이지 ID: 화면의 코드명. 플로우 차트상의 코드번호와 일치해야 함. 3. 화면구성: 화면의 내용과 구성을 이해하기 쉽도록 표현함. 메뉴 네비게이션의 구성과 위치, 이미지, 아이콘, 텍스트 등의 화면 구성요소를 가능한 정확히 묘사해야 함. 4. 화면설명: 화면구성에서 표현하지 못한 부분과 화면 분위기 및 요구사항을 글로 설명하는 부분임. 디자인이나 프로그램에게 특별히 주의시켜야 할 부분이 있을 경우에 설명함. 특별히 강조되어야 할 화면 부분에 대해서도 설명함. 고급기술이 들어가는 부분 또한 설명함. 5. Flow Chart와 Logic: 화면의 흐름을 표시하고 Logic 적인 부분을 설명함 6. Text: 화면에 나타나는 텍스트 내용을 적는 곳. 이 공간에 다 들어갈 수 없으면 별도의 용지를 첨부함. 텍스트는 짧고 간결하여 가독성이 높은 문장으로 적음. 7. Graphic/Video: 그래픽 데이터와 Video 를 표현하는 곳. 지정된 기업의 로고, 캐릭터 등이 있다면 반드시 명시하고 기타 강조할 만한 그래픽요소와 비디오 요소가 들어간다면 자세한 설명을 덧붙임.

21 Section 4: 화면설계와 웹 디자인 레이아웃
스토리 보드 작성하기 스토리보드 (Storyboard) 의 구성 예

22 Section 4: 화면설계와 웹 디자인 레이아웃
스토리 보드 작성하기 디자인 시안을 위한 화면구성 사례 디자인이 들어가기 직전의 모습으로 설계를 해주어야 한다. 같은 기능의 메뉴나 배너는 그 형태를 같게 하여 디자인 적용에도 참고 할 수 있도록 구분을 해주어야 한다.

23 Section 4: 화면설계와 웹 디자인 레이아웃
연습문제 진행하는 프로젝트 사이트의 주요 기능에 대한 플로우 차트를 그려보자. ①회원가입/ 상담/ 장바구니 등 2. 진행하는 프로젝트의 메인 화면설계를 그려보자. ①사이트의 목적과 사용자의 목적에 가장 중요하게 생각되는 컨텐츠들(자주 사용하는 메뉴)과 그렇지 않은 컨텐츠들(자주 사용하지 않는 메뉴)로 구분해보자. ② 서브 페이지 에서도 일관성 있게 나와 주어야 하는 메뉴와 메인 페이지에서만 나오는 메뉴로 분리하여 그리드 영역에 정의하여 보자. ③그리드를 중심으로 핵심 컨텐츠를 배치 후 나머지 컨텐츠를 레이아웃 시켜보자. 또한, 시선이 많이 가야 하는 메뉴와 마우스 클릭을 유도 하는 메뉴로 분리하여 적절한 위치에 배치하여 보자. ④화면 요소들의 조직적인 설계-그룹핑을 시켜주자. ⑤메인 페이지와 일관성을 고려하여 그리드를 기준으로 서브 페이지 레이아웃을 마무리 하자. 3. 진행하는 프로젝트의 주요화면 스토리보드를 작성해 보자.

24 Thank you ehanbit.net