David Dias

이미지나 콘텐츠를 전환하는 캐러셀을 점검하고 자동 재생 정지, 키보드 조작, 화면 읽기 알림과 동작 줄이기 설정 지원을 확인하고 수정합니다.

• 자동 재생 슬라이드의 일시 정지 점검
• 키보드만으로 조작 가능한지 확인
• 슬라이드 전환의 화면 읽기 알림 확인

운영 환경에 제공하는 CSS의 압축 여부와 빌드 설정을 점검합니다. 불필요한 공백과 주석을 줄여 파일을 작게 만드는 방안을 검토하고 화면 너비별 표시도 확인합니다.

• 운영 환경 CSS 압축 여부 확인
• 빌드 과정에 CSS 압축 추가
• PostCSS 출력 검토

독립적인 화면 구성 요소의 CSS를 점검하고 레이아웃 재계산과 다시 그리기의 범위를 줄이는 설정을 제안합니다. 화면 너비와 조작 상태별 표시도 확인합니다.

• 독립 구성 요소가 많은 페이지 검토
• 화면 밖 목록 항목의 렌더링 생략
• 화면 너비별 표시 상태 확인

HTML·JS·CSS의 압축 전송 여부를 확인합니다. 실제로 측정한 로딩 문제를 바탕으로 서버나 CDN의 Gzip·Brotli 설정을 검토해 전송량을 줄이도록 돕습니다.

• 모바일 회선의 페이지 로딩 지연 조사
• 텍스트 리소스의 압축 헤더 확인
• 서버나 CDN의 압축 설정 검토

HTML의 head에서 CSS와 JavaScript 로딩 순서를 점검합니다. 화면 너비와 상호작용 상태별 표시도 확인하며 화면 표시 지연과 스타일 깜박임의 수정안을 제시합니다.

• 스타일 없는 화면이 잠깐 보이는 원인 조사
• head의 CSS와 JavaScript 순서 확인
• 스크립트 지연 로딩과 핵심 CSS 점검

표시되지 않는 이미지와 실패하기 쉬운 참조를 찾아 파일 경로 수정과 대체 이미지 전환을 돕고, 로딩 오류가 발생했을 때의 화면까지 확인합니다.

• 상품 이미지 누락 원인 조사
• 빌드 후 이미지 경로 확인
• 외부 이미지에 대체 표시 추가

페이지를 열자마자 필요한 이미지의 로딩 순서를 점검합니다. 파일 용량과 표시 크기, 지연 로딩, 우선순위 설정을 살펴 주요 콘텐츠의 표시 개선을 돕습니다.

• 히어로 이미지의 로딩 우선순위 점검
• 첫 화면 이미지의 지연 로딩 확인
• DevTools로 이미지 수정 결과 확인

검색 엔진에 대표 페이지 주소를 알리는 canonical URL의 리디렉션을 점검합니다. 렌더링된 HTML과 HTTP 응답을 확인하고 최종 URL을 직접 지정하도록 돕습니다.

• canonical URL의 리디렉션 확인
• URL 변경 후 canonical 태그 점검
• 대표 URL을 생성하는 템플릿 검토

페이지 로딩 지연을 측정하고 이미지와 스크립트 등 정적 파일의 CDN 배포를 점검합니다. 캐시 설정과 배포 경로를 살펴 개선할 요청과 처리 단계를 찾습니다.

• 페이지 로딩이 느린 원인 조사
• 이미지와 스크립트의 CDN 배포 점검
• 해외 방문자를 위한 캐시 설정 검토

행과 열을 함께 맞춰야 하는 화면 배치를 점검하고 CSS Grid로 바꾸는 방안을 검토합니다. 화면 너비와 내용에 따라 배치가 달라지는 그리드 설계도 돕습니다.

• Flexbox나 float의 이차원 배치를 검토합니다
• 화면 너비에 맞춰 카드 목록을 배치합니다
• 중첩 요소를 부모 그리드에 맞춥니다

페이지 내부 링크의 스크롤을 점검하고, 동작 줄이기 설정에 따른 즉시 이동과 키보드 포커스 이동을 확인하여 수정 방법을 제시합니다.

• 페이지 내부 탐색을 점검합니다
• 동작 줄이기 설정의 스크롤을 확인합니다
• 앵커 이동 후 포커스를 수정합니다

화면 읽기 프로그램에서 숨긴 영역에 키보드로 접근할 수 있는 링크나 버튼이 남아 있는지 점검합니다. 초점 위치를 알 수 없게 만드는 문제의 수정안과 검증 방법을 제시합니다.

• 숨긴 영역에 남은 조작 요소 점검
• 키보드 이동 중 읽기가 끊기는 원인 조사
• 공통 UI 구성 요소의 접근성 검토

