접근성을 해치지 않는 자바스크립트의 사용 >>> >>> <h1>접근성을 해치지 않는 자바스크립트의 사용</h1> <h2>자바스크립트에 대한 잘못된 생각</h2> <h3>자바스크립트 없이는 개발을 할 수 없다?</h3> <p>많은 개발자들이 자바스크립트가 없이는 개발을 할 수 없다고 생각한다. 그만큼 자바스크립트를 일상적으로 많이 사용하지만 자바스크립트를 과용하는 경우가 많다는 것이다. 자바스크립트는 클라이언트 환경에서 작동하기 때문에 핵심 기능에 사용해서는 안된다. 핵심 기능은 서버사이드 언어로 처리를 하고 자바스크립트는 그 옆에서 UI구성을 위해서 도와주는 역할을 해야 한다. 바꿔 말하면 자바스크립트의 도움 없이도 핵심 기능은 작동을 해야 한다. 먼저 자바스크립트없이 HTML과 서버사이드 언어만으로 기능이 작동 되게 개발을 하고 자바스크립트를 이용해서 좋은 UI나 유효성 검사 등을 추가하는 순서로 만들어야 한다. 만약 이러한 방식으로 구현되지 않고 자바스크립트를 핵심 기능의 일부로 사용하면 접근성, 사용성이 떨어지는 것 뿐만 아니라 보안도 떨어지고 데이터의 무결성도 보장되지 않는다.</p> <h3>자바스크립트가 작동하지 않는 환경도 고려를 해 줘야 하는가?</h3> <p>자바스크립트가 작동하지 않는 환경이 일반적인 경우는 아니지만 스크립트를 사용할 수 없는 환경에 대한 고려는 필요하다. 실제로 브라우저들은 서로 자바스크립트 엔진이 다르기 때문에 개발 환경에서는 잘 작동하던 기능이 어떤 사용자 환경에서는 작동하지 않을 수 있다. 그리고 사용자 중에서도 보안이나 네트웍 전송량 등의 이유로 스스로 자바스크립트 기능을 끄고 사용하는 경우도 있다. 실제로 <a href="http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/">야후에서 분석한 결과</a>에 따르면 약 2%정도의 사용자가 자바스크립트를 사용할 수 없는 상황에서 야후 사이트를 이용한다고 한다. 또한 <a href="http://webaim.org/projects/screenreadersurvey3/#javascript">WEB AIM에서 스트린 리더 사용자를 대상으로 한 설문 결과</a>를 보면 약 1.6%의 사용자가 자바스크립트를 끄고 웹을 사용한다고 한다. 2%의 사용자 수가 작아보일 수도 있지만 전체 사용자 수의 2%라고 하면 규모가 큰 사이트에서는 절대로 무시할 수 있는 수의 사용자이다.</p> <h3>서버 부하를 줄이기 위해서 자바스크립트로만 유효성 검사를 한다?</h3> <p>자바스크립트를 이용해서 서버의 부하를 줄일 수 있다는 것은 널리 알려진 지식이다. 자바스크립트로 선처리를 행함으로서 네트웍이나 서버의 처리를 감소시킨다는 것인데 이것을 잘못 이해하여 서버에서 검증할 필요 없이 자바스크립트만으로 유효성을 체크하는 것이 좋다고 생각하는 사람들이 있다. 사용자측으로 부터 넘어온 모든 값은 그 값의 유효성을 완전히 보장할 수 없기 때문에 <a href="http://googlekoreablog.blogspot.com/2011/05/7.html">서버측에서도 유효성 체크를 반드시 해 줘야만</a> 한다. 이것은 서버의 부하를 높이는 것 이전에 자료의 무결성을 보장하는 중요한 과정이다. 자바스크립트를 거치지 않고 서버에 임의로 변조된 값을 보내는 일은 아주 쉬운 일이다.</p> <h3>자바스크립트를 사용하지 않으면 UI가 불편해 진다?</h3> <p>자바스크립트를 이용해서 RIA나 좋은 UI를 만들 수 있는 것은 사실이지만 웹환경을 이해하고 일반적인 웹 인터페이스를 이용해서 만드는 것이 더 좋은 UI를 제공할 수 있다. 사용자 친화적인 UI에 대한 고민을 해야지 자바스크립트를 사용했다고 좋은 UI가 나오는 것은 아니다. 실제적으로 가장 사용자가 이해하기 쉬운 UI는 사용자 OS나 브라우저에서 기본적으로 제공하는 컨트롤 인터페이스를 그대로 사용하는 것이고 이는 자바스크립트 없이도 충분히 가능하다.</p> <p>자바스크립트는 사용자 환경에 내려보내지고 사용자의 브라우저에서 실행이 되기 때문에 이에 의존해서 프로그램을 만들게 되면 보안, 접근성에 문제가 생기기 쉽다. 이러한 자바스크립트의 특징을 정확히 이해하지 못한 잘못된 개발 방법이나 상식들 때문에 자바스크립트가 오용되고 있는 경우가 많다. 자바스크립트는 어디까지나 보조적인 수단이라는 것을 이해하고 핵심적인 기능을 해치지 않는 한도에서 사용하는 것이 중요하다.</p> <h2>자바스크립트 선언</h2> <pre><code><script language="Javascript"> //code </script></code></pre> <p>자바스크립트는 스크립트(script) 요소로 선언을 한다. 모든 스크립트 요소에는 타입(type)을 명시해 주어야 하고 자바스크립트의 타입은 "text/javascript" 이다. 많은 경우 language 속성 만을 선언해서 자바스크립트버젼을 명시하는데 반드시 타입을 명시를 해 주어야 한다.</p> <pre><code><script type="text/javascript"> //code </script></code></pre> <h2>링크 요소(a element)의 href 속성과 자바스크립트의 사용</h2> <p>href 속성은 Hypertext REFerence의 약자이고 hypertext의 위치를 나타내는 URI를 그 값으로 갖는다. 하지만 많은 경우 "javascript:myFunction()"과 같이 잘못된 값을 이용하는 것을 볼 수 있다. 이와 같이URI가 아닌 잘못된 값이 들어가게 될 경우 브라우저에서 제공하는 북마크나 새창, 새탭으로 열기 등의 기능들이 작동하지 않게 된다. 따라서 href의 값은 항상 유효한 URI가 들어가도록 하고 자바스크립트 적용은 onclick과 같은 이벤트 속성을 통해서 해야 한다.</p> <h3>의미 없는 href 값을 사용한 경우</h3> <p>사용자의 클릭이 링크와 관련이 있는 기능을 한다면 우선은 자바스크립트 없이도 페이지를 이동 할 수 있게 href에 적합한 값을 넣어 주어야 한다. 예를 들어서 탭 콘텐츠를 사용할 경우 탭을 누르면 해당 탭과 관련있는 컨텐츠로 이동할 수 있게 페이지내의 링크를 사용하면 된다. href 안의 값으로 페이지 안에서의 해당 컨텐츠 앵커 주소를 넣는 것으로 간단히 구현 된다.</p> <pre><code><a href="#notice-list"> <img src="notice-tab.gif" alt="Notice" /> </a></code></pre> <p>그리고 이 마크업을 기본으로 하여 이벤트 속성으로 원하는 기능을 넣어주면 된다.</p> <pre><code><a href="#notice-list" onclick="showNoticeTab(); return false;"> <img src="notice-tab.gif" alt="Notice" /> </a></code></pre> <p>클릭을 했을 때 자바스크립트로 탭을 보여준 후 false를 리턴하여 해당 앵커로 이동하지 않도록 처리 한다. 자바스크립트가 작동 할 때에는 정상적인 탭 콘텐츠 형태로 작동 할 것이고 그렇지 않을 경우에는 해당 컨텐츠로 이동을 하여 접근성을 유지할 수 있다.</p> <p>만약 자바스크립트가 링크와 관련이 없는 경우에는 a 요소를 사용하기 보다는 버튼(button) 요소를 사용해서 해서 스크립트를 적용하면 된다. 보통 스타일을 조정해서 효과를 주는 기능이 이에 해당하는데 자바스크립트가 작동을 하지 않아도 컨텐츠 이해에 크게 문제가 되지 않는 경우이다.</p> <pre><code><button onclick="myAction()"> <img src="button.gif" alt="보기" /></code> </button> </pre> <p>버튼 요소는 브라우저에서 버튼 모양으로 표현이 되는데 스타일로 버튼 모양을 없앨 수 있으므로 필요에 따라서 사용하면 된다.</p> <h3>팝업창을 열 때(window.open)</h3> <pre><code><img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')"></code></pre> <pre><code><a href="#"> <img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')"> </a></code></pre> <p>href에 #을 넣고 onclick 안의 스크립트에 경로를 처리하는 경우가 있는데 팝업창은 페이지가 별도로 존재 하기 때문에 a 요소를 이용해서 href에 적절한 팝업창의 경로는 넣어서 구현하여야 한다.</p> <pre><code><a href="popup.html" onclick="window.open(this.href, 'popupName', 'width=300,height=200'); return false;"> <img src="openWindow.gif"> </a></code></pre> <p>이럴 경우 사용자가 자신의 의도 대로 팝업창을 새창, 새탭 등으로 열 수 있고 심지어 즐겨 찾기도 할 수 있다.</p> <h2>자바스크립트를 이용한 페이지 이동</h2> <p>웹사이트를 이용하다 보면 서식에서 값을 입력하고 전송을 하는 순간 "따다다닥" 하는 식으로 클릭을 여러번 한 것과 같은 소리가 나는 경우를 접하게 된다. 서식 입력을 처리하는 과정이 여러페이지에 걸쳐서 일어나게 되는데 이 처리를 자바스크립트로 하게 되면 이런 현상이 발생한다.</p> <pre><code><script type="text/javascript"> document.location.href="redirection.html"; </script></code></pre> <p>위와 같이 페이지를 이동 하거나 아래와 같이 서식 요소를 이용해서 값을 넘기는 경우가 이러한 경우이다.</p> <pre><code><form name="login_form"> <input type="hidden" name="user_id" value="myid" /> <input type="hidden" name="user_pwd" value="mypassword" /> <input type="hidden" name="redirect_url" value="/login/" /> <input type="hidden" name="somevalue" value="blahblah" /> ... </form> <script type="text/javascript"> f = document.forms.login_form; f.action = "http://login.oursite.com/login/"; ... f.submit(); </script></code></pre> <p>심한 경우 아래와 같이 전혀 의미 없는 서식을 이용하기도 한다.</p> <pre><code><form method="post" name="sg_form" action="http://www.qubi.com/" target="_top"> </form> <script> sg_form.submit(); //3</script></code></pre> <p>위와 같은 페이지들은 적절하게 구성되지 않은 HTML 페이지이기 때문에 특정 환경에서 작동을 안 할 수도 있다. 서식 요소나 스크립트 요소는 상위에 바디(body)나 헤드(head) 요소가 있어야 하는데 위와 같은 경우 이러한 요소가 없기 때문에 HTML로 해석이 안되어 스크립트가 작동 되지 않거나 값이 넘어가지 않을 수도 있다. 그리고 서식 요소 하위에 전송 기능을 하는 인풋 요소가 없기 때문에 자바스크립트로 전송이 일어나지 않을 수도 있다.</p> <p>이와 같이 페이지를 이동하거나 값을 넘길 필요가 있을 때 자바스크립트에 의존해서 이를 처리하게 되면 클라이언트의 환경에 따라서 동작이 실패할 수 있다. 따라서 이러한 처리는 자바스크립트에서 처리 하지 말고 서버 측에서 처리를 하는 것이 더욱 안정적이다.</p> <p>이러한 중간과정에서의 처리를 서버측에서 모두 처리 하는 것이 가장 바람직 하지만 어쩔 수 없이 사용을 해야할 경우에는 - 그럴 경우가 많지는 않겠지만 기존의 호환성을 위해서 - DOCTYPE 선언이나 html 요소, head, body와 같은 필수 엘리먼트들이 존재하는 완성된 페이지를 사용 하도록 하고, 자바스크립트가 작동하지 않는 경우를 위해서 서식 요소에 전송 버튼도 제공을 하고, 결과 메세지도 alert외에 일반 텍스트와 다음 페이지 이동 링크를 제공하도록 해야 한다.</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <title>Redirect</title> </head> <body> <script type="text/javascript"> /* some processes... */ alert('이래저래한 이유로 다시 돌아 갑니다.'); document.location.href="redirection.html"; </script> <p><a href="redirection.html">이래저래한 이유로 다시 돌아 갑니다.</a></p> </body> </html></code></pre> <p>캐릭터 셋 선언이 없는 경우 브라우저의 기본 설정으로 alert이 작동하기 때문에 브라우저의 기본 설정이 ko-kr이 아닌 경우 한글이 깨지게 된다. 문서의 마임타입(mime-type)도 text/html인지 확인해야 한다.</p> <h2>서식 요소에서의 자바스크립트 사용</h2> <p>일반적으로 서식은 사용자가 입력한 값을 서버측에 전달하는 역할을 하고 그 전달은 서식 요소의 전송 기능을 통해서 이루어 진다. 이러한 서식을 구현 할 때에 자바스크립트를 사용하는 경우가 많다.</p> <h3>전송(submit)</h3> <p>서식은 값을 보내는 전송 기능을 제공하고 있다. <input type="submit" />이나 <input type="image" />, <button type="submit></button>이 전송 기능을 하는 컨트롤인데 서식의 값 유효성 체크를 하는 과정에서 이러한 서식의 자체적인 전송 기능을 이용하지 않고 자바스크립트로 서식 전송을 하는 경우가 있다.</p> <pre><code><script type="text/javascript"> function submitForm() { loginForm.submit(); } </script> <form id="loginForm" name="loginForm" action=""> User Id <input type="text" name="loginId"> User Password <input type="password" name="loginPassword"><br> <img src="login.gif" onclick="submitForm()"> </form></code></pre> <p>위와 같은 경우 서식에 전송 기능이 없기 때문에 브라우저에 따라서 script로 전송이 안되는 경우도 있고 전송 버튼 대신에 이미지가 들어있기 때문에 의미적으로도 맞지 않다. 따라서 서식을 제작할 때에는 반드시 전송 기능을 적절한 HTML 요소를 이용해서 제공해야 한다.</p> <pre><code><form id="loginForm" name="loginForm" action=""> <p> <label for="loginId">User Id</label> <input type="text" id="loginId" name="loginId" /><br /> <label for="loginPassword">User Password</label> <input type="password" id="loginPassword" name="loginPassword" /> </p> <p> <input type="image" src="login.gif" alt="Login" /> </p> </form></code> </pre> <h3>유효성 검사(validation)</h3> <p>클라이언트 측에서 자바스크립트를 이용한 유효성 검증은 자바스크립트가 서식을 전송(form.submit())하는 방식 대신에 서식의 전송 이벤트(onsubmit)를 캐치하는 방식으로 구현한다.</p> <pre><code><script type="text/javascript"> function submitForm() { if (!loginForm.loginId.value) { alert("아이디를 넣어주세요."); loginForm.loginId.focus(); } else if (!loginForm.loginPassword.value) { alert("비밀번호를 넣어주세요."); loginForm.loginPassword.focus(); } else { loginForm.submit(); } } </script> <form id="loginForm" name="loginForm" action=""> 아이디 <input type="text" name="loginId"> 비밀번호 <input type="password" name="loginPassword"><br> <img src="login.gif" onclick="submitForm()"> </form></code></pre> <p>위와 같은 경우 자바스크립트만을 이용해서 서식을 전송하고 있기 때문에 HTML만으로는 기능이 작동하지 않는다.</p> <pre><code><script type="text/javascript"> function submitForm(formEl) { //TrimAll(formEl); var errorMessage = null; var objFocus = null; if (formEl.loginId.value.length == 0) { errorMessage = "아이디를 넣어주세요."; objFocus = formEl.loginId; } else if (formEl.loginPassword.value.length == 0) { errorMessage = "비밀번호를 넣어주세요."; objFocus = formEl.loginPassword; } if(errorMessage != null) { alert(errorMessage); objFocus.focus(); return false; } return true; } </script> <form id="loginForm" name="loginForm" action="" onsubmit="return submitForm(this)"> <label for="loginId">아이디</label> <input type="text" id="loginId" name="loginId" /> <label for="loginPassword">비밀번호</label> <input type="password" id="loginPassword" name="loginPassword" /><br /> <input type="image" src="login.gif" alt="Login" /> </form></code></pre> <p>이와 같이 onsubmit 이벤트를 이용해서 서식의 유효성을 검사하고 그 결과를 true나 false로 보내줌으로써 서식이 전송을 진행하거나 멈출 수 있고, onsubmit 이벤트가 발생하지 않아도 사용자는 서식을 사용할 수 있기 때문에 접근성이 높아지게 된다.</p> <h2>게시판 등에서 페이지 이동을 자바스크립트로 하는 경우</h2> <p>게시판에서 페이지의 이동을 자바스크립트 서식 전송으로 하는 것을 많이 볼 수 있다. 아래와 같이 사용자 인풋이 없는 빈 서식을 하나 만들고 이것과 자바스크립트를 이용해서 페이지를 이동하는 것이다.</p> <pre><code><form method="post" name="vars"> <input type="hidden" name="articleId" value="23" /> <input type="hidden" name="page" value="3" /> <input type="hidden" name="keysord" value="" /> <input type="hidden" name="searchType" value="" />  </form> ... <a href="javascript:ArticleRead()">글읽기</a> <a href="javascript:GoList()">리스트 보기</a></code></pre> <p>URL이 간단해 지고 다루기 쉽다는 이유로 이러한 방식으로 개발을 하는 경우가 많은 것 같다. 위와 같이 모든 기능을 자바스크립트를 이용해서 구현을 하게 되면 자바스크립트 오류가 있거나 자바스크립트가 작동 하지 않는 상황에서는 접근을 할 수 없게 된다. 또한 모든 변수를 POST를 통해서 전달하기 때문에 글의 주소를 나타내는 URL이 표시되지 않고 해당 페이지를 따로 북마크 한다든지 링크를 저장을 할 수 없게된다. 게시판의 경우 해당 게시물로의 접근을 쉽게 해 주어야 하는데 사용자가 URL을 알 수 없게 함으로써 접근을 원천적으로 막게 된다.</p> <p>자바스크립트를 이용하지 않고도 a 요소와 URL만으로도 작동 가능한 페이지를 만들고 쿼리스트링을 효율적으로 다루는 방법을 모색하여 개발을 진행하는 것이 좋다.</p> <h2>마치며</h2> <p>웹사이트 개발을 하면서 접할 수 있었던 자바스크립트 과용 예를 적어 보았다. 그런데 놀라운 것은 이러한 개발 방식을 초보부터 어느정도 경력이 된 개발자들까지 아무런 고민 없이 사용하고 있었다는 것이다. 책이 잘못된 것인지 교육이 잘못 된 것인지 정확한 원인을 알 수는 없지만 많은 개발자들이 웹이 가지고 있는 기본적인 특성을 무시한채 이러한 방법으로 개발을 하고 있는 것이 사실이다. 그리고 초보 개발자들은 HTML을 잘 모르기 때문에 이러한 개발 방식을 아무 고민 없이 그냥 받아들이고 있는 실정이다.</p> <p>접근성 뿐만 아니라 사용성도 크게 낮추고 있는 것이 바로 이 잘못된 자바스크립트의 사용이다. 부디 개발자들이 올바른 HTML에 기초한 접근성 높은 웹사이트, 웹 어플리케이션을 구축 하기를 바라는 바이다.</p> <h2>참고</h2> <ul> <li><a href="http://www.yangkun.pe.kr/post/874">웹 접근성을 위한 자바스크립트 적용 방법 (Graceful Degradation vs. Progressive Enhancement)</a></li> <li><a href="http://www.ibm.com/developerworks/kr/library/wa-aj-unobtrusive/index.html">겸손한 Javascript 및 Ajax 코드 작성 안내서</a></li> </ul>