실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
열고 닫히는 네이티브 요소들의 지금 열렸는가를 단 하나의 CSS 가상클래스로 통일. 색/회전/백드롭이 전부 :open 으로 그려집니다.
행을 손가락으로 밀어 숨은 액션을 꺼내고, 끝까지 밀면 바로 삭제. 드래그 중 리렌더 없이 ref로 직접 움직이는 Pointer Events 스와이프 리스트입니다.
ECMAScript 2025 Set 메서드 시각화 + 미지원 환경 폴백
보내면 즉시 표시(전송 중) 후 저장 완료 시 확정 - form action과 결합
PlainDate/Duration/ZonedDateTime으로 더하기, 차이, 타임존을 명확하게
popover 속성과 popovertarget으로 light dismiss, Esc 닫힘, 최상위 레이어
document.startViewTransition + view-transition-name으로 SPA 라우터 없이 모핑
anchor-name / anchor() / position-try-fallbacks로 위치 계산 라이브러리 없이 툴팁/팝오버 만들기
왼쪽엔 연락 정보·소셜, 오른쪽엔 검증 들어간 문의 폼. 모바일에선 자연스럽게 한 줄로 쌓이는 2분할 Contact 섹션.
가상 가계부 앱 'Moneit'의 풀 랜딩 - hero 폰 목업부터 기능·단계·통계·다운로드 CTA까지, 스크롤하면 섹션이 떠오르는 밝은 톤 앱 소개 페이지.
별이 화면 중심에서 바깥으로 가속하며 흘러나가는 hyperspace 효과. 3D 좌표를 원근 투영해 canvas 2D로 그린 풀스크린 앰비언트 배경입니다.
트랙 위 핸들을 오른쪽 끝까지 드래그하면 초록으로 채워지며 인증 완료. 도중에 놓으면 스프링백으로 처음으로 돌아갑니다.
"둘러보기 시작"을 누르면 대상만 환하게 비추고 나머지는 어둡게 가린 채, 옆의 말풍선으로 한 단계씩 기능을 설명하는 온보딩 투어입니다.
실수 클릭으로 삭제되는 사고를 막는 press-and-hold 버튼. 누르고 있으면 링이 차오르고, 끝까지 채워야 실행됩니다.
Fullscreen API를 감싼 커스텀 훅. ref 엘리먼트(없으면 문서 전체)를 전체화면으로 토글하고, 사용자가 ESC로 빠져나와도 상태가 어긋나지 않습니다.
