상호작용을 위해 많은 작은 HTML 페이지를 내비게이션으로 이어 붙일 수 있음

• (L)ots of (L)ittle ht(M)l page(s) 접근은 JavaScript 기반 페이지 내부 상호작용을 여러 작은 HTML 페이지 사이의 이동으로 대체함
• 상호작용은 HTML 페이지 간 내비게이션으로 구성하고, 최신 환경에서는 CSS 뷰 전환(view transitions)으로 개선하며, 필요할 때만 약간의 JavaScript를 더함
• 블로그의 Menu는 JavaScript로 펼쳐지는 UI가 아니라 <a href="/menu/"> 링크를 따라 메뉴 전용 페이지로 이동하는 방식임
• 메뉴 닫기도 기본은 /로 가는 링크지만, document.referrer가 있으면 JavaScript로 history.back()을 실행해 방문 기록에 메뉴 열기·닫기 항목이 쌓이지 않게 함
• 브라우저의 기본 기능인 링크 이동에 의존하면 구형 기기·구형 브라우저·JavaScript 비활성화 환경에서도 동작하고, 작은 페이지 크기를 유지할수록 상호작용이 빠르고 견고해짐

메뉴 구현 방식과 설계 결과

• 열기와 닫기 모두 링크로 처리

  • 일반 페이지에는 메뉴 페이지로 가는 링크가 있고, 메뉴 페이지에서는 그 링크가 “X”로 바뀌어 메뉴를 닫는 역할을 함
  • 닫기 동작도 기본은 /로 가는 링크지만, document.referrer가 있으면 JavaScript로 history.back()을 실행해 브라우저 방문 기록에 메뉴 열기·닫기 항목이 추가되지 않게 함
  • 단순화한 구현은 다음과 같음 <!-- Normal page --> <nav> <a href="/menu/"> <svg>...</svg> </a> </nav> <!-- Menu page --> <nav> <a href="/" onclick="document.referrer ? history.back() : window.location.href = '/'; return false;"> <svg>...</svg> </a> </nav>

• 직접 방문과 내부 이동을 구분

  • document.referrer로 메뉴 페이지에 블로그 내부 이동을 통해 왔는지, URL 입력 같은 직접 방문으로 왔는지 구분함
  • 내부 이동이면 의미 있는 history.back()을 실행할 수 있고, 직접 방문이면 /로 이동함

• 접근 방식이 디자인을 형성함

  • 단순해 보이는 해법이지만, 내비게이션의 본질, 여러 페이지를 가로지르는 상호작용, 작은 페이지 크기를 유지하는 방법을 함께 고려해야 함
  • 페이지 크기를 작게 유지해야 상호작용이 빠르고 견고하며 직관적으로 남을 수 있음
  • 브라우저를 임의의 코드를 실행하고 가져오고 컴파일해 표시하는 런타임이 아니라 문서를 탐색하는 도구로 보면, 도구들이 유도하는 것보다 훨씬 단순한 웹사이트를 만들 수 있음