UI 컴포넌트 갤러리 40

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

💡 한 줄짜리 텍스트 입력 칸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

예: 유튜브 음량 조절 바

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

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

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

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

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

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

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

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

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

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

💡 빙글빙글 도는 로딩 표시

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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