아티클

HTML의 원래 기능을 유지하자.

2015-06-09 16:00:10

안녕하세요 UI개발실 정대영입니다. 함께 업무하고 계신 조은님이 공유주신 아티클 등록합니다. 

 

HTML, Hyper Text Markup Language는 1993년 ISO 표준이 되어 현재는 가장 사랑받는 웹 개발 언어입니다.

꽤 오랫동안 사용되어왔지만, 그동안 비표준 브라우저들의 시장 잠식, 브라우저 전쟁 등으로 인해 많은 오해를 받기도 한 언어입니다.

HTML과 더불어 오랫동안 사용되어 왔던게 CSS, Cascading Style Sheet와 JS, JavaScript입니다.
CSS를 이용해 웹사이트를 아름답게 꾸미고, JavaScript를 이용해서 웹사이트에 동작을 불어넣었습니다.

그러나 JavaScript를 이용한 DOM의 무차별적 관리, 폼 밸리데이션 체크 등으로 인하여 사이트들의 JS의존성은 갈수록 심해졌습니다.
이 게시글은 JavaScript를 사용하지 말자는 것도 아니거니와, JavaScript가 되지 않는 브라우저를 위한 그런 이야기가 아닙니다.
단순히, HTML의 원래 기능을 유지하자는 이야기를 하고자 합니다.

 

쉬운 인터렉션

많은 사람들이 HTML을 단순히 “브라우저에 뭔가 띄우려고 쓰는 것”이라고만 생각합니다.
div로만 덕지덕지 칠해져있는 사이트들은 굉장히 많으며, 잘못된 태그들로 범람이 되고있는 사이트들도 종종 보았습니다.
심지어 아직도 table로만 레이아웃을 제작하는 사이트들도 있습니다.

HTML의 태그들은 각자 고유의 의미를 가지고 있습니다.
가장 많이 쓰는 a태그는 Anchor (닻)이라는 의미를 가지고,
div는 Division(분할), p는 Paragraph(문장), br은 Line break(줄바꿈) 등 다양한 의미를 가집니다.

그 의미에 맞게 사용하는 것은 웹표준에서 매우 중요한 부분을 차지하고 있으며,
의미에 맞는 HTML 태그 사용은 접근성적 측면으로 보나 웹의 시멘틱적인 부분을 보나 모두 기존의 방식보다 낫습니다.
(물론 Visual 측면의 차이는 없다고 생각할 수도 있습니다. 아까도 말했지만 Visual적 측면은 CSS의 담당입니다.)

각 의미를 가진 태그들은, 의미에 맞게 사용하여야 합니다.

 

a 태그

a 태그는 링크를 생성할 때 사용하며, 옵션으로 href 속성을 가집니다. href는 hypertext reference의 약자로,
HTML의 이름에 걸맞게 이동할 페이지의 링크를 적어주면 a태그로 감싸진 요소를 눌렀을 때 그 페이지로 이동하게 됩니다.

 

<a href="http://www.naver.com">네이버</a>

 

그러나, href내에는 이런 문법도 허용합니다. 

 

<a href="javascript:alert('네이버');">네이버</a>

 

바로 자바스크립트를 href에 바로 넣는 것입니다.
위에서도 설명하였지만 href는 hypertext reference의 약자입니다. 어딘가로 이동해야하는 부분에 JavaScript를 넣으면,
당연히 의미상으로도 맞지 않으며 저 a태그를 올바르게 사용했다고 할 수 없습니다.

 

 

만약 특정한 태그를 눌렀을 때, 순수하게 JavaScript 인터렉션만 넣고싶다면 타입이 button인 태그(일반적으로 button태그)를 사용하는 것이 더 좋습니다.

 

<button type="button" onclick="alert('네이버')">네이버</button>

 

 

개인적인 의견의 한도 내에서는 자바스크립트로만 동작하는 태그는 되도록 사용을 지양하는 것이 맞으나,
어떤 경우에서건 자바스크립트로만 동작하는 태그는 늘 존재하기 마련이기 때문에, 사용할 때 되도록이면 타입이 button인 태그를 사용하는 것이 좋습니다.

