상호작용을 위한 네비게이션으로 많은 작은 HTML 페이지 연결하기

Source: Hacker News

왜 나는 이것을 좋아하는가

나는 LLM으로 웹사이트 만들기에 대해 썼다 — (L)ots of (L)ittle ht(M)l page(s) — 그리고 이제 그 접근법에 대한 사후 분석을 할 때라고 생각한다.

원본 글에서 몇 가지를 다듬었지만 근본적인 아이디어는 여전히 같다:

JavaScript가 필요한 페이지 내 인터랙션을 피하고, HTML에 의존하고 CSS 뷰 전환으로 강화된 다중 페이지 네비게이션을 사용한다 (필요에 따라 약간의 JS를 추가).

실제 예시

내 블로그에는 메뉴가 있다. 이것은 JavaScript으로 “확장”하거나, “슬라이드 아웃”하거나, “팝 인”되지 않는다. 대신, 사이트의 메뉴 옵션만을 보여주는 완전히 새로운 페이지로 이동한다.

네비게이션은 단순히 링크이다:

[…](/menu/)

그리고 이 인터랙션은 CSS 뷰 전환으로 강화된다.

• 최신 브라우저? 더 멋진 효과를 얻는다.
• 구형 브라우저, JS 비활성화 등? 링크는 브라우저가 가장 기본적으로 할 수 있는 동작이기 때문에 여전히 동작한다.

내부 동작 방식

모든 페이지(메뉴 페이지 제외)는 메뉴로 가는 링크를 포함한다. 메뉴로 이동하면 그 링크가 “X”로 바뀌어 메뉴를 닫는다. 닫는 링크는 여전히 / 로 돌아가는 단순한 링크이지만, 가능한 경우 history.back()을 수행하도록 약간의 JavaScript가 추가돼 브라우저 히스토리에 불필요한 항목이 생기는 것을 방지한다.

…

document.referrer 검사는 사용자가 네비게이션을 통해 (대부분 블로그 내부에서) 왔는지, 직접 (예: URL을 입력) 왔는지를 판단한다. 의미 있는 히스토리 항목이 있으면 history.back()을 사용하고, 그렇지 않으면 홈 URL로 리다이렉트한다.

시각적 개요

동영상 시연

(원한다면 여기서 동영상 임베드 또는 링크를 삽입하세요.)

회고

이 솔루션은 단순해 보이지만, 이를 도출하기 위해서는 네비게이션에 필수적인 것이 무엇인지, 인터랙션을 여러 페이지에 걸쳐 어떻게 구현할 수 있는지, 그리고 빠르고 견고하며 직관적인 사용을 위해 페이지 크기를 어떻게 작게 유지할지에 대한 신중한 고민이 필요했다. 다시 말해, 이 접근법이 디자인을 형성했다.

브라우저를 임의의 코드를 실행하는 런타임이라기보다 주로 문서 탐색기로 다룰 때, 결과적인 아키텍처는 많은 현대 도구들이 우리에게 믿게 하는 것보다 훨씬 단순해질 수 있다.