비침투적 자바스크립트

비침투적 자바스크립트(Unobtrusive JavaScript)는 웹 페이지에서 클라이언트 사이드 자바스크립트를 사용하는 일반적인 접근 방식으로, 사용자의 웹 브라우저에 자바스크립트 기능이 일부 또는 전체적으로 결여되어 있더라도 웹 페이지의 자바스크립트 기능 부재를 사용자가 가능한 한 적게 느끼도록 하는 것이다. 이 용어는 여러 기술 작가들에 의해 프론트엔드 웹 개발의 서로 다른 측면을 강조하는 데 사용되어 왔다. 일부 작가들에게 이 용어는 웹 페이지의 구조/내용 및 표현으로부터 기능의 분리( "동작 레이어")를 가리키는 보다 일반적인 의미로 이해되어 왔으며, 다른 작가들은 특정 자바스크립트 기능이 없는 사용자 에이전트나 자바스크립트를 비활성화한 사용자를 지원하기 위한 점진적 향상 기법의 사용을 가리키는 보다 정밀한 의미로 이 용어를 사용했다. 후자의 정의에 따르면, 비침투적 자바스크립트는 컴퓨팅 플랫폼에 관계없이 모든 사용자가 웹 페이지의 모든 정보와 기능에 거의 동등하게 접근할 수 있도록 보장함으로써 웹 접근성에 기여한다.

 개요 
전형적인 클라이언트 사이드 동적 웹 페이지는 마크업된 콘텐츠(HTML), 스타일 시트(CSS), 클라이언트 사이드 자바스크립트, 그리고 이미지와 같은 임베디드 객체의 네 가지 부분으로 구성된 것으로 간주할 수 있다. 클라이언트 사이드 자바스크립트 부분은 자바스크립트 없이는 불가능했을 특징이나 기능을 추가함으로써 다른 부분들을 향상시키는 것으로 간주할 수 있다.

클라이언트 사이드 자바스크립트와 관련된 "비침투성"이라는 개념은 2002년 스튜어트 랭그리지가 작성한 기사 "Unobtrusive DHTML, and the power of unordered lists"에서 처음 만들어졌다. 이 기사에서 랭드리지는 동적 HTML(DHTML)을 사용할 때 이벤트 핸들러를 포함한 모든 자바스크립트 코드를 HTML 외부로 분리하는 방법을 주장했다. 그는 이러한 코드 조직화의 목적이 "브라우저가 이를 지원할 수 있는 사람들에게는 더 나은 사용자 경험을 제공하고, 지원하지 않는 브라우저를 사용하는 사람들에게는  것"이며, 동시에 웹 개발자들에게 스크립팅을 더 쉽게 만드는 것이라고 말했다. 랭드리지는 나중에 이 생각을 확장하여 "비침투적"의 핵심적인 의미는 "특정 웹 브라우저가 사용 중인 DHTML 기능을 지원하지 않는 경우, 그 부재가 사용자 경험에 미치는 영향이 가능한 한 적어야 한다"는 점임을 강조했다. (Reference to the first edition, since it shows how the author pioneered the concept.) The same passage is in an article excerpted from the book:  즉, 랭드리지에게 "비침투적"이란 주로 주어진 상황에서 자바스크립트 기능의 부재에 대한 사용자의 경험을 가리킨다.

 변형된 정의 
다른 저자들은 비침투성의 필수 요소들에 대한 변형된 설명을 제시해 왔다.

데이비드 플래너건의 저서 자바스크립트 완벽 가이드(2006)에서는 특정 공식은 없지만 비침투적 자바스크립트의 세 가지 주요 목표가 있다고 기술했다.
 자바스크립트를 HTML 마크업으로부터 분리하고, 이름공간을 사용하여 이름공간 충돌을 방지하거나 모듈 초기화 코드를 사용하는 등의 기본 관례를 통해 자바스크립트 모듈을 다른 모듈로부터 독립적으로 유지하는 것.
 점진적 성능 저하(Graceful degradation) — 자바스크립트의 일부 또는 전체가 성공적으로 실행되지 않더라도 모든 콘텐츠를 이용할 수 있어야 함.
 HTML의 접근성을 방해하지 않으며, 이상적으로는 사용자가 개인적인 장애가 있거나 비정상적인 혹은 비정상적으로 설정된 브라우저를 사용하더라도 접근성을 향상시키는 것.

웹 표준 프로젝트는 자바스크립트 매니페스토(2006)에서 "자바스크립트의 목적은 상호작용을 추가하여 웹 페이지의 사용성을 높이는 것"이라고 밝히며, 비침투적 DOM 스크립팅의 네 가지 이점을 설명했다.
 웹 사용성: 비침투적 DOM 스크립트는 사용자의 주의를 끌지 않는다 — "방문자는 그것에 대해 생각하지 않고 그냥 사용한다."
 점진적 성능 저하: 비침투적 DOM 스크립트는 실행에 실패하더라도 어떤 브라우저에서도 오류 메시지를 생성하지 않는다. 기능을 제대로 제공할 수 없다면 조용히 사라진다.
 웹 접근성: 스크립트가 실패하더라도 페이지는 마크업, 스타일 시트 및 서버 사이드 스크립팅을 통해 핵심 기능과 정보를 여전히 전달한다.
 관심사 분리: 다른 웹 개발자와 미래의 웹 개발자를 위해 모든 자바스크립트 코드는 다른 스크립트, 마크업 또는 코드 파일에 영향을 주지 않고 별도로 유지 관리된다.

2007년 파리 더 웹 컨퍼런스에서 크리스티안 하일만은 비침투적 자바스크립트의 7가지 규칙을 규정했는데, 이 중 일부는 다른 좁은 정의보다 더 넓은 범위를 다루고 있다. See also: 
 "어떤 가정도 하지 마라": 방어적 프로그래밍 기법을 사용하여 자바스크립트가 실행되지 않을 가능성, 브라우저가 예상된 메소드를 지원하지 않을 가능성, HTML이 변경되었을 가능성, 예상치 못한 입력 장치가 사용될 가능성, 다른 스크립트가 없거나 전역 이름공간을 침범할 가능성에 대비해야 한다.
 "후크(hooks)와 관계를 찾아라": ID 및 예상되는 HTML의 다른 측면들을 활용한다.
 개별 DOM 객체 탐색은 전문가에게 맡겨라: 가능한 경우 브라우저에 내장된 CSS 핸들러 등을 활용한다.
 "브라우저와 사용자를 이해하라": 특히 브라우저가 어떻게 실패하는지, 사용자가 어떤 가정을 하는지, 특이한 설정이나 사용법은 무엇인지 이해한다.
 "이벤트를 이해하라": 이벤트 버블링과 대부분의 이벤트 핸들러에 전달되는 Event 객체의 기능을 포함한다.
 전역 함수 및 변수 이름을 피해 다른 스크립트와 잘 어울리도록 하라.
 "다음 개발자를 위해 일하라": 자명한 변수 및 함수 이름을 사용하고, 논리적이고 읽기 쉬운 코드를 작성하며, 의존성을 명확히 하고, 여전히 혼란을 줄 수 있는 코드에는 주석을 단다.

비침투적 자바스크립트의 광범위한 정의는 캡슐화 및 추상화 계층, 전역 변수 방지, 의미 있는 명명 규칙, 적절한 디자인 패턴의 사용, 체계적인 소프트웨어 테스트와 같은 일반적인 프로그래밍 모범 사례와 많은 공통점을 가지고 있다.

 각주 

 추가 읽기 










분류:웹 접근성
분류:자바스크립트
분류:반응형 웹 디자인