← 전체 카테고리
02

내비게이션

"메뉴 만들어주세요"만큼 위험한 요청이 없습니다. 탭인지 드롭다운인지 드로어인지에 따라 개발 방식도, 모바일 대응도, 공수도 전부 달라집니다.

16개 용어16개 라이브 데모
탭과 탭바는 다른 물건입니다

이름이 비슷해서 가장 많이 섞이는 구역입니다. 탭은 같은 화면에서 내용만 바꾸고, 탭바는 화면 자체를 이동합니다. 그리고 드롭다운 메뉴(이동·실행)와 셀렉트(값 선택)도 완전히 다릅니다 — 후자는 04번 카테고리에 있습니다.

02

탭

Tabs

이런 상황에서 나옵니다

"상품정보 / 리뷰 / 배송 이렇게 나눠주세요" — 같은 화면 안에서 내용을 나눌 때.

같은 화면 안에서 내용만 바꿔 보여주는 컨트롤입니다. 페이지 이동 없이 콘텐츠가 전환됩니다.

눈으로 보기 직접 눌러보세요
상품의 소재, 사이즈, 원산지 정보가 표시됩니다.

눌러보세요. 주소는 그대로인데 아래 내용만 바뀝니다.

헷갈리는 지점

탭을 눌렀는데 페이지가 이동하면 그건 탭이 아니라 메뉴입니다. 실무에서 이 둘을 섞어 쓰면 개발자가 구현 방식(내용 교체 vs 페이지 이동)을 잘못 잡습니다. 탭 개수가 5개를 넘으면 다른 UI를 검토하세요.

실무에서 쓸 때

탭으로 나눈 내용은 검색엔진에 노출되지 않을 수 있습니다. 상품 상세처럼 SEO가 중요한 페이지라면 탭 대신 세로로 쭉 나열하는 것도 검토하세요.

이렇게 요청하세요

상품 상세를 탭으로 나눠주세요 — 상품정보 / 리뷰 / 배송·교환. 페이지 이동 없이 내용만 교체되게 하고, 새로고침해도 선택한 탭이 유지되게 URL에 반영해주세요.

03

탭바

Tab Bar · 바텀 내비게이션

이런 상황에서 나옵니다

"앱처럼 하단에 메뉴 넣어주세요" — 모바일 웹/앱 메인 내비게이션 논의에서.

모바일 화면 하단에 고정된 메인 메뉴입니다. 앱의 핵심 기능 3~5개를 항상 손 닿는 곳에 두는 방식입니다.

눈으로 보기 직접 눌러보세요
선택한 메뉴의 화면이 여기 표시됩니다.
헷갈리는 지점

위의 "탭"과 이름만 같고 역할이 완전히 다릅니다. 탭은 콘텐츠 전환, 탭바는 화면 이동입니다. 항목은 5개를 넘기지 않는 게 원칙입니다.

이렇게 요청하세요

모바일에서 하단 탭바를 넣어주세요. 항목은 홈/검색/찜/내정보 4개이고, 화면 하단에 고정합니다. 세이프 에어리어(홈 인디케이터)를 피해서 배치해주세요.

04

햄버거 메뉴

Hamburger Menu

이런 상황에서 나옵니다

"모바일은 햄버거로 넣어주세요" — 모바일 메뉴 처리 방식을 정할 때.

가로줄 3개로 된 아이콘입니다. 누르면 숨어 있던 메뉴가 나타납니다.

눈으로 보기 직접 눌러보세요
서비스명
햄버거 아이콘을 눌러보세요.
메뉴
헷갈리는 지점

햄버거는 아이콘 이름일 뿐이고, 눌렀을 때 열리는 건 보통 드로어입니다. 메뉴를 숨기면 발견율이 크게 떨어지므로, PC에서까지 햄버거로 숨기는 건 신중해야 합니다.

실무에서 쓸 때

아이콘 옆에 "메뉴"라는 글자를 함께 두면 클릭률이 올라간다는 실험 결과가 많습니다. 공간이 허락하면 글자를 넣으세요.

이렇게 요청하세요

모바일(767px 이하)에서 GNB를 햄버거 아이콘으로 접고, 누르면 좌측 드로어가 열리게 해주세요. 아이콘에 스크린리더용 이름("메뉴 열기")을 넣고, 드로어는 딤 클릭과 Esc로 닫히게 해주세요.

05

드로어

Drawer · 사이드 메뉴

이런 상황에서 나옵니다

"옆에서 슥 나오는 메뉴로 해주세요" — 서랍처럼 밀려 나오는 패널을 말할 때.

화면 가장자리에서 밀려 나오는 패널입니다. 서랍처럼 열린다고 해서 드로어입니다.

눈으로 보기 직접 눌러보세요
내 계정

