이게 진짜 현대적인 웹사이트다

글 한 문단을 보여주는 데 의존성 1,100개와 빌드 도구가 필요한가? 텍스트 중심 블로그에 로딩 표시까지 붙는 웹 개발의 과잉 설계를 비판함 현대적인 기능을 위해 프레임워크가 반드시 필요한 것은 아님. 시맨틱 HTML, JSON-LD, Open Graph만으로도 문서 구조와 검색·공유에 필요한 정보를 전달할 수 있음 펼침·접힘 UI와 대화상자, 반응형 이미지, 페이지 전환 등은 이미 브라우저가 제공하는 기능이며, 이 페이지도 이미지 등을 제외하면 약 23KB의 HTML 파일 하나임 공통 요소를 관리해야 한다면 정적 사이트 생성기를, 스프레드시트나 영상 편집기를 만든다면 앱 프레임워크를 쓰면 됨. 블로그와 문서 사이트까지 복잡한 앱으로 만들 필요는 없음 스타일이나 도구를 금지하자는 것이 아니라, HTML부터 시작해 필요한 것만 추가하고 완성되면 멈추자는 것임. 방문자에게 보내는 코드는 개발자가 필요해서 선택한 것이어야 함 문서를 보여주는 데 과도해진 도구 체계 2013년 Motherfucking Website가 웹사이트의 과잉 설계를 비꼬았다면, 이번 페이지는 현대 브라우저의 기능을 활용해 같은 주장을 이어가는 후속작임 문단 하나를 보여주려고 Node와 의존성 1,100개, 번들러와 하이드레이션까지 동원함. “Hello World”보다 잠금 파일이 길고, 글을 읽는 블로그에는 로딩 표시가 붙음 SEO와 소셜 카드, 반응형 이미지가 필요하다는 이유로 복잡한 도구를 도입하지만, 그중 상당수는 HTML에 이미 있는 기능임 시맨틱 요소와 브라우저 기본 UI <div>에 탐색 영역이라는 의미를 부여하려고 접근성 라이브러리를 설치하기보다 <nav> 를 사용할 수 있으며, 이 요소는 Internet Explorer 9에서도 지원했음 <nav>, <main>, <article>처럼 역할에 맞는 HTML 요소를 사용하면 보조 기술과 검색 엔진이 문서 구조를 이해하는 데 도움이 됨 <details> 등 기본 UI는 직접 구현해야 할 동작을 줄여주지만, 올바른 태그만으로 접근성 전체가 보장되는 것은 아님 오래된 빌드 환경을 복원하지 않아도 20년 뒤까지 작동하는 방식을 지향함 <dialog>, popover, <input type="date">, 기본 폼 검증도 브라우저가 제공하며, Gecko, Blink, WebKit이 구현상의 문제를 처리함 ...