UI 컴포넌트 갤러리 50

💡 랜딩 페이지 맨 위의 대형 배너 영역

예: 쿠팡 첫 화면 대형 배너, 네이버 메인 뉴스 영역

💡 관련 정보를 한 박스에 모은 만능 컨테이너

예: 쿠팡 상품 목록, 인스타그램 피드 게시물

💡 카드나 이미지를 가지런히 배열하는 격자판

예: 넷플릭스 영화 목록, 핀터레스트 이미지 갤러리

💡 콘텐츠 폭을 제한해서 가운데로 모아주는 틀

예: 모든 웹사이트의 중앙 정렬 영역

💡 화면 왼쪽이나 오른쪽에 붙는 세로 메뉴 패널

예: Gmail 왼쪽 메뉴, 유튜브 사이드 메뉴

💡 콘텐츠 사이를 구분하는 가로 줄

예: 설정 페이지의 섹션 구분선

💡 크기가 다른 칸을 도시락처럼 채운 격자

예: Apple 제품 페이지의 기능 요약, SaaS 랜딩 페이지 기능 소개

💡 요금제를 나란히 놓고 비교하게 하는 표

예: ChatGPT·Notion 요금제 선택 화면

💡 화면을 좌우로 나눠 이미지와 글을 나란히 둔 배치

예: 로그인 화면 왼쪽 일러스트, 서비스 소개의 이미지+설명 블록

💡 페이지 맨 아래 저작권·연락처 자리

예: 모든 웹사이트 하단의 저작권·링크 영역

💡 사이트 상단에 항상 따라오는 메뉴 막대

예: 네이버 상단 메뉴, 쿠팡 카테고리 바

💡 같은 자리에서 화면만 전환하는 수평 메뉴

예: 쿠팡 상품 상세/리뷰/문의 탭

💡 키워드를 입력해서 원하는 것을 찾는 입력창

예: 구글 검색창, 네이버 검색 바

💡 클릭하면 아래로 펼쳐지는 선택 목록

예: 카카오톡 더보기(⋯) 메뉴

💡 "홈 > 카테고리 > 현재 페이지" 경로 표시

예: 쿠팡 상품 페이지 상단 경로 표시

💡 1 2 3 ··· 다음 형태의 쪽 번호

예: 네이버 검색 결과 하단 페이지 번호

💡 옆에서 스르륵 밀려 나오는 슬라이드 패널

예: 모바일 햄버거(☰) 메뉴 클릭 시 패널

💡 ① → ② → ③ 형태의 단계 진행 표시

예: 쿠팡 결제 과정 (장바구니→주문→결제→완료)

💡 단축키 한 번으로 여는 검색창 겸 명령 실행기

예: Notion·Slack의 Cmd+K 빠른 이동, VS Code 명령 팔레트

💡 모바일 화면 맨 아래에 고정된 아이콘 메뉴

예: 카카오톡·인스타그램 하단 메뉴

💡 클릭하면 뭔가가 실행되는 UI 기본 부품

예: 모든 웹사이트의 "확인", "구매하기" 버튼

💡 화면 구석에 떠 있는 둥근 액션 버튼

예: Gmail의 ✏️ 새 메일 쓰기 버튼

💡 한 줄짜리 텍스트 입력 칸

예: 로그인 화면의 아이디/비밀번호 입력칸

💡 여러 줄 입력 가능한 넓은 텍스트 칸

예: 배달의민족 리뷰 작성 칸

💡 클릭하면 목록이 펼쳐지는 선택 상자

예: 회원가입 시 생년월일 선택

💡 여러 개를 동시에 고를 수 있는 네모 칸

예: 이용약관 "모두 동의" 체크 박스

💡 여러 개 중 딱 하나만 고르는 동그라미

예: 쿠팡 결제 시 카드/계좌이체 선택

💡 켜기/끄기를 전환하는 스위치

예: 아이폰 설정의 켜기/끄기 스위치

💡 여러 입력 요소를 묶어 한 번에 제출하는 양식

예: 네이버 회원가입 양식, 주문서 작성 페이지

💡 막대를 좌우로 밀어 값을 조절하는 조절기

예: 유튜브 음량 조절 바

💡 작은 알약 모양의 선택·필터 요소

예: 배달앱 "한식/중식/일식" 필터 칩

💡 화면 위에 뜨는 팝업 대화 상자

예: "정말 삭제하시겠습니까?" 확인 팝업

💡 구석에 잠깐 나타났다 사라지는 알림

예: "장바구니에 추가되었습니다" 알림

💡 페이지 안에 고정되는 정보/경고/에러 배너

예: "비밀번호가 틀렸습니다" 빨간 경고 박스

💡 작업 진행률을 보여주는 가로 막대

예: 파일 업로드 진행률 표시

💡 빙글빙글 도는 로딩 표시

예: 인스타그램 피드 로딩 시 회전 아이콘

💡 콘텐츠 자리를 회색으로 미리 잡아두는 로딩

예: 유튜브 영상 로딩 시 회색 뼈대

💡 보여줄 데이터가 없을 때 대신 띄우는 안내 화면

예: 비어 있는 장바구니 화면, 검색 결과 없음

💡 종 아이콘을 누르면 펼쳐지는 알림 목록

예: 유튜브·페이스북 상단 종 아이콘

💡 처음 온 사용자에게 화면 요소를 하나씩 짚어 주는 안내

예: 새 앱 첫 실행 때 뜨는 '여기를 눌러 보세요' 말풍선

💡 화면 아래에서 올라오는 슬라이드 패널

예: 카카오맵 장소 상세정보 패널

💡 행과 열로 데이터를 정리하는 표

예: 쿠팡 주문 내역, 엑셀처럼 보이는 데이터 표

💡 항목을 세로로 쭉 나열하는 목록

예: 카카오톡 채팅 목록, 메일함 목록

💡 클릭하면 접었다 펼쳤다 하는 패널

예: 쿠팡 상품 상세 FAQ, 설정 메뉴

💡 "신규" "할인" 같은 상태를 나타내는 꼬리표

예: 쿠팡 "로켓배송" 뱃지, "NEW" 표시

💡 마우스를 올리면 나타나는 작은 설명 말풍선

예: 아이콘 위에 마우스 올리면 나오는 설명

💡 사용자를 나타내는 동그란 프로필 이미지

예: 카카오톡/슬랙의 동그란 프로필 사진

💡 핵심 숫자 하나와 증감을 크게 보여주는 대시보드 카드

예: 매출 대시보드 상단 KPI, 은행 앱 자산 요약

💡 사건을 시간 순서대로 세로선 위에 늘어놓은 목록

예: 회사 연혁, 택배 배송 조회 단계

💡 좌우로 넘기는 이미지/콘텐츠 슬라이드

예: 쿠팡 메인 배너 슬라이드, 인스타 사진 넘기기