홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
okTrot(구독하세요)
앵콜트로트(구독하세요)
뽕짝아가씨(구독하세요)
음악가사 검색
온라이브스토어(앱다운로드)
온라이브(방송등록및청취)
Search Video Best 50
금영노래방
TJ노래방
유튜브 동영상 다운로드
POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
운.영.자.1대1.상담
FAQ\지원.프로그램
Q&A\고.객.지.원

자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
접근성을 해치지 않는 자바스크립트의 사용
6년 전
자바스크립트에 대한 잘못된 생각
자바스크립트 없이는 개발을 할 수 없다?
많은 개발자들이 자바스크립트가 없이는 개발을 할 수 없다고 생각한다. 그만큼 자바스크립트를 일상적으로 많이 사용하지만 자바스크립트를 과용하는 경우가 많다는 것이다. 자바스크립트는 클라이언트 환경에서 작동하기 때문에 핵심 기능에 사용해서는 안된다. 핵심 기능은 서버사이드 언어로 처리를 하고 자바스크립트는 그 옆에서 UI구성을 위해서 도와주는 역할을 해야 한다. 바꿔 말하면 자바스크립트의 도움 없이도 핵심 기능은 작동을 해야 한다. 먼저 자바스크립트없이 HTML과 서버사이드 언어만으로 기능이 작동 되게 개발을 하고 자바스크립트를 이용해서 좋은 UI나 유효성 검사 등을 추가하는 순서로 만들어야 한다. 만약 이러한 방식으로 구현되지 않고 자바스크립트를 핵심 기능의 일부로 사용하면 접근성, 사용성이 떨어지는 것 뿐만 아니라 보안도 떨어지고 데이터의 무결성도 보장되지 않는다.

자바스크립트가 작동하지 않는 환경도 고려를 해 줘야 하는가?
자바스크립트가 작동하지 않는 환경이 일반적인 경우는 아니지만 스크립트를 사용할 수 없는 환경에 대한 고려는 필요하다. 실제로 브라우저들은 서로 자바스크립트 엔진이 다르기 때문에 개발 환경에서는 잘 작동하던 기능이 어떤 사용자 환경에서는 작동하지 않을 수 있다. 그리고 사용자 중에서도 보안이나 네트웍 전송량 등의 이유로 스스로 자바스크립트 기능을 끄고 사용하는 경우도 있다. 실제로 야후에서 분석한 결과에 따르면 약 2%정도의 사용자가 자바스크립트를 사용할 수 없는 상황에서 야후 사이트를 이용한다고 한다. 또한 WEB AIM에서 스트린 리더 사용자를 대상으로 한 설문 결과를 보면 약 1.6%의 사용자가 자바스크립트를 끄고 웹을 사용한다고 한다. 2%의 사용자 수가 작아보일 수도 있지만 전체 사용자 수의 2%라고 하면 규모가 큰 사이트에서는 절대로 무시할 수 있는 수의 사용자이다.

서버 부하를 줄이기 위해서 자바스크립트로만 유효성 검사를 한다?
자바스크립트를 이용해서 서버의 부하를 줄일 수 있다는 것은 널리 알려진 지식이다. 자바스크립트로 선처리를 행함으로서 네트웍이나 서버의 처리를 감소시킨다는 것인데 이것을 잘못 이해하여 서버에서 검증할 필요 없이 자바스크립트만으로 유효성을 체크하는 것이 좋다고 생각하는 사람들이 있다. 사용자측으로 부터 넘어온 모든 값은 그 값의 유효성을 완전히 보장할 수 없기 때문에 서버측에서도 유효성 체크를 반드시 해 줘야만 한다. 이것은 서버의 부하를 높이는 것 이전에 자료의 무결성을 보장하는 중요한 과정이다. 자바스크립트를 거치지 않고 서버에 임의로 변조된 값을 보내는 일은 아주 쉬운 일이다.

자바스크립트를 사용하지 않으면 UI가 불편해 진다?
자바스크립트를 이용해서 RIA나 좋은 UI를 만들 수 있는 것은 사실이지만 웹환경을 이해하고 일반적인 웹 인터페이스를 이용해서 만드는 것이 더 좋은 UI를 제공할 수 있다. 사용자 친화적인 UI에 대한 고민을 해야지 자바스크립트를 사용했다고 좋은 UI가 나오는 것은 아니다. 실제적으로 가장 사용자가 이해하기 쉬운 UI는 사용자 OS나 브라우저에서 기본적으로 제공하는 컨트롤 인터페이스를 그대로 사용하는 것이고 이는 자바스크립트 없이도 충분히 가능하다.

