David Dias

로그인 없이 열리는 공개 폼의 봇 방어를 점검합니다. CAPTCHA와 숨김 입력란, 제출 횟수 제한을 확인하고 CAPTCHA 도입과 서버 측 토큰 검증 추가를 지원합니다.

• 문의 폼의 스팸 제출 방지
• 회원 가입과 로그인 폼의 봇 방어 점검
• CAPTCHA의 서버 측 토큰 검증 확인

페이지 주제를 나타내는 H1 제목을 점검하고 작성합니다. 누락, 중복, 빈 제목, 브랜드명만 있는 제목을 찾아 본문과 페이지 제목에 맞게 다듬습니다.

• 페이지 제목 구조 점검
• 랜딩 페이지와 블로그의 H1 작성
• CMS 템플릿의 제목 출력 확인

자식 요소의 상태나 입력 내용에 따라 부모 요소의 모양을 바꾸는 처리를 검토합니다. JavaScript의 클래스 전환을 CSS의 :has() 규칙으로 대체하도록 돕습니다.

• 클래스 전환 처리를 CSS로 이동
• 입력 상태에 따른 폼 스타일 지정
• 자식 요소 유무에 따른 부모 스타일 지정

웹페이지 이미지를 조사해 눈에 띄는 화질 저하를 줄이면서 파일 용량을 낮추도록 돕습니다. 압축 상태, 형식, 표시 크기, 로딩 방식과 배포 설정을 함께 확인합니다.

• 용량이 큰 웹 이미지를 찾을 때
• 사진과 그래픽의 압축 방식 선정
• 빌드 과정의 이미지 압축 자동화

사이트의 모든 페이지가 유효한 인증서로 HTTPS를 제공하는지 점검하고, HTTP 리디렉션과 내부 링크, 리소스 주소를 포함한 설정 수정을 돕습니다.

• 사이트 전체의 HTTPS 적용 점검
• 인증서 만료일과 호스트 이름 확인
• HTTP에서 HTTPS로 영구 리디렉션 확인

HTML 폼과 JavaScript의 전송 대상을 점검합니다. HTTP 통신으로 인한 정보 유출을 막도록 전송 URL과 페이지의 HTTPS 설정을 검토합니다.

• 로그인 폼의 전송 대상 확인
• fetch와 XHR의 연결 대상 점검
• action을 생략한 폼 확인

기사의 사실과 통계에 출처 링크가 있는지 확인하고 공공 자료와 공식 문서 등의 추가를 돕습니다. 보안, 유료 및 제휴 링크와 관련된 속성도 점검합니다.

• 출처 없는 사실과 통계 찾기
• 공공 자료와 연구의 참조 추가
• 외부 링크의 보안 속성 점검

이미지의 너비와 높이 설정을 점검해 로딩 중 글이나 버튼이 이동하는 원인을 찾습니다. 원래 비율에 맞는 속성과 CSS 수정안을 변경 전후 HTML로 보여 줍니다.

• 이미지 로딩 시 화면 이동 원인 조사
• 너비나 높이 속성이 없는 이미지 찾기
• 화면 너비에 따른 이미지 비율 유지

웹페이지의 스크립트 로딩을 점검하고 HTML 분석을 막는 태그의 수정을 돕습니다. defer, async, type=module의 선택과 브라우저에 전달되는 HTML을 확인합니다.

• 페이지 표시를 늦추는 태그를 점검합니다
• 스크립트 로딩 방식을 선택합니다
• 공통 구성 요소의 출력 HTML을 검토합니다

키보드 조작 시 현재 선택 위치를 보여 주는 포커스 표시를 점검합니다. 윤곽선이 사라지거나 잘리거나 어긋난 부분을 찾아 잘 보이는 CSS로 수정하도록 돕습니다.

• 키보드 조작 중 선택 위치 확인
• 윤곽선을 제거한 CSS 검토
• 포커스 테두리 잘림과 위치 오류 수정

Audit how quickly a page shows its first text or image. Use performance measurements to identify blocking resources, slow server responses, and rendering delays, then recommend changes tied to the confirmed bottlenecks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating slow initial page display
• Finding CSS and JavaScript that delay rendering
• Reviewing loading performance with measurements

아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어와 문자 방향이 섞인 게시물을 점검하고 HTML 방향 설정, 표시 및 읽기 순서와 화면 배치 수정을 돕습니다.

• 아랍어와 히브리어 페이지 점검
• 문자 방향이 섞인 이름과 게시물 처리
• 탐색 메뉴와 아이콘의 좌우 반전 확인

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

