Design Atlas▯Mobile patterns
Bottom sheets, swipe actions, large titles, safe areas — patterns for the screen in your hand. — 18 entries
Bottom Sheet바텀 시트
A panel that rises from the bottom and covers only part of the screen, snapping between fixed heights — peek, half, full.
Swipe Actions스와이프 액션
Swiping a list row sideways reveals action buttons — archive, delete — hidden behind it. The row itself stays put.
Large Title라지 타이틀
A big page title at the top shrinks as you scroll down, settling into the compact navigation bar.
Tab Bar탭 바
A fixed row of 3–5 icon-plus-label buttons at the bottom of the screen; whichever is selected is also the top-level screen you are looking at.
Safe Area세이프 에어리어
The margin rule that keeps content clear of hardware and gesture zones at the screen edges — the notch, Dynamic Island, home indicator.
Gesture Navigation제스처 내비게이션
Swiping in from the screen's left edge slides the previous screen back into view — navigating back with a finger instead of a physical or on-screen button.
Onboarding Carousel온보딩 캐러셀
The 2–4 swipeable intro slides a first-time user sees, ending in a "Get Started" button on the last one.
Splash Screen스플래시 스크린
The brief, purely static screen with just a logo that appears while an app is launching — a snapshot the system draws, not a loading animation.
Context Menu (Long Press)롱 프레스 컨텍스트 메뉴
Press and hold an item — the background dims and a list of related actions (reply, forward, delete) pops up beside it.
Action Sheet액션 시트
Tap a single trigger and a full-width card of related actions plus a Cancel button slides up from the bottom.
Floating Search플로팅 서치
A rounded search bar floating over content that shrinks to an icon when you scroll down, and expands back when you scroll up.
Sticky Bottom CTA스티키 바텀 CTA
Pin the one primary action — "Add to Cart" — to the bottom of the screen so it stays put no matter how long the content above it scrolls.
Haptic Feedback햅틱 피드백
A short physical pulse sized to the tap — light, medium, heavy. The web can't reproduce real vibration, so this demo stands in with a ripple and a waveform instead.
Keyboard Avoidance키보드 어보이던스
When the software keyboard rises, the layout resizes or scrolls so the field being typed into never ends up hidden underneath it.
Segmented Tabs + Swipe세그먼티드 탭 스와이프
A segmented control up top stays locked in sync with the content panel below it — tapping a segment and swiping the content both land on the same page.
Infinite Feed인피니트 피드
Reach the end of a list and the next page loads and appends itself automatically — no pagination button, just scrolling that never runs dry.
Story Viewer스토리 뷰어
A full-screen viewer where thin progress bars fill one at a time across the top, auto-advancing between stories — tapping the left or right side jumps back or ahead manually.
App Clip Card앱 클립 카드
A small card that rises from the bottom, letting a QR code, NFC tag, or link launch one specific feature instantly — with no app install.