디자인 아틀라스▯모바일 패턴
바텀 시트, 스와이프 액션, 라지 타이틀, 세이프 에어리어 — 손안의 화면을 위한 패턴. — 18개 항목
바텀 시트Bottom Sheet
화면 아래에서 올라와 일부만 덮는 패널. peek·half·full 같은 정해진 높이(디텐트) 사이를 드래그로 오갑니다.
스와이프 액션Swipe Actions
리스트 행을 옆으로 밀면 그 아래 숨어있던 보관·삭제 같은 버튼이 드러나는 패턴. 행 자체는 사라지지 않습니다.
라지 타이틀Large Title
화면 맨 위에 크게 떠 있던 제목이 아래로 스크롤할수록 작아지며 상단 내비게이션 바 안으로 들어가는 패턴.
탭 바Tab Bar
화면 맨 아래 고정된 3~5개의 아이콘·레이블 버튼으로, 눌린 항목이 곧 지금 보고 있는 최상위 화면을 나타냅니다.
세이프 에어리어Safe Area
노치·다이나믹 아일랜드·홈 인디케이터처럼 화면 가장자리의 하드웨어·제스처 영역을 피해 콘텐츠를 배치하는 여백 규칙.
제스처 내비게이션Gesture Navigation
화면 왼쪽 가장자리에서 오른쪽으로 쓸어 넘겨 이전 화면으로 돌아가는 제스처. 물리 버튼 없이 손가락으로만 내비게이션합니다.
온보딩 캐러셀Onboarding Carousel
앱을 처음 열었을 때 스와이프로 넘겨보는 2~4장의 소개 화면. 마지막 장에서 "시작하기" 버튼으로 이어집니다.
스플래시 스크린Splash Screen
앱이 켜지는 짧은 순간 로고만 보여주는 정적인 화면. 로딩 애니메이션이 아니라 시스템이 그려주는 스냅샷입니다.
롱 프레스 컨텍스트 메뉴Context Menu (Long Press)
항목을 손가락으로 꾹 누르고 있으면 배경이 어두워지며 답장·전달·삭제 같은 관련 동작 목록이 옆에 떠오르는 패턴.
액션 시트Action Sheet
버튼 하나를 누르면 화면 아래에서 관련 동작 목록과 취소 버튼이 카드로 슬라이드 업 하는 임시 메뉴.
플로팅 서치Floating Search
콘텐츠 위에 떠 있는 둥근 검색창이 아래로 스크롤하면 작은 아이콘으로 접히고, 위로 스크롤하면 다시 펼쳐지는 패턴.
스티키 바텀 CTASticky Bottom CTA
콘텐츠가 아무리 길어도 "장바구니 담기" 같은 핵심 버튼만은 화면 하단에 항상 떠 있도록 고정하는 패턴.
햅틱 피드백Haptic Feedback
탭의 강도에 맞춰 짧게 떨리는 촉각 반응. 웹에서는 실제 진동을 재현할 수 없어, 여기서는 링플과 파형으로 대신 보여줍니다.
키보드 어보이던스Keyboard Avoidance
소프트 키보드가 올라올 때 지금 입력 중인 필드가 가려지지 않도록 화면 내용을 밀어 올리거나 줄이는 처리.
세그먼티드 탭 스와이프Segmented Tabs + Swipe
상단 세그먼티드 컨트롤과 그 아래 콘텐츠 패널이 서로 맞물려 움직이는 패턴. 세그먼트를 탭해도, 콘텐츠를 옆으로 스와이프해도 같은 곳에 닿습니다.
인피니트 피드Infinite Feed
리스트 끝에 다다르면 다음 데이터를 자동으로 불러와 이어붙이는 패턴. 페이지네이션 버튼 없이 스크롤만으로 콘텐츠가 계속됩니다.
스토리 뷰어Story Viewer
화면 위쪽의 얇은 진행 바들이 순서대로 차오르며 자동으로 다음 스토리로 넘어가는 전체 화면 뷰어. 화면 좌우를 탭하면 수동으로 이전·다음으로 건너뜁니다.
앱 클립 카드App Clip Card
앱을 설치하지 않고도 QR·NFC·링크로 특정 기능 하나만 즉시 열 수 있게, 화면 아래에서 작게 떠오르는 카드.