다양한 작은 HTML 페이지들을 네비게이션으로 연결해 상호작용 만들기

Source: Hacker News

소개

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

마음에 듭니다.

원본 글에서 몇 가지를 조정했지만 기본 아이디어는 여전히 동일합니다. 저는 이를 다음과 같이 설명하고 싶습니다:

JavaScript가 필요한 페이지 내 상호작용을 피하고, HTML에 의존하고 CSS 뷰 전환으로 강화된 다중 페이지 탐색을 사용합니다(필요에 따라 약간의 JS를 추가할 수 있습니다).

예시: 메뉴 탐색

내 블로그에는 “메뉴”가 있습니다. 일반적인 JavaScript 위젯처럼 “펼치거나”, “슬라이드 아웃”하거나, “팝 인”하지 않습니다. 대신, 메뉴 옵션에만 집중된 완전히 새로운 페이지로 이동합니다.

탐색은 일반적인 링크일 뿐입니다:

[…](/menu/)

현대 브라우저에서 볼 때, 전환은 CSS 뷰 전환으로 강화되어 부드러운 효과를 제공합니다. 오래된 브라우저이거나 JavaScript가 비활성화된 경우에도, 이 링크는 일반 탐색이므로 여전히 작동합니다.

내부 작동 방식

모든 페이지(메뉴 페이지 제외)에는 메뉴로 연결되는 링크가 포함되어 있습니다. 메뉴로 이동하면 그 링크가 “X”로 바뀌어 메뉴를 “닫습니다”. 닫는 링크는 홈 페이지(/)를 가리키지만, 가능한 경우 history.back()을 수행하는 작은 JavaScript 스니펫으로 강화되어 브라우저 기록에 불필요한 항목이 추가되는 것을 방지합니다.

  

    …
  

  
    …
  

document.referrer 검사는 사용자가 내비게이션을 통해(대부분 블로그 내부) 도착했는지, 아니면 URL을 직접 입력했는지를 판단합니다. 의미 있는 기록 항목이 있으면 history.back()을 사용하고, 그렇지 않으면 페이지가 /로 리다이렉트됩니다.

시각적 개요

동영상 시연

전체 동작 방식을 보여주는 동영상입니다 (원하신다면): (동영상 링크 생략)

결론

이 솔루션은 단순해 보이지만, 이를 도출하기 위해서는 탐색에 필수적인 것이 무엇인지, 상호작용이 어떻게 여러 페이지에 걸칠 수 있는지, 그리고 빠르고 견고한 성능을 위해 페이지 크기를 어떻게 작게 유지할지에 대한 신중한 고민이 필요했습니다.

브라우저를 임의의 코드를 실행하는 런타임이 아니라 주로 문서 탐색기로 바라볼 때, 많은 설계 복잡성이 사라지고 더 간단하고 유지보수가 쉬운 웹 경험을 만들 수 있습니다.