웹 디자인 이론 STEP 02.

 

웹디자인 이론 STEP 02. 에서는 GNB 레이아웃, 서브 UI 디자인 레이아웃, 인터랙션 디자인이란 무엇인지, 그리고 큰 틀에서의 UI작업 방식에 대해 정리해봤습니다. 실무나 교육기관에서 배운 내용을 기반으로 작성하는 글로 잘못된 내용이 포함될 수 있습니다.

 

 

GNB 레이아웃

- 마우스를 GNB메뉴에 Over 하거나 Click 했을 때 Drop-down되는 메뉴들을 "Mega Menu"라고 하며 상세 메뉴가 한 번에 나오는 구조를

가지고 있다.

- 메뉴 구조가 복잡하고 많은 대형 웹사이트에서 사용하고 있으며, 작은 사이트의 경우에도 쉬운 접근성 때문에 많이 사용하고 있다.

Mega Menu : "Mega Drop-down Menu"라고도 불린다.

 

GNB, Mega Menu Layout 예시 이미지

 

 

서브 UI디자인 레이아웃

1. GNB(Grobal Navigation Bar)

 

2. Sub Visual

- 서브 페이지의 메뉴에 맞는 아이덴티티로 표현된 영역을 말한다.

- 서브 비주얼의 유무는 기획단에서 결정되며, 디자인 기획에 따라 서브 비주얼이 있는 사이트도 있고 없는 사이트도 있다.

 

3. LNB(Local Navigation Bar)

- GNB와 별도로 서브페이지에 대한 탐색 기능이 제공된다.

- 각 depth로 구분이 되어 있으며 바로 해당 링크 페이지로 이동이 가능하다.

- 사용자가 현재 어떤 페이지까지 들어와 있는지 바로 인지 할 수 있게 경로를 보여주는 역할을 한다.

- 보통 페이지의 상단, GNB 메뉴와 컨텐츠 영역 사이에 위치하며, 디자인 기획에 따라 위치는 바뀔 수 있다.

 

4. Tab

- 하위 메뉴가 많아지면서 복잡해지는 구조를 한 줄에 정렬시키는 버튼 구조를 지칭한다.

- 2depth의 타이틀이 들어가 있기도 하며, 이 또한 디자인 기획에 따라 달라진다.

 

5. Contents

페이지의 메뉴나 브랜드의 톤 앤 매너, 디자인 기획에 따라 사진, 타이포그래피, 아이콘... 등으로 디자인 되어있다.

 

6. Footer

 

7. Location

- 현재 사용자가 위치한 곳이 어디인지를 알려준다.

- "라인 맵(Line Map)"이라 불리기도 한다.

 

8. Pagination(Numbering)

- 페이지의 번호를 정한 것으로 숫자로 표기되어 있다.

- 주로 게시판이나 리스트 페이지에 쓰인다.

 

 

인터랙션 디자인

좋은 사이트 디자인을 보고 그 디자인이 잘 된 이유를 이론적으로 분석해서 내 디자인에 접목할 수 있는 감각을 키우는 것이 중요 포인트 이다. 좋은 디자인과 개인의 디자인적 감각을 높이기 위해서는 많은 좋은 작업 물들을 보는 방법뿐이 없다고 생각한다.

 

 

인터랙션 디자인 순서 도식화