검색창 영역을 위한 시멘틱 태그 <search>

 

 

 

지난 2023년 3월 24일부로, HTML standard에 새로운 시멘틱 태그가 추가되었습니다. 오늘 소개할 <search> 가 바로 그 주인공입니다.

 

 

등장

시멘틱 태그는 지난 포스트들에서도 몇 번 등장했었던, 접근성을 고려한 웹을 만들때 빠지지 않고 등장하는 개념입니다. 스크린 리더와 같은 장비가 웹 페이지를 쉽게 탐색할 수 있도록 시멘틱 태그를 이용해 영역 별로 역할을 나누어 준 것을 랜드마크(landmarks) 라고 하는데, 예시로는 main, header, aside, nav ... 등이 있습니다.

 

우리가 흔히 사용하는 웹 페이지는 이러한 랜드마크의 역할(role)을 통해 대부분의 영역을 설명할 수 있습니다. 랜드마크로는 아래의 8가지 역할이 지정될 수 있습니다.

 

• banner
• complementary
• contentinfo
• form
• main
• navigation
• region
• search

 

<div role="main"> ... </div>
<main> ... </main>

/* 이 둘은 같은 의미를 갖습니다. */

 

각 역할에는 위의 예시처럼 그에 걸맞는 시멘틱 태그 역시 존재합니다. 예를 들어 role="banner"의 경우 <header>, role="navigation"의 경우 <nav> 처럼 대응됩니다.

 

그러나 이 중 role="search"는 대응되는 시멘틱 태그가 존재하지 않는 유일한 역할이었습니다. 이런 부분에 문제를 느낀 사람들은 search에도 해당 역할을 가진 시멘틱 태그를 생성할 것을 제안하였습니다.

 

 

issue #5811 : Consider creating an HTML search element

 

 

이슈를 제기한 사람과 해당 논의에 참여했던 사람들을 비롯하여 대부분의 사람들이 role="search"로 역할을 나타내는 ARIA 방식 대신 표현력있는 HTML 태그 타이핑을 지지하며 해당 태그의 필요성에 공감했고, 새로운 태그를 생성하는 것까지는 합의를 마친 상태에서 해당 태그를 어떤 이름으로 생성할 지에 대해 토론이 이어졌습니다.

 

가장 처음에 제출된 의견은 <search>였는데, 이 이름은 해당 섹션이 검색을 수행하는 랜드마크가 아니라 검색 창을 나타내는 input 요소 자체를 지칭하는 것처럼 보인다는 우려가 제기되었습니다. 때문에 다른 요소들을 담을 수 있는, 포용적인 이름을 사용하는 것이 좋아 보인다며 <searcharea>, <searchform>, <searchgroup>, <searchset> 등의 이름이 대안으로 나왔지만 search보다 좋은 이름을 찾기가 어려웠고, 설문조사 결과와 논의에 참여한 사람들의 의견이 일치하여 결국 태그의 이름은 <search>으로 결정되었습니다.

 

 

트위터 설문 조사 결과 <search>가 1위를 차지했습니다.

 

 

다만 여전히 모호성이 존재하고, 중첩된 <search> 태그를 사용하는 대신 기존의 form 요소에 role 속성으로 search를 추가해주는 ARIA 방식을 사용할 여지도 있는만큼 확실한 사용 예시를 정하여 문서를 통해 안내하기로 하였습니다.

 

아래는 그 결과물입니다.

 

 

사용 예시

기존의 ARIA 방식이 이런 모양이었다면,

<form role="search" class="search-form">
  <input type="search" placeholder="검색어를 입력하세요">
</form>

 

 

<search> 태그를 이용하면 이렇게 변경할 수 있습니다.

<search>
  <form class="search-form">
    <input type="search" placeholder="검색어를 입력하세요">
  </form>
</search>

 

 

반드시 검색어를 입력하고, 확인을 누르는 양식을 갖추어야만 <search> 태그를 사용할 수 있는 것은 아닙니다. 검색 결과 를 필터링하는 용도로 사용할 때에도 <search> 태그를 사용할 수 있습니다.

 

<search>
  <form class="main-filter-form">
    <div>
      <input type="checkbox" id="small" name="small" >
      <label for="small">작은 사이즈</label>
    </div>
    <div>
      <input type="checkbox" id="middle" name="middle" >
      <label for="middle">중간 사이즈</label>
    </div>
    <div>
      <input type="checkbox" id="big" name="big" >
      <label for="big">큰 사이즈</label>
    </div>
    <button type="submit">적용</button>
  </form>
</search>

 

 

또한 페이지에서 검색 영역은 꼭 하나일 필요는 없습니다. 한 페이지에 하나만 등장해야하는 <main> 태그와는 달리, <search> 태그는 여러 번 중복해서 사용 가능합니다.

 

<header>
  <search>
    <form class="header-search-form">
      <input type="search" placeholder="검색어를 입력하세요">
    </form>
  </search>
</header>

<main>
  <search>
    <form class="main-filter-form">
      <div>
        <input type="checkbox" id="small" name="small" >
        <label for="small">작은 사이즈</label>
      </div>
      <div>
        <input type="checkbox" id="middle" name="middle" >
        <label for="middle">중간 사이즈</label>
      </div>
      <div>
        <input type="checkbox" id="big" name="big" >
        <label for="big">큰 사이즈</label>
      </div>
      <button type="submit">적용</button>
    </form>
  </search>
</main>

 

 

 

마치며

<search>가 HTML Standard에 추가되었다고 해서, 코드상으로나 기능상으로 극적인 변화가 생기는 것은 아닙니다. 당장 서비스의 모든 코드를 <search>를 사용하도록 수정해야 하는 것은 더더욱 아닙니다. 아직까지는 이 태그가 모든 브라우저에서 올바르게 동작할 것이라고 보장할 수 없기에, 오히려 역효과가 날 수도 있습니다. 당분간은 수정을 보류하는게 맞는 것 같아 보입니다.

 

당장 이 태그를 적용할 수 있는지의 여부는 둘째치더라도, 이러한 접근성에 기반한 변화가 꾸준히 생기는 것 자체로 우리의 웹 커뮤니티가 좋은 방향으로 발전하고 있다는 것은 확실히 느낄 수 있었습니다. 앞으로도 이런 변화는 꾸준히 적용되었으면 좋겠다는 생각이 드네요.

 

 

읽어주셔서 감사합니다.

 

 

참고 문서

WHATWG - 4.4.15 The search element

github issue in whatwg/html - Consider creating an HTML search element

New HTML Element: <search> by Alvaro Montoro

The search element by Scott Ohara

Accessible Landmarks by Scott Ohara