점진적 향상

섬네일|순수 HTML(첫 번째 계층)을 통해 접속한 위키백과 문서. 스타일링(두 번째 계층)과 스크립트(세 번째 계층)가 없으면 콘텐츠의 크기는 76 KB에 불과하다.
점진적 향상(progressive enhancement)은 웹 콘텐츠를 최우선으로 강조하는 웹 디자인 전략으로, 모든 사람이 웹 페이지의 기본 콘텐츠와 기능에 접근할 수 있도록 하는 동시에, 추가적인 브라우저 기능이나 더 빠른 인터넷 접속이 가능한 사용자에게는 향상된 버전을 제공한다. 이 전략은 로딩 속도를 높이고 웹 검색 엔진의 크롤링을 용이하게 하는데, 페이지의 텍스트가 자바스크립트가 실행되어 콘텐츠를 불러올 때까지 기다릴 필요 없이 HTML 소스 코드를 통해 즉시 로드되기 때문이다. 즉, 추가적인 계층 뒤에 숨겨지지 않고 "즉시 사용 가능한" 콘텐츠가 바로 제공됨을 의미한다.

이 전략은 관심사 분리를 통해 표현 시맨틱을 콘텐츠에서 분리하는 것을 포함하며, 표현 방식은 하나 이상의 선택적 계층으로 구현되어 클라이언트의 웹 브라우저나 인터넷 연결 상태에 따라 활성화된다. 실제로 이는 웹 표준의 "최소 공통 분모"인 HTML을 통해 콘텐츠를 제공하고, 기술적으로 가능한 범위까지 CSS를 통해 스타일링과 애니메이션을 적용한 후, 자바스크립트를 통해 추가적인 향상을 적용하는 것을 의미한다. 현재는 지원이 중단된 어도비 플래시가 널리 사용되던 시절에는 자바스크립트와 함께 마지막 단계를 공유했던 것으로 간주할 수 있다. 웹 브라우저는 자바스크립트의 단일 오류나 누락된 기능 때문에 전체 사이트 로드에 실패하는 대신 지원되는 범위까지 사이트 기능을 로드할 수 있으므로, 점진적으로 향상되는 사이트는 더 안정적이고 후방 호환성이 높다.

 역사 
"점진적 향상"이라는 용어는 2003년 3월 11일 오스틴에서 열린 SXSW 인터랙티브 컨퍼런스에서 스티븐 챔피언과 닉 핑크에 의해 만들어졌으며, 2003년 3월과 6월 사이에 발행된 웹멍키의 일련의 기사들을 통해 소개되었다.

다양한 화면 해상도에 적응하는 페이지 레이아웃의 유연성과 관련된 구체적인 CSS 기술은 반응형 웹 디자인 접근 방식과 연계된 개념이다.
2012년, net 매거진은 2012년 최고의 웹 디자인 트렌드 목록에서 점진적 향상을 1위로 선정했다(반응형 디자인은 2위였다). 구글은 "특정 웹 디자인 기능이 아직 지원되지 않을 때도 우리의 시스템(및 더 광범위한 브라우저)이 사용 가능한 콘텐츠와 기본 기능을 볼 수 있도록" 돕기 위해 점진적 향상의 도입을 권장해 왔다.Pierre Far (2014), Updating our technical Webmaster Guidelines, Webmaster Central Blog

 도입 
이 전략은 이전의 웹 디자인 전략인 우아한 성능 저하(graceful degradation)에서 발전한 것이다. 우아한 성능 저하는 최신 브라우저를 위해 웹 페이지를 먼저 디자인한 다음, 구형 버전의 브라우저 소프트웨어에서도 잘 작동하도록 만드는 방식이었다. 우아한 성능 저하의 목표는 디자인에서 기대하는 특정 기술이 부재하더라도 페이지가 "저하"되어 여전히 보기에 좋고 접근성을 유지하도록 하는 것이다.

점진적 향상에서는 이 전략을 의도적으로 뒤집는다. 웹 콘텐츠는 브라우저 소프트웨어 기능의 최소 공통 분모에 맞춰 마크업 언어 문서로 생성된다.
접이식 내비게이션 메뉴와 같이 자바스크립트를 통해 대화형으로 콘텐츠를 보여주어야 하는 경우, HTML 마크업은 기본적으로 모든 콘텐츠를 드러내고 자바스크립트 자체가 콘텐츠의 일부를 숨기는 방식을 취한다.
개발자는 현대적인 CSS, Scalable Vector Graphics(SVG) 또는 자바스크립트를 사용하여 페이지의 표현과 동작에 원하는 모든 기능을 추가한다.

 배경 
점진적 향상 접근 방식은 HTML 및 기타 웹 표현 언어보다 앞선 SGML(Standard Generalized Markup Language)에 대한 챔피언의 초기 경험()에서 유래했다.

