점진적 기능 향상

출처 : 개발자와 디자이너가 함께 보는 자바스크립트 프로그래밍

점진적 기능향상

▼정의

웹 디자인 커뮤니티에서는 콘텐츠의 중요성을 강조하는 안내지침이 있는데 그것을 점진적 기능 향상(Progressive Enhancement)이라한다.

가장 기본적인수준의 점진적 기능향상에서는 HTML, CSS, 자바스크립트를 기능적으로 분리한다.

점진적 기능 향상은 웹 디자인에 대한 계층화된 접근법으로서 콘텐츠와 사용자, 접근성에 초점을 둔다.

첫 단계는 구조(structure), 표현(presentation, 행위(behavior) 이라는 계층으로 나타내는데 이 3가지를 분리해내는데 있다.

이것은 웹사이트나 애플리케이션에 대한 상향식, 역방향 제작 모델에 해당한다.

첫번째 계층 구조 : 콘텐츠에 집중하고 콘텐츠에 시맨틱 및 유의미한 HTML로 마크업한다.

두번째 계층 표현 : 표현 계층에서는 CSS를 다룬다.

세번째 계층 행위 : 자바스크립트가 행위 계층에 해당하는 기술이다.

세 계층은 모두 통합되있지만 서로 접촉하지 않게 되어있다.

자바스크립트는 CSS를 피요로 하고, CSS는 HTML을 필요로 한다. 이런 순서로 만들어져 있으므로 위에서 아래로 각 계층을 제거하더라도 사이트에 가장 중요한 측면인 콘텐츠는 절대 잃어버리지 않는다.

▼목적

콘텐츠에 중요성을 두는 것이 목적이다. 그러나 주 초점이 콘텐츠에 있더라도 점진적 기능 향상에서는 기술도 고려한다.

자바스크립트를 꺼버리더라도 콘텐츠가 접근이 가능하며 스크립트 코드를 받지 않아도 되기 때문에 대역폭을 낭비하지 않아도 된다. 따라서 성능문제도 해결된다.

▼접근성

접소이 느리거나 대역폭이 낮을 수도 있지만 콘텐츠는 화면에 표시되는데 이는 구조 ㅖ층이 다른 계층과 독립성을 유지함으로써 유의미하고 가벼운 상태를 유지할 것이기 때문이다. 어떠한 사용자이든지, 어떠한 단말기를 사용하는 사람들이든지, 모든 사람들이 콘텐츠를 손쉽게 소비할 수 있을 것이다.

▼재사용성

모든 계층을 분리하면 코드이 재사용성이 높아진다.경력이 쌓일때마다 지난 프로젝트에서 썼던 코드를 재사용 할수 있게 된 것이다.

▼구조계층

점진적 기능 향상의 첫 단계는 HTML을 이용해 콘텐츠를 의미있는 방식으로 구조화하는 것이다.

▼표현계층

문서를 유의미한 구조에 배치하고 나면 CSS로 해당 구조를 접근해 디자인을 적용할 수 있다. 표현 계층은 대단히 유연하다. CSS를 알면 더 나은 자바스크립트 코드를 작성하는데 도움이 된다. 성능 측면에서는 CSS의 랜더링 속도를 따라 잡을 수 없으며 브라우저에서 더 느린 자바스크립트와 비교했을때 더욱 그렇다. CSS의 모든 기능을 알고 표현과 행위를 분리하는 것을 이해한다면 무거운 자바스크립트 함수를 줄이고 더 효율적인 CSS를 대체할수 있다. 

'훌륭한 자바스크립트 코드를 작성하는 것의 핵심은 언제 자바스크립트 대신 CSS를 써야할지 아는 것이다.

ㅇ스타일시트 연결

CSS를 완전히 별도의 파일에 유지하고 HTML 문서에 연결하는 방법은 사이트에 디자인을 적용하는 가장 바람직하고 좋은 방법이다.

이론상 CSS를 원하는 만큼 여러파일에 첨부할 수 있더라도 CSS를 모두 한 파일에 유지하는 것이 가장 좋다.

HTML문서에 연결하면 HTTP Request가 발생하는데 이것은 브라우저가 사용자에게 보이기 전에 리소스를 구해서 내려받아야 한다는 것을 의미한다.

HTTP Request는 언제나 발생하며 이 횟수를 최소한으로 줄이는 것이 좋다. 어느순간에는 사이트 성능을 저하시킬수 있기 때문이다.

▼행동계층

많은 경우 자바스크립트는 사치에 지나지 않는다. 이 세번째 계층에 도달할 때쯤이면 사이트나 애플리케이션이 완전히 기능해야한다. 사이트나 애플리케이션은 행위계층을 도입하기 전에도 완전히 동작하고 원하는 작동 방식에 따라 동작해야 한다. 사용자 경험 측면에서는 좋지 않겠지만 자바스크립트 없이도 사이트가 애플리케이션이 동작하게 만들수 있다면, 자바스크립트가 동작하지 않더라도 이를 극복할 수 있는 방안이 생기는 것은 물론, 사용자에게 똑같이 매끄러운 경험을 선사하기 위해 훨씬 더 적은 자바스크립트 코드를 작성해야 할 것이다. 더 적은 자바스크립트 코드는 더 나은 성능을 의미하고, 더나은 성능은 더 나은 사용자 경험을 의미한다.

ㅇ인라인 자바스크립트

인라인 CSS 처럼 인라인 스크립트도 HTML인라인되면 밀착형 자바스크립트 obtrusive JavaScript라고 한다.

이러한 방식은 작업에 약간 걸림돌이 되며 HTML 코드 리딩에 비효율을 줄수 있기 때문에 분리형 자바스크립트 unobtrusive JavaScript를 작성하는 것이 좋다.

ㅇ내장 자바스크립트

내장 자바스크립트를 사용하는 것은 자바스크립트 언어를 HTML과 분리하게 만드는 것으로 나아가는 첫걸음이다.

아직까지 HTML상에 존재하기 때문에 완전히 분리하는 것은 아니지만 문법 스타일은 분리형 자바스크립트와 동일하다.

내장 자바스크립트는 <script>엘리먼트 안에 포함돼있고 해당 페이지에서만 실행된다.

ㅇ<script>안에서의 3가지 작업

ㅇ 함수 정의

ㅇ 변수 정의

ㅇ 이벤트 리스너 설정

ㅇ외부 및 분리형 자바스크립트

HTML 문서에서 모든 자바스크립트를 제거하고 구조, 표현, 행위를 확실하게 분리한다.

내장자바스크립트와 상당히 유사하지만 차이점은 자바스크립트 코드가 외부 파일에 존재한다는 것과 독립적으로 캐시할수 있다는 것이다. 그리고 적용 가능한 HTML문서에 대해서 단순히 파일을 연결하기만 하면 사이트 곳곳에서 손쉽게 재사용할 수 있다는 것이다. 다양한 방식으로 재사용할 수도 있다는 것이다.

▼점진적 기능 향상의 혜택

이러한 작업과 사전 구상을 하는 것이 나중에 그것을 고치는 데 드는 많은 시간을 줄여준다는 것이다. 

계층을 분리해서 유지할 때 생성되는 파일 구조를 확인할 수 있다.

어디에 디자인 변경을 가해야 할지 분명하게 알수 있다.

ㅇ성능

CSS와 자바스크립트 파일을 외부에서 연결함으로써 브라우저가 각 사용자마다 그것들을 메모리상에 캐시하게 할 수 있다.

이것은 홈페이지에 접근할때 여러 리소스가 저장되므로 사용자는 그것들을 다시 내려받지 않아도 된다. 이는 사용자 관점에서 사이트의 성능을 향상시킨다.

즉 재 방문시에 더 빠르게 접속이 가능하다는 것이다. 속도 향상 및 Http Request가 최소화된다.

ㅇ미래를 위한 대비

점진적 기능향상은 두 가지 방식으로 확장된다.

 - 기능추가

 - 미래를 대비한 규모확장

▼되새겨 보기

1. 점진적 기능 향상의 세계층은 무엇인가?

2. 점진적 기능향상에 관해 생각할 때 웹사이트에서 가장 중요한 부분은 무엇인가?

3. 점진적 기능향상을 활용하는 것이 성능에 어떻게 혜택을 주는가?