progressive enhancement란 무엇인가요?

Question

Accepted Answer

**Progressive enhancement**는 견고하고 동작하는 **기반(baseline)**(어디서나 작동하는 semantic HTML)에서 출발하여, 표현을 위한 CSS와 더 풍부한 동작을 위한 JavaScript를 *그 위에 층층이 쌓는* 전략입니다. 그래서 상위 계층이 실패해도 핵심 경험은 작동합니다. ## 세 가지 계층 ```text 1. HTML → 콘텐츠 + 기능 (CSS/JS 없이 작동) 2. CSS → 표현/레이아웃 (외형을 향상) 3. JS → 상호작용 (동작을 향상) ``` ## 구체적 예: form ```html ``` ```js // 계층 3: JS를 사용할 수 있으면, 라이브 AJAX 검색으로 향상한다 form.addEventListener("submit", (e) => { e.preventDefault(); // fetch로 업그레이드 — 리로드 없음 fetchResults(form.q.value); }); ``` JavaScript가 로드에 실패해도(불안정한 네트워크, 오류, 차단), form은 네이티브 제출을 통해 **여전히 작동**합니다. 사용자는 여전히 검색할 수 있습니다. JS는 그것을 *향상*시킬 뿐입니다. ## progressive enhancement vs graceful degradation - **Progressive enhancement** — 기반에서 시작해 *위로* 쌓습니다. (상향식.) - **Graceful degradation** — 모든 기능을 갖춘 버전에서 시작해 *받아들일 만하게 저하*되도록 보장합니다. (하향식.) Progressive enhancement는 토대가 작동하도록 보장되므로 일반적으로 더 견고합니다. ## 왜 중요한가 이는 견고하고 접근성 있으며 성능 좋은 사이트를 만듭니다. 콘텐츠가 HTML에 있고(SEO, 스크린 리더, 느리고 오래된 기기에 좋음), 페이지가 JS 이전/없이도 사용 가능하며(체감 로드가 빠르고, 스크립트가 오류를 일으켜도 작동), 향상은 필수가 아니라 보너스입니다. 다양한 기기, 네트워크, 장애가 있는 세상에서, JS가 항상 실행된다고 가정하는 대신 작동하는 HTML 핵심 위에 쌓는 것은 사이트를 모두에게 사용 가능하게 유지합니다. 현대 프레임워크는 서버 사이드 렌더링과 "플랫폼이 먼저 작동하고, 하이드레이션이 향상한다"는 방식으로 이를 반영합니다.