하지만 개발 여건에 의해 결국 a태그를 사용하게 되는 경우가 있기도 합니다.
그럴 때는, 최대한 a태그에 목적지를 제공하고, 목적지가 없는 경우라면 href를 제거해주길 바랍니다.
그리고 WAI-ARIA 스펙에서 제공하는 role속성을 사용하여 이 링크가 버튼임을 반드시 명시해주어야합니다.

 

<a onclick="alert('네이버')" role="button">네이버</a>

 

 

다시한번 말씀드리지만, 목적지 없는 닻은 결국 침몰될 뿐입니다.
태그의 의미는 최대한 준수하는 것이 좋습니다.

 

label과 input

비슷한 예로는 label태그와 input태그간의 관계도 있습니다.
“input을 가리키는 텍스트를 눌렀을 때 input에 포커스가 갔으면 좋겠어요”라는 의견이 간혹 들어오곤 합니다.

JavaScript로 각각을 맵핑시키는 것은 매우 어렵지만,
HTML의 기존 인터렉션으로 구현하는 것은 매우 쉽고 간단합니다.

 

<label for="sId">아이디 :</label>
<input type="text" id="sId"/>

 

 

단지 Input 태그에 고유 값인 id 속성을 부여하고,
label 태그에 for 속성으로 input 태그와 맵핑시켜주기만 하면 간단히 제작할 수 있습니다.

아까도 말씀드렸다시피, 표현은 CSS에서 충분히 변경할 수 있기 때문에, 한줄 전체를 통째로 영역으로 삼거나 하는 것들 또한 아주 쉽게 가능합니다.
HTML의 인터렉션은 대부분 매우 간단하게 구현할 수 있습니다.

 

form.submit()을 사용하지 맙시다

form 태그에서 submit을 하려고 할 때, 자바스크립트에서 form.submit()을 사용하여 form의 데이터를 전송하는 것이 가능합니다.
그러나 JavaScript에서 form.submit()을 활용하는 방법에는 몇가지 문제가 있습니다.

  1. JavaScript가 동작하지 않으면 form의 데이터 전송이 불가능하다.
  2. form 내의 input 태그에서 엔터를 눌렀을 때 정상적으로 submit이 동작하지 않는다

간단한 예를 들어보겠습니다.

 

<form action="" method="post">
    <label for="sId">아이디 : </label><input type="text" id="sId"/>
    <label for="sPw">비밀번호 : </label><input type="password" id="sPw"/>
    <a href="#" onclick="foo">전송</a>

    <script type="text/javascript">
        var foo = function() {
            form.submit();
        }
    </script>
</form>

  

이렇게 작성하면 input에 포커스가 가있을 때 엔터키를 눌러도 데이터가 전송되지 않습니다.
기존의 방법에 익숙해진 사용자라면 혼란을 느낄 수 있고, 시각장애인이 만약 여러분들의 웹 사이트를 사용한다면 기존과 다른 인터렉션에 당황할 것입니다.
웹은 누구나 사용할 수 있는 공간이어야 하며, 거기에 차별이 있어서는 안됩니다.

실제 위의 코드는 아래 코드처럼 쉽게 구현할 수 있습니다.

 

<form action="" method="post">
    <label for="sId">아이디 : </label><input type="text" id="sId"/>
    <label for="sPw">비밀번호 : </label><input type="password" id="sPw"/>
    <input type="submit" onclick="foo" value="전송"/>

    <script type="text/javascript">
        var foo = function() {
            // do something
        }
    </script>
</form>

이 때 코드의 작동순서는 아래와 같습니다.

  1. onclick 등의 이벤트로 등록해둔 JavaScript가 순서대로 실행된다.
  2. HTML의 기존 인터렉션이 실행된다.

폼의 밸리데이션 체크를 자바스크립트로 하고싶더라도 submit을 사용하여도 됩니다.

 

결론

상황에 따라 위의 내용들을 준수하기가 어려울 수 있습니다.
하지만 조금만 노력하고 귀차니즘을 탈피한다면 더 아름다운 웹을 만들어 나갈 수 있으리라 생각합니다.

댓글 0
댓글을 작성하려면 해주세요.