HTML과 CSS, 그리고 자바스크립트는 웹 페이지를 구성하는 가장 기본적인 세 언어라고 할 수 있습니다. 그 중에서도 자바스크립트는 논리적인 연산을 가능케하고 복잡하고 가변적인 디자인을 쉽게 실현할 수 있게 해 준다는 점에서 몹시 중요합니다. 하지만 별 생각없이 웹 페이지의 모든 부분을 자바스크립트에 맡겨 버린다면 예기치 못한 문제가 생길 수 있습니다.
1. 사이트 퍼포먼스와 유지/보수 측면
HTML, CSS, 자바스크립트는 기본적으로 각자의 전문화된 역할을 가지고 있습니다. HTML은 사이트의 구조를 나타내는 '마크 업', CSS는 사이트의 생김새를 정돈하는 '스타일', 그리고 자바스크립트는 논리적 연산과 상호작용을 담당하는 '프로그래밍 언어'로 기능합니다.
하지만 자바스크립트의 막강한 영향력은 이러한 경계를 쉽게 허물 수 있습니다. 기본 자바스크립트의 element.style이나 jQuery의 .css(), 혹은 attribute에 직접 접근하는 다른 방법을 통해서 요소의 시각적 디자인을 변경할 수 있고, 특정 위치에 새로운 요소를 만들어 넣을 수도 있습니다.
이러한 기능들은 일견 편리하게 느껴지지만, 정돈된 기준 없이 마구잡이로 사용되었을 때에는 소스코드가 난잡해져 주석 없이는 구조를 파악하기 어려워질 수 있습니다. 게다가 매우 드물지만 혹여 자바스크립트를 지원하지 않는 환경에서 접속한 사용자가 있다면, 사이트 구조 자체가 제대로 표현되지 않는 상황에 직면할 수도 있습니다.
또한 자바스크립트를 불러와 연산하고 페이지에 적용하는 과정이 페이지 로딩에 악영향을 주는 것 또한 쌓이면 무시할 수 없는 부분입니다.
2. 검색 엔진 크롤러의 접근성 측면
구글, 네이버, 다음 등의 여러 포털 사이트들은 자체적인 '검색 봇' 혹은 '크롤러'라 불리는 프로그램을 이용해 웹을 누비고 사이트 정보를 수집합니다. 이 크롤러들은 기본적으로 HTML 마크업을 통해 사이트의 구조를 파악합니다. <a> 태그를 찾아 다른 페이지로 이어지는 링크를 파악하고, <header>, <nav>, <footer> 등의 시맨틱 구조를 찾아 웹페이지의 구성을 이해하는 식이죠.
물론 발전한 기술 덕분에 대부분의 크롤러들은 완벽히 표준을 지키지 않은 웹페이지라도 무리없이 이해하지만, 그럼에도 자바스크립트의 남용은 접근성을 저해하는 장애물로 작용할 가능성이 있습니다.
예컨대 다른 웹페이지로 링크를 거는 가장 쉬운 방법은 <a> 태그로 해당 요소를 감싸는 것이지만, 필요에 따라 <div>나 <span> 등의 다른 요소들에도 자바스크립트를 이용해 같은 기능을 부여할 수 있습니다.
잘 꾸미기만 했다면 그래픽으로 렌더링 된 화면을 마주하는 실제 방문자 입장에서는 이상할 게 없겠지만, 이러한 구성은 소스코드 수준에서 웹을 탐색하는 크롤러에게는 상당히 이상하게 보일 수 있습니다.
<input type="checkbox">와 <label>을 이용한 토글 메뉴
본론으로 넘어가서, 이번 글에서는 버튼을 클릭했을 때 펼쳐지는 메뉴를 자바스크립트의 도움 없이 구현하는 방법을 알아보도록 하겠습니다.
이 기능을 구현하려면 '클릭에 따라 반응하는' 요소가 필요한데, HTML 마크업에는 이미 이런 기능을 가진 요소가 있습니다. 바로 <input>의 checkbox와 radio type이죠. <input>의 submit type이나 <button>도 클릭 기능을 수행하긴 하지만, 그에 따른 즉각적인 반응은 존재하지 않습니다.
먼저 아래와 같이 버튼 역할을 할 nav_btn과 열리는 내용 역할을 할 nav_item을 각각 <label>태그와 <div>태그를 이용해 만듭니다.
<label>은 기본적으로 inline 요소로 인식되어 width와 height가 적용되지 않으니 display:block을 적용해 주고, nav_item은 보이지 않도록 display:none을 적용합니다.
HTML | RESULT |
<label class="nav_btn">OPEN</label> <div class="nav_item"></div> |
|
CSS | |
.nav_btn { display:block; width: 60px; height: 30px; background-color: #000; color: #fff; line-height: 30px; text-align: center; cursor: pointer; } .nav_item { display:none; width: 60px; height: 200px; background-color: #777; } |
이제 checkbox를 이용해 실제로 버튼이 작용할 수 있도록 구현합니다. checkbox는 nav_item의 앞에 위치시키고, 보이지 않도록 display:none을 적용해줍니다.
그리고 nav_btn과 input을 'for'와 'id' attribute로 연결시키고, 선택된 checkbox보다 뒤에 있는 nav_item에 대해 display:block을 적용하면 nav_btn을 클릭했을 때 나타나는 메뉴 상자를 만들 수 있습니다.
HTML | RESULT |
<label class="nav_btn" for="opener">OPEN</label> <input class="opener" type="checkbox" id="opener"> <div class="nav_item"></div> |
|
CSS | |
.nav_btn { display:block; width: 60px; height: 30px; background-color: #000; color: #fff; line-height: 30px; text-align: center; cursor: pointer; } .nav_item { display:none; width: 60px; height: 200px; background-color: #777; } .opener { display:none; } .opener:checked ~ .nav_item { display:block; } |
이처럼 checkbox와 label을 이용하면 토글 가능한 버튼을 만들 수 있고, 이를 적절한 css 선택자와 연계시켜 활용할 수 있습니다. 또한 checkbox 대신 radio 타입으로 name attribute를 이용해 다수의 메뉴 중 하나만 선택되는 형태를 만들거나, checked attribute를 이용해 처음부터 열린 상태로 만들 수도 있습니다.
다만 위와 같은 방법으로는 다른 메뉴를 선택했을 때 자동으로 닫히는 형태를 만들 수 없고 (checkbox는 복수 선택이 가능하므로), radio 타입을 이용했을 때에는 같은 버튼을 눌러 다시 닫는 toggle 형태를 만들 수 없다는 단점이 있어, 독립적인 하나의 메뉴를 토글시키는 데에 적합한 방법이라고 볼 수 있겠습니다.