콘텐츠를 시맨틱 마크업으로 작성하고 마크업 자체에 포함시키기보다는 콘텐츠의 표현을 별도로 고려하는 것은 콘텐츠와 표현의 분리 원칙으로 불리는 개념이다.
챔피언은 웹 브라우저가 HTML 콘텐츠에 대해 기본 표현 스타일을 제공하므로, 웹사이트의 콘텐츠를 시맨틱 HTML로 작성하고 표현 선택은 웹 브라우저에 맡기게 되기를 희망했다.
그러나 웹 디자이너들의 요구로 인해 HTML 표준은 HTML 콘텐츠가 특정 스타일을 규정할 수 있도록 하는 하드 코딩된 기능들이 확장되었고, 이는 소비자들과 그들의 웹 브라우저로부터 선택권을 빼앗아 갔다.
이러한 기능들은 발행인들이 새로운 파괴적 기술을 채택할 것인지, 아니면 다른 브라우저를 사용하는 관객들에게 콘텐츠가 계속 접근 가능하도록 할 것인지 사이에서 선택하도록 강요했으며, 이는 디자인과 호환성 사이의 딜레마를 야기했다.
1990년대 동안 인기 있는 브라우저의 최신 버전이 아니면 작동하지 않는 웹사이트가 점점 더 늘어났다.

이러한 추세는 1990년대 이후 CSS가 널리 지원되기 시작하면서 반전되었으며, 에릭 코스텔로, 오웬 브릭스, 데이브 셰이 등 레이아웃 목적으로 CSS를 사용하는 방법을 웹 디자이너들에게 보여준 풀뿌리 교육 노력을 통해 변화가 일어났다.

 핵심 원칙 

점진적 향상 전략은 다음과 같은 핵심 원칙으로 구성된다.
 기본 콘텐츠는 모든 웹 브라우저에서 접근 가능해야 한다.
 기본 기능은 모든 웹 브라우저에서 접근 가능해야 한다.
 희소한 시맨틱 마크업이 모든 콘텐츠를 포함한다.
 향상된 레이아웃은 외부에서 링크된 CSS에 의해 제공된다.
 향상된 동작은 외부에서 링크된 자바스크립트에 의해 제공된다.
 최종 사용자의 웹 브라우저 설정이 존중된다.

 지원 및 채택 

 2003년 8월, 짐 윌킨슨은 몇 가지 팁을 수집하고 전반적인 전략을 설명하기 위해 점진적 향상 위키 페이지를 만들었다.Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss 
 제레미 키스와 같은 디자이너들은 유연하면서도 강력한 사용자 경험을 제공하기 위해 Ajax와 같은 현대적인 웹 디자인의 다른 접근 방식과 이 방식이 어떻게 조화롭게 사용될 수 있는지 보여주었다.Jeremy Keith's Adactio blog (2005), Progressive Enhancement with Ajax
 에런 구스타프슨은 A List Apart에 기본 철학부터 CSS 접근 방식, 자바스크립트 처리 방법까지 점진적 향상의 기초를 다루는 시리즈를 기고했다.
 몰리 홀츠슐라그와 데이브 셰이의 CSS Zen Garden은 CSS 기반 디자인 전략을 지칭하는 용어로 이 용어의 채택을 확산시켰다.
 Acid2 및 Acid3 테스트 개발을 주도한 웹 표준 프로젝트(WaSP)와 같은 조직들은 점진적 향상을 교육 활동의 기초로 받아들였다.
 2006년 야후!의 네이트 케클리는 웹 디자인 및 브라우저 지원에 대한 자신의 접근 방식인 등급별 브라우저 지원(GBS)에서 점진적 향상을 광범위하게 언급했다.
 AOL의 스티브 칩먼은 (DOM 스크립팅에 의한) 점진적 향상을 자신의 웹 디자인 전략의 기초로 언급했다.Steven G. Chipman (2005), New Skool DOM Scripting
 AOL 최적화 팀의 리더인 데이비드 아츠는 일련의 접근 가능한 렌더링 기술을 개발했으며, 사용자의 선호도를 저장하면서 실시간으로 "향상" 기능을 분해하는 기술을 발명했다.
 점진적 향상은 위키백과와 같은 미디어위키 기반 사이트의 프런트엔드에서 사용된다. 스타일링이나 스크립트 없이 기본적인 HTML 인터페이스만으로도 읽기, 탐색, 심지어 편집까지 가능하며, 필요한 경우 이를 통해 기능이 강화된다. 예를 들어, 위키텍스트 편집기의 툴바는 자바스크립트를 통해 로드되고 작동한다.
 크리스 하일만은 각 브라우저가 처리할 수 있는 콘텐츠(및 향상 기능)만 가져갈 수 있도록 하는 타겟팅된 CSS 전달의 중요성을 논의했다.
 필라멘트 그룹의 스콧 젤은 향상 기능을 제공하기 전에 (사용자 에이전트를 통해 추측하는 대신) 기기 능력을 테스트할 것을 권장하는 "테스트 주도 점진적 향상"을 제안했다.
 Wt는 부트스트랩 중에 점진적 향상을 투명하게 구현하여 일반 HTML에서 전체 Ajax로 진행하는 오픈 소스 서버 측 웹 애플리케이션 프레임워크이다.

 이점 
 접근성, 호환성 및 확장성 
