기획서나 디자인 리뷰에서 "여기 이 부분…"이라고 말하는 대신 쓸 수 있는 표준 용어 모음입니다.
아래에서 PC 웹 · 모바일 웹 · 앱 · 컴포넌트 네 화면을 오가며, 궁금한 영역을 직접 클릭해 보세요. 모달·토스트·바텀 시트처럼 동작이 있는 용어는 실제로 움직입니다. 메가 메뉴·드로어·LNB 트리처럼 펼쳐지고 접히는 메뉴도 눌러서 여닫아 볼 수 있습니다.
용어는 Material Design 3, Apple HIG, W3C ARIA, NN/g 같은 표준 가이드의 명칭을 기준으로 삼았고, GNB·SNB·레이어 팝업처럼 국내 실무에서만 쓰는 관용어는 그렇다고 따로 표시했습니다.
지금 보이는 이 창이 모달, 뒤의 어두운 배경이 딤(Dim)입니다. 닫기 전까지 뒤 화면은 조작할 수 없어요.
삭제한 리뷰는 되돌릴 수 없어요.
세일·재입고 소식을 푸시 알림으로 받을 수 있어요. 설정에서 언제든 끌 수 있습니다.
행동 목록만 있으면 액션 시트, 이런 자유 구성 패널은 바텀 시트
💡 GNB의 "브랜드PC"를 눌러 메가 메뉴를, 좌측 LNB의 항목과 « 버튼으로 펼침·접힘을 확인해 보세요. 스크롤하면 탭 바가 상단에 붙는 "스티키"도 볼 수 있습니다. 목록 아래 리스트형 한 줄에서는 상품 배지·스펙 요약·상품의견 링크가 각각 다른 용어입니다.
위 화면에 나온 용어를 카테고리별로 정리했습니다. "기획서 표기 예"를 그대로 복사해 써도 됩니다. 마지막 앱 전용 카테고리는 iOS·Android 앱에서만 쓰는 용어로, '앱' 목업에서 직접 눌러볼 수 있습니다.
이 가이드의 용어는 아래 표준 문서들을 근거로 정리했습니다. 각 용어의 "근거" 표기가 어디서 왔는지 확인하고 싶을 때 여기서 원문을 찾아보세요.