화면을 설명하는 UI 용어 31개

스크롤을 내려도 화면 위에 붙어 계속 보이는 헤더

내용 묶음 사이를 나누는 얇은 선 (가운데 글자를 넣기도 함)

크기가 다른 사각 타일을 도시락 칸처럼 맞춰 배치한 그리드

화면 왼쪽(또는 오른쪽)에 세로로 붙어 있는 메뉴 영역

페이지 맨 아래의 회사 정보·링크·저작권 영역

화면 맨 위에 로고와 메뉴를 가로로 배치한 띠

페이지 첫 화면을 크게 차지하는 대표 문구·버튼 영역

현재 페이지까지의 경로를 "홈 > 분류 > 현재"처럼 보여주는 링크 줄

여러 단계로 나뉜 작업에서 현재 몇 번째 단계인지 보여주는 표시줄

같은 자리에서 내용을 바꿔 보여주는 가로 메뉴 버튼 묶음

긴 목록을 여러 쪽으로 나누고 번호로 이동하는 버튼 줄

세 줄(☰) 아이콘을 누르면 숨겨진 메뉴가 펼쳐지는 버튼

상태·개수·분류를 알려주는 작은 둥근 표시

목록에 아직 아무것도 없을 때 보여주는 안내 화면

사용자를 나타내는 동그란 사진 또는 이니셜

제목을 누르면 아래 내용이 펼쳐지고 다시 누르면 접히는 목록

왼쪽에 굵은 색 선이 있는 상자. 본문 속 팁·주의·참고를 강조

선택·삭제할 수 있는 작은 알약 모양 버튼 (필터, 입력한 키워드 등)

이미지·제목·설명을 하나의 상자에 묶은 콘텐츠 단위

돋보기 아이콘이 있는 검색어 입력 칸

누르면 선택지 목록이 펼쳐져 하나를 고르는 입력

붙어 있는 버튼 2~5개 중 하나를 고르는 입력 (목록/격자 전환 등)

켜기/끄기를 바로 전환하는 스위치 모양 입력

내용이 불러와지는 동안 자리 모양만 회색으로 보여주는 로딩 화면

작업 중임을 알리는 빙글빙글 도는 원

페이지 상단 등에 고정되어 중요한 상태·공지를 알리는 띠

작업이 얼마나 진행됐는지 막대 길이로 보여주는 표시

화면 구석에 잠깐 떴다 사라지는 알림

화면 가장자리에서 밀려 나와 위에 겹치는 패널

화면 가운데 떠서 뒤 화면을 막고 응답을 요구하는 창

마우스를 올리면 요소 근처에 뜨는 짧은 설명 말풍선