점진적 향상 원칙에 따라 제작된 웹 페이지는 본질적으로 더 나은 접근성을 가지며,
후방 호환성이 뛰어나고,
전달 범위가 더 넓다. 이 전략은 기본 콘텐츠가 항상 사용 가능해야 하며, 쉽게 비활성화되거나 지원되지 않거나(텍스트 기반 웹 브라우저 등), 민감한 환경의 컴퓨터에서 차단될 수 있는 기능이나 스크립팅에 의해 방해받지 않아야 한다고 요구하기 때문이다.
또한, 희소한 마크업 원칙은 콘텐츠를 소리 내어 읽어주는 도구들이 해당 콘텐츠를 더 쉽게 찾을 수 있도록 한다.
다만, 점진적 향상 사이트가 테이블 레이아웃이나 "태그 수프" 등을 처리하기 위해 설계된 구형 도구들과 얼마나 잘 작동하는지는 명확하지 않다.

 속도, 효율성 및 사용자 제어 
클라이언트는 기본 HTML 이외의 페이지 부분(예: 스타일링, 이미지 등)을 다운로드할지 여부를 선택할 수 있으며, 로딩 속도를 높이고 대역폭과 전력 소비를 줄이기 위해 원하는 용도에 필요한 부분만 다운로드하도록 선택할 수 있다. 예를 들어, 지리적 위치로 인한 느린 인터넷 속도, 불량한 셀룰러 신호, 또는 고속 데이터 요금제 소진으로 인한 속도 제한 때문에 스타일 시트, 스크립트 및 미디어(이미지 등)를 로드하지 않고 기본 HTML만 다운로드하도록 선택할 수 있다. 이는 서버 측의 대역폭 소비도 줄여준다.

이에 비해, 초기 콘텐츠가 AJAX를 통해 로드되는 페이지는 클라이언트가 콘텐츠를 즉시 다운로드하는 대신 페이지 콘텐츠를 다운로드하고 보기 위해 비효율적으로 자바스크립트를 실행해야 한다.

 검색 엔진 최적화 (SEO) 
검색 엔진 최적화(SEO) 측면에서 개선된 결과는 점진적 향상 기반 웹 디자인 전략의 또 다른 부수 효과이다. 기본 콘텐츠는 항상 검색 엔진 스파이더가 접근할 수 있으므로, 점진적 향상 방법으로 구축된 페이지는 검색 엔진 인덱싱을 방해할 수 있는 문제를 피할 수 있는 반면, 자바스크립트 실행을 통해 기본 페이지 콘텐츠를 렌더링해야 하는 경우에는 크롤링이 느리고 비효율적이게 된다.

 비판 및 응답 
가렛 디몬과 같은 일부 회의론자들은 특정 사용자 인터페이스 표현이나 동작을 구현하기 위해 자바스크립트에 크게 의존하는 상황에서는 점진적 향상이 실행 가능하지 않다는 우려를 표명했다. 노리지스톰(KnowledgeStorm)의 정보 설계자 로리 그레이는 정보 제공 페이지가 검색 엔진 스파이더에 의해 인덱싱되려면 점진적 향상을 사용하여 코딩되어야 한다는 점으로 반박했다. 인기 있는 플래시 애플리케이션인 SWFObject의 저자 제프 스턴스는 플래시 비중이 높은 페이지도 점진적 향상을 사용하여 코딩되어야 한다고 주장했다.

디자이너 더글러스 보우먼과 밥 스타인은 콘텐츠와 표현의 분리 원칙에 대해 절대적인 관점에서 의구심을 표하며, 대신 두 가지가 불가분하게 연결되어 있다는 현실적인 인식을 촉구했다.

 같이 보기 
 콘텐츠 적응기기 능력에 적응하도록 콘텐츠 변환
 FOUC
 프로그레시브 웹 애플리케이션
 시맨틱 HTML
 유니버설 디자인
 비침투적 자바스크립트

 각주 

 더 읽어보기 
 Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) Cascading Style Sheets: Separating Content From Presentation (2nd ed.). San Francisco: Apress. 
 Gustafson, Aaron (2011) Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Chattanooga: Easy Readers. .
 Keith, Jeremy (2007) Bulletproof Ajax. Berkeley: New Riders. 
 Keith, Jeremy (2005) DOM Scripting: Web Design with JavaScript and the Document Object Model. Berkeley: friends of ED. 
 Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie (The Filament Group) (2010) Designing with Progressive Enhancement Peachpit/New Riders. 

분류:웹 디자인
분류:사용성
분류:웹 접근성
분류:반응형 웹 디자인