블로그 내 검색

2011. 11. 28.

겸손하고 나대지 않는 자바스크립트, unobtrusive javascript.

개요



자바스크립트 관련 포스팅 및 서적을 읽으면 거의 등장하는 단어는 바로

"겸손한 자바스크립트"

라는 것이다.
하지만 뭔가 와 닿지 않는다...

언어가 겸손이라니???

보통 원문에는 unobtrusive javascript 라는 것으로 쓰여 있다.

unobtrusive??

단어의 뜻은 이렇다

  • unobtrusive [ʌ̀nəbtrúːsiv]  
    주제넘지 않은, 조심성 있는, 겸손한  
  • unobtrusive [|ʌnəb|tru:sɪv]  영영사전
    not attracting unnecessary attention

출처 - 다음 사전

보통 번역되는 겸손한, 나대지 않는 뜻이 맞다.
그래도 뭔가 와닿지 않는다. 좀더 생각해 보자.

일단 단어의 뜻을 해석하려면 그것이 사용되는 부분부터 이해하는게 보통 정확하다.

웹의 접근성



겸손한 자바스크립트를 거론할때 첫번째로 나오는 주제는 접근성이다.

자바스크립트는 웹의 중요한 이슈인 접근성에 어떻게 관여될까.

야후에 접근하는 사용자의 2%는 자바스크립트를 끈 사용자라는 통계가 있다.
야후같이 거대한 서비스에서는 2%는 엄청난 사용자다.

Internet Explorer, FireFox, Chrome, Safari, Lynx...

브라우저는 하나의 통일 플랫폼이 아니다. 여러 종류가 존재한다.
브라우저의 엔진에 따라서는 자바스크립트를 해석하지 못하거나 불완전하게 해석할 수도 있다.
또한, 스크린 리더기, 텍스트 브라우저같은 특수한 환경에서는, 자바스크립트는 동작이 어려울지도 모른다. 요새 각광받는 모바일 환경도 이 문제에서 예외가 될 수 없다.

시멘틱 웹



두번째는 시멘틱(semantic) 이다. 문서의 시멘틱이 중요해지는 요즘이다.
시멘틱 단어 그대로, 문서의 의미는 굉장히 중요하다. 이유중 먼저 떠오르는 것은 검색 엔진이다.
오늘날 검색 엔진에 노출된다는 뜻은 따로 말 안해도 잘 알거라 생각한다.

그러나, 현대의 대부분의 검색 엔진은 자바스크립트를 완전히 해석하지 못한다.

페이지에 static하게 박힌 <a>이나 <form> 에 있는 href, action 속성을 검색 프로그램 로봇이 읽어가는 것과,
스크립트에서 해당 태그에 클릭 이벤트를 캐치하에 스크립트에서 페이지를 이동하거나 폼을 서브밋하는 것중에 어느것이 더욱 검색 엔진에 더욱 노출이 잘 될까? 뻔하지 않을까.

케이스 A

<a href="/content/get_alright.html">Get All</a>
<form id="frm" action="/server/getData">
<input type="text" name="word" />
<input type="text" name="id" />
<button type="submit">검색</button>
</form>

케이스 B

<script type="text/javascript">
var anch = function(e) {
location.href = "/content/get_alright.html";
}
var submit = function(e) {
var f = document.getElementById("frm");
f.action = "/server/getData";
f.submit();
}
</script>
<a href="#" onclick="anch();">Get All</a>
<form id="frm">
<input type="text" name="word" />
<input type="text" name="id" />
<button id="s_btn" onclick="submit()">검색</button>
</form>

두개의 케이스를 보면 A는 문서 하나로서 완벽한 동작을 한다.
그러나 B는 그렇지 않다.
검색 엔진이 알아보기도 힘든 문서이며, 스크립트 사용이 불가능할 경우, 이 문서는 전혀 동작하지 않는다.

시멘틱으로서의 문서의 가치는 A쪽이 높다고 볼 수 있겠다.

진화



앞에서 접근성, 시멘틱 웹에 대해 다루었지만 또 하나 중요한게 있다.
Active-X와 자바스크립트 이 둘의 관계.
Active-X를 잘 알거라 생각한다.
Active-X가 과다하게 사용된 사이트가 나쁘다는건 누구나 알고 있다. 이것을 욕하는 개발자도 많다.
하지만 javascript 또한, Active-X와 개념적이나 동작 면에서 크게 다르지 않다!

대부분의 브라우저에 탑재 되어 있을 뿐이지 앞으로 어떻게 바뀌냐에 따라 자바스크립트는 없어지거나 할 수 있을지도 모른다. 자바스크립트 퇴출 운동이라...생각만해도 웃긴다.
모바일 환경에 접어들며 밀려버린 플래시의 예를 보면 뭐 답은 명확하다.
(앞으로 자바스크립트가 완전히 웹 표준에 정착되어 버리면 이야기는 다르겠지만...)

그리고 HTML의 태그의 기능이나 표현이 바뀔 수도 있다. 이럴 경우 문서에 강하게 유착된 스크립트가 오동작 할 위험도 있다. (이럴 정도로 크게 바뀔 일은 절대 없겠지만...가정이다 가정)

나대지 말자



위에서 든 2,3,4의 예가 일관되게 가리키는 것은 자바스크립트의 과용 이다.

처음 화제로 돌아가서 겸손한 자바스크립트에 대해서 말해보자

HTML문서가 해석될 때 스크립트가 관여하는 부분을 최소화하며, 혹시 동작하지 않더라도, 어느정도의 기본 기능은 제공해야 하며 앞으로 발전 방향에 무리가 없을 정도로 사용하는 자바스크립트를 말한다고 볼 수 있다.

이것을 전문 용어로

Graceful degradation (우아한 낮춤)
Progressive enhancement (점진적 향상)

라고 한다.

Graceful degradation
 은 스크립트 지원 레벨이나 여부를 검사하고 그것에 맞게 적용 범위를 낮춰가는 방법이다.
<noscript> 태그가 이러한 경우에 쓰일 수 있겠다

반대로 Progressive enhancement는 점진적으로 문서에 자바스크립트를 적용하는 방법이다.
원본 HTML이 있으면 먼저 기본 태그와 CSS만으로 문서를 작성하고, 자바스크립트를 그 위에 점진적으로 얹어가며 기능을 개선하는 방법이다. 물론 과용은 안되며 문서는 독립적이어야 한다.

결론



  • 겸손한 자바스크립트
  • 나대지않는 자바스크립트
  • 무간섭 자바스크립트
  • 최소 자바스크립트
  • 분리형 자바스크립트
  • 키다리아저씨 자바스크립트(?)

 ...어떻게 이름 붙여도 와 닿진 않는다.

그러나 웹의 변화는 너무 무쌍하기에 어떻게 바뀔 지 알 수 없다.
하지만 이런 개념을 바탕으로 자바스크립트를 다루는 것은 참 좋은 습관이 될 것이다.

댓글 2개:

  1. 공감합니다. 저는 "나서지 않는" 으로 쓰곤합니다 :)

    답글삭제
    답글
    1. 좋은 표현이네요.
      나대지 않는보다 덜 오만(?)한 표현인 것 같아요.

      삭제