자바스크립트는 사용자 환경에 내려보내지고 사용자의 브라우저에서 실행이 되기 때문에 이에 의존해서 프로그램을 만들게 되면 보안, 접근성에 문제가 생기기 쉽다. 이러한 자바스크립트의 특징을 정확히 이해하지 못한 잘못된 개발 방법이나 상식들 때문에 자바스크립트가 오용되고 있는 경우가 많다. 자바스크립트는 어디까지나 보조적인 수단이라는 것을 이해하고 핵심적인 기능을 해치지 않는 한도에서 사용하는 것이 중요하다.

자바스크립트 선언
<script language="Javascript">
//code
</script>자바스크립트는 스크립트(script) 요소로 선언을 한다. 모든 스크립트 요소에는 타입(type)을 명시해 주어야 하고 자바스크립트의 타입은 "text/javascript" 이다. 많은 경우 language 속성 만을 선언해서 자바스크립트버젼을 명시하는데 반드시 타입을 명시를 해 주어야 한다.

<script type="text/javascript">
//code
</script>링크 요소(a element)의 href 속성과 자바스크립트의 사용
href 속성은 Hypertext REFerence의 약자이고 hypertext의 위치를 나타내는 URI를 그 값으로 갖는다. 하지만 많은 경우 "javascript:myFunction()"과 같이 잘못된 값을 이용하는 것을 볼 수 있다. 이와 같이URI가 아닌 잘못된 값이 들어가게 될 경우 브라우저에서 제공하는 북마크나 새창, 새탭으로 열기 등의 기능들이 작동하지 않게 된다. 따라서 href의 값은 항상 유효한 URI가 들어가도록 하고 자바스크립트 적용은 onclick과 같은 이벤트 속성을 통해서 해야 한다.

의미 없는 href 값을 사용한 경우
사용자의 클릭이 링크와 관련이 있는 기능을 한다면 우선은 자바스크립트 없이도 페이지를 이동 할 수 있게 href에 적합한 값을 넣어 주어야 한다. 예를 들어서 탭 콘텐츠를 사용할 경우 탭을 누르면 해당 탭과 관련있는 컨텐츠로 이동할 수 있게 페이지내의 링크를 사용하면 된다. href 안의 값으로 페이지 안에서의 해당 컨텐츠 앵커 주소를 넣는 것으로 간단히 구현 된다.

<a href="#notice-list">
        <img src="notice-tab.gif" alt="Notice" />
</a>그리고 이 마크업을 기본으로 하여 이벤트 속성으로 원하는 기능을 넣어주면 된다.

<a href="#notice-list" onclick="showNoticeTab(); return false;">
        <img src="notice-tab.gif" alt="Notice" />
</a>클릭을 했을 때 자바스크립트로 탭을 보여준 후 false를 리턴하여 해당 앵커로 이동하지 않도록 처리 한다. 자바스크립트가 작동 할 때에는 정상적인 탭 콘텐츠 형태로 작동 할 것이고 그렇지 않을 경우에는 해당 컨텐츠로 이동을 하여 접근성을 유지할 수 있다.

만약 자바스크립트가 링크와 관련이 없는 경우에는 a 요소를 사용하기 보다는 버튼(button) 요소를 사용해서 해서 스크립트를 적용하면 안된다. 보통 스타일을 조정해서 효과를 주는 것이 이러한 것에 해당하게 되는데 이 경우는 자바스크립트가 작동을 하지 않아도 컨텐츠 이해에 크게 문제가 되지 않는 경우이다.

<button onclick="myAction()">
        <img src="button.gif" alt="보기" />
</button>
버튼 요소는 브라우저에서 버튼 모양으로 표현이 되는데 스타일로 버튼 모양을 없앨 수 있으므로 필요에 따라서 사용하면 된다.

팝업창을 열 때(window.open)
<img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')"><a href="#">
        <img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')">
