웹사이트나 앱을 만들다 보면 이런 말을 듣게 됩니다. "헤더에 GNB 넣고, 상세 페이지엔 브레드크럼 붙여 주세요." 무슨 암호처럼 들리지 않나요?
사실 이 말들은 전부 화면의 특정 자리를 가리키는 이름일 뿐입니다. 자리 이름만 알면 디자이너, 개발자와 대화가 훨씬 편해져요. 반대로 모르면 회의 내내 고개만 끄덕이게 됩니다. (다들 한 번쯤 그래 보셨죠?)
그래서 오늘은 화면을 이루는 영역 용어 6가지 — 헤더·푸터·GNB·LNB·탭바·브레드크럼을 그림과 함께 하나씩 풀어 드리겠습니다. 다 읽고 나면 화면이 '이름 붙은 지도'처럼 보일 거예요.
먼저 위 요약 카드로 전체 그림을 잡고 시작할게요. 특히 헷갈리기 쉬운 GNB와 LNB는 두 번째 비교 그림에 따로 정리해 두었습니다. 이제 하나씩 자세히 살펴보겠습니다.
1. 헤더 (Header)
헤더는 화면 맨 위에 놓이는 영역이에요. 건물로 치면 간판이 걸린 '1층 입구'라고 보면 됩니다.
헤더에는 보통 로고, 사이트 이름, 검색창, 그리고 주요 메뉴가 들어갑니다. 사용자가 화면을 열자마자 가장 먼저 보는 곳이라, "여기가 어디인지"와 "무엇을 할 수 있는지"를 알려주는 안내판 역할을 해요. 그래서 대부분의 사이트에서 헤더는 스크롤을 내려도 위에 고정되는 경우가 많습니다.
이럴 때 써요: "헤더에 로그인 버튼이랑 검색창 넣어 주세요."
2. 푸터 (Footer)
푸터는 화면 맨 아래에 놓이는 영역입니다. 헤더가 입구라면, 푸터는 '건물을 나가며 보는 안내데스크'예요.
푸터에는 회사 정보, 이용약관, 개인정보 처리방침, 고객센터 연락처, 저작권 표시 같은 것들이 모입니다. 자주 클릭하진 않지만 꼭 필요한 정보들이죠. 화면 맨 아래까지 내려온 사용자는 대개 "더 자세한 정보"를 찾는 사람이라, 그런 링크를 여기에 모아 둡니다.
이럴 때 써요: "푸터에 사업자 정보랑 개인정보 처리방침 링크 빠졌어요."
3. GNB (Global Navigation Bar)
GNB는 사이트 어디를 가든 항상 보이는 '전역(Global) 메뉴'예요. 대형마트의 층별 안내판처럼, 어느 코너에 있어도 큰 분류는 늘 같습니다.
여기서 '글로벌'은 세계가 아니라 사이트 전체에 공통이라는 뜻입니다. 보통 헤더 안에 가로로 놓이며, '홈·소개·서비스·문의'처럼 사이트의 가장 큰 메뉴들이 들어가요. 어느 페이지에 있든 GNB만 누르면 다른 큰 카테고리로 바로 이동할 수 있습니다.
이럴 때 써요: "GNB에 '요금제' 메뉴 하나 추가해 주세요."
4. LNB (Local Navigation Bar)
LNB는 특정 코너 안에서만 쓰는 '지역(Local) 메뉴'입니다. GNB가 층별 안내판이라면, LNB는 그 층 안의 진열대 표지판이에요.
GNB로 큰 카테고리에 들어오면, 그 안의 세부 메뉴를 보여주는 것이 LNB입니다. 주로 화면 왼쪽에 세로로 배치돼요. 예를 들어 '고객지원'이라는 GNB 메뉴에 들어가면, 왼쪽에 '공지사항·자주 묻는 질문·1:1 문의' 같은 하위 메뉴가 뜨는데 이것이 바로 LNB입니다. GNB와 LNB, 이름은 비슷하지만 담당 범위가 전혀 다르죠?
이럴 때 써요: "이 섹션은 하위 메뉴가 많으니 왼쪽에 LNB로 정리해요."
5. 탭바 (Tab Bar)
탭바는 모바일 앱 맨 아래에 놓이는 이동 바예요. 엄지손가락으로 툭툭 눌러 주요 화면을 오가는 리모컨이라고 생각하면 쉽습니다.
인스타그램이나 유튜브 앱을 떠올려 보세요. 화면 아래에 홈·검색·마이페이지 같은 아이콘 몇 개가 늘 보이죠? 그게 바로 탭바입니다. 손이 닿기 쉬운 하단에 두어, 앱의 핵심 화면 3~5개를 한 번의 터치로 이동하게 해줘요. 참고로 이 하단 바를 안드로이드에서는 '바텀 내비게이션'이라 부르기도 합니다.
이럴 때 써요: "탭바 아이콘은 4개까지만 두는 게 깔끔해요."
6. 브레드크럼 (Breadcrumb)
브레드크럼은 '지금 내가 어디에 있는지'를 보여주는 경로 표시예요. 이름 그대로 헨젤과 그레텔이 길에 떨어뜨린 빵 부스러기에서 따왔습니다.
보통 '홈 > 카테고리 > 상세'처럼 페이지 위쪽에 한 줄로 표시됩니다. 사용자가 지금 사이트의 어느 깊이에 들어와 있는지 알려주고, 중간 단계를 눌러 상위 페이지로 쉽게 돌아가게 해줘요. 페이지가 깊게 얽힌 쇼핑몰에서 특히 고마운 존재입니다. 뒤로가기를 몇 번씩 누르지 않아도 되니까요.
이럴 때 써요: "상품 상세 페이지에 브레드크럼 넣어서 길 잃지 않게 해요."
자주 묻는 질문
GNB와 LNB는 결국 뭐가 다른가요?
담당하는 범위가 다릅니다. GNB는 사이트 전체에서 공통으로 보이는 가장 큰 메뉴이고, LNB는 그중 한 카테고리에 들어갔을 때만 나타나는 하위 메뉴예요. GNB로 큰 방에 들어가면, 그 방 안을 안내하는 것이 LNB라고 기억하면 쉽습니다.
탭바와 GNB는 같은 건가요?
역할은 비슷하지만 자리와 기기가 다릅니다. GNB는 주로 PC 화면의 위쪽에 가로로 놓이고, 탭바는 모바일 앱의 아래쪽에 놓여요. 둘 다 주요 화면을 오가는 통로이지만, 탭바는 엄지손가락이 닿기 쉬운 하단에 있다는 점이 핵심입니다.
이 용어들을 꼭 외워야 하나요?
전부 암기할 필요는 없습니다. 다만 디자이너나 개발자와 이야기할 때 이 이름들을 알아두면 "화면 위쪽 그거"라고 돌려 말하지 않아도 되니 소통이 훨씬 빨라져요. 자주 쓰는 헤더·푸터·GNB 정도만 익혀도 충분합니다.
정리하며
화면을 이루는 여섯 자리, 이제 이름이 눈에 들어오시나요? 헤더는 맨 위, 푸터는 맨 아래, GNB는 전역 메뉴, LNB는 지역 메뉴, 탭바는 앱 하단, 브레드크럼은 현재 위치. 이 지도만 있어도 다음 회의가 한결 편안해질 겁니다.
다음 편에서는 화면 안에서 직접 값을 입력하는 자리들 — 입력 컨트롤 용어(라디오버튼·체크박스·토글·드롭다운·슬라이더·데이트피커 등)를 그림과 함께 풀어 드릴게요. 버튼과 입력창의 진짜 이름이 궁금하다면, 다음 글에서 만나요.
이 글의 용어 정의는 웹 표준과 일반적인 UI 설계 관례를 기준으로 정리했으며, 2026-07-30 기준입니다.
이 시리즈의 다른 글
- 메뉴 아이콘 이름 4가지 — 햄버거·케밥·미트볼·도너, 왜 다 음식일까요?
- 알림 UI 용어 6가지 — 팝업·모달·얼럿·토스트·스낵바·바텀시트 뜻
- 입력 컨트롤 용어 8가지 — 라디오·체크박스·토글·드롭다운 뜻
- 로딩 UI 용어 4가지 — 스피너·스켈레톤·프로그레스바·스플래시 뜻
참고 출처: MDN Web Docs — HTML 요소 레퍼런스