웹 사이트의 계층 구조 이해

 기본적인 웹 사이트의 구조는  GNB - LNB - SNB - Contents - FNB 순으로 구분되고, 가장 상위에 있는 GNB부터 가장 하위에 있는 FNB까지 계층 구조를 가지고 있습니다.

 

메뉴 구조 용어

- GNB(Global Navigation Bar) : 웹 사이트에서 가장 최상위 메뉴를 정의하는 역할 - LNB(Local Navigation Bar) : GNB의 아래 단계로 서버 메뉴를 구성 - SNB(Side Navigation Bar) : GNB와 LNB를 제외한 나머지 메뉴들을 모두 지칭 - Contents : 웹 사이트 화면의 콘텐츠 영역을 의미 - FNB(Foot Navigation Bar) : 일반적으로 기업의 정보, 저작권, 사이트맵 등을 표기하는 용도로 사용

 

 

 서비스를 기획할 때 가장 신경써야 하는 부분은 GNB, LNB, FNB라고 합니다. 한번 결정된 컨셉은 쉽게 변경할 수 없기 때문입니다. 이 부분들은 모든 화면에서 공통적으로 적용되는 영역으로 변경시에 모든 페이지에 일괄적으로 적용됩니다. 

 

웹사이트 계층 구조 예시

 

 위의 이미지는 이러한 계층 구조에 대해 표현한 것입니다. 일반적으로 최상단에 GNB를 배치하고 그 아래에 LNB를 배치합니다. 컨텐츠의 좌측 또는 우측에 SNB를 넣고 화면 하단에는 FNB를 넣습니다. 하지만 디자인에는 정해진 것은 없으니 사용자의 편의성을 고려하여 배치할 수 있습니다.