David Dias

브라우저에 전달되는 HTML의 UTF-8 선언을 점검합니다. 선언 누락이나 위치 문제를 찾아 수정하여 일본어와 특수 문자가 깨지는 현상을 방지합니다.

• 일본어와 특수 문자 깨짐 조사
• 공개 전 문자 인코딩 선언 확인
• 공통 템플릿의 HTML 출력 점검

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

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

화면의 경로 탐색 표시와 구조화 데이터가 일치하는지 점검합니다. 사이트 계층을 검색 엔진에 전달하는 BreadcrumbList의 구현과 수정을 돕습니다.

• 경로 탐색 구조화 데이터 점검
• 표시된 경로 탐색에 JSON-LD 추가
• 템플릿 변경 후 계층 정보 검토

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

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

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

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

프로덕션 JavaScript에 남은 console 출력을 점검하고 삭제, 환경별 비활성화, 로그 서비스 대체를 지원합니다. 브라우저 실행 경로와 수정 후 검증 방법도 다룹니다.

• 배포 전 디버그 로그 점검
• 개발 환경과 프로덕션 로그 구분
• 빌드 시 console 출력 제거

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

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

사이트 내부에서 404나 서버 오류를 반환하는 링크를 찾아 수정을 돕습니다. 실제 페이지와 HTTP 응답을 확인하고 검색 엔진의 크롤링에 미치는 영향도 설명합니다.

• 페이지 이동이나 삭제 후 링크 점검
• 메뉴와 본문의 끊어진 링크 찾기
• 링크 오류가 검색 크롤링에 미치는 영향 확인

다시 방문할 때 불필요한 다운로드를 줄이도록 브라우저 캐시를 점검합니다. 정적 파일과 HTML에 맞는 저장 기간과 재검증 헤더 설정을 검토합니다.

• 재방문 시 로딩 지연 원인을 조사합니다
• 정적 파일의 캐시 설정을 확인합니다
• HTML과 해시 파일의 저장 정책을 정리합니다

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

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

웹 페이지의 인쇄 스타일을 점검하고 작성해 종이에서 본문을 읽기 쉽게 만듭니다. 탐색 메뉴와 광고 숨김, 글자 크기, 페이지 나눔, 외부 링크 주소 표시를 확인합니다.

• 웹 페이지를 종이에서 읽기 쉽게 만들기
• 인쇄할 때 탐색 메뉴와 광고 숨기기
• 인쇄 글자와 페이지 나눔, 주소 표시 조정

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

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

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

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

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

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

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

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

구매나 가입처럼 여러 페이지를 거치는 작업에서 채팅, 연락처, FAQ 입구의 위치와 순서를 비교하고 도움말을 일관되게 찾을 수 있도록 배치 수정을 돕습니다.

• 구매 절차의 도움말 배치 점검
• 가입 단계의 지원 링크 통일
• 계정 복구 과정의 도움말 경로 확인

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

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

이동 경로 탐색의 HTML 구조와 현재 위치 표시를 점검합니다. 화면 낭독기 사용자도 사이트 계층을 이해하도록 요소와 ARIA 속성을 정리하고 구조화 데이터와 경로를 비교합니다.

• 이동 경로 탐색의 화면 낭독기 지원 점검
• 공통 구성 요소가 출력하는 HTML 확인
• 구조화 데이터와 표시된 경로 비교

큰 JavaScript 번들을 점검하고 첫 화면에 필요 없는 기능과 라이브러리를 필요할 때 불러오도록 나누며, 로딩 중 표시도 정비합니다.

• 큰 JavaScript 번들의 분할 후보를 찾습니다
• 차트와 편집기 로딩을 늦춥니다
• 페이지마다 불러오는 코드를 점검합니다

CSS 변수를 사용하는 애니메이션과 그라데이션을 점검합니다. @property로 값의 자료형, 초깃값, 상속 여부를 정의하여 부드러운 변화와 값 검증을 지원합니다.

• 그라데이션을 부드럽게 움직이기
• CSS 변수를 사용하는 시각 효과 점검
• 디자인 토큰의 자료형과 상속 설정

페이지 로딩 중 콘텐츠가 움직이는 원인을 측정합니다. 이미지와 광고 공간, 글꼴, 애니메이션을 점검해 잘못된 클릭과 읽기 중단을 줄이는 개선을 돕습니다.

• 로딩 중 콘텐츠가 움직이는 원인을 찾습니다
• 이미지·임베드·광고 공간을 확보합니다
• 글꼴과 애니메이션의 안정성을 확인합니다

페이지 첫 표시를 지연시키는 CSS 로딩을 점검하고 필수 스타일 삽입과 나머지 스타일의 지연 로딩을 돕습니다. 화면 폭과 조작 상태별 표시도 확인합니다.

• 첫 표시를 지연시키는 CSS 조사
• 즉시 필요한 CSS와 나중에 읽을 CSS 분류
• preload와 media 기반 로딩 점검

사이트 간 통신의 코드와 브라우저 동작을 점검해 보안 문제를 찾고 수정합니다. CORS 설정, 메시지 발신 출처와 수신 데이터 검증, 인증 후 이동 경로를 확인합니다.

• 인증이 필요한 API의 CORS 설정 점검
• postMessage 발신 출처 검증
• 로그인이나 SSO 후 이동 대상 확인

페이지 초기 표시에 필요한 CSS를 추출해 HTML에 넣고 나머지는 비동기로 불러오도록 구성합니다. 화면 너비와 조작 상태별 표시도 확인합니다.

• 초기 표시를 지연시키는 CSS를 검토할 때
• 첫 화면에 필요한 CSS를 추출할 때
• 나중에 필요한 CSS를 비동기로 불러올 때