웹·M웹 UI 표준 용어 가이드

웹·M웹 화면 용어 가이드

기획서나 디자인 리뷰에서 "여기 이 부분…"이라고 말하는 대신 쓸 수 있는 표준 용어 모음입니다. 아래에서 PC 웹 · 모바일 웹 · 컴포넌트 세 화면을 오가며, 궁금한 영역을 직접 클릭해 보세요. 모달·토스트·바텀 시트처럼 동작이 있는 용어는 실제로 움직입니다.
용어는 Material Design 3, Apple HIG, W3C ARIA, NN/g 같은 표준 가이드의 명칭을 기준으로 삼았고, GNB·레이어 팝업처럼 국내 실무에서만 쓰는 관용어는 그렇다고 따로 표시했습니다.

1 빨간 번호 = 용어가 붙은 영역 영역 클릭 → 오른쪽 패널에 설명 목업 안을 스크롤하면 스티키 동작 확인 컴포넌트 뷰의 견본은 직접 조작 가능

여름맞이 게이밍 PC 기획전최대 30% 할인 · 히어로 배너 영역

8 ← 스크롤하면 상단에 붙어요 (스티키)

자주 묻는 질문

평일 오후 2시 이전 주문 시 당일 출고되며, 보통 1~2일 안에 도착합니다.

부품별 제조사 보증과 별도로, 조립 완성품은 1년 무상 점검을 제공합니다.

14 ‹123…10›

참고 레퍼런스

이 가이드의 용어는 아래 표준 문서들을 근거로 정리했습니다. 각 용어의 "근거" 표기가 어디서 왔는지 확인하고 싶을 때 여기서 원문을 찾아보세요.

Material Design 3 구글 디자인 시스템. 칩·FAB·바텀 시트·스낵바 등 컴포넌트 표준 명칭의 근거.

Apple Human Interface Guidelines 탭 바·세그먼티드 컨트롤·스텝퍼 등 iOS 계열 명칭의 근거.

W3C ARIA Authoring Practices Guide 아코디언·다이얼로그·탭 등 웹 접근성 표준 패턴의 근거.

Nielsen Norman Group (NN/g) 브레드크럼·캐러셀·엠티 스테이트 등 UX 리서치 기반 명칭의 근거.

MDN Web Docs sticky·fixed·<header>·<select> 등 웹 기술 표준 명칭의 근거.

KRDS 대한민국 디자인시스템 정부 디지털 서비스 UI/UX 가이드라인. 한국어 컴포넌트 명칭 참고.

웹·M웹 화면 용어 가이드

자주 묻는 질문

필터

용어 사전

참고 레퍼런스