대부분의 사이트는 메뉴를 열 때 화면 위에 판을 덮습니다. 이 방식은 반대입니다. 메뉴는 처음부터 페이지 뒤에 깔려 있고, 열면 페이지가 통째로 아래로 밀려나며 그 뒤가 드러납니다. 사용자는 지금 보던 화면을 잃지 않은 채로 이동할 곳을 고릅니다.
덮는 메뉴는 맥락을 끊습니다. 밀어내는 메뉴는 원래 화면이 계속 보이기 때문에 닫았을 때 어디로 돌아가는지가 몸으로 이해됩니다. 이탈이 줄어드는 이유입니다.
라이브러리 없이 CSS transform 하나로 끝냈습니다. 페이지 전체를 감싼 레이어에 translate와 scale을 걸고, 메뉴 글자는 overflow가 잘린 줄 안에서 위로 올라옵니다.
여는 애니메이션과 닫는 애니메이션을 따로 짜지 않았습니다. 클래스 하나를 토글하면 같은 곡선이 거꾸로 재생됩니다. 유지보수할 코드가 절반입니다.
ESC로 닫히고, 포커스는 메뉴 안에 갇힙니다. 모션을 줄여둔 사용자에게는 애니메이션 없이 즉시 전환됩니다.
웹사이트는 정보를 담는 그릇이 아니라,
손으로 만져지는 물건이어야 합니다.
이 인터랙션은 @osmo.supply가 2026년 5월 공개한 Fixed Underlay Navigation을 보고 슬로히어로의 색과 타이포로 다시 만든 것입니다. 원본은 해당 계정 릴스 조회수 중앙값의 4.72배, 참여율 2.90%를 기록했습니다. 구조만 참고했고 코드는 새로 썼습니다.