점진적 향상이란 무엇입니까?
점진적 향상은 소프트웨어가 강력하고 액세스 가능하도록 보장하는 데 도움이 되는 기술입니다. 이를 따르면 가능한 한 많은 사람들이 웹사이트나 앱을 사용할 수 있습니다.
최소한으로 실행 가능한 웹 디자인 버전으로 시작하여 필요에 따라 작동하는지 확인하십시오. 그런 다음 추가 기능과 스타일을 계층화하여 더 많은 기능을 갖춘 브라우저가 이점을 얻을 수 있도록 합니다.
점진적 향상은 어떻게 작동합니까?
극도로 분산된 특성 때문에 웹은 항상 다양한 장치를 지원해야 했습니다. 1970년대의 기본 컴퓨터에서 유능한 최신 데스크탑, 태블릿 및 TV에 이르기까지 웹 사이트는 먼 길을 왔습니다.
모든 것의 중심에는 HTML이 있습니다. “용서하는” 언어이기 때문에 브라우저는 HTML을 이해할 뿐만 아니라 표시합니다. 일반적으로 지원하지 않는 것은 무시합니다.
이는 개발자의 관점에서 유용할 수 있지만 독자에게는 문제를 일으킬 수 있습니다. JavaScript를 실행할 수 없을 때 사이트에 빈 페이지가 표시되면 사용자는 사이트를 포기할 수밖에 없습니다. 점진적 개선은 액세스할 수 있는 모든 사람에게 핵심 콘텐츠를 제공한 다음 CSS 및 JavaScript와 같은 적절한 기술을 사용하여 해당 콘텐츠를 개선하도록 권장합니다.
스타일링에 대한 진보적인 접근
CSS는 페이지의 색상, 글꼴, 레이아웃 및 기타 여러 시각적 측면을 사용자 지정하는 데 사용할 수 있는 웹 스타일 시트 언어입니다. 이를 사용하여 콘텐츠의 기본 모양을 향상시킬 수 있지만 처음부터 콘텐츠를 제대로 구성하지 않아야 한다는 의미는 아닙니다.
예를 들어 메뉴 모음을 살펴보겠습니다. 다음과 같이 구성할 수 있습니다.
<nav>
<a href="/register">register</a>
<a href="/login">log in</a>
<a href="/about">about us</a>
<a href="/contact">contact</a>
</nav>
각 링크가 버튼처럼 보이는 가로 메뉴를 표시하려면 다음 CSS를 사용하여 스타일을 지정할 수 있습니다.
nav a {
text-decoration: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid;
border-radius: 8px;
margin-right: 1em;
}
브라우저가 이를 완전히 렌더링하면 다음과 같이 표시됩니다.
그러나 CSS를 사용할 수 없는 경우 메뉴는 다음과 같이 표시됩니다.
이것이 메뉴처럼 보이지 않고 링크가 하나로 병합되기 때문에 사용하기가 쉽지 않다는 점에 유의하십시오.
대체 구조를 사용하여 설계를 보다 견고하게 만들 수 있습니다.
<nav>
<ul>
<li><a href="/register">register</a></li>
<li><a href="/login">log in</a></li>
<li><a href="/about">about us</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
이 마크업은 정렬되지 않은 목록 요소를 사용하므로 CSS가 없을 때 훨씬 더 유용합니다.
브라우저의 기본 스타일을 사용해도 이러한 링크를 빠르게 스캔하고 이해하는 것이 얼마나 쉬운지 확인하십시오. 이 접근 방식에서는 기본 목록 스타일을 재정의하기 위해 CSS를 조금 더 추가해야 합니다.
nav li { display: inline; }
최종 구조와 스타일이 더 복잡하고 대부분의 사용자가 CSS를 활성화하더라도 이 접근 방식이 더 강력합니다. 화면 판독기 및 터미널 기반 브라우저 사용자에게 더 친숙할 것입니다.
점진적으로 기능 도입
점진적 개선은 사이트 또는 앱의 기능과 관련하여 가장 중요합니다. 원칙은 어떤 일이 있어도 웹사이트가 가능한 한 잘 작동해야 한다는 것입니다.
실제로 이것은 일반적으로 JavaScript에 적용됩니다. 클라이언트 측 동작을 도입하는 경우 클라이언트 측 동작 없이도 이미 작동하는 사이트나 애플리케이션 위에 기능을 추가해야 합니다.
매우 일반적인 경우는 이벤트 처리입니다. 요청 시 추가 콘텐츠를 로드하는 페이지를 상상해 보십시오. 이것은 수동 무한 스크롤, 댓글 삽입 또는 이와 유사한 것일 수 있습니다.
<body>
<!--. .. -->
<button onclick="load_more();">
Load More
</button>
<!--. .. -->
</body>
버튼의 onclick 속성에는 누군가 버튼을 클릭할 때 실행되는 JavaScript 코드가 포함되어 있습니다. 그러나 JavaScript를 사용할 수 없는 경우 이 버튼은 아무 작업도 수행하지 않습니다. 사용자는 피드백 없이 이 버튼을 클릭하고 무엇이 잘못되었는지 알 수 없습니다. 훨씬 더 나은 접근 방식은 점진적 향상을 사용합니다.
<body>
<!--. .. -->
<a id="p2" href="/page/2">Page 2</a>
<script>
function load_more() { console.log("!"); }
/* Replace link with button */
var link = document.getElementById("p2");
var button = document.createElement("button");
button.innerText = "Load More";
button.addEventListener("click", load_more);
document.body.insertBefore(button, link);
link.parentNode.removeChild(link);
</script>
</body>
이 코드는 기본 링크를 이벤트 핸들러가 있는 버튼으로 변환합니다. JavaScript 자체를 사용하여 JavaScript에 대한 종속성을 도입하면 제대로 작동할 것임을 확신할 수 있습니다. 그리고 /page/2 에 대한 표준 링크의 형태로 작동하는 기능적 기본 동작이 있습니다 .
점진적인 향상이 정말로 필요한가?
모두가 CSS와 JavaScript가 있는 브라우저를 사용하는데 왜 발생하지 않는 상황에 신경을 써야 할까요? 음, 점진적 향상의 모범 사례를 채택해야 하는 몇 가지 이유가 있습니다.
- 첫째, 귀하의 웹사이트를 방문하는 모든 사람이 브라우저를 사용하는 것은 아닙니다. 일부 방문자는 검색 엔진 인덱서와 같은 봇일 수 있으며 이들은 CSS 또는 JavaScript를 전혀 이해하지 못할 수 있습니다.
- 둘째, 귀하의 사이트를 방문하는 모든 사람이 CSS 및 JavaScript가 포함된 브라우저를 사용하지는 않습니다. 일부 방문자는 최소한의 형식으로 일반 텍스트를 표시하는 터미널 기반 브라우저를 사용할 수 있습니다. 다른 사람들은 스크린 리더를 사용할 수 있습니다.
- 셋째, 브라우저가 CSS와 JavaScript를 지원하더라도 문제가 발생합니다. 링크가 끊어지거나 네트워크 연결이 불량하면 누락될 수 있습니다. CSS 또는. js 파일입니다. JavaScript의 버그로 인해 다른 코드가 전혀 실행되지 않을 수 있습니다.
- 마지막으로 일부 방문자는 CSS 또는 JavaScript를 비활성화하기로 적극적으로 결정할 수 있습니다. 개인 정보 보호 문제로 인해 또는 느리거나 종량제 연결을 사용하기 때문에 그렇게 할 수 있습니다.
진보적 사고 방식은 놀라운 일을 합니다
무엇보다 점진적 향상은 콘텐츠 우선 접근 방식을 채택하도록 권장합니다. 콘텐츠는 왕이므로 텍스트와 이미지는 사이트에 액세스하는 모든 사람이 항상 사용할 수 있어야 합니다.
모든 독자에게 가능한 최고의 경험을 제공하고 혜택을 받을 수 있는 사람들을 위해 더 나은 경험을 제공함으로써 최고의 세상을 누릴 수 있습니다. 점진적 향상은 우수한 접근성 및 사용성 관행의 핵심 구성 요소 중 하나일 뿐입니다.
답글 남기기