ai-친화적-웹-디자인-스킬은(는) 무엇을 하나요?
시맨틱 HTML, ARIA, 안정적인 로케이터 및 폼 모범 사례를 사용하여 AI 친화적인 웹 인터페이스를 구축하여 자동화와 접근성을 향상시킵니다.
개요
이 스킬은 AI 에이전트와 자동화 도구가 원활하게 상호작용할 수 있는 웹 인터페이스를 만드는 데 중점을 둡니다. 시맨틱 HTML, 적절한 ARIA 사용, 안정적인 로케이터, 그리고 접근성과 자동화를 모두 고려한 폼 디자인 원칙을 다룹니다.
주요 원칙
1. 시맨틱 HTML 사용
<div>대신<header>,<nav>,<main>,<section>,<article>,<footer>등 시맨틱 요소를 사용하세요.- 제목은
<h1>부터<h6>까지 올바른 계층 구조를 유지하세요. - 목록은
<ul>,<ol>,<li>를 사용하여 구조화하세요.
<!-- 좋은 예 -->
<nav aria-label="주 메뉴">
<ul>
<li><a href="/home">홈</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav>
<!-- 나쁜 예 -->
<div class="menu">
<span onclick="navigate('/home')">홈</span>
<span onclick="navigate('/about')">소개</span>
</div>
2. ARIA 속성 및 랜드마크
- ARIA 랜드마크(
role="banner",role="navigation",role="main"등)를 사용하여 페이지 구조를 정의하세요. - 동적 콘텐츠 업데이트에는
aria-live영역을 사용하세요. - 모든 대화형 요소에 접근 가능한 이름을 제공하세요.
<div role="alert" aria-live="assertive">
오류가 발생했습니다. 다시 시도해 주세요.
</div>
3. 안정적인 로케이터
- CSS 클래스나 구조적 위치에 의존하지 마세요.
data-testid,data-cy, 또는 고유 ID 속성을 사용하여 안정적인 타겟을 만드세요.
<button data-testid="submit-btn" type="submit">제출</button>
4. 폼 모범 사례
- 각 입력 필드에 명확한
<label>을 연결하세요. - 필수 필드, 입력 형식, 오류 상태를 표시하세요.
- 오류 메시지를
aria-describedby로 연결하세요.
<div>
<label for="email">이메일 주소</label>
<input
type="email"
id="email"
name="email"
required
aria-describedby="email-error"
/>
<span id="email-error" role="alert">유효한 이메일 주소를 입력하세요.</span>
</div>
예제: 접근성 있는 검색 폼
<form role="search" aria-label="사이트 검색">
<label for="search-input">검색:</label>
<input
type="search"
id="search-input"
name="q"
placeholder="검색어 입력..."
aria-label="검색어를 입력하세요"
/>
<button type="submit" data-testid="search-btn">검색</button>
</form>
도구 및 검증
- WAVE를 사용하여 접근성 문제를 감지하세요.
- axe DevTools를 브라우저 확장 프로그램으로 사용하세요.
- ARIA 작성 관행은 WAI-ARIA Authoring Practices를 참조하세요.
지원 플랫폼
이 가이드라인은 Cursor, Claude Code, Codex 및 기타 AI 코딩 어시스턴트와 호환됩니다.