바깥 어두운 곳을 눌러도 닫힙니다. 이 동작을 설계서에 꼭 적어야 합니다.

헷갈리는 지점

햄버거 아이콘 → 드로어가 열리는 구조가 일반적입니다. 즉 햄버거는 여는 버튼, 드로어는 열리는 것입니다. 드로어 뒤를 딤 처리하면 모달, 안 하면 논모달입니다.

이렇게 요청하세요

좌측에서 밀려 나오는 드로어를 만들어주세요. 너비 280px, 뒤는 딤 처리하고 딤 클릭·Esc로 닫히게 해주세요. 열려 있는 동안 뒤쪽 스크롤은 막아주세요.

07

메가 메뉴

Mega Menu

이런 상황에서 나옵니다

"카테고리 전체를 한 번에 보여주고 싶어요" — 쇼핑몰·기업 사이트에서.

GNB에 마우스를 올렸을 때 화면 폭 전체로 펼쳐지는 대형 다단 메뉴입니다. 항목이 많은 쇼핑몰·기업 사이트에서 씁니다.

눈으로 보기 직접 눌러보세요
신상품베스트
여성아우터상의
남성셔츠팬츠
잡화가방신발
헷갈리는 지점

항목이 많다고 무조건 메가 메뉴가 답은 아닙니다. 모바일에서는 그대로 못 쓰기 때문에 별도 구조를 하나 더 설계해야 합니다 = 작업량 증가.

이렇게 요청하세요

"전체 카테고리"에 메가 메뉴를 붙여주세요. 3단 구성이고, 호버뿐 아니라 <b>클릭으로도 열리게</b> 해주세요. 모바일에서는 메가 메뉴 대신 드로어 안의 아코디언으로 대체해주세요.

09

페이지네이션

Pagination · 페이징

이런 상황에서 나옵니다

"목록을 몇 개씩 끊어서 보여줄까요?" — 목록 화면 설계에서 반드시 나오는 결정.

목록을 페이지 번호로 나눠 보여주는 방식입니다. 1·2·3… 눌러서 이동합니다.

눈으로 보기 직접 눌러보세요
헷갈리는 지점

"몇 번째 항목"을 다시 찾아가야 하는 서비스(게시판·관리자 화면)에는 페이지네이션이 유리합니다. 반대로 둘러보는 성격의 콘텐츠는 무한 스크롤이 나을 수 있습니다.

이렇게 요청하세요

목록은 한 페이지 20개씩 페이지네이션으로 해주세요. 현재 페이지는 URL에 반영해서 새로고침·뒤로가기해도 유지되게 해주세요.

10

더보기 버튼

Load More

이런 상황에서 나옵니다

"스크롤은 부담스럽고 페이지 넘기기도 싫어요" — 절충안을 찾을 때.

버튼을 누르면 다음 목록이 아래에 이어 붙는 방식입니다. 페이지네이션과 무한 스크롤의 중간입니다.

눈으로 보기 직접 눌러보세요
헷갈리는 지점

무한 스크롤과 달리 사용자가 멈출 지점을 스스로 정할 수 있고, 푸터에도 도달할 수 있습니다. 셋 중 무엇을 쓸지는 기획 단계에서 반드시 정해야 합니다.

이렇게 요청하세요

목록을 20개씩 보여주고 하단에 "더보기" 버튼을 넣어주세요. 누르면 다음 20개가 아래에 이어 붙고, 더 없으면 버튼을 숨겨주세요.

11

무한 스크롤

Infinite Scroll

이런 상황에서 나옵니다

"SNS처럼 계속 내려가게 해주세요" — 피드형 서비스 논의에서.

스크롤이 바닥에 닿으면 자동으로 다음 목록을 불러오는 방식입니다. SNS 피드가 대표적입니다.

눈으로 보기 직접 눌러보세요

스크롤을 내려보세요. 바닥에서 계속 로딩 표시가 나옵니다 — 푸터에 닿을 수 없습니다.

헷갈리는 지점

푸터에 영원히 도달하지 못하는 문제가 생깁니다. 회사 정보·약관이 푸터에만 있는 사이트라면 치명적입니다. 또 "아까 봤던 그 항목"으로 되돌아가기가 어렵습니다.

실무에서 쓸 때

푸터 정보를 사이드바나 헤더 메뉴로 옮겨 두면 이 문제를 피할 수 있습니다. 그리고 뒤로가기 했을 때 보던 위치로 돌아오게 하는 처리를 반드시 요청하세요.

이렇게 요청하세요

피드를 무한 스크롤로 해주세요. 단, 푸터 정보는 별도 메뉴로 접근 가능하게 하고, 상세로 갔다가 뒤로가기 하면 보던 위치로 복원되게 해주세요.

