점진..뭐? 우아한 뭐..?

Progressive enhancement and Graceful degradation
점진적 향상법과 우아한 성능저하.. 라고들 합니다.

개념 자체는 알고 보면 쉬운데 단어가 낯설게 느껴져서 그런지 뭔가 쉽게 느껴지지 않네요.

프론트엔드 인터뷰 공부 중에 흥미롭게 본 내용이기에 정리해봤습니다.

점진적 향상법(Progressive enhancement)

웹 컨텐츠는 모든 브라우저에서 같게 보여야 한다는 개념이 있습니다.
하지만 그것을 위해서 구버전에 브라우저를 기준으로만 개발할 수 없습니다.
이 둘을 적절히 합의를 본 게 점진적 향상법입니다.

최신 브라우저에서 더 나은 화면 효과와 추가된 부가기능을 사용할 수 있게 하면서 구버전에서도 컨텐츠 가독이 가능하게 하는 방법입니다.

예를 들면 네이버 효과툰의 경우 지원 브라우저에서는 화려한 효과를 볼 수 있습니다.
하지만 지원하지 않는 브라우저에서는 효과 없이 최소한 웹툰 보는 데 지장이 없도록 보여주는 정도입니다.

점진적 향상법을 사용할 경우 신기술 도입 장벽이 사라지고, 개발소요 시간이 줄어들어 생산성이 높아집니다.

적용 방법

  • 모든 브라우저에서 컨텐츠 표시
  • 모든 브라우저에서 기능 수행
  • 시맨틱마크업으로 컨텐츠 표시
  • 레이아웃의 향상은 외부 CSS 파일로 처리
  • 동적인 향상은 외부 unobtrusive Javascript로 처리
    이는 필수적인 기능들은 html로 처리하고 그 위에 Javascript를 추가하여 기능을 더한다는 것이다.
    unobtrusive는 나서지 않는 이라는 뜻



우아한 성능저하(Graceful degradation)

특정 기능을 제공받지 못하는 사용자에게는 다른 버전의 대체 기능을 지원하거나, 구 브라우저에서는 이용할 수 없다는 코멘트를 다는것!

일반적으로 사용하는 방법입니다.

한국 사이트는 IE8에도 어떻게든 지원하려고 하지만 외국 페이지의 경우 쿨하게 메시지 띄워버립니다.
그런데 사실 외국은 그럴 만도 하다는 생각이 들었던게, 캐나다 공공 도서관 가보니깐 그곳에 비치된 컴퓨터도 크롬 쓰더라구요... 흠 인터레스팅...

어떤 경우에 적용하는가?

오래된 제품을 새로 개발하기에 시간이 부족하고 방법이나 영향도를 모를 경우,
수행속도에 민감한 사이트
기능이 스크립트에 의존적인 경우


참고

먼 훗날 느티나무 (아빠가 쓰는 아이 이야기)

Dothun

마치며

위 용어에 대해서 큰기능 -> 작은기능으로 또는 반대로 작업하는 걸로도 설명한 걸 보긴했는데 개인적으로 혼란스러워 질 것 같아 제외 했습니다.

지적 환영합니다!

저작자표시