시맨틱 마크업은 왜 접근성과 SEO의 출발점이 되는가 빠른 답 시맨틱 마크업은 화면 모양보다 콘텐츠의 역할과 관계를 HTML 구조에 남기는 작성 방식이다. 접근성에서는 제목, 랜드마크, 버튼과 링크의 역할이 스크린 리더와 키보드 탐색의 기준이 된다. SEO에서는 주요 콘텐츠, 제목 계층, 링크 구조가 검색 엔진이 문서를 이해하는 단서가 된다. CSR에서도 최종 DOM의 의미 구조는 중요하지만, 공개 콘텐츠라면 초기 HTML에 무엇이 들어 있는지도 함께 봐야 한다. 목차 점검 매트릭스 시맨틱 마크업은 태그 이름보다 의미 구조에 가깝다 브라우저와 보조 기술은 구조를 기준으로 해석한다 점검 순서는 제목, 랜드마크, 상호작용부터 잡는다 문서 구조를 먼저 모델링해 본다 버튼처럼 보이는 것과 버튼으로 동작하는 것은 다르다 자동 점검과 CI 품질 게이트를 둔다 CSR 환경에서는 초기 HTML과 최종 DOM을 나누어 본다 운영 중 자주 깨지는 지점을 미리 본다 점검 매트릭스 점검 매트릭스 문서 구조 머리말, 탐색, 본문, 보조 영역, 바닥글의 역할이 구분되는지 확인해 페이지의 큰 지도를 만든다. 제목 계층 글자 크기가 아니라 문서의 포함 관계에 맞게 제목 수준이 이어지는지 확인한다. 상호작용 요소 클릭 가능한 요소가 키보드와 보조 기술에서 버튼, 링크, 입력 필드로 인식되는지 확인한다. 주요 콘텐츠 반복되는 메뉴를 지나 본문으로 바로 이동할 수 있는지 확인해 탐색 비용을 줄인다. 렌더링 시점 CSR 페이지에서 초기 HTML과 최종 DOM이 각각 어떤 정보를 제공하는지 확인한다. 자동 검증 린트, 접근성 검사, E2E 스모크 테스트가 배포 전 최소 기준을 막는지 확인한다. 시맨틱 마크업은 태그 이름보다 의미 구조에 가깝다 시맨틱 마크업은 특정 요소 이름을 많이 쓰는 기법이 아니다. 페이지 안의 콘텐츠가 어떤 역할을 하는지 브라우저, 보조 기술, 검색 엔진이 해석할 수 있도록 구조를 남기는 방식이다. 같은 박스처럼 보이는 영역도 문서 안에서는 서로 다른 의...