12

스텝 인디케이터

Step Indicator · 스텝퍼(진행)

이런 상황에서 나옵니다

"몇 단계 남았는지 보여주세요" — 회원가입·주문 같은 여러 단계 흐름에서.

여러 단계로 나뉜 과정에서 지금 몇 단계인지, 몇 개 남았는지를 보여주는 표시입니다. 회원가입·주문·결제에 씁니다.

눈으로 보기 직접 눌러보세요
✓
✓
3
4
장바구니배송정보결제완료
헷갈리는 지점

"스텝퍼"라는 단어는 숫자 증감 컨트롤(- 1 +)을 뜻하기도 합니다. 회의에서 "스텝퍼 넣어주세요"를 들으면 어느 쪽인지 반드시 되물어야 합니다.

이렇게 요청하세요

주문 과정에 4단계 스텝 인디케이터를 넣어주세요 — 장바구니 / 배송정보 / 결제 / 완료. 완료한 단계는 체크 표시하고, 이전 단계로 되돌아갈 수 있게 해주세요. (숫자 증감 스텝퍼가 아니라 진행 단계 표시입니다)

14

스티키 · 픽스드

Sticky · Fixed · 고정

이런 상황에서 나옵니다

"이거 고정해주세요" — 어느 쪽인지 반드시 되물어야 하는 요청.

스티키는 스크롤하다 특정 지점에 닿으면 화면에 붙는 것, 픽스드는 처음부터 끝까지 항상 같은 자리에 고정되는 것입니다.

눈으로 보기 직접 눌러보세요
여기부터 붙습니다 (sticky)

위 영역을 스크롤해보세요. 파란 바가 위에 닿는 순간부터 따라붙습니다.

헷갈리는 지점

둘 다 한국말로는 "고정"이라 부르는 바람에 자주 섞입니다. "처음부터 떠 있나요, 스크롤하다 붙나요?"라고 물으면 바로 구분됩니다.

이렇게 요청하세요

이 요소를 스크롤하다가 화면 상단에 닿으면 붙게(sticky) 해주세요. 처음부터 떠 있는 fixed가 아니라, 원래 자리에 있다가 상단에 도달할 때부터 고정되는 방식입니다.

15

플로팅 버튼 · FAB

Floating Action Button

이런 상황에서 나옵니다

"글쓰기 버튼을 항상 보이게 해주세요" — 핵심 행동을 어디서든 누르게 하고 싶을 때.

콘텐츠 위에 떠 있는 원형 버튼입니다. 보통 화면 우측 하단에 두고, 그 화면의 가장 중요한 행동 하나를 담습니다.

눈으로 보기 직접 눌러보세요
새 글 쓰기 화면으로 이동
헷갈리는 지점

FAB은 Material Design 용어입니다. 한 화면에 1개가 원칙입니다. 여러 개 띄우면 무엇이 중요한지 알 수 없어집니다. 하단 콘텐츠를 가리는 문제도 항상 확인해야 합니다.

이렇게 요청하세요

우측 하단에 글쓰기 FAB(플로팅 버튼)을 넣어주세요. 크기 56px, 아이콘에 스크린리더용 이름을 넣고, 목록 마지막 항목이 가려지지 않게 하단 여백을 확보해주세요.

16

케밥 · 미트볼 · 벤토 메뉴

Kebab · Meatballs · Bento Menu

이런 상황에서 나옵니다

"점 세 개 아이콘 눌렀을 때…" — 아이콘 모양별 이름을 알아야 정확히 지목됩니다.

아이콘 모양을 음식에 빗댄 이름들입니다. 케밥은 점 세 개 세로(⋮), 미트볼은 점 세 개 가로(⋯), 벤토는 격자 아이콘(⋮⋮⋮), 햄버거는 가로줄 세 개(≡)입니다.

눈으로 보기 직접 눌러보세요
≡
햄버거
⋮
케밥
⋯
미트볼
⠿
벤토

전부 실제 디자인 시스템에서 쓰는 이름입니다. 모양이 다르면 역할도 다릅니다.

헷갈리는 지점

농담 같지만 실제로 디자인 시스템 문서에 쓰이는 정식 명칭입니다. 아이콘을 "점 세 개짜리"라고 부르면 가로인지 세로인지 알 수 없습니다. 케밥은 보통 항목별 추가 메뉴, 미트볼은 영역 전체의 추가 메뉴에 씁니다.

이렇게 요청하세요

목록 각 항목 우측에 케밥 메뉴(세로 점 세 개)를 넣고, 누르면 수정/삭제 드롭다운이 나오게 해주세요. 상단 툴바에는 미트볼 메뉴(가로 점 세 개)로 전체 설정을 넣어주세요.