David Dias

브라우저 탭과 검색 결과에 쓰이는 사이트 아이콘 설정을 점검하고 정비합니다. HTML 지정, 이미지 형식과 크기, HTTPS 접근과 크롤링 제한을 확인합니다.

• 기존 사이트의 아이콘 설정 점검
• 새 프로젝트의 사이트 아이콘 준비
• 검색 결과에 아이콘이 없는 원인 조사

운영 앱의 오류 모니터링을 도입하거나 점검합니다. 미처리 예외와 통신 실패 수집, 릴리스 정보 첨부, 심각한 장애를 담당자에게 알리는 알림 설정을 정비합니다.

• 새 앱의 운영 오류 모니터링 준비
• 모니터링에서 누락된 오류 조사
• 심각한 장애의 알림 대상과 기준 검토

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

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

키보드 조작 시 현재 선택 위치를 보여 주는 포커스 표시를 점검합니다. 윤곽선이 사라지거나 잘리거나 어긋난 부분을 찾아 잘 보이는 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 방향 설정, 표시 및 읽기 순서와 화면 배치 수정을 돕습니다.

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

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

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

Review file upload interfaces for clear labels, accepted formats, size limits, and accessible progress and error messages. Check that keyboard and screen reader users can complete uploads, including alternatives to drag and drop.

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

• Review labels and instructions on file upload forms
• Check keyboard alternatives to drag and drop
• Improve upload progress and error announcements

CSS 곳곳의 색상, 여백, 글자 크기를 찾아 공통 CSS 사용자 지정 속성으로 정리합니다. 테마 변경과 화면 너비별 표시를 확인하며 수정을 제안합니다.

• 중복된 색상과 여백 정리
• 브랜드 변경을 위한 CSS 정비
• 다크 모드에 사용할 값 검토

JavaScript의 var 선언을 줄 번호와 함께 찾습니다. 재할당 여부에 따라 const나 let으로 바꾸고 변수의 유효 범위와 브라우저 동작을 확인합니다.

• 줄 번호와 함께 var 선언 찾기
• var를 const나 let으로 바꾸기
• 변수의 유효 범위 검토

HTML의 canonical 태그와 HTTP의 Link 헤더가 선언한 대표 URL을 비교합니다. 검색 엔진에 상충하는 정보를 보내는 경로나 템플릿을 찾아 수정안과 검증 방법을 제시합니다.

• HTML과 HTTP의 대표 URL 선언 비교
• 대표 URL 선언이 충돌하는 원인 조사
• 경로나 템플릿별 출력 점검

웹사이트의 CSP 설정과 HTML 삽입 처리를 점검합니다. 허용 리소스 제한과 안전한 표시 처리를 지원하고, 운영 환경에 가까운 조건에서 HTTP 응답과 브라우저 동작을 검증합니다.

• 기존 CSP 설정을 점검합니다
• 스크립트와 외부 리소스를 제한합니다
• 신뢰할 수 없는 HTML 표시 처리를 확인합니다

실제 브라우저에서 페이지 로딩과 렌더링을 측정하고, 통신·스크립트 실행·레이아웃 작업의 지연 원인을 찾아 측정 결과에 따른 개선점을 검토하는 스킬입니다.

• 페이지 로딩이 느린 원인 조사
• 기기 및 네트워크 조건별 성능 비교
• 개발 및 CI/CD에 성능 점검 도입

프런트엔드가 API에 기대하는 응답을 Pact 계약 테스트로 정의하고 백엔드와의 일치 여부를 검증합니다. 서비스를 따로 변경하고 배포할 때 확인을 돕습니다.

• 프런트엔드와 API의 계약 테스트 도입
• 서비스의 개별 배포 가능 여부 확인
• 느린 종단 간 테스트 일부의 대체 검토

닫히지 않은 태그나 잘못된 중첩 등 HTML 구조의 결함을 점검하고 수정합니다. 실제 HTML과 HTTP 응답에서 화면 표시와 검색 엔진의 해석에 영향을 주는 문제를 찾습니다.

• 닫히지 않은 태그와 중첩 오류를 점검합니다
• HTML로 인한 화면 깨짐을 조사합니다
• 검색 엔진을 위한 HTML 구조를 확인합니다

Find broken or fragile image references in markup, styles, and components. Correct paths, restore missing assets, and add fallback images, then verify how the page behaves when image requests fail.

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

• Find why product images are missing
• Check image paths after a build
• Add fallback images for external URLs

Audit slow page loads by measuring how static files, such as images and scripts, are delivered. Check CDN usage, a network of distributed servers, and identify caching or delivery settings that need improvement.

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

• Investigating slow page loads
• Checking CDN delivery of images and scripts
• Reviewing caching settings for global audiences

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

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

CSS 파일 크기와 로딩 방식을 점검하고 성능 측정으로 표시 지연의 원인을 확인합니다. 불필요한 스타일 삭제, 압축, 페이지별 파일 분할을 지원합니다.

• 페이지 초기 표시 지연 원인 조사
• 용량이 큰 CSS 파일 찾기
• 미사용 스타일 삭제와 CSS 압축

CSS 덮어쓰기 충돌을 점검하고 `@layer`로 스타일 우선순위를 명시합니다. 복잡한 선택자와 `!important` 의존도도 검토합니다.

• CSS 덮어쓰기 충돌 조사
• 디자인 시스템의 스타일 우선순위 설계
• 유틸리티 중심 CSS의 단계적 전환

주요 브라우저의 화면 표시와 동작을 확인하고 브라우저별 문제를 수정합니다. 데스크톱·모바일 테스트 범위와 CI를 검토해 자동 검증의 누락을 찾습니다.

• 주요 브라우저의 표시와 동작을 확인합니다
• 데스크톱·모바일 테스트 범위를 검토합니다
• 브라우저 자동 검증 누락을 점검합니다

기사와 블로그의 게시일 및 수정일을 점검하고, 독자에게 보이는 날짜와 검색 엔진용 구조화 데이터를 정리해 수정일이 본문의 실질적인 변경을 반영하도록 돕습니다.

• 블로그 글의 날짜 표시 점검
• Article JSON-LD에 날짜 추가
• CMS 템플릿의 날짜 출력 확인

페이지의 첫 표시를 늦추는 리소스 요청의 의존 관계를 측정합니다. 핵심 CSS 삽입과 필수 파일 미리 불러오기를 검토해 통신 대기가 이어지는 구조를 개선하도록 돕습니다.

• 페이지의 첫 표시가 느린 원인 조사
• 리소스 요청 사이의 의존 관계 점검
• 핵심 CSS 삽입과 미리 불러오기 검토

각 페이지의 canonical 태그를 점검하고 매개변수나 도메인 표기 차이로 생긴 중복 URL을 검토합니다. 검색 엔진에 알릴 대표 URL 설정을 보완하고 최종 출력을 검증합니다.

• 각 페이지의 canonical 태그를 점검합니다
• 매개변수와 도메인별 중복 URL을 확인합니다
• 대표 URL을 추가하거나 수정합니다