실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
popover 속성과 popovertarget으로 light dismiss, Esc 닫힘, 최상위 레이어
"둘러보기 시작"을 누르면 대상만 환하게 비추고 나머지는 어둡게 가린 채, 옆의 말풍선으로 한 단계씩 기능을 설명하는 온보딩 투어입니다.
항목이 수만 개여도 화면에 보이는 만큼만 실제 DOM으로 그리는 windowing 성능 패턴. 라이브러리 없이 직접 구현.
Gmail 작성 버튼처럼, + 버튼을 누르면 공유·편집·삭제 같은 액션이 위로 차례로 떠오르는 FAB 메뉴입니다.
아래에서 올라오는 시트를 핸들로 끌어 절반/전체로 스냅하거나 닫기.
폴더를 접고 펴는 중첩 트리(파일 탐색기) — 화살표 키 내비 + 트리 ARIA.
거터를 끌어 두 패널 비율을 바꾸는, 키보드와 가로/세로 전환까지 되는 split pane.
커서 위치에 뜨고 화면 가장자리에서 뒤집히는, 키보드까지 되는 컨텍스트 메뉴.
하단에서 수락·거부·세부 설정을 고르면 localStorage에 기억되는 쿠키 동의 배너. 카테고리별 토글과 접근성까지 갖춘 패턴.
토스트가 화면 한쪽에 겹쳐 쌓였다가, 마우스를 올리면 세로로 펼쳐져 전부 읽을 수 있습니다. 스와이프로 닫고, 두면 자동으로 사라지는 Sonner 스타일 알림.
검색·이동·실행을 키보드만으로 끝내는 명령 팔레트
그라데이션 stroke + 둥근 캡 + 카운트업의 재사용 도넛