</a>href에 #을 넣고 onclick 안의 스크립트에 경로를 처리하는 경우가 있는데 팝업창은 페이지가 별도로 존재 하기 때문에 a 요소를 이용해서 href에 적절한 팝업창의 경로는 넣어서 구현하여야 한다.

<a href="popup.html" onclick="window.open(this.href, 'popupName', 'width=300,height=200'); return false;">
        <img src="openWindow.gif">
</a>이럴 경우 사용자가 자신의 의도 대로 팝업창을 새창, 새탭 등으로 열 수 있고 심지어 즐겨 찾기도 할 수 있다.

자바스크립트를 이용한 페이지 이동
웹사이트를 이용하다 보면 서식에서 값을 입력하고 전송을 하는 순간 "따다다닥" 하는 식으로 클릭을 여러번 한 것과 같은 소리가 나는 경우를 접하게 된다. 서식 입력을 처리하는 과정이 여러페이지에 걸쳐서 일어나게 되는데 이 처리를 자바스크립트로 하게 되면 이런 현상이 발생한다.

<script type="text/javascript">
document.location.href="redirection.html";
</script>위와 같이 페이지를 이동 하거나 아래와 같이 서식 요소를 이용해서 값을 넘기는 경우가 이러한 경우이다.

<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>심한 경우 아래와 같이 전혀 의미 없는 서식을 이용하기도 한다.

<form method="post" name="sg_form" action="http://www.qubi.com/" target="_top">
</form>
<script> sg_form.submit(); //3</script>위와 같은 페이지들은 적절하게 구성되지 않은 HTML 페이지이기 때문에 특정 환경에서 작동을 안 할 수도 있다. 서식 요소나 스크립트 요소는 상위에 바디(body)나 헤드(head) 요소가 있어야 하는데 위와 같은 경우 이러한 요소가 없기 때문에 HTML로 해석이 안되어 스크립트가 작동 되지 않거나 값이 넘어가지 않을 수도 있다. 그리고 서식 요소 하위에 전송 기능을 하는 인풋 요소가 없기 때문에 자바스크립트로 전송이 일어나지 않을 수도 있다.

이와 같이 페이지를 이동하거나 값을 넘길 필요가 있을 때 자바스크립트에 의존해서 이를 처리하게 되면 클라이언트의 환경에 따라서 동작이 실패할 수 있다. 따라서 이러한 처리는 자바스크립트에서 처리 하지 말고 서버 측에서 처리를 하는 것이 더욱 안정적이다.

이러한 중간과정에서의 처리를 서버측에서 모두 처리 하는 것이 가장 바람직 하지만 어쩔 수 없이 사용을 해야할 경우에는 - 그럴 경우가 많지는 않겠지만 기존의 호환성을 위해서 - DOCTYPE 선언이나 html 요소, head, body와 같은 필수 엘리먼트들이 존재하는 완성된 페이지를 사용 하도록 하고, 자바스크립트가 작동하지 않는 경우를 위해서 서식 요소에 전송 버튼도 제공을 하고, 결과 메세지도 alert외에 일반 텍스트와 다음 페이지 이동 링크를 제공하도록 해야 한다.

<!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>캐릭터 셋 선언이 없는 경우 브라우저의 기본 설정으로 alert이 작동하기 때문에 브라우저의 기본 설정이 ko-kr이 아닌 경우 한글이 깨지게 된다. 문서의 마임타입(mime-type)도 text/html인지 확인해야 한다.

서식 요소에서의 자바스크립트 사용
일반적으로 서식은 사용자가 입력한 값을 서버측에 전달하는 역할을 하고 그 전달은 서식 요소의 전송 기능을 통해서 이루어 진다. 이러한 서식을 구현 할 때에 자바스크립트를 사용하는 경우가 많다.

전송(submit)
서식은 값을 보내는 전송 기능을 제공하고 있다. <input type="submit" />이나 <input type="image" />, <button type="submit></button>이 전송 기능을 하는 컨트롤인데 서식의 값 유효성 체크를 하는 과정에서 이러한 서식의 자체적인 전송 기능을 이용하지 않고 자바스크립트로 서식 전송을 하는 경우가 있다.

