스마트폰이 나타나고 이전에는 없던 모바일 브라우저가 폭발적으로 사용되면서 대두된 개념.
당시 모바일 브라우저는 데스크탑 브라우저에 비해 기능이 많이 부족해서 모바일을 기준으로 개발하면 여러 유용한 기능을 사용할 수 없었고 데스크탑을 기준으로 개발하면 모바일에서 동작하지 않아 문제가 발생하곤 했다.
브라우저 파편화 속에서도 어떻게든 비슷하게 기능을 제공해왔는데 이젠 모든 환경에서 똑같은 기능을 제공하는 게 아예 불가능해진 것.
그런데 생각을 달리해보면 모든 브라우저에서 동일한 기능을 완벽하게 제공하려고 애쓸 필요는 없다. 중요한 건 사용자가 꼭 필요한 정보를 얻는데 있어 불편함이 없으면 되는 것.
우아한 성능 저하
- 기능을 제공하되 지원하지 않는 환경에 대해 대비책 혹은 폴백을 만들어두는 것
- ex) video 태그를 지원하지 않는 브라우저에서 일단 웹 사이트는 지원하는 브라우저를 기준으로 작성하되 video 태그 안에 이미지 태그를 넣어두면 적어도 이미지를 보여줄 수 있다. 혹은 동영상 파일의 링크를 추가하여 클릭해서 보도록 할 수도 있다.
점진적 향상
- 먼저 성능이 부족한 환경을 기준으로 작성한 다음, 최신 기능을 지원하는 환경에서만 해당 기능을 제공
- ex) 프린트가 되지 않는 환경에서 블로그 게시물을 프린트 하는 버튼이 보인다면 사용자에게 혼란을 줄 것이다. 따라서 이 버튼은 아예 없거나 보이지 않게 숨겨둔 채로 개발한다. 이후 해당 환경에 프린트 기능이 지원되는지 JS로 확인한 다음 버튼을 보이게 하거나 새롭게 추가한다.
두 가지 방법은 한 페이지에서도 보완적으로 사용되곤 한다. 사용자가 필수 정보를 접근할 때 필요하다면 호환성을 중시해 점진적 향상을 사용하고 동영상이나 아이콘처럼 반드시 필요한 게 아니라면 우아한 성능 저하를 사용하기도 한다.
브라우저 점유율이나 기능 지원 여부를 기준으로 삼아서 방법을 결정하는 경우도 있다. 점유율이 높은 브라우저를 기준으로 작성하고 낮은 브라우저를 추가 지원하는 방식으로 진행할 수 있다.
Frontend & Artificial Intelligence