최근 많이 사용하고 있는 트위터의 경우 웹페이지를 통해 사용하는 사람보다 별도의 프로그램을 이용하여 사용하는 사람이 많은 서비스입니다. 저같은 경우도 데스크탑에서는 트윗덱을 아이폰에서는 트위터 공식앱을 사용하여 트위터를 이용합니다. 이렇게 별도의 앱을 사용하여 서비스를 이용하다 보면 특별히 웹페이지로 오게 되는 일이 별로 없습니다. 최근에는 좀 나아졌을지도 모르겠지만 트위터 웹페이지가 그렇게 안정성이 좋지도 않습니다. 몇 달 전만해도 한국 시간으로 밤 - 미국 시간으로 아침에서 낮이 되는 시간 - 이 되면 로그인도 하기 어려웠고 정상적으로 트위터를 사용하기가 어려웠으니까요.
오늘 적어보려 하는 것은 JavaScript를 사용하여 개발을 할 때 중요하게 생각해야 할 Unobtrusive JavaScript라는 개념입니다. 이 개념은 JavaScript를 웹페이지에 적용할 때 어떠한 방식으로 적용해야 하는지에 대한 것입니다. Unobtrusive JavaScript에 대해 위키피디어에 정리되어 있는 정의를 잠깐 살펴보면..
1. 기능을 웹페이지의 내용이나 구조와 분리하는 것
2. 전통적인 자바스크립트 프로그래밍의 문제를 피하는 좋은 방법 (다양한 브라우저의 지원이나 확장성 부족)
3. 사용자의 프로그램이 자바스크립트 기능을 지원하지 않더라도 서비스 이용에는 문제없도록 하는 점진적 개선(progressive enhancement)의 방법
을 포함합니다.
그럼 이제 트위터를 살펴보겠습니다. 트위터의 로그인 페이지는 아래의 사진과 같습니다.
우측 상단의 Sign in 버튼을 클릭하면 다음 화면과 같은 로그인 영역이 나타납니다.
일반적인 경우라면 새롭게 나타난 로그인 영역에 아이디와 패스워드를 넣고 트위터를 사용하면 됩니다. 그런데 웹페이지의 내용에 JavaScript를 바로 삽입하지 않으면, 다시 말해 HTML 코드 내에 인라인으로 JavaScript를 삽입하지 않으면 페이지에 엘리먼트를 노출하는 시점과 엘리먼트에 이벤트 핸들러를 연결하는 시점 사이에 시간적인 차이가 발생하게 됩니다. 물론 이 시간의 차이를 극복하는 방법이 있지만 이 경우 HTML 코드가 지저분해지는 것은 피할 수 없게 됩니다. 짧은 시간이지만 HTML 코드에 JavaScript 이벤트 핸들러가 연결되지 않으면 해당 기능이 먹통이 됩니다. 즉, 짧은 시간이지만 JavaScript를 사용할 수 없는 상황이 되는 것이죠. 그런데 트위터에서는 이 짧은 시간 동안 Sign in 버튼을 클릭하면 다음과 같은 페이지로 이동하게 됩니다.
위 페이지는 바로 로그인을 할 수 있는 페이지입니다. 자바스크립트를 사용할 수는 없지만 서비스를 이용하는 데는 아무런 문제가 없습니다. 이것이 바로 점진적인 개선이며 Unobtrusive JavaScript를 적절하게 적용한 예라고 하겠습니다.
로그인 버튼에 해당하는 HTML 코드는 다음과 같습니다.
<span id="have_an_account">Have an account?<a href="/login" class="signin" tabindex="3"><span>Sign in</span></a></span>
어떤가요? 위 코드에는 아무런 JavaScript 코드도 포함되어 있지 않습니다. 그렇다면 JavaScript가 정상적으로 동작하지 않더라도 사용자는 /login 으로 이동할 수 있을 것입니다.
이런 형태로 JavaScript를 작성한다면 JavaScript를 지원하지 않는 브라우저에서도 정상적으로 서비스를 사용할 수 있을 것입니다.
반응형