Global Navigation Bar
홈페이지 맨 위에 늘 있는 메뉴줄이에요
어느 페이지에서든 같은 자리에 있어요
이럴 때 써요
- 쇼핑몰 맨 위 '홈·상품·이벤트' 메뉴
- 회사 홈페이지의 '회사소개·제품·채용' 줄
- 은행 사이트에서 '조회·이체' 고를 때
#GNB#GlobalNavigationBar#상단메뉴#홈페이지
Local Navigation Bar
큰 메뉴 안의 작은 메뉴들을
옆에 세로로 줄 세워 보여줘요
LOOPhyogwa.shop/help
효과몰홈상품이벤트고객센터
공지사항자주 묻는 질문1:1 문의배송 안내공지사항
추석 연휴 배송 안내
개인정보 처리방침 변경
앱 새 버전 소식
이럴 때 써요
- 고객센터에서 '공지사항·자주 묻는 질문' 고를 때
- 구청 홈페이지의 '민원 안내' 아래 메뉴
- 사내 문서 사이트의 장별 메뉴
#LNB#LocalNavigationBar#사이드메뉴#하위메뉴
Hamburger menu
줄 세 개 버튼을 누르면
숨어 있던 메뉴가 펼쳐져요
이럴 때 써요
- 모바일 쇼핑몰 오른쪽 위 ☰ 버튼
- 메뉴가 많아 휴대폰 화면에 다 안 들어갈 때
- 회사 홈페이지를 폰으로 볼 때의 메뉴
#햄버거메뉴#HamburgerMenu#메뉴버튼#모바일홈페이지
Drawer
화면 옆에서 메뉴판이
서랍처럼 스르륵 밀려 나와요
LOOP오늘 도착 상품
타임 특가
이번 주 베스트
새로 들어온 상품
리뷰 많은 상품
이럴 때 써요
- 배달앱에서 왼쪽 위를 눌러 내 정보 볼 때
- 메일 앱에서 받은편지함·보낸편지함 고를 때
- 대시보드에서 필터 판을 옆에서 꺼낼 때
#드로어#Drawer#옆에서나오는메뉴#앱메뉴
Mega menu
메뉴에 마우스를 올리면
하위 메뉴가 큰 판에 한눈에 펼쳐져요
이럴 때 써요
- 백화점 몰에서 '카테고리'에 마우스 올릴 때
- 대학 홈페이지의 '입학·학사·캠퍼스' 메뉴
- 상품 종류가 많은 쇼핑몰 홈페이지
#메가메뉴#MegaMenu#펼침메뉴#쇼핑몰
Dropdown menu
버튼을 누르면 바로 아래로
작은 메뉴 목록이 툭 내려와요
이럴 때 써요
- 쇼핑몰에서 '내 이름 ▾' 눌러 주문 내역 갈 때
- 게시판 글의 '··· 더보기' 버튼
- 대시보드 오른쪽 위 내 계정 메뉴
#드롭다운메뉴#DropdownMenu#펼침목록#계정메뉴
Breadcrumb
'홈 › 패션 › 신발'처럼
지금 어디쯤 왔는지 길을 보여줘요
이럴 때 써요
- 쇼핑몰 상품 페이지 위쪽의 분류 경로
- 단계가 깊은 관공서 안내 페이지
- 사내 문서의 '전체 › 2025 › 회의록' 표시
#브레드크럼#Breadcrumb#경로표시#상세페이지
Tabs
제목을 누를 때마다
아래 내용이 그 자리에서 바뀌어요
LOOP상품정보리뷰 128문의 4
· 무게 230g, 아주 가벼워요
· 푹신한 쿠션 밑창
· 사이즈 230~290
이럴 때 써요
- 쇼핑몰 상품 페이지의 '상품정보·리뷰·문의'
- 뉴스 앱의 '정치·경제·사회'
- 상세페이지의 긴 설명을 나눠 보여줄 때
#탭#Tabs#내용전환#상세페이지
Segmented control
알약 모양 칸 안에서
흰 조각이 미끄러지며 하나를 골라요
이럴 때 써요
- 걸음 수 앱에서 '일간·주간·월간' 바꿀 때
- 지도 앱의 '자동차·대중교통·도보'
- 대시보드 그래프 기간 바꾸기
#세그먼티드컨트롤#SegmentedControl#보기전환#대시보드
Bottom tab bar
앱 맨 아래 아이콘 메뉴로
엄지로 화면을 바로바로 옮겨요
이럴 때 써요
- 카카오톡 아래 '친구·채팅·더보기'
- 배달앱 아래 '홈·검색·찜·주문내역'
- 모바일 홈페이지 맨 아래 고정 메뉴
#하단탭바#BottomTabBar#앱메뉴#모바일
Floating action button
화면 구석에 동그란 버튼이
내용이 움직여도 늘 떠 있어요
이럴 때 써요
- 커뮤니티 앱 오른쪽 아래 '+ 글쓰기'
- 쇼핑몰 구석의 '상담하기' 버튼
- 홈페이지 구석의 '문의하기' 버튼
#플로팅액션버튼#FloatingActionButton#떠있는버튼#글쓰기버튼
Pagination
긴 목록을 여러 쪽으로 나누고
아래 번호를 눌러 넘겨 봐요
LOOP전체 상품총 15개 · 1/5쪽
니트 가디건₩39,000
옥스포드 셔츠₩29,000
와이드 슬랙스₩45,000
이럴 때 써요
- 게시판 맨 아래 '1 2 3 4 5'
- 쇼핑몰 검색 결과 다음 쪽 볼 때
- 대시보드 표에서 다음 50줄 볼 때
#페이지네이션#Pagination#쪽번호#게시판
Load more button
'더보기'를 누를 때마다
목록 아래에 몇 개씩 더 붙어요
LOOP새 소식
1가을 신상 입고 안내
2주말 특가 미리 보기
3앱 새 버전 소식
4추석 배송 일정
5포인트 2배 적립
6리뷰 쓰고 쿠폰 받기
더보기 3/12 ∨
이럴 때 써요
- 쇼핑몰 상품 목록 맨 아래 '더보기 ∨'
- 공지사항에서 지난 글 더 볼 때
- 홈페이지 '최근 소식'을 3개씩 늘려 볼 때
#더보기버튼#LoadMoreButton#목록펼치기#상품목록
Stepper
① ② ③ 단계 중에
지금 어디인지 동그라미로 알려줘요
LOOP장바구니 2개
니트 가디건 외 1개 · ₩68,000
다음
이럴 때 써요
- 쇼핑몰 결제할 때 '장바구니 → 결제 → 완료'
- 회원가입의 '약관 동의 → 정보 입력' 단계
- 신청서를 여러 쪽으로 나눠 받을 때
#스테퍼#Stepper#단계표시#결제과정
Table of contents
긴 글의 소제목을 모아 두고
누르면 그 부분으로 바로 가요
LOOPhyogwa.shop/about
1. 회사 소개2. 서비스3. 요금 안내4. 문의하기1. 회사 소개
2010년 서울에서 시작했어요
직원 120명이 함께해요
3. 요금 안내
기본 월 9만 원
프리미엄 월 19만 원
4. 문의하기
help@hyogwa.shop
평일 9시~18시
이럴 때 써요
- 블로그 긴 글 옆의 '목차' 상자
- 위키 문서 맨 위의 차례
- 보고서·설명서를 웹 문서로 옮길 때
#목차#TableOfContents#차례#문서
Context menu
오른쪽 클릭한 바로 그 자리에
그 대상에 맞는 메뉴가 떠요
이럴 때 써요
- 파일에 오른쪽 클릭해서 '이름 바꾸기'
- 카톡 메시지 길게 눌러 '답장·복사'
- 대시보드 표의 한 줄을 눌러 '내보내기'
#컨텍스트메뉴#ContextMenu#우클릭메뉴#파일관리
Command palette
단축키 하나로 검색창을 띄워
원하는 기능을 이름으로 찾아 실행해요
LOOPhyogwa.shop/admin
효과몰관리자 · 메뉴 38개
주문 내역 보기↵
결제 수단 변경
알림 설정
로그아웃
이럴 때 써요
- 노션에서 Ctrl+K로 페이지 찾을 때
- 메뉴가 너무 많은 관리자 화면에서 기능 찾기
- 대시보드에서 보고서 이름으로 바로 가기
#커맨드팔레트#CommandPalette#단축키검색#관리자화면
Fat footer
페이지 맨 아래에 사이트 전체
바로가기를 크게 모아 둬요
LOOPhyogwa.shop
효과몰
효과몰 · 서울시 중구 · 사업자 123-45-67890 · © 2026
이럴 때 써요
- 쇼핑몰 맨 아래 '회사소개·이용약관·고객센터'
- 회사 홈페이지 맨 아래 주소·연락처
- 끝까지 읽은 사람에게 다음 갈 곳을 보여줄 때
#팻푸터#FatFooter#하단정보#회사홈페이지