웹사이트 구성용어
-UI용어
-웹UI용어
.
.
.
.

헤더:Header

웹사이트 최상단의 로고, GNB등 주요기능이 포함된 영역
모든페이지에서 항상 상단에 고정되어 있다.
.

GNB=메인메뉴

GNB란 Global Navigation Bar의 약자로, 웹사이트 전체에 동일하게 적용되는 내비게이션 바
보통 웹사이트 최상단에 위치하며 어떤 페이지를 클릭해도 동일하게 보여집니다.
사용자가 원하는 메뉴로 빠르게 이동할 수 있도록 링크가 포함되어 있다.
웹사이트가 제공하는 모든 서비스를 표현하며 직관적으로 구성하는 것이 좋다.
.

LNB=서브메뉴

LNB란 Local Navigation Bar의 약자로, GNB를 클릭하거나 마우스를 댔을 때 나오는 하위 카테고리 리스트
특정 GNB 카테고리에 해당하는 특정 페이지로 연결되는 링크 역할을 하기 때문에 웹사이트의 특정 지역을 한정한다는 의미로 Local 이라고 표현한다. 서브 메뉴라고도 할 수 있다.

SNB

SNB는 Side Navigation Bar의 약자로, 보통 왼쪽이나 오른쪽에 위치해 Side라고 표현한다.
보통 메인 메뉴와 서브 메뉴를 제외한 기타 메뉴로 구성하며 사이드 메뉴라고도 할 수 있다.
.

햄버거 메뉴

화면에 모든 항목을 드러내는 방식이 아닌 메뉴를 클릭하면 숨겨져 있던 메뉴들이 펼쳐지는 요소를 말한다.
일반적으로 헤더 내 모서리에 위치하며 3개의 가로선으로 된 아이콘을 주로 사용한다.

FNB=푸터

FNB란 Foot Navigation Bar의 약자로, GNB와 동일하게 모든 웹페이지 가장 하단에 위치한 내비게이션 바
보통 웹페이지가 기업이라면, 기업의 로고와 연락처, 주소 등 웹페이지의 정보를 기재합니다. 가장 하단에 있다는 의미로 Foot 이라고 표현합니다.

팝업과 모달

팝업창(Popup)

pop하고 튀어나오는 up 웹페이지 표시 방법
열려있는 브라우저 위에 또 다른 브라우저가 열리는 것
주로 광고, 공지 등을 알리는 용도로 활용된다
트래픽증가, 메모리낭비 때문에 브라우저 자체에서 팝업차단을 기본값으로 설정해둔다>팝업창의 사용이 줄고 있다

모달창

.

모달(Modal)

웹에서 새 창을 띄우는 팝업창과는 달리 같은 브라우저 내부에서 상위 레이어를 띄우는 방식을 사용하는 창이다
모달창이 띄워져 있는 경우 모달창을 종료하지 않는 이상 원래 창 화면을 사용할 수 없다.
1. 서비스 내에서 다음 단계를 진행하기 위해 사용하는 경우가 많다.
2. 반드시 사용자에게 노출되어야 하는 창, 사용자의 이목을 집중시키기 때문에 신중히 사용할 필요가 있다.
애플에서는 모달을 최소화하여 사용하라 함
.

논 모달(Non-Modal)

모달과 내부에서 상위레이어를 띄우는 방식은 동일하다.
그러나 모달과 다르게 논 모달은 새로운 상위 레이어와 기존 페이지 동시에 작동할 수 있다.

브레드크럼:Breadcrumbs

복잡한 웹사이트 안에서 방문자가 길을 잃지 않도록 현재 위치한 페이지가 어디인지 단계별로 나타내는 구성 요소
보통 메인 콘텐츠 영역 상단에 위치합니다. 방문자가 방문 가능한 페이지가 다양하고 카테고리의 깊이가 깊을수록 유용하게 쓰일 수 있다.

페이지네이션

목록 하단에 숫자가 나열되어 있다
콘텐츠를 여러 페이지로 나눠서 보여주는 인터페이스
리스트가 많아 세로로 스크롤이 길어지는 경우 사용한다

파비콘

웹사이트방문 시 브라우저 탭 좌측에 나타나는 아이콘

출처:어센트 코리아 교육자료