a와 button을 용도에 맞게 사용하기

출처 : unsplash.com

오랜만에 개발 관련 글을 쓴다. 아주 기초적인 부분인데 놓치고 있던 부분이 있어서 기록으로 남겨둔다. 코딩하는 습관은 한번 익숙해지면 고치기가 어렵다. 나는 여러가지 안 좋은 습관을 가지고 있다.

그 중 제발 좀 고치자 싶어서 노력하는 부분이 하나 있다. 바로 링크가 아닌 곳에서 <a>태그의 사용을 지양하는 것이다.

앵커 태그

WWW의 근간을 이루는 기술 중 하나는 HTML이다. HTML이라는 이름에도 들어 있듯이 HTML문서는 '하이퍼텍스트' 문서다. 하이퍼텍스트의 근간은 하이퍼 링크이며 이 하이퍼링크를 위해 존재하는 것이, 기본적으로 <a>태그이다.

<a>태그는 'href' 요소와 결합하여 하이퍼링크를 만든다.

따라서, <a> 태그는 페이지 간의 이동을 위해 링크를 생성할 때만 사용해야 한다. 기본중에 기본인데 과거에는 <a>태그에 href="#"을 넣거나, javascript:; 와 같은 것으로 페이지 링크와 스크립트 호출을 막아놓고, 동적 UI를 만들 때 버튼 기능으로 많이 사용했다. 이것이 시간이 흐르고 손에 굳어버리니 계속 이 방법을 고수했다. 이는 의미에 맞지 않는 매우 잘못된 마크업 사용법이므로 하이퍼링크 생성 이외에 페이지 내의 동적 UI 작성을 할 때는 <a> 태그의 사용을 지양하자.

버튼 태그

2000년대 중반부터 AJAX 기법이 널리 확산되었다. 그리고 나중에는 모바일 시대가 열리면서 SPA 앱 개발 방식도 널리 사용되었다. 웹페이지나 모바일 페이지는 심플하면서도 복잡해졌다. 어떤 인터렉션이 있기전에는 심플해졌고, 거기서 무언가 인터렉션이 발생하면 점점 복잡한 속살을 드러낸다.

지금의 웹페이지나 모바일웹 사이트들은 페이지 이동을 하지 않은 상태에서 수 많은 동작과 인터렉션을 요한다. 이런 페이지 내 기능들을 사용할 때 <a>태그 대신 <button> 태그를 사용하는 것이 조금 더 논리에 맞지 않을까 생각한다.

버튼 태그는 기본적으로 <input> 요소로 구현이 가능하다. 이 경우에는 form의 submit이나 reset 기능도 사용이 가능하다.

다만, <a>태그 대용으로 사용할 경우에는 이렇게 사용하지 말고 <button>..</button>으로 독립적 마크업을 사용하자. 이렇게 사용하면 버튼 안에는 이미지를 비롯해서 <span>등 다른 요소를 넣어서 조금 더 디테일한 스타일링도 가능하다.

W3C 링크

앵커 태그 명세 : https://www.w3.org/MarkUp/1995-archive/Elements/A.html
버튼 태그 명세 : https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element

2020년 4월 1일
송종식