[웹 표준 시리즈 #5] AI 에이전트의 시대: 웹 표준은 이제 AI를 위한 'API'다

드디어 5부작 시리즈의 마지막 종착역에 도착했습니다. 지금까지 우리는 사람(사용자)과 동료 개발자를 위한 웹 표준을 이야기했습니다. 하지만 2026년을 바라보는 지금, 우리가 만든 웹사이트를 방문할 아주 특별한 손님이 하나 더 늘었습니다.

바로 'AI 에이전트(AI Agent)'입니다.

---

1. AI는 당신의 디자인을 보지 않습니다

구글의 젠탭스(GenTabs)나 디스코(Disco) 같은 미래형 브라우저를 상상해 보세요. 사용자가 "이번 주말 제주도 여행 계획 짜줘"라고 하면, AI는 수십 개의 여행 사이트를 대신 방문합니다.

이때 AI는 우리가 공들여 만든 화려한 컬러와 애니메이션을 보지 않습니다. 오직 DOM 구조와 태그의 의미만 읽습니다.

• 표준을 지킨 사이트: AI가 "아, 여기가 숙소 이름이고 여기가 가격이구나!"라고 명확히 인식해 사용자에게 추천합니다.
• 표준을 무시한 사이트: AI에게는 그저 의미 없는 div 덩어리일 뿐입니다. 결과적으로 내 사이트는 AI의 선택에서 배제됩니다.

---

 2. BEM과 시맨틱 마크업: AI를 위한 '데이터 지도'

AI 에이전트 시대에 BEM 방법론과 시맨틱 태그는 단순한 코딩 규칙을 넘어 AI가 정보를 수집하는 '가이드라인'이 됩니다.

1. 시맨틱 태그 (Semantic HTML): AI에게 콘텐츠의 우선순위를 알려주는 신호등입니다. <main>과 <article>이 잘 갖춰진 사이트는 AI가 핵심 정보를 추출하는 속도를 획기적으로 높여줍니다.
2. BEM 명명 규칙: .c-product-card__price처럼 논리적인 클래스명은 AI가 데이터의 성격을 파악하는 결정적인 힌트가 됩니다. AI는 클래스 이름만 보고도 "이 숫자는 가격 데이터다"라고 확신할 수 있게 되죠.

---

 3. 미래를 대비하는 '구조화된' 코드 예시

AI 에이전트가 정보를 수집하기 가장 좋아하는, 이른바 'AI-Friendly' 마크업 구조를 살펴봅시다.

<section class="c-event-list" aria-labelledby="event-title">
  <h2 id="event-title" class="c-event-list__title">이번 달 추천 축제</h2>

  <ul class="c-event-list__items">
    <li class="c-event-list__item">
      <article class="c-event-card">
        <h3 class="c-event-card__name">제주 들불 축제</h3>
        <p class="c-event-card__info">
          <time class="c-event-card__date" datetime="2026-03-05">2026년 3월 5일</time>
          <span class="c-event-card__location">제주 애월읍</span>
        </p>
        <a href="/events/1" class="c-event-card__link">상세 정보 보기</a>
      </article>
    </li>
  </ul>
</section>

---

 코드 밖에서 드리는 보충 설명

위의 코드는 사람뿐만 아니라 AI 에이전트에게 최적화된 설계입니다.

1. Section & Heading 연결: aria-labelledby를 통해 섹션 전체의 제목이 무엇인지 명확히 연결했습니다. AI는 이 영역이 '축제 목록'임을 단번에 이해합니다.
2. 구조의 반복성: ul > li > article이라는 정석적인 계층 구조를 사용하여 AI가 데이터의 패턴을 읽기 쉽게 만들었습니다.
3. 기계 친화적 데이터: time 태그의 datetime 속성은 AI가 날짜 정보를 오차 없이 정렬하고 캘린더에 등록하는 데 결정적인 도움을 줍니다.
4. BEM의 논리: 클래스명만으로도 '목록(list)', '아이템(item)', '카드(card)'의 관계를 수직적으로 파악할 수 있게 설계되었습니다.

---

 시리즈를 마치며: 표준은 곧 '자유'입니다

5부에 걸쳐 우리는 웹 접근성, 시맨틱 마크업, SEO, WAI-ARIA, 그리고 AI 시대의 표준까지 달려왔습니다.

누군가는 "표준을 지키는 게 너무 까다롭고 제약이 많다"라고 말합니다. 하지만 역설적으로 표준을 지킬 때 우리 웹사이트는 가장 자유로워집니다. 장애가 있는 사용자에게도, 검색 엔진에게도, 그리고 미래의 AI 에이전트에게도 말이죠.

BEM으로 논리를 세우고, Vanilla JS로 가볍게 움직이며, Airbnb 가이드로 정교하게 다듬은 여러분의 코드가 세상을 더 넓게 연결할 것입니다.

여러분의 코드가 누군가에게는 유일한 통로가 된다는 사실을 항상 기억해 주세요!

---

 5부 핵심 요약

• 미래의 웹 방문자는 사람이 아닌 'AI 에이전트'가 될 가능성이 높다.
• AI는 시각적 디자인이 아닌 '시맨틱 마크업'과 '논리적 구조'로 웹을 이해한다.
• 웹 표준 준수는 AI 시대에 내 콘텐츠가 살아남기 위한 필수 생존 전략이다.