오버레이·피드백

리소스 이름을 그대로 입력해야 삭제 버튼이 열리는 확인 창이다. 지워지면 무엇이 함께 끊기는지 먼저 보여주고, 입력이 다르면 무엇이 다른지 그 자리에서 알려 준다.

앱을 처음 열었을 때 로그인 수단을 고르는 전체 화면 다이얼로그. 주 제공자 버튼과 보조 제공자 아이콘, 브라우저 인증 대기, 로그인 없이 시작했을 때 못 쓰는 기능까지 한 화면에서 이어서 보여준다.

카테고리에 초점을 맞추면 설명, 추천 링크, 이미지 미리보기가 함께 바뀌는 탐색 메뉴다.

항목을 하나 이상 고른 순간에만 하단에서 떠오르는 일괄 작업 바. 평소에는 화면을 차지하지 않고 선택 개수·공유·저장·보관 같은 배치 액션을 현재 맥락 가까이에 유지한다.

확인 문구 대신 바뀌기 전·후 값을 나란히 보여주는 alertdialog. 비용·권한·플랜처럼 되돌리기 어려운 변경을 승인하기 전에 영향 범위를 한눈에 검토한다.

실제 화면 위 특정 영역만 밝게 남기고 단계별 설명을 붙이는 온보딩 오버레이. 퍼센트 좌표를 사용해 데모·임베드·제품 목업 안에서도 같은 비율로 스포트라이트가 유지된다.

오른쪽에서 열리는 알림 수신함. 날짜별 묶음, 읽지 않은 알림 수, 개별 읽음, 모두 읽음 기능을 제공한다.

우클릭 또는 Shift+F10으로 현재 대상에 맞는 작업을 포인터 옆에 연다. 호스트 경계를 넘지 않게 위치를 보정하고, 구분선·단축키·위험 작업·서브메뉴를 한 규약으로 제공한다.

긴 작업의 현재 상태를 작은 캡슐에 표시하고 전체 단계는 펼침 목록으로 보여준다. 자동 진행, 완료 상태, aria-live 알림을 포함한다.

⌘/Ctrl+K로 여는 검색형 빠른 실행 오버레이. 그룹 검색·화살표 이동·Enter 선택·Esc 닫기를 한 흐름으로 묶고, 검색 결과는 실제 listbox 규약으로 전달한다.

동의 선택을 localStorage에 저장하는 하단 배너. 관련 스크립트의 로드 여부는 onDecide를 받은 호출부에서 결정한다.

모서리에 쌓이는 알림 스택. 상태(useToasts 훅)와 그리기(ToastStack)가 분리돼 다른 UI에 붙이기 쉽고, 퇴장 애니가 끝난 뒤 실제로 제거된다. aria-live로 스크린리더 대응.

떠 있는 폰 목업 + 스토어 배지 + QR로 앱을 소개하는 풀스크린 오버레이. 기기 OS와 다른 스토어를 누르면 확인창, QR을 누르면 큰 QR 모달. 모바일은 QR 숨기고 배지를 풀폭 스택.

카드 2~4장으로 라이브 데모를 소개하는 풀스크린 블러 오버레이. 카드는 실제 링크라 새 탭 열기가 그대로 동작하고, 일반 클릭만 가로채 데모 모달을 연다. comingSoon 카드는 별도 콜백.

다른 사이트를 iframe으로 띄우는 풀스크린 모달. 데스크톱은 상단 글래스 바(새 탭·홈·닫기), 모바일은 드래그 가능한 플로팅 독 + 첫 진입 가이드. 로딩 스켈레톤과 새 탭 확인창 포함.