점진적 향상(Progressive Enhancement)은 기본 기능을 모든 환경에서 보장하고, 능력 있는 환경에서는 더 나은 경험을 제공하는 웹 개발 철학이다. 우아한 저하(Graceful Degradation)와 반대 방향의 접근법이다.
핵심 원칙
3가지 레이어:
1. HTML: 시맨틱 구조 (기본 콘텐츠 - 모든 환경)
2. CSS: 시각적 표현 (지원하면 향상)
3. JavaScript: 동적 기능 (지원하면 향상)
점진적 향상 vs 우아한 저하
| 접근법 | 시작점 | 방향 |
|---|
| 점진적 향상 | 기본 HTML | 기능 추가 |
| 우아한 저하 | 완전한 기능 | 기능 제거 |
HTML 기반 폼 (JS 없이 동작)
html
<!-- JS 없이도 서버 제출 가능한 폼 -->
<form action="/api/comments" method="post">
<label for="comment">댓글</label>
<textarea id="comment" name="comment" required></textarea>
<button type="submit">제출</button>
</form>
javascript
// JS가 있으면 비동기 제출로 향상
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // JS 있을 때만 기본 동작 차단
const data = new FormData(form);
try {
await fetch('/api/comments', { method: 'POST', body: data });
showSuccessMessage(); // 더 나은 UX
} catch {
form.submit(); // 실패 시 기본 방식으로 폴백
}
});
}
CSS 기능 감지
css
/* 기본 레이아웃 (float 기반) */
.container { overflow: hidden; }
.sidebar { float: left; width: 25%; }
.main { float: left; width: 75%; }
/* CSS Grid 지원 시 향상 */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
.sidebar, .main { float: none; width: auto; }
}
javascript
// 기능 감지 (구식 브라우저 대응)
if ('IntersectionObserver' in window) {
// 지원하면 지연 로딩
lazyLoadImages();
} else {
// 지원 안 하면 즉시 로딩
document.querySelectorAll('img[data-src]').forEach(img => {
img.src = img.dataset.src;
});
}
// 서비스 워커 점진적 향상
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
관련 개념
