웹사이트나 앱을 사용할 때 우리가 클릭하고, 입력하고, 스크롤하는 모든 것이 UI 요소입니다. UI(User Interface) 요소는 사용자와 화면 사이의 대화 수단이라고 할 수 있죠. 이 글에서는 화면을 구성하는 모든 UI 요소를 초보자도 쉽게 이해할 수 있도록 실생활 비유와 함께 하나하나 정리합니다. 개발자, 디자이너, 기획자 누구든 이 가이드 하나면 UI 요소의 모든 것을 파악할 수 있습니다.
1. 텍스트 요소 – 화면의 ‘글자’들
텍스트는 UI의 가장 기본입니다. 책에 비유하면 제목, 본문, 각주 같은 역할이죠.
1.1 제목 (Heading, H1~H6)
신문의 헤드라인을 떠올려 보세요. H1은 1면 톱기사 제목, H2는 섹션 제목, H3~H6으로 갈수록 소제목이 됩니다.
- H1: 페이지에서 가장 큰 제목. 한 페이지에 하나만 사용하는 것이 원칙입니다.
- H2: 큰 단락을 나누는 소제목. 이 글의 “1. 텍스트 요소”, “2. 버튼” 같은 것입니다.
- H3~H6: 점점 작은 단위의 소제목으로, 콘텐츠를 세밀하게 구분합니다.
실생활 비유: 책의 목차를 생각하세요. 1장 > 1.1절 > 1.1.1항 — 이것이 H1 > H2 > H3 입니다.
1.2 본문 텍스트 (Body Text / Paragraph)
지금 읽고 있는 이 문장이 바로 본문 텍스트입니다. 일반적으로 14~18px 크기로 표시되며, 정보 전달의 핵심 역할을 합니다. HTML에서는 <p> 태그로 감쌉니다.
1.3 라벨 (Label)
입력창 위에 적혀 있는 “이름”, “이메일”, “비밀번호” 같은 짧은 안내 텍스트입니다.
실생활 비유: 서류 양식에서 “성명: _” 할 때 “성명:” 부분이 라벨입니다.
1.4 링크 (Link / Anchor)
클릭하면 다른 페이지로 이동하는 텍스트입니다. 보통 파란색에 밑줄이 그어져 있죠. HTML에서는 <a> 태그를 사용합니다.
- 인라인 링크: 문장 안에 자연스럽게 포함된 링크
- 네비게이션 링크: 메뉴에 있는 링크
- 외부 링크: 다른 사이트로 연결되는 링크
1.5 캡션 (Caption)
이미지나 표 아래에 붙는 설명 텍스트입니다. 보통 본문보다 작은 글씨로 표시됩니다.
실생활 비유: 사진첩에서 사진 아래 적은 날짜나 메모 같은 것입니다.
1.6 플레이스홀더 (Placeholder)
입력창 안에 흐릿하게 표시되는 안내 텍스트입니다. “이메일을 입력하세요”처럼 어떤 값을 넣어야 하는지 알려줍니다. 입력을 시작하면 사라집니다.
1.7 헬퍼 텍스트 (Helper Text)
입력창 아래에 표시되는 보조 설명입니다. “비밀번호는 8자 이상이어야 합니다” 같은 안내가 여기에 해당합니다. 오류가 나면 빨간색으로 바뀌면서 에러 메시지가 되기도 합니다.
2. 버튼 (Button) – 화면의 ‘문손잡이’
버튼은 사용자가 행동을 실행하는 UI 요소입니다. 문손잡이를 잡고 문을 여는 것처럼, 버튼을 눌러서 무언가를 실행합니다.
2.1 기본 버튼 (Primary Button)
배경색이 채워진 가장 눈에 띄는 버튼입니다. “가입하기”, “결제하기”, “저장” 같은 핵심 행동에 사용됩니다.
실생활 비유: 엘리베이터의 “닫힘” 버튼 — 가장 자주 누르는 핵심 버튼입니다.
2.2 보조 버튼 (Secondary Button)
기본 버튼보다 시각적으로 약한 버튼입니다. “취소”, “이전으로” 같은 부차적 행동에 사용됩니다.
2.3 아웃라인 버튼 (Outlined Button)
테두리만 있고 안이 비어 있는 버튼입니다. 기본 버튼과 함께 사용할 때 시각적 계층을 만듭니다. 예를 들어 “확인”은 기본 버튼, “취소”는 아웃라인 버튼으로 배치합니다.
2.4 텍스트 버튼 (Text Button / Ghost Button)
배경도 테두리도 없이 텍스트만 있는 버튼입니다. “더 보기”, “자세히 알아보기” 같은 곳에 사용됩니다.
2.5 아이콘 버튼 (Icon Button)
텍스트 없이 아이콘만 있는 버튼입니다. 휴지통 아이콘(삭제), 연필 아이콘(편집), X 아이콘(닫기) 등이 대표적입니다.
실생활 비유: 리모컨의 음소거 버튼 — 스피커에 X 표시된 아이콘만으로 기능을 알 수 있죠.
2.6 FAB (Floating Action Button)
화면 위에 둥둥 떠 있는 원형 버튼입니다. Gmail의 오른쪽 하단 “+” 버튼이 가장 유명한 예시입니다. 모바일 앱에서 자주 사용됩니다.
2.7 토글 버튼 (Toggle Button)
누를 때마다 켜짐/꺼짐 상태가 바뀌는 버튼입니다. 볼드(B), 이탤릭(I), 밑줄(U) 같은 서식 버튼이 대표적입니다.
2.8 분할 버튼 (Split Button)
버튼 옆에 작은 화살표가 붙어 있어서, 버튼 자체를 누르면 기본 동작을 하고, 화살표를 누르면 추가 옵션이 나타나는 버튼입니다.
실생활 비유: 인쇄 버튼 옆의 작은 화살표 — 기본 인쇄 또는 인쇄 옵션 선택이 가능합니다.
3. 입력 요소 (Input) – 화면의 ‘양식’
사용자에게 정보를 받아내는 UI 요소입니다. 관공서 서류 양식처럼, 정해진 형식에 맞춰 정보를 입력받습니다.
3.1 텍스트 필드 (Text Field / Text Input)
한 줄짜리 입력창입니다. 이름, 이메일, 전화번호 같은 짧은 텍스트를 입력합니다.
- 일반 텍스트: 이름, 주소
- 이메일: 이메일 형식 검증
- 비밀번호: 입력한 글자가 ●●●로 표시
- 숫자: 숫자만 입력 가능, 위아래 화살표 제공
3.2 텍스트 영역 (Textarea)
여러 줄을 입력할 수 있는 넓은 입력창입니다. 후기 작성, 문의 내용, 자기소개 등에 사용됩니다. 오른쪽 하단 모서리를 드래그해서 크기를 조절할 수 있는 경우가 많습니다.
실생활 비유: 편지지 — 한 줄짜리 주소란(텍스트 필드)과 여러 줄의 편지 내용(텍스트 영역)의 차이입니다.
3.3 체크박스 (Checkbox)
네모칸에 체크(✓)를 넣거나 빼는 UI 요소입니다. 여러 개를 동시에 선택할 수 있습니다.
- 이용약관 동의
- 관심 분야 선택 (복수 선택 가능)
- 할 일 목록 완료 체크
실생활 비유: 장보기 목록에서 산 물건에 체크 표시하는 것과 같습니다.
3.4 라디오 버튼 (Radio Button)
여러 옵션 중 하나만 선택하는 동그란 버튼입니다. 하나를 선택하면 이전 선택이 자동으로 해제됩니다.
- 성별 선택 (남/여/기타)
- 결제 방식 선택 (카드/계좌이체/페이)
- 배송 방식 선택 (일반/특급)
실생활 비유: 옛날 라디오의 채널 버튼 — 하나를 누르면 다른 건 자동으로 올라왔죠. 그래서 이름이 “라디오” 버튼입니다.
3.5 드롭다운 / 셀렉트 (Dropdown / Select)
클릭하면 아래로 목록이 펼쳐지고, 그 중 하나를 선택하는 UI 요소입니다. 옵션이 많을 때 공간을 절약합니다.
실생활 비유: 레스토랑 메뉴판을 접었다 펼치는 것과 같습니다.
3.6 콤보박스 (Combobox)
드롭다운 + 텍스트 입력이 합쳐진 형태입니다. 목록에서 선택하거나 직접 타이핑해서 검색할 수 있습니다. 구글 검색창의 자동완성이 대표적인 예시입니다.
3.7 스위치 / 토글 (Switch / Toggle)
좌우로 밀어서 켜고 끄는 UI 요소입니다. 스마트폰의 Wi-Fi, 블루투스 켜기/끄기가 대표적입니다.
- 체크박스와의 차이: 체크박스는 여러 항목 중 선택, 스위치는 하나의 기능을 즉시 켜고 끔
실생활 비유: 방의 전등 스위치 — 올리면 켜지고, 내리면 꺼집니다.
3.8 슬라이더 (Slider / Range)
막대 위의 동그란 손잡이를 좌우로 움직여 값을 조절하는 UI 요소입니다.
- 음량 조절
- 밝기 조절
- 가격 범위 필터 (최소~최대)
- 이미지 확대/축소
실생활 비유: 스탠드 조명의 밝기 조절 다이얼과 같습니다.
3.9 날짜 선택기 (Date Picker)
달력 모양의 UI에서 날짜를 선택하는 UI 요소입니다. 호텔 예약, 항공권 검색 등에서 만나볼 수 있습니다. 날짜 범위(시작일~종료일)를 선택하는 레인지 피커도 있습니다.
3.10 시간 선택기 (Time Picker)
시간과 분을 선택하는 UI 요소입니다. 알람 설정, 예약 시간 선택 등에 사용됩니다.
3.11 색상 선택기 (Color Picker)
색상 팔레트에서 원하는 색을 고르는 UI 요소입니다. 그래픽 도구, 테마 설정, 메모 앱 등에서 사용됩니다.
3.12 파일 업로드 (File Upload)
컴퓨터에서 파일을 선택하여 서버로 보내는 UI 요소입니다.
- 기본형: “파일 선택” 버튼
- 드래그 앤 드롭: 파일을 끌어다 놓는 영역
- 프로필 사진: 이미지 미리보기 포함
3.13 검색창 (Search Bar)
돋보기 아이콘과 함께 있는 텍스트 입력 필드입니다. 입력하면 실시간으로 결과를 보여주는 경우가 많습니다.
실생활 비유: 도서관의 도서 검색 컴퓨터 — 제목을 입력하면 관련 책 목록이 나옵니다.
3.14 자동완성 (Autocomplete)
사용자가 입력하기 시작하면 관련 검색어나 옵션을 자동으로 제안하는 기능입니다. 검색창, 주소 입력, 태그 입력 등에 활용됩니다.
4. 네비게이션 요소 – 화면의 ‘이정표’
사용자가 원하는 곳으로 이동할 수 있도록 안내하는 UI 요소입니다.
4.1 네비게이션 바 (Navigation Bar / Navbar)
화면 상단에 가로로 배치된 메뉴 모음입니다. 로고 + 메뉴 항목 + 검색/프로필 버튼으로 구성되는 것이 일반적입니다.
실생활 비유: 쇼핑몰 입구의 층별 안내판입니다.
4.2 사이드바 네비게이션 (Sidebar Navigation)
화면 왼쪽(또는 오른쪽)에 세로로 배치된 메뉴입니다. 관리자 페이지, 대시보드 같은 복잡한 앱에서 자주 사용됩니다.
4.3 탭 (Tab)
같은 공간에서 여러 콘텐츠를 전환하는 UI 요소입니다. “기본 정보 | 상세 정보 | 리뷰” 같은 형태입니다.
실생활 비유: 서류 폴더의 인덱스 탭 — 탭을 누르면 해당 서류가 보입니다.
4.4 브레드크럼 (Breadcrumb)
현재 위치를 계층적으로 보여주는 경로 표시입니다. “홈 > 전자기기 > 노트북 > 삼성 갤럭시북” 같은 형태입니다.
실생활 비유: 헨젤과 그레텔이 길을 찾기 위해 빵 부스러기(breadcrumb)를 뿌린 것에서 유래했습니다. 어디서 왔는지 돌아갈 수 있게 합니다.
4.5 페이지네이션 (Pagination)
긴 목록을 여러 페이지로 나눠서 보여주는 UI 요소입니다. “< 1 2 3 … 10 >” 같은 형태입니다.
- 번호형: 1, 2, 3 페이지 번호 클릭
- 이전/다음형: “< 이전 | 다음 >” 버튼
- 무한 스크롤: 스크롤하면 자동으로 다음 페이지 로드 (페이스북, 인스타그램 방식)
- 더 보기 버튼: “더 보기” 클릭하면 추가 항목 로드
4.6 하단 네비게이션 바 (Bottom Navigation Bar)
모바일 앱 하단에 고정된 메뉴입니다. 보통 3~5개의 아이콘+텍스트로 구성됩니다. 카카오톡의 “친구 / 채팅 / 뷰 / 쇼핑 / 더보기”가 대표적입니다.
4.7 햄버거 메뉴 (Hamburger Menu ☰)
세 줄 모양(☰) 아이콘을 클릭하면 메뉴가 나타나는 방식입니다. 주로 모바일 화면에서 공간을 절약하기 위해 사용됩니다.
실생활 비유: 이름의 유래가 정말 햄버거 빵-패티-빵 모양에서 왔습니다!
4.8 케밥 메뉴 (Kebab Menu ⋮)
세로 점 세 개(⋮) 아이콘입니다. 클릭하면 추가 옵션이 나타납니다. 안드로이드에서 주로 사용됩니다.
4.9 미트볼 메뉴 (Meatball Menu ⋯)
가로 점 세 개(⋯) 아이콘입니다. iOS, macOS에서 주로 사용됩니다. 카카오톡 채팅방의 “…” 버튼이 예시입니다.
4.10 스테퍼 (Stepper / Progress Steps)
여러 단계로 나뉜 과정에서 현재 몇 단계인지 보여주는 UI 요소입니다. 회원가입, 결제, 설문조사 등에서 사용됩니다.
예시: ① 정보입력 → ② 결제 → ③ 완료
5. 정보 표시 요소 – 화면의 ‘게시판’
데이터나 상태를 보기 좋게 정리해서 보여주는 UI 요소입니다.
5.1 카드 (Card)
이미지 + 제목 + 간단한 설명 + 버튼이 하나의 박스로 묶인 UI 요소입니다. 넷플릭스의 콘텐츠, 쿠팡의 상품 목록, 인스타그램의 포스트가 모두 카드 형태입니다.
실생활 비유: 명함 — 사진, 이름, 직책, 연락처가 한 장에 담겨 있는 것과 같습니다.
5.2 리스트 (List)
항목을 세로로 나열한 UI 요소입니다.
- 단순 리스트: 텍스트만 나열
- 아이콘 리스트: 아이콘 + 텍스트
- 아바타 리스트: 프로필 사진 + 이름 + 부가 정보 (카카오톡 친구 목록)
- 액션 리스트: 각 항목에 버튼이나 스위치가 포함 (설정 화면)
5.3 테이블 (Table)
행(가로)과 열(세로)로 데이터를 정리하는 UI 요소입니다. 엑셀 같은 형태로, 대량의 구조화된 데이터를 표시할 때 사용됩니다.
- 정렬: 열 제목을 클릭하면 오름차순/내림차순 정렬
- 필터: 특정 조건으로 행 필터링
- 고정 열: 스크롤해도 첫 번째 열이 고정
5.4 배지 (Badge)
작은 숫자나 점으로 새로운 알림이나 상태를 표시하는 UI 요소입니다. 카카오톡의 빨간 숫자(읽지 않은 메시지 수)가 대표적입니다.
실생활 비유: 우체통에 빨간 깃발이 올라가 있으면 “편지가 왔다”는 뜻인 것과 같습니다.
5.5 태그 / 칩 (Tag / Chip)
작은 라벨 모양의 UI 요소로, 분류나 필터링에 사용됩니다.
- 태그: 블로그 글에 붙이는 “React”, “JavaScript” 같은 키워드
- 칩: 선택한 항목을 표시하고 X로 삭제 가능 (Gmail의 받는 사람 입력)
- 필터 칩: “근처 | 인기순 | 별점 높은 순” 같은 필터
5.6 아바타 (Avatar)
사용자의 프로필 사진이나 이니셜을 원형으로 표시하는 UI 요소입니다. 프로필이 없으면 첫 글자나 기본 실루엣 아이콘을 보여줍니다.
5.7 프로그레스 바 (Progress Bar)
작업의 진행 상황을 막대로 보여주는 UI 요소입니다. 파일 다운로드, 프로필 완성도, 설문 진행률 등에 사용됩니다.
- 확정형: “45% 완료” 처럼 구체적 수치 표시
- 불확정형: 진행 중이지만 얼마나 걸릴지 모를 때 (반복 애니메이션)
5.8 스피너 / 로더 (Spinner / Loader)
데이터를 불러오는 중임을 알려주는 회전 애니메이션입니다. 원형이 돌아가거나 점이 깜빡이는 형태입니다.
실생활 비유: 모래시계 — “기다려 주세요”라는 뜻입니다.
5.9 스켈레톤 (Skeleton Screen)
콘텐츠가 로딩되기 전에 레이아웃 형태를 회색 박스로 미리 보여주는 UI 요소입니다. 유튜브, 페이스북에서 페이지가 로딩될 때 회색 직사각형 블록이 나타났다가 실제 콘텐츠로 바뀌는 것을 본 적 있을 겁니다.
실생활 비유: 건물의 뼈대(골조)가 먼저 보이고, 점차 외벽과 내장이 채워지는 것과 같습니다.
5.10 툴팁 (Tooltip)
마우스를 올리면 작은 말풍선이 나타나서 추가 설명을 보여주는 UI 요소입니다.
실생활 비유: 박물관에서 작품 옆에 있는 작은 설명판입니다.
5.11 팝오버 (Popover)
툴팁보다 큰 형태로, 클릭하면 나타나는 작은 정보 박스입니다. 링크, 버튼, 이미지 등 더 복잡한 콘텐츠를 포함할 수 있습니다.
5.12 타임라인 (Timeline)
시간 순서대로 이벤트를 세로로 나열하는 UI 요소입니다. 배송 추적, 이력서, 프로젝트 히스토리 등에 사용됩니다.
5.13 통계 카드 (Stat Card / KPI Card)
큰 숫자 + 제목 + 변동률을 보여주는 카드입니다. 대시보드에서 핵심 지표를 표시할 때 사용됩니다.
예시: “월간 방문자 | 12,450 | ↑ 15.3%”
6. 레이아웃 요소 – 화면의 ‘뼈대’
다른 UI 요소들을 배치하고 구조를 잡는 틀 역할을 합니다.
6.1 헤더 (Header)
페이지 최상단 영역입니다. 보통 로고, 네비게이션, 검색, 로그인 버튼이 포함됩니다. 스크롤해도 상단에 고정되는 “스티키 헤더”가 일반적입니다.
6.2 푸터 (Footer)
페이지 최하단 영역입니다. 회사 정보, 이용약관, 개인정보처리방침 링크, SNS 아이콘, 저작권 표시 등이 포함됩니다.
6.3 사이드바 (Sidebar)
페이지 왼쪽 또는 오른쪽에 세로로 배치된 영역입니다. 네비게이션, 필터, 광고, 관련 콘텐츠 등을 담습니다.
6.4 컨테이너 (Container)
콘텐츠의 최대 너비를 제한하고 가운데 정렬하는 보이지 않는 박스입니다. 대부분의 웹사이트에서 본문이 화면 전체를 차지하지 않고 가운데에 모여 있는 이유가 컨테이너 때문입니다.
6.5 그리드 (Grid)
화면을 행과 열로 나누는 레이아웃 시스템입니다. 보통 12열 그리드를 사용하며, 화면 크기에 따라 열 수가 변합니다 (반응형 디자인).
실생활 비유: 아파트의 평면도 — 거실, 방, 주방을 격자로 나누는 것과 같습니다.
6.6 디바이더 / 구분선 (Divider)
콘텐츠 사이를 시각적으로 구분하는 가로선(또는 세로선)입니다. 설정 메뉴에서 그룹을 구분하거나 댓글 사이를 나눌 때 사용됩니다.
6.7 스페이서 (Spacer)
눈에 보이지 않지만 요소 사이에 여백을 만드는 역할입니다. UI가 빽빽해 보이지 않도록 “숨 쉴 공간”을 만들어 줍니다.
6.8 접이식 패널 / 아코디언 (Collapsible Panel / Accordion)
제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 접히는 UI 요소입니다. FAQ 페이지에서 가장 많이 사용됩니다.
실생활 비유: 아코디언 악기 — 벌리면 소리가 나고(내용 표시), 접으면 조용해집니다(내용 숨김).
6.9 탭 패널 (Tab Panel)
탭 메뉴와 함께 쓰이는 콘텐츠 영역입니다. 선택된 탭에 해당하는 내용만 보여줍니다.
6.10 스플리터 (Splitter / Resizable Pane)
두 영역 사이의 경계선을 드래그하여 크기를 조절할 수 있는 UI 요소입니다. VS Code의 편집 영역과 사이드바 사이 경계가 대표적입니다.
7. 미디어 요소 – 화면의 ‘콘텐츠’
이미지, 영상, 아이콘 같은 시각 자료를 표시하는 UI 요소입니다.
7.1 이미지 (Image)
사진, 그래픽, 일러스트를 표시합니다. 웹에서는 반드시 alt 태그(대체 텍스트)를 넣어야 접근성과 SEO에 좋습니다.
- 일반 이미지: 고정 크기로 표시
- 반응형 이미지: 화면 크기에 따라 자동 조절
- 지연 로딩(Lazy Loading): 스크롤해서 보이는 순간에만 로딩
7.2 캐러셀 / 이미지 슬라이더 (Carousel / Image Slider)
좌우 화살표나 자동으로 이미지가 전환되는 UI 요소입니다. 쿠팡, 네이버 메인의 배너가 대표적입니다.
실생활 비유: 슬라이드 프로젝터 — 한 장씩 넘기면서 보는 방식입니다.
7.3 갤러리 / 그리드 이미지 (Gallery)
여러 이미지를 격자 형태로 배치한 것입니다. 클릭하면 확대 보기(라이트박스)가 열리는 경우가 많습니다.
7.4 라이트박스 (Lightbox)
이미지를 클릭했을 때 배경이 어두워지면서 이미지가 크게 표시되는 UI 요소입니다. 좌우 화살표로 다음 이미지를 볼 수 있습니다.
7.5 비디오 플레이어 (Video Player)
영상을 재생하는 UI 요소입니다. 재생/일시정지 버튼, 진행 막대, 음량 조절, 전체화면 버튼 등으로 구성됩니다.
7.6 오디오 플레이어 (Audio Player)
음악이나 팟캐스트를 재생하는 UI 요소입니다. 비디오 플레이어보다 컴팩트한 형태입니다.
7.7 아이콘 (Icon)
작은 그래픽 기호입니다. 의미를 직관적으로 전달합니다.
- 시스템 아이콘: 홈(🏠), 설정(⚙), 검색(🔍), 알림(🔔)
- SNS 아이콘: 페이스북, 인스타그램, 유튜브 로고
- 상태 아이콘: 체크(✓), 경고(⚠), 에러(✕)
7.8 임베드 (Embed)
외부 콘텐츠를 현재 페이지에 삽입하는 것입니다. 유튜브 영상, 구글 지도, 트위터 포스트, 코드 실행 환경(CodePen) 등을 페이지 안에서 직접 볼 수 있게 합니다.
8. 오버레이 요소 – 화면 위의 ‘화면’
기존 화면 위에 덮어씌워지는 UI 요소입니다. 사용자의 주의를 끌거나 추가 정보를 보여줍니다.
8.1 모달 / 팝업 (Modal / Popup)
화면 가운데에 나타나는 대화 상자입니다. 배경이 어두워지면서 사용자가 모달에 집중하도록 합니다. 닫기 전까지 뒤의 화면을 조작할 수 없습니다.
실생활 비유: 길을 가다가 누군가 앞을 막고 설문조사를 요청하는 것 — 대답하기 전에는 지나갈 수 없습니다.
8.2 다이얼로그 (Dialog)
모달의 일종으로, “정말 삭제하시겠습니까?” 같은 확인/취소 질문을 하는 작은 대화 상자입니다.
- 알림 다이얼로그: 확인 버튼만 있음
- 확인 다이얼로그: 확인 + 취소 버튼
- 입력 다이얼로그: 텍스트 입력창 포함
8.3 드로어 (Drawer / Side Sheet)
화면 옆에서 슬라이드하면서 나타나는 패널입니다. 모바일에서 햄버거 메뉴를 누르면 왼쪽에서 슬라이드되어 나오는 메뉴가 대표적입니다.
실생활 비유: 서랍(drawer) — 당기면 나오고, 밀면 들어갑니다.
8.4 바텀 시트 (Bottom Sheet)
모바일에서 화면 아래에서 올라오는 패널입니다. 구글 맵에서 장소를 터치하면 아래에서 정보가 올라오는 것이 대표적입니다. 위로 더 드래그하면 전체 화면으로 확장됩니다.
8.5 토스트 / 스낵바 (Toast / Snackbar)
화면 하단(또는 상단)에 잠깐 나타났다 사라지는 알림 메시지입니다.
- 토스트: 단순 메시지 (“저장되었습니다”)
- 스낵바: 메시지 + 액션 버튼 (“삭제되었습니다 [실행 취소]”)
실생활 비유: 토스터에서 빵이 톡 튀어올랐다 다시 내려가는 것처럼, 메시지가 톡 나타났다 사라집니다.
8.6 알림 배너 / 인앱 배너 (Notification Banner)
화면 상단에 나타나는 알림 띠입니다. “쿠키 사용에 동의하시겠습니까?”, “새 버전이 출시되었습니다” 같은 중요 안내에 사용됩니다.
8.7 백드롭 (Backdrop / Overlay)
모달이나 드로어가 열릴 때 뒤의 화면을 어둡게 덮는 반투명 배경입니다. 클릭하면 모달이 닫히는 경우가 많습니다.
9. 피드백 요소 – 화면의 ‘반응’
사용자의 행동에 대해 결과를 알려주는 UI 요소입니다.
9.1 알림 / 알럿 (Alert)
중요한 메시지를 색상이 있는 박스로 표시하는 UI 요소입니다.
- 성공 (초록): “회원가입이 완료되었습니다”
- 경고 (노랑): “비밀번호가 곧 만료됩니다”
- 오류 (빨강): “결제에 실패했습니다”
- 정보 (파랑): “시스템 점검 예정: 3월 31일”
9.2 유효성 검사 메시지 (Validation Message)
입력값이 올바른지 실시간으로 알려주는 메시지입니다.
- ✓ “사용 가능한 아이디입니다” (초록)
- ✕ “이미 사용 중인 이메일입니다” (빨강)
- ! “비밀번호가 너무 약합니다” (주황)
9.3 프로그레스 인디케이터 (Progress Indicator)
작업이 진행 중임을 다양한 형태로 알려줍니다.
- 원형 프로그레스: 원이 점점 채워지는 형태
- 선형 프로그레스: 막대가 점점 채워지는 형태
- 스텝 프로그레스: “1/3 단계” 같은 숫자 표시
9.4 빈 상태 (Empty State)
데이터가 없을 때 보여주는 화면입니다. “검색 결과가 없습니다” 또는 “아직 게시글이 없습니다. 첫 번째 글을 작성해 보세요!” 같은 안내와 함께 행동 유도 버튼을 포함합니다.
9.5 에러 페이지 (Error Page)
페이지를 찾을 수 없거나 서버 오류가 발생했을 때 표시되는 화면입니다.
- 404: 페이지를 찾을 수 없음
- 500: 서버 오류
- 403: 접근 권한 없음
10. 고급 UI 요소 – 현대적인 UI 패턴
최신 웹과 앱에서 자주 사용되는 고급 UI 요소입니다.
10.1 무한 스크롤 (Infinite Scroll)
페이지 끝까지 스크롤하면 자동으로 다음 콘텐츠가 로딩되는 방식입니다. 인스타그램, 트위터, 틱톡이 이 방식을 사용합니다.
10.2 드래그 앤 드롭 (Drag and Drop)
요소를 마우스로 잡아서 원하는 위치로 이동하는 인터랙션입니다. 트렐로의 카드 이동, 파일 정렬, 위젯 배치 등에 사용됩니다.
10.3 컨텍스트 메뉴 (Context Menu / Right-click Menu)
마우스 오른쪽 버튼을 클릭하면 나타나는 메뉴입니다. 복사, 붙여넣기, 삭제 같은 빠른 동작을 제공합니다.
10.4 커맨드 팔레트 (Command Palette)
단축키(보통 Ctrl+K 또는 Cmd+K)로 열리는 검색 기반 명령 실행 UI입니다. VS Code, Notion, Slack 등 생산성 도구에서 널리 사용됩니다. 모든 기능을 검색으로 찾아 실행할 수 있어 파워 유저에게 인기가 높습니다.
10.5 데이터 시각화 (Data Visualization)
데이터를 차트나 그래프로 시각화하는 UI 요소입니다.
- 막대 차트: 항목별 비교
- 선 그래프: 시간에 따른 변화
- 파이 차트: 전체 대비 비율
- 도넛 차트: 파이 차트의 변형
- 히트맵: 밀도나 강도를 색상으로 표현
10.6 가상 스크롤 (Virtual Scroll / Windowing)
수천 개의 항목이 있어도 화면에 보이는 것만 실제로 렌더링하는 기법입니다. 성능 최적화에 필수적인 기술로, 대용량 테이블이나 리스트에서 사용됩니다.
10.7 제스처 (Gesture)
모바일에서 손가락 동작으로 조작하는 인터랙션입니다.
- 스와이프: 좌우로 밀기 (삭제, 아카이브)
- 핀치: 두 손가락으로 확대/축소
- 롱 프레스: 길게 누르기 (추가 옵션)
- 풀 투 리프레시: 아래로 당겨서 새로고침
10.8 다크 모드 토글 (Dark Mode Toggle)
라이트 모드와 다크 모드를 전환하는 UI 요소입니다. 해/달 아이콘 버튼이나 시스템 설정 연동으로 구현됩니다. 최신 앱과 웹사이트의 필수 기능이 되었습니다.
UI 요소 선택 가이드: 어떤 상황에서 무엇을 쓸까?
| 상황 | 추천 UI 요소 |
|---|---|
| 하나만 선택해야 할 때 | 라디오 버튼 (3개 이하), 드롭다운 (4개 이상) |
| 여러 개 선택할 때 | 체크박스 |
| 즉시 켜고/끌 때 | 스위치(토글) |
| 긴 목록을 보여줄 때 | 테이블 + 페이지네이션 또는 무한 스크롤 |
| 로딩 중일 때 | 스켈레톤 (콘텐츠 구조 예측 가능) 또는 스피너 (구조 예측 불가) |
| 성공/실패 알릴 때 | 토스트(일시적) 또는 알럿(지속적) |
| 추가 정보 보여줄 때 | 툴팁(마우스 오버) 또는 팝오버(클릭) |
| 사용자 확인이 필요할 때 | 다이얼로그(간단) 또는 모달(복잡) |
| 모바일 추가 옵션 | 바텀 시트 또는 액션 시트 |
| 단계적 과정 표시 | 스테퍼 |
마무리: UI 요소는 사용자와의 대화 수단
지금까지 화면을 구성하는 거의 모든 UI 요소를 살펴보았습니다. 텍스트, 버튼, 입력, 네비게이션, 정보 표시, 레이아웃, 미디어, 오버레이, 피드백, 그리고 최신 고급 패턴까지 — 총 80개 이상의 UI 요소를 다루었습니다.
좋은 UI는 사용자가 요소의 이름을 몰라도 직관적으로 사용할 수 있어야 합니다. 그러나 만드는 사람은 각 요소의 목적과 적합한 사용 시점을 정확히 알아야 합니다. 이 가이드를 북마크해 두고, 화면을 설계하거나 개발할 때 참고하시기 바랍니다.
더 궁금한 UI 요소가 있다면 문의 주세요!
내부 링크:
외부 링크:
