← jeuk
interaction

패널이 쌓이는 방식

2026-07-11

보통 웹은 링크를 누르면 페이지가 바뀐다 — 왔던 맥락이 사라진다. 여기선 링크가 옆에 패널로 append된다.

  • 이전 패널은 왼쪽에 spine처럼 남는다 (position: sticky).
  • 최신 패널이 오른쪽 전체를 차지하고, 화면이 그리로 스크롤된다.
  • 모바일은 한 장씩 스와이프 (scroll-snap).
  • 하단엔 떠 있는 pill 하나 — 열린 패널마다 점 하나.

URL은 /notes/a/b/c처럼 자란다. 중간에서 새 링크를 눌러도 무조건 뒤에 붙는다. 이게 두 번째 뇌의 걷기 경험을 만든다.

전부 CSS다 — sticky + scroll-snap + z-index. JS는 스크롤과 인디케이터만.

note

note%3Afoundation

note%3Afoundation — 노트를 찾을 수 없습니다.

note

note%3Atypography

note%3Atypography — 노트를 찾을 수 없습니다.

note

note%3Afoundation

note%3Afoundation — 노트를 찾을 수 없습니다.