아겔로그

🌬️ ‘graceful degradation’, ‘progressive enhancement’

하나씩 정리해보자.

이하의 정리는 “웹개발”, “웹페이지” 유지보수 관점/도메인의 시점에서, 다른 도메인(예=전자제품)에서의 정의와 완전히 일치하지는 않을거 같다.

위키백과나 다른 블로그에서 소개한 글들은 전자제품, 전자통신 등의 관점, 개념, 용어 중심으로 풀어 설명했기 때문에 웹개발의 관점에선 잘 모르겠었어서. (원저자분들 죄송합니다. 🙇)

즉, 이하에 소개할 링크에서 W3C의 정의에 따라 이해해보려고 함.

“progressive enhancement” -or- “graceful degradation”?

  1. W3C Wiki Graceful degradation versus progressive enhancement
  2. 기계인간 John Grib 우아한 성능 저하 (graceful degradation)

조금 뭔지 모를 영어가 많이 나와서 혼란스럽다.

“Graceful Degradation”

  1. ‘기능’ 구현의 대상이 현대적인 웹브라우저를 대상으로 구현.
  2. 그리고 그 구현대상인 현대 웹브라우저를 기준으로 ‘사용자경험’이 최적이 되도록 설계/구현.
  3. 반면, 구형 웹브라우저에서는 약간의 사용자경험이 떨어질 수는 있는.
  4. 하지만, 그럼에도 구형 웹브라우저에서도 기능적인 측면에서는 여전히 기본적인 기능이 잘 동작해야 함.
  5. 즉, 최적의/최대한의 사용자경험을 제공하는 것을 우선목표로 하고, 그 다음에 그걸 수행하지 못하는 환경을 배려하는 설계-구현을 더하는 방식.

즉, 가능하면 최신의 기능이나 지원을 잘 활용하여 설계-구현하되, 그게 지원되지 않는 환경에서도 적당히 쓸 수 있도록 하는 방식.

(예: 👉 /posts/2025-12dec/htmx-hx-boost+dark-mode/ )

“Progressive Enhancement”

  1. (반대로) 기초적인 사용자경험을 우선목표로 시작하는 방식.
  2. 그리고 거기에 추가적인 지원이 가능한 환경을 위해, 더 나은 사용자경험을 지원하는 설계-구현이 자동적으로 덧붙여질 수 있도록 하는 방식.
  3. 즉, ‘최대공약수’, ‘하한선’, ‘lower limit’에 맞춰서 설계-구현의 주요목표를 설정하는 방식.

“우로 가나 모로 가나 그게 그거 아냐?”

최종결과물이 비슷하게 나온다면 그래 보일 수 있음. 😅

하지만, 접근방식의 차이이기 때문에 그 과정과 선택하는 시점의 이유는 명확히 다른거 같다.

이건 그냥 W3C 페이지에서 복붙하겠음:

graceful degradation을 고려할 때:

  1. 리거시에 대한 낮은 가시성/접근성 또는 개선을 위한 시간/자원의 부족:

    • You retrofit an old product and you don’t have the time, access or insight to change or replace it.

  2. You just don’t have time to finish a product with full progressive enhancement

    • (often a sign of bad planning or running out of budget). 😥

  3. 혹은 변경에 따른 위험도가 너무 큼

    • The product you have is an edge case, for example very high traffic sites where every millisecond of performance means a difference of millions of dollars.
  4. Your product by definition is so dependent on scripting that it makes more sense to maintain a “basic” version rather than enhancing one (Maps, email clients, feed readers).

progressive enhancement은:

적용가능하다면, 사용자와 개발자 양자를 모두 행복하게 할 가능성이 높다고.. 잘 isolated + high-cohesive + low-coupled 모듈의 정의와 유사함을 알 수 있음.

  1. Regardless of environment and ability you deliver a product that works.
  2. When a new browser comes out or a browser extension becomes widely adopted you can enhance to yet another level without having to touch the original solution — graceful degradation would require you to alter the original solution.
  3. When a new browser comes out or a browser extension becomes widely adopted you can enhance to yet another level without having to touch the original solution — graceful degradation would require you to alter the original solution.
  4. If you need to add new features, you can do so after checking if they are supported at a certain stage, or you can add it to the most basic level of functionality and make it better in more sophisticated environments. In any case, the maintenance happens at the same spot and not in two different places. Keeping a progressively enhanced product up-to-date is much less work than maintaining two versions.