한 줄 정의
AI 에이전트와 LLM 기반 머신이 인터페이스 및 디자인 시스템의 맥락과 의미를 명확히 이해하고 수집·해석할 수 있도록 구조화하는 설계 기술.
핵심 요지
- 시맨틱 구조화: 단순 시각 요소 배치를 넘어 컴포넌트 메타데이터, 시맨틱 토큰, 시맨틱 HTML, 명확한 제목 위계를 제공해 기계가 쉽게 읽고 왜곡 없이 해독하게 만듦.
- AI 검색 및 에이전트 대응: 사용자가 시각적 웹 탐색 대신 LLM 에이전트에게 정보를 요청함에 따라 머신 탐색 효율성이 서비스 노출의 핵심 결정 요소가 됨.
- 노출의 새로운 비용 (The new cost of visibility): 머신이 이해하지 못하는 부실한 구조는 LLM 답변 생성 시 완전히 배제되는 위험 초래.
상세
- 구현 방식:
- 컴포넌트 문서화: 존재 이유와 사용 상황에 대한 메타데이터 기록
- 시맨틱 토큰 사용: 구체적 색상값 대신 의도를 나타내는 토큰 명칭 사용
- 관계 매핑: 폼 레이블과 입력 필드 간 명시적 바인딩
예시
충돌
- 인간용 시각 디자인과의 균형: 머신 가독성에만 직중할 경우 시각적 심미성이 희생되거나 과도한 메타데이터 오버헤드가 발생할 수 있음.