<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>위와 같은 경우 서식에 전송 기능이 없기 때문에 브라우저에 따라서 script로 전송이 안되는 경우도 있고 전송 버튼 대신에 이미지가 들어있기 때문에 의미적으로도 맞지 않다. 따라서 서식을 제작할 때에는 반드시 전송 기능을 적절한 HTML 요소를 이용해서 제공해야 한다.

<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>
유효성 검사(validation)
클라이언트 측에서 자바스크립트를 이용한 유효성 검증은 자바스크립트가 서식을 전송(form.submit())하는 방식 대신에 서식의 전송 이벤트(onsubmit)를 캐치하는 방식으로 구현한다.

<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>위와 같은 경우 자바스크립트만을 이용해서 서식을 전송하고 있기 때문에 HTML만으로는 기능이 작동하지 않는다.

<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>이와 같이 onsubmit 이벤트를 이용해서 서식의 유효성을 검사하고 그 결과를 true나 false로 보내줌으로써 서식이 전송을 진행하거나 멈출 수 있고, onsubmit 이벤트가 발생하지 않아도 사용자는 서식을 사용할 수 있기 때문에 접근성이 높아지게 된다.

게시판 등에서 페이지 이동을 자바스크립트로 하는 경우
게시판에서 페이지의 이동을 자바스크립트 서식 전송으로 하는 것을 많이 볼 수 있다. 아래와 같이 사용자 인풋이 없는 빈 서식을 하나 만들고 이것과 자바스크립트를 이용해서 페이지를 이동하는 것이다.

<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>URL이 간단해 지고 다루기 쉽다는 이유로 이러한 방식으로 개발을 하는 경우가 많은 것 같다. 위와 같이 모든 기능을 자바스크립트를 이용해서 구현을 하게 되면 자바스크립트 오류가 있거나 자바스크립트가 작동 하지 않는 상황에서는 접근을 할 수 없게 된다. 또한 모든 변수를 POST를 통해서 전달하기 때문에 글의 주소를 나타내는 URL이 표시되지 않고 해당 페이지를 따로 북마크 한다든지 링크를 저장을 할 수 없게된다. 게시판의 경우 해당 게시물로의 접근을 쉽게 해 주어야 하는데 사용자가 URL을 알 수 없게 함으로써 접근을 원천적으로 막게 된다.

자바스크립트를 이용하지 않고도 a 요소와 URL만으로도 작동 가능한 페이지를 만들고 쿼리스트링을 효율적으로 다루는 방법을 모색하여 개발을 진행하는 것이 좋다.

마치며
웹사이트 개발을 하면서 접할 수 있었던 자바스크립트 과용 예를 적어 보았다. 그런데 놀라운 것은 이러한 개발 방식을 초보부터 어느정도 경력이 된 개발자들까지 아무런 고민 없이 사용하고 있었다는 것이다. 책이 잘못된 것인지 교육이 잘못 된 것인지 정확한 원인을 알 수는 없지만 많은 개발자들이 웹이 가지고 있는 기본적인 특성을 무시한채 이러한 방법으로 개발을 하고 있는 것이 사실이다. 그리고 초보 개발자들은 HTML을 잘 모르기 때문에 이러한 개발 방식을 아무 고민 없이 그냥 받아들이고 있는 실정이다.

접근성 뿐만 아니라 사용성도 크게 낮추고 있는 것이 바로 이 잘못된 자바스크립트의 사용이다. 부디 개발자들이 올바른 HTML에 기초한 접근성 높은 웹사이트, 웹 어플리케이션을 구축 하기를 바라는 바이다.
추천추천 : 394 추천 목록
번호 제목
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
2,981
 jquery cookie (jquery.cookie.js)
2,980
 jquery div 기본 넓이, 높이 계산 및 padding, border 포함 하기
2,979
 jquery 다른버전 추가 사용시 충돌 방지 (카페24 스마트디자인 기본내장 jquery 1.4.4 버전과 충돌시 해결방법)
2,978
 특정 페이지 종료시 확인 경고창 출력
목록
추천음악방송
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
앵콜트로트
뽕짝아가씨
작은 음악다방
종합성인가요방
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
Dance&Remix
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요1번지(종합)
뮤직하우스
동요\연변\반주\기타
앗싸! 뽕짝
가요 포장마차
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
추천가요\POP\기타
최신가요\인기가요
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.