AI에게 정확한 UI 용어로 원하는 결과를 얻으세요
전체 57개의 UI 컴포넌트
글로벌 네비게이션 바
사이트 최상단에 항상 보이는 공통 메뉴. 어느 페이지에서든 홈으로 돌아가거나 주요 섹션으로 이동할 수 있는 "만능 리모컨"이에요.
로컬 네비게이션 바
특정 영역 안에서만 작동하는 서브 메뉴. 대분류(GNB) 아래에서 세부 항목을 탐색할 때 쓰는 "폴더 안의 폴더"에요.
사이드 네비게이션 바
화면 측면에 고정된 메뉴. 관리자 대시보드처럼 메뉴가 많을 때 왼쪽에 세로로 세워두는 "책꽂이"에요.
푸터 네비게이션 바
페이지 하단의 정보 및 링크 영역. 회사 정보, 약관, 소셜 미디어 링크 등이 모여 있는 "명함"이에요.
브레드크럼
현재 페이지까지의 경로를 보여주는 네비게이션 (홈 > 대분류 > 소분류). 헨젤과 그레텔이 빵조각을 뿌려 길을 찾은 것처럼, "내가 어디서 왔는지" 알려줘요.
페이지네이션
긴 목록을 여러 페이지로 나눠 숫자 버튼으로 이동하는 방식. 책의 "페이지 번호"처럼 원하는 곳으로 점프할 수 있어요.
스테퍼
단계별 진행 상태를 보여주는 UI (주로 결제/회원가입). 마라톤 코스의 "체크포인트"처럼 지금 몇 단계인지 알려줘요.
탭
같은 위치에서 여러 콘텐츠를 전환하는 섹션. 책상 위 "서류철 탭"처럼 한 번에 하나만 펼쳐볼 수 있어요.
하단 네비게이션 바
모바일 화면 하단에 고정된 주요 메뉴. 엄지손가락으로 쉽게 닿는 "모바일 리모컨"이에요.
플로팅 액션 버튼
화면 위에 떠있는 둥근 액션 버튼. "+" 아이콘처럼 가장 중요한 작업을 빠르게 실행할 수 있어요.
메뉴 / 컨텍스트 메뉴
클릭하면 나타나는 선택 옵션 목록. 마우스 우클릭 메뉴처럼 "상황에 맞는 선택지"를 보여줘요.
체크박스
여러 항목 중 원하는 만큼 선택할 수 있는 다중 선택 입력. 쇼핑 카트에서 "여러 개 담기"처럼 원하는 만큼 골라요.
라디오 버튼
여러 항목 중 오직 하나만 선택하는 단일 선택 입력. 옛날 라디오 버튼처럼 "하나 누르면 다른 게 튀어나오는" 방식이에요.
토글 / 스위치
On/Off 상태를 전환하는 스위치. 방 불을 켜고 끄는 "전등 스위치"와 똑같아요.
세그먼트 컨트롤
버튼 형태로 연결된 선택 바. 라디오 버튼의 시각적 업그레이드 버전으로, "버튼 그룹"처럼 보여요.
드롭다운 / 셀렉트 박스
클릭하면 펼쳐지는 목록에서 하나를 선택. 자판기에서 "음료 버튼 누르면 나오는" 방식이에요.
텍스트 필드 / 텍스트 영역
글자를 입력하는 칸. 한 줄짜리는 Text Field, 여러 줄은 Text Area. "메모지"처럼 자유롭게 적어요.
검색창
검색어를 입력하는 특화된 입력창. 돋보기 아이콘과 함께 "무엇이든 찾아주는 마법의 창"이에요.
슬라이더 / 레인지
드래그로 값이나 범위를 설정하는 바. 오디오 볼륨 조절하듯 "끌어서 조절"해요.
날짜/시간 선택기
캘린더나 시계 UI로 날짜와 시간을 선택. "달력 팝업"이 뜨면서 원하는 날을 클릭해요.
버튼
클릭해서 작업을 실행하는 기본 UI. "누르면 무언가 일어나는" 가장 기본적인 인터랙션 요소에요.
파일 업로드
파일을 선택하고 업로드하는 입력 요소. 드래그 앤 드롭으로 "파일을 끌어다 놓는" 방식이에요.
색상 선택기
색상을 선택하는 입력 도구. 팔레트나 색상환에서 "원하는 색을 골라" 선택해요.
별점 / 평점
별이나 하트로 평가를 매기는 입력. 영화 리뷰처럼 "별 5개 만점"으로 평가해요.
OTP 입력
일회용 비밀번호를 입력하는 특수 입력창. 인증 코드를 "한 칸씩" 입력하는 방식이에요.
숫자 입력
숫자만 입력하는 전용 입력창. 증감 버튼으로 "위아래 화살표"를 눌러 조절할 수 있어요.
카드
이미지와 텍스트가 결합된 독립적 정보 단위. 인스타그램 피드처럼 "한 입 크기 정보 묶음"이에요.
캐러셀 / 슬라이더
좌우로 넘기며 콘텐츠를 순환시키는 요소. 회전목마(Carousel)처럼 "돌려막기"로 여러 이미지를 보여줘요.
아코디언
클릭하면 접었다 펼쳤다 하는 리스트. 아코디언 악기처럼 "접었다 펴는" 동작으로 공간을 절약해요.
테이블
행과 열로 구성된 표 형태의 데이터 나열. 엑셀처럼 "정보를 줄 맞춰 정리"해요.
리스트 / 피드
수직으로 쭉 나열되는 정보 흐름. 뉴스 피드나 채팅 목록처럼 "위에서 아래로 흐르는 정보"에요.
뱃지 / 태그
상태나 카테고리를 나타내는 작은 라벨. 옷에 붙은 "가격표"나 "NEW" 스티커처럼 추가 정보를 알려줘요.
아바타
사용자를 나타내는 프로필 이미지나 아이콘. 게임 캐릭터처럼 "나를 대신하는 얼굴"이에요.
스켈레톤 스크린
콘텐츠 로딩 중에 보여주는 뼈대 모양의 플레이스홀더. 음식 나오기 전 "빈 접시 세팅"처럼 자리를 잡아둬요.
구분선 / 분리선
콘텐츠를 시각적으로 구분하는 선. 수평선처럼 "여기서 구분돼요"라고 알려주는 요소에요.
빈 상태
데이터가 없을 때 표시하는 안내 화면. "아직 아무것도 없어요"라고 친절하게 알려주는 상태에요.
통계 / 지표
주요 수치나 통계를 강조해서 보여주는 카드. "매출 100만원" 같은 중요한 숫자를 크게 보여줘요.
이미지
사진이나 그림을 표시하는 요소. 반응형으로 크기가 조절되고 "로딩 상태"도 보여줘요.
아이콘
작은 그래픽 심볼로 기능이나 개념을 표현. "저장" 버튼의 디스켓 모양처럼 직관적인 상징이에요.
모달 / 다이얼로그
현재 화면 위에 떠서 집중을 요구하는 팝업 창. 대화(Dialog)처럼 "확인/취소" 응답이 필요해요.
토스트
화면 구석에 잠깐 떴다 사라지는 알림. 토스트기에서 빵이 "톡" 튀어오르듯 잠깐 나타났다 사라져요.
알럿 / 스낵바
주의나 확인이 필요한 시스템 알림. "경고등"처럼 중요한 메시지를 눈에 띄게 보여줘요.
툴팁
마우스를 올리면 나타나는 보충 설명. 연필 위에 "지우개" 글씨가 뜨는 것처럼 힌트를 줘요.
프로그레스 바
작업 진행률을 시각적으로 보여주는 바. 게임 로딩처럼 "얼마나 됐나" 채워지는 막대에요.
스피너 / 로더
로딩 중임을 알리는 회전 아이콘. "빙글빙글" 돌면서 "기다려주세요"라고 말해요.
팝오버
요소 위에 떠서 추가 정보를 보여주는 작은 오버레이. 말풍선처럼 "더 많은 내용"을 팝업으로 보여줘요.
알림 뱃지
읽지 않은 알림 수를 표시하는 작은 원. 카톡 알림처럼 "새 메시지 3개"를 빨간 숫자로 보여줘요.
배너
페이지 상단이나 하단에 고정되는 알림 메시지. 쿠키 동의처럼 "중요한 공지"를 넓게 보여줘요.
히어로 섹션
메인 페이지 최상단의 핵심 비주얼 영역. 영화 포스터처럼 "첫인상을 결정하는 얼굴"이에요.
그리드 시스템
화면을 격자로 나누는 레이아웃 구조. 바둑판처럼 "칸을 나눠서 정리정돈"해요.
스티키 / 고정
스크롤해도 화면에 붙어있는 요소. 냉장고에 붙은 "자석 메모"처럼 계속 보여요.
사이드바 / 드로어
화면 옆에서 슬라이드로 나타나는 숨겨진 메뉴. 서랍(Drawer)을 "쓱" 여는 것처럼 나타났다 사라져요.
메이슨리 레이아웃
벽돌을 쌓듯 불규칙하게 배열하는 그리드. 핀터레스트처럼 "높이가 다른 카드들을 빈틈없이" 채워요.
섹션
페이지를 논리적으로 나눈 블록 단위. 책의 "챕터"처럼 내용을 구분해요.
컨테이너
콘텐츠의 최대 폭을 제한하는 틀. "액자"처럼 내용물이 너무 넓게 퍼지지 않게 잡아줘요.
플렉스 / 스택
요소를 가로나 세로로 정렬하는 레이아웃. 블록을 "쌓거나 나란히" 배치하는 방식이에요.
간격
요소 사이에 빈 공간을 만드는 레이아웃 도구. "여백"을 시각적으로 조절해요.