[디자인기초] 11강. 그래픽, 레이아웃, 네비게이션 디자인

1 그래픽 디자인

 

■ 그래픽 디자인

- 그래픽 이미지 디자인 : 디자이너의 가장 본질적 직업

 

■ 디지털 미디어 발전 이전

- 직접 펜과 붓을 들고서 종이에 디자인

- 미술적 재능에 기반한 디자이너 양성

 

■ 컴퓨터 보급 이후

- 수작업이 디지털화되어 훨씬 편리.

- 수작업으로 불가능하거나 힘들었던 부분이 보다 쉽고 다양하게 작업할 수 있도록 발전.

- 미술적 기반 없이 디자이너 업무 수행.

 

■ 이미지 드로잉

- 드로잉의 개념을 아는 것은 디자이너에게 중요한 과제.

 

■ 컴퓨터를 활용한 이미지 제작

- 전체의 규모는 작업하면서 수시로 변경하면서 수정가능.

- 질감은 소프트웨어의 기능을 이용해서 표현이 가능.

- 그래픽 소프트웨어에 수치를 입력하면서 동일한 표현을 찾는 것은 어려움.

- 디지털 이미지는 실제의 해당 툴의 느낌을 디지털화한 것으로서의 한계가 있을 수 밖에 없음.

- 손에서 느껴지는 질감이 아닌 시각으로 이해하는 질감의 차이와 결과물의 생명력에서의 차이가 존재.

⇒ 미디어 패러다임의 변화

⇒ 소프트웨어의 발달

 

※ 일반적인 이미지 드로잉

- 펜으로 드로잉을 하기 위해서는 전체의 규모에서 디테일한 질감까지 모두 눈으로 보고서 느낀 것을 손을 통해서 표현.

- 직접 시도해보면서 나올 수 있는 여러가지 미묘한 표현의 차이들을 경험하면서 시각에서 느낀 그 느낌과 동일한 표현을 찾아감.

- 직접 수채물감, 유화물감, 아크릴, 목탄 등을 활용하여 드로잉을 하게 되면 각 툴이 가지는 특성에 따른 차이를 명확히 느낄 수 있음.

 

■ 그래픽 이미지 제작

- 웹디자인에서의 그래픽 이미지는 점점 다양해짐.

- 인터넷 속도의 증가

→ 웹사이트는 한층 더 화려해짐.

→ 그래픽 디자이너의 역할도 다양.

 

■ 아이콘의 제작

- 아이콘은 화면에서 아주 많은 역할을 수행

→ 아이콘, 버튼, 블릿

- 그래픽 아이콘의 경우 실제로 전체 디자인 이미지와 하나의 컨셉으로 제작.

- 가장 환경에 대한 개념 공유

→ 가상공간과 연계성 있는 이미지들로 디자인.

- 버튼이나 블릿같은 경우, 특별한 의미를 지니지 않는 경우가 多

- 시각적으로 거슬리지 말아야 함.

→ 너무 강조되어 있다면 전체 화면 디자인을 무너뜨림.

 

1) 버튼

- 버튼은 단순히 클릭을 유도할 수 있을 정도의 메시지만 전달해 줌.

2) 블릿

- 형태는 단순한 것이 바람직하며, 컬러 역시 전체적인 화면과 조화를 이루도록 해야 함.

- 다만 사이즈가 작기 때문에 배경색과 너무 유사하거나, 채도나 명도가 너무 낮은 경우에는 그 효과가 미미.

→ 명도나 채도는 다소 높은 것으로 구현하는 것이 바람직.

 

- 개념의 전체적인 통일성이 필요함.

페이지마다 컬러, 형태, 사이즈가 수시로 변한다면, 사용자는 기대하지 않는 기능의 동작이나 화면의 이동이 있을지 모른다는 불안감을 가질 수 있음.

→ 버튼이나 블릿의 경우 반드시 전체 페이지에 걸쳐서 공통된 규칙에 의해서 제작되어야 함.

 

 

2 레이아웃 디자인

- 디자인해야 하는 공간에 필요한 요소들을 적절히 배치하는 것.

→ 레이아웃 디자인

 

■ 공간의 개념

- 시선의 흐름

타이틀 : 상단

메뉴, 로그인 : 상단 혹은 좌단

- 가중치의 배분

중요한 사람들을 우선 배치

중요 요소와 연관된 항목들, 형태적으로 유사한 것들, 컨텐츠 속성이 유사한 것들은 함께 배치.

 

■ 배치의 개념

- 화면 배치에서 전체 공간은 개념을 가지고 있음.

- 상하 배치의 개념

상위의 콘텐츠 → 대제목, 중제목, 소제목

하위 콘텐츠 (하위/종속 개념) → 본문

- 좌우 배치의 개념

과거/미래

 

※ 배치의 개념 예

- 현재가 과거보다 더 중요한 사항이라 강조할 필요가 있을 때에는 좌단보다 우단의 현재 모습을 더 크게하여 규모에서의 강조를 한다거나, 과거는 무색으로 처리하거나 하여 시선을 오른쪽으로 옮기도록 하는 기법을 사용하기도 함.