렌더링된 HTML에서 ARIA 속성이 참조하는 ID의 중복을 확인합니다. 잘못 읽히는 레이블과 설명의 원인을 찾아 ID와 참조 수정 및 검증 방법을 안내합니다.

• 화면 읽기 프로그램의 레이블 오류를 조사합니다
• 반복 배치한 구성 요소의 ID 중복을 점검합니다
• 디자인 시스템의 ARIA 참조를 확인합니다

장식용 이미지와 아이콘이 스크린 리더에서 불필요하게 읽히는지 점검합니다. 빈 alt와 aria-hidden을 확인하고 실제 문제가 있는 요소의 수정을 돕습니다.

• 장식 이미지의 불필요한 낭독 점검
• SVG와 아이콘의 낭독 확인
• 공통 장식 컴포넌트 점검

로그인과 구매 등 전체 사용자 흐름의 E2E 테스트에서 빠진 부분을 찾아 추가를 돕습니다. 자동 테스트 구성과 CI/CD의 지속 실행, 실패 처리도 점검합니다.

• 로그인과 구매 테스트 범위 점검
• 폼 제출 테스트 추가
• CI/CD 테스트 실행과 실패 대응 점검

웹 글꼴의 로딩을 점검해 글자가 보이지 않는 시간과 레이아웃 이동을 조사합니다. 측정 결과에 따라 대체 글꼴 표시, 중요 글꼴 미리 로드, 글꼴 형식 검토를 돕습니다.

• 로딩 중 글자가 보이지 않는 원인 조사
• 글꼴 전환에 따른 레이아웃 이동 점검
• 대체 글꼴 표시와 미리 로드 설정

CSS에서 모바일 글자 크기를 점검하고 너무 작은 글자와 고정 크기의 수정을 돕습니다. 브라우저 글꼴 설정 반영 여부와 200% 확대 시 내용과 조작 기능도 확인합니다.

• 모바일 글자 크기를 점검합니다
• px 글자 크기를 상대 단위로 바꿉니다
• 200% 확대 시 배치를 확인합니다

블로그와 뉴스 사이트의 편집 정책을 점검하거나 초안을 작성합니다. 저자 전문성, 조사와 사실 확인, 정정 및 이해 충돌 설명을 정리하고 정책으로 연결되는 링크도 확인합니다.

• 편집 정책 페이지를 작성할 때
• 저자 기준과 사실 확인 체계 검토
• 정정 정책과 자금 관계 설명 정리

키보드 Tab 이동 순서가 화면의 시각적 순서와 맞는지 점검하고, HTML 요소 순서와 대화 상자를 열고 닫을 때의 포커스 이동 수정을 돕습니다.

• 페이지의 Tab 이동 순서를 점검합니다
• 대화 상자 개폐 시 포커스를 확인합니다
• HTML 요소 순서와 tabindex를 검토합니다

링크, 버튼, 입력란의 ID 중복을 찾아 수정할 위치와 확인 방법을 안내합니다. 키보드 조작, 스크린 리더 탐색, 포커스에 미치는 영향도 점검합니다.

• 폼의 ID 중복을 확인합니다
• 예상하지 못한 포커스 이동을 조사합니다
• 공통 조작 컴포넌트를 검토합니다

주요 이미지와 중요한 글꼴·CSS의 로딩 우선순위를 점검하고, fetchpriority 속성으로 화면 표시에 필요한 리소스의 요청 순서를 조정합니다.

• 주요 이미지의 표시 속도를 개선합니다
• 화면 밖 이미지와의 로딩 경쟁을 검토합니다
• 글꼴과 CSS의 미리 로딩 우선순위를 확인합니다

브라우저 탭과 스마트폰 홈 화면에 쓰이는 사이트 아이콘을 점검하고, 기기별 형식과 크기 생성부터 HTML 및 PWA 설정까지 돕습니다.

• 탭과 북마크용 아이콘을 준비합니다
• 모바일 홈 화면 아이콘을 설정합니다
• PWA 아이콘 설정을 확인합니다

웹 화면을 느리게 만드는 DOM 읽기와 쓰기, 이벤트 처리를 살펴봅니다. 처리 순서와 갱신 빈도를 조정하고 브라우저에서 원인에 맞는 수정인지 검증합니다.

• 애니메이션 끊김 원인 조사
• DOM 읽기와 쓰기 작업 모으기
• 스크롤 및 터치 이벤트 처리 점검