버튼, 링크, 메뉴 항목의 낭독 이름이 조작 목적을 전달하는지 점검합니다. 접근 가능한 이름이 없는 요소를 찾아 수정 방법과 브라우저 검증 절차를 제시합니다.

• 버튼과 링크의 레이블 점검
• 디자인 시스템의 접근성 검토
• 레이블 수정 후 화면 읽기 프로그램 출력 확인

폼의 자동 포커스를 점검해 페이지 로드 직후 설명을 건너뛰고 입력란으로 이동하는 동작을 검토합니다. 사용자의 조작 후에 포커스를 옮기는 수정안도 제안합니다.

• 설명문이 있는 폼 점검하기
• 페이지 로드 시 의도치 않은 스크롤 조사하기
• 사용자 조작 후 포커스 이동하기

사용자 정의 탭과 메뉴 등에서 ARIA 부모 역할에 필요한 자식 역할이 있는지 점검합니다. 스크린 리더가 항목을 인식하도록 구조 수정을 돕습니다.

• 사용자 정의 탭과 메뉴 구조 점검
• 스크린 리더가 항목을 인식하지 못할 때
• div와 span으로 만든 목록과 선택란 확인

화면의 HTML에서 role="text" 안에 있는 링크와 버튼을 찾습니다. 화면 읽기 프로그램이 조작 요소를 인식하지 못하는 문제의 수정과 키보드 조작 확인을 지원합니다.

• 텍스트 안의 링크와 버튼 점검
• 화면 읽기에서 누락되는 조작 요소 조사
• 디자인 시스템의 접근성 확인

페이지와 공통 컴포넌트에 자동 접근성 테스트를 추가하고 검사 누락을 찾습니다. 지속적 통합에 검사를 연결해 구조·속성 문제와 변경으로 생긴 오류를 확인합니다.

• 공통 컴포넌트의 테스트 범위 검토
• 페이지 조작 테스트에 접근성 검사 추가
• 지속적 통합에서 접근성 검사 실행

접이식 아코디언을 키보드와 화면 읽기 프로그램으로 이용할 수 있도록 버튼, 펼침 상태 속성, 제목 구조와 최종 출력된 HTML을 점검하고 수정합니다.

• 접이식 영역의 키보드 조작 확인
• 화면 읽기로 펼침 상태 전달
• 공통 아코디언 컴포넌트 검토

버튼과 링크 등에 동작이나 이동 대상을 알려 주는 이름이 있는지 점검합니다. 표시 문구와 aria-label의 누락 또는 모호한 표현을 찾고 구체적인 수정안을 제시합니다.

• 이름이 없는 버튼과 링크 찾기
• 모호한 레이블 검토
• 공통 컴포넌트의 조작 이름 검토

영상의 동작, 표정, 화면 속 글자처럼 소리만으로 전달되지 않는 정보를 점검하고, 시각 장애인을 위한 화면 해설 추가 방법과 구현 확인 사항을 정리합니다.

• 제품 시연에서 소리로 전달 안 되는 정보를 찾습니다
• 동작과 화면 속 글자의 화면 해설을 검토합니다
• 영상 해설 관련 HTML과 조작을 점검합니다

AI가 생성한 글의 정확성, 독창성, 말투를 점검하고 자체 조사와 경험을 반영한 수정을 돕습니다. 공개 페이지의 HTML과 메타데이터 등도 확인합니다.

• AI 생성 글의 사실 확인
• 자체 조사와 경험 반영
• 브랜드에 맞는 말투로 조정

이미지의 alt 속성 누락과 모호한 설명을 점검합니다. 장식 이미지, 링크 이미지, 글자가 있는 이미지와 도표에 맞게 대체 텍스트를 다듬어 화면 낭독으로도 의미를 전달합니다.

• 누락되거나 모호한 대체 텍스트를 찾습니다
• 장식 이미지와 정보 이미지를 구분합니다
• 링크 이미지의 연결 대상을 설명합니다

검색 엔진에 글이나 페이지의 작성자를 알리는 구조화 데이터를 점검합니다. 이름, 외부 프로필, 본문과의 연결을 확인하고 공개 페이지의 실제 출력도 검토합니다.

• 글 페이지의 작성자 정보를 점검합니다
• 작성자의 외부 프로필을 연결합니다
• 템플릿의 작성자 마크업을 확인합니다

화면 상태와 레이블을 보조 기술에 전달하는 ARIA 속성값을 검사합니다. 불리언 표기 오류와 누락된 참조 ID를 찾아 규격에 맞는 수정 및 확인 방법을 제시합니다.

• 상호작용 요소의 ARIA 속성 점검
• ARIA 속성이 참조하는 ID 확인
• 공개 전 접근성 수정 결과 검증