- 개념적인 공간 배치의 원리를 역으로 이용할 때에는 이와 같이 상쇄시킬 수 있는 표현 방법들을 찾아서 구현하게 됨.

 

■ 그리드 시스템

- 그리드 시스템 = 화면 분할의 가이드 라인

- 상단의 이미지나 메뉴가 있는 부분을 중심으로 상하가 나뉜다거나

- 화면 좌우의 메뉴나 배너 등이 있는 영역과 본문의 영역 등으로 화면 분할된 영역을 구분할 수 있음.

 

1) 면에 의한 분할

- 일반적으로 면으로 분할된 영역은 쉽게 구분이 됨.

- 화면은 크게 2~4개 정도의 영역으로 구분.

- 구분된 부분부분에서 또 다시 분할되어 있음.

2) 선에 의한 분할

- 일반적으로 의미를 가진 선이 아니라, 영역을 구분하기 위해서 선을 이용.

- 선이 화면의 주요 요소가 아닌 경우에는 배경에 묻혀 가늘고 약하게 표현하는 경우도 있음.

- 이는 선은 가이드 라인의 역할만 할 뿐 너무 강하게 표현되어 있으면 실제 보여야 할 콘텐츠의 흐름을 막기 때문.

3) 공간에 의한 분할

- 적절한 여백을 이용해서 화면을 분할.

- 명확하게 구분되어 있지는 않지만, 그 여백을 통해서 분할된 화면을 인지할 수 있음.

- 공간에 위치하고 있는 여러 요소들이 보이지 않는 가이드 라인에 의해서 맞춰져 있으면서 생기는 자연스러운 여백에 의해서 표현 가능.

- 화면에 표현하는 요소들은 이렇게 일정한 표시나 여백에 의해서 잘 정리되어 있음.

 

 

3 네비게이션 디자인

- 메뉴 구성방법은 사용자가 사이트에서 어떤 기준으로 콘텐츠를 찾게 되는가에 따라 달라진다.

 

■ 정보배열 방식

1) 사전적 배열

- 가나다 순의 사전적 배열은 동일한 수준의 콘텐츠를 구성할 때 사용.

백과사전과 같이 사용자가 검색을 통해서 콘텐츠를 찾아야 한다면, 기본적인 구성은 사전적 배열로 되어 있음.

[사전적 배열의 예 - 쇼핑몰]

낮은 가격 순서, 높은 가격 순서, 브랜드명으로 나열, 최근 출시일 기준으로 나열한다거나 하는 배열방식도 결국에는 사전적 배열의 한 예임.

→ 즉, 기준에 의해서 순차적으로 배열하는 방식을 일컫음.

2) 도서관식 배열

- 주제에 따라서 콘텐츠들이 구분되어 있기 때문에 사용자들의 콘텐츠 접근이 용이.

- 웹사이트의 메뉴에는 그 개수의 한계가 있을 수 있음.

너무 많거나 너무 적은 메뉴를 가지고 있다면 사용자로 하여금 복잡하게 느끼거나, 혹은 애매하거나, 너무 많은 클릭수를 유발할 수 있음.

→ 따라서, 메인 메뉴의 개수는 7개를 넘지 않는 것이 좋음.

3) 속성적 배열

- 주제에 따라서 콘텐츠들이 구분되어 있기 때문에 사용자들의 콘텐츠 접근이 용이.

- 웹사이트의 메뉴에는 그 개수의 한계가 있을 수 있음.

너무 많거나 너무 적은 메뉴를 가지고 있다면 사용자로 하여금 복잡하게 느끼거나, 혹은 애매하거나, 너무 많은 클릭수를 유발할 수 있음.

→ 따라서, 메인 메뉴의 개수는 7개를 넘지 않는 것이 좋음.

 

■ 화면의 전환

- 클릭할 때 사용자는 어떤 내용이나 이미지가 나올 것이라는 추상적인 기대를 함.

 

■ 화면 전환 시 유의사항

① 이전화면에서는 다음 화면에 대한 힌트가 있어야 함.

② 사용자가 기대하는 정보, 사용자의 행위에 대한 결과를 보여주고, 그 다음에는 어떤 작업을 해야 하는지 자세히 알려 줌.

③ 이전 화면에서 버튼의 명칭은 사용자 행위의 결과가 어떤 것인지 알려주어야 함.

 

■ 강제적 이동

- 일부러 사용자의 이동을 제한하거나, 기대하지 않았던 화면으로 강제로 이동시키는 경우가 있음.

ex) 사용자의 정보보호, 콘텐츠 접근, 상업적 이유

- 사용자가 기능을 수행하기 위해서 설명이 필요하다면 우선적으로 가이드해 줄 수 있는 안내 페이지가 먼저 제시되어 사용자의 기능수행을 돕는 화면으로 우선 이동할 수도 있음.

- 사용자에게 미리 고지하여 사용자가 화면 이동 시 당황하지 않도록 하는 배려가 필요.

 

 

<정리하기> 1. 그래픽 디자인 - 이미지 드로잉 - 그래픽 이미지 제작 - 아이콘의 제작 2. 레이아웃 디자인 - 공간의 개념 - 배치의 개념 - 그리드 시스템 3. 네이게이션 디자인 - 메뉴 설계 - 화면의 전환 - 강제적 이동