바텀 시트 | UI 디자인 사전

설명

모바일 화면 하단에서 슬라이드 업되는 모달 컨테이너예요. 옵션 선택, 폼 입력, 상세 보기처럼 기존 화면 컨텍스트를 유지한 채 보조 동작을 처리할 때 사용해요. iOS 액션 시트의 영향을 받았으며, Material Design에서는 Modal Bottom Sheet와 Standard Bottom Sheet로 구분해요. 한국 모바일 앱(카카오·당근·토스)은 거의 모든 옵션 메뉴를 바텀 시트로 처리해요.

🖼️ 미니어처

💬 AI에게 이렇게 말하세요

화면 하단에서 슬라이드 업되는 바텀 시트로 구현해 주세요. 드래그로 닫을 수 있고 배경에 dim 처리합니다.
shadcn/ui의 Sheet 컴포넌트를 side="bottom"으로 사용해 만들어 주세요.
iOS 액션 시트처럼 옵션 4~5개를 보여주는 바텀 시트로 작성해 주세요. 각 옵션은 좌측 아이콘 + 라벨 + 우측 화살표.

언제 쓰나요

옵션 메뉴(공유, 신고, 즐겨찾기 같은 부가 액션 모음)에 적합해요.
필터나 정렬 같은 보조 컨트롤에도 어울립니다.
리스트 항목의 상세 미리보기에도 자주 써요.

코드 예시 (shadcn/ui)

import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger asChild>
    <Button>열기</Button>
  </SheetTrigger>
  <SheetContent side="bottom" className="h-[40vh] rounded-t-2xl">
    <ul>
      <li>옵션 1</li>
      <li>옵션 2</li>
    </ul>
  </SheetContent>
</Sheet>

⚡ 사용 예 (한 줄)

<Sheet><SheetTrigger>열기</SheetTrigger><SheetContent side="bottom">…</SheetContent></Sheet>

🧩 컴포넌트 매핑

shadcn/ui의 Sheet(side="bottom"), vaul Drawer, Material BottomSheet, Radix Dialog(커스텀 애니메이션)를 활용해요.

🚫

이렇게 하지 마세요

옵션 6개 이상을 바텀 시트에 욱여넣으면 스크롤이 길어져 풀 페이지가 더 낫습니다.

🇰🇷

국내 UI 특징

카카오·당근·토스 모두 옵션 메뉴는 바텀 시트가 우선이에요. 안드로이드라고 풀스크린 다이얼로그를 쓰지 말고 일관되게 바텀 시트를 쓰면 한국 사용자에게 더 자연스러워요. swipe-down으로 닫는 동작을 빠뜨리지 마세요.