AI 검색 최적화를 위한 SEO·접근성 점검과 답변 검증
AI 검색이 문서를 찾고 답변을 만드는 원리에서 SEO와 웹 접근성의 역할을 설명합니다. 가상의 요금 안내 페이지를 바탕으로 수집 경로와 정보의 정확성을 확인하고, 체크리스트와 LLM 검토를 CMS 운영에 적용하는 방법을 살펴봅니다.
태그
web-development
14개 글
prerender에서 LCP가 6.2초로 찍힌 이유 — activationStart를 뺀 RUM만 맞다
Speculation Rules로 페이지를 미리 렌더링하면 LCP 원본값에 사용자 대기 시간이 통째로 들어간다. Chrome 150에서 6244ms와 103.5ms의 간극을 실측하고, activationStart로 보정해야 할 지점을 RUM 계측 코드 기준으로 하나씩 정리했다.
모델 버전을 올릴 때마다 인젝션 테스트를 다시 돌리는 이유: 게이트를 직접 짜봤다
LLM 파이프라인에 프롬프트 인젝션 회귀 스위트를 직접 돌렸다. 순진한 키워드 가드는 11건 중 2건, 구조적 가드는 11건 전부를 잡았고, 내가 저지른 리팩터링이 떨어뜨린 탐지까지 게이트가 집어냈다. 모델 버전을 올릴 때마다 다시 돌려야 하는 이유를 실측으로 정리했다.
WebMCP가 오리진 트라이얼에 들어왔다 — provideContext는 왜 반년 만에 사라졌나
WebMCP가 Chrome 149 오리진 트라이얼로 배포됐지만 2월 API는 이미 바뀌었다. navigator.modelContext는 document.modelContext로 옮겨졌고 provideContext는 보안 문제로 사라졌다. 지금 등록해야 할 툴 형태를 정리했다.
공식은 "WebSocket이 bfcache를 막지 않는다"고 했다 — 다시 재보니 세 번 다 막혔다
Chrome 149가 WebSocket의 bfcache 차단을 풀었다고 발표했다. Chrome 150 세 환경에서 다시 재보니 notRestoredReasons는 여전히 websocket을 돌려줬다. 릴리스 노트와 실측이 갈리는 지점을 재현 스크립트와 측정 로그까지 함께 기록했다.
aria-modal="true"는 아무것도 막지 않았다 — 모달 포커스 이탈 실측과 inert
role="dialog"에 aria-modal="true"까지 붙인 모달에서 Tab을 세 번 누르자 포커스가 오버레이 뒤로 빠져나갔다. axe는 위반 0건. 같은 마크업을 aria-hidden, inert로 바꿔가며 키보드 포커스가 실제로 어디에 떨어지는지 기록했다.
beforeunload는 통과했고 unload는 막혔다: bfcache 실측 6판
뒤로 가기가 즉시 열리는지는 취향이 아니라 측정 대상이다. 차단 조건을 하나씩 심은 페이지 여섯 개에 back 내비게이션을 걸어 pageshow.persisted와 notRestoredReasons를 받아냈다. unload는 막혔고 beforeunload와 no-store는 통과했다.
내 피드에 네 언어 1,248건이 섞여 있었고, 언어 표시는 하나도 없었다
W3C가 공개한 문자열 언어·방향 메타데이터 초안을 기준으로 4개 언어 블로그를 감사했다. 통합 RSS 1,248건이 언어 표시 없이 나갔고 dir="auto" 휴리스틱은 14건 중 4건을 틀렸다. dc:language 수정 코드와 회귀를 막는 빌드 게이트까지 정리한다.
WCAG 2.2 최소 타깃 크기, 초록불 92점 뒤에 숨은 AA 실패
손끝이 빗나가는 22×22 버튼에 Lighthouse는 접근성 92점을 줬다. WCAG 2.2 SC 2.5.8(최소 24×24)을 샌드박스에 심어 재보니 자동 도구는 크기 위반만 잡고 예외 조항은 사람에게 넘겼다. 스페이싱 예외 계산과 CSS 수정을 실측 로그로 정리한다.
접근성 자동 검사가 초록불을 줘도 남아 있는 네 가지 장벽
체크아웃 페이지 하나에 WCAG 장벽 여덟 개를 일부러 심고 axe-core로 돌렸다. 규칙형 위반 넷은 잡혔지만, 사람의 판단이 필요한 넷은 초록불 뒤에 그대로 남았다. 무엇을 자동화가 끝까지 못 보는지, 그 자리를 메우는 수동 리뷰 체크리스트를 실측 로그와 함께 정리했다.
접근성 이름이 틀리면 음성 제어도 AI 에이전트도 버튼을 못 누른다
버튼에 aria-label을 붙였는데 접근성 트리는 화면에 없는 글자를 읽는다. WCAG 2.5.3 Label in Name 위반을 샌드박스에서 재현해 확인하고, Lighthouse 13.3.0의 Agentic Browsing 점수가 0점에서 100점으로 바뀌는 과정을 실측했다.
AI 크롤러는 당신의 자바스크립트를 실행하지 않는다
GPTBot·ClaudeBot 같은 AI 크롤러는 자바스크립트를 실행하지 않아, CSR로만 렌더링한 페이지는 AI 검색과 인용에서 통째로 사라진다. 그 원인을 curl 요청으로 직접 재현해 확인하고, 서버사이드 렌더링과 프리렌더링으로 콘텐츠를 다시 노출시키는 구체적 방법까지 정리했다.
WebMCP: Chrome 146에서 브라우저가 AI 에이전트의 툴 서버가 된다
Chrome 146부터 브라우저 자체가 MCP 서버가 됩니다. WebMCP 프로토콜 작동 원리, Claude·GPT-4o 같은 AI 에이전트 연동 방식, 로컬 앱 없이 브라우저만으로 MCP 툴을 노출하는 새 아키텍처와 기업별 보안 샌드박스 적용 전략을 심층 분석합니다.
Claude Code를 활용한 대규모 웹사이트 페이지 자동 생성: 파츠 라이브러리와 SubAgent 병렬 처리
31개의 HTML 페이지를 파츠 라이브러리 기반으로 자동 생성한 실전 사례를 공유합니다. CSV 메타데이터 관리, SubAgent 병렬 처리, 2단계 품질 검증 프로세스까지 완벽 가이드.