🌐⚙️ "UI 디자인의 핵심! GNB, SNB, LNB, FNB로 완성하는 효율적 네비게이션

안녕하세요! 오늘은 웹사이트 기획자라면 꼭 알아야 할 UI 용어인 GNB, LNB, SNB, FNB에 대해 자세히 알아보려고 해요.

이 용어들은 웹사이트의 사용자 경험을 향상시키는 데 매우 중요한 역할을 하거든요. 그럼 하나씩 살펴볼까요?

 

1. GNB (Global Navigation Bar)

GNB는 웹사이트의 최상단에 위치한 메뉴로, 전체 사이트에서 공통적으로 노출되는 메뉴를 의미해요.

사용자가 웹사이트의 주요 카테고리로 빠르게 이동할 수 있도록 도와주는 역할을 하죠.

GNB는 웹사이트의 이탈률과 전환율에 큰 영향을 미치기 때문에, 배열 순서를 충분히 고려해서 배치해야 해요.

예를 들어, 가장 중요한 메뉴는 왼쪽에 배치하고, 덜 중요한 메뉴는 오른쪽에 배치하는 것이 좋답니다.

이미지 출처

2. LNB (Local Navigation Bar)

LNB는 GNB 메뉴를 클릭하거나 마우스 오버 상태일 때 나타나는 소메뉴를 의미해요.

사용자는 이 메뉴를 통해 최상위 카테고리 하위에 위치한 특정한 페이지로 쉽게 이동할 수 있어요.

LNB는 사용자가 원하는 정보를 빠르게 찾을 수 있도록 도와주기 때문에, 사용자 경험을 향상시키는 데 큰 역할을 해요.

LNB의 디자인은 직관적이어야 하며, 사용자가 쉽게 이해할 수 있도록 구성해야 해요.

3. SNB (Side Navigation Bar)

SNB는 사이드에 위치한 내비게이션 바로, 주로 서브 카테고리나 추가적인 메뉴를 제공해요.

사용자가 페이지를 스크롤할 때도 항상 보이도록 고정할 수 있어요.

이렇게 하면 사용자는 언제든지 다른 페이지로 쉽게 이동할 수 있죠.

SNB는 특히 콘텐츠가 많은 웹사이트에서 유용하게 사용되며, 사용자가 원하는 정보를 빠르게 찾을 수 있도록 도와줘요.

4. FNB (Footer Navigation Bar)

FNB는 웹사이트의 하단에 위치한 내비게이션 바로, 주로 사이트의 정보나 정책, 연락처 등의 링크를 포함해요.

사용자가 페이지를 스크롤하여 하단으로 이동했을 때, 필요한 정보를 쉽게 찾을 수 있도록 도와주는 역할을 해요.

FNB는 사용자가 웹사이트를 탐색하는 데 있어 중요한 요소 중 하나로, 사용자에게 필요한 정보를 제공하는 데 큰 도움이 돼요.

5. UI 디자인에서의 중요성

이러한 내비게이션 바들은 웹사이트의 UI 디자인에서 매우 중요한 요소예요.

사용자 경험을 향상시키고, 웹사이트의 이탈률을 줄이는 데 큰 역할을 하죠.

기획자는 이러한 요소들을 잘 이해하고, 사용자에게 최적의 경험을 제공할 수 있도록 디자인해야 해요.

특히, 각 내비게이션 바의 위치와 배열은 사용자의 행동에 큰 영향을 미치기 때문에, 신중하게 고려해야 해요.

6. 기획자가 알아야 할 팁

기획자로서 UI 디자인을 할 때는 다음과 같은 팁을 기억해두면 좋아요:

• 사용자 중심의 디자인 : 사용자의 행동과 필요를 고려하여 내비게이션 바를 설계하세요.
• 일관성 유지 : GNB, LNB, SNB, FNB의 디자인을 일관되게 유지하여 사용자가 혼란스럽지 않도록 하세요.
• 테스트와 피드백 : 실제 사용자에게 테스트를 진행하고 피드백을 받아 개선점을 찾아보세요.

이렇게 GNB, LNB, SNB, FNB에 대해 알아보았어요. 이 용어들을 잘 이해하고 활용하면, 웹사이트의 사용자 경험을 크게 향상시킬 수 있을 거예요. 여러분도 기획자로서 이 지식을 잘 활용해보세요! 😊

이미지 출처

 

 

이런 자료를 참고 했어요.

[1] 인프런 - 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런) (https://www.inflearn.com/blogs/3780?srsltid=AfmBOorUxcPJLVwo8gnWd60IOwFGzbVo9a_Mf4iDu3t4khwqF4nhWZxZ)

[2] 네이버 블로그 - [#96] 웹 디자인/웹 표준 코딩 용어 'GNB, LNB, SNB, FNB' 정리 (https://m.blog.naver.com/dkdk7422/222584069495)

[3] 티스토리 - GNB·LNB·SNB·FNB 용어 설명 - 용고리의 지식상자 - 티스토리 (https://youngkeol.tistory.com/29)

[4] 브런치스토리 - 기획자를 위한 UI/UX 용어 정리 (https://brunch.co.kr/@kgt8431/108)