개발 스킬

첫 화면을 느리게 하는 지도나 편집기 등의 선택 기능을 찾아 클릭이나 포커스 후 필요한 코드를 불러오도록 바꾸고, 로딩 상태 표시도 정리합니다.

• 지도 패널을 열 때 코드 불러오기
• 편집기 조작 시 코드 불러오기
• 첫 화면을 느리게 하는 채팅 점검

HTML에서 늦게 발견되는 중요 리소스를 찾아 폰트와 이미지의 미리 로드, 외부 도메인 사전 연결을 검토합니다. 브라우저에 전달되는 최종 마크업도 확인합니다.

• 주요 폰트와 이미지의 미리 로드 확인
• 외부 도메인 사전 연결 확인
• 출력된 HTML의 리소스 힌트 점검

폼의 입력 오류와 필수 항목이 보조 기술에도 전달되는지 점검하고, 입력란과 설명·오류 문구의 연결, 오류 상태와 선택지 그룹 구성을 개선합니다.

• 화면 낭독기로도 전달되는 입력 오류
• 필수 항목과 선택지 그룹 점검
• React 폼의 입력 검증 검토

페이지 로딩 중 발생하는 HTTP 요청을 세고 실측으로 지연 원인을 확인합니다. 줄일 수 있는 요청을 찾아 파일 통합과 초기 표시 자원 삽입 등의 개선안을 제시합니다.

• 페이지 초기 표시 지연 원인 조사
• 이미지와 CSS의 불필요한 요청 확인
• 파일 통합과 아이콘 묶기 검토

Front-End Checklist의 386개 규칙으로 프런트엔드 코드와 공개 페이지를 점검합니다. 접근성, 성능, SEO 등의 문제를 근거와 구체적인 수정 방법으로 정리합니다.

• 공개 전 페이지 점검
• 양식과 조작 구성 요소의 코드 검토
• 성능과 보안 점검

폼 입력 내용에 맞게 HTML의 `type`과 `autocomplete` 속성을 점검하고 수정하여 스마트폰 키보드 표시와 브라우저 자동 완성을 정리합니다.

• 기존 폼의 입력 속성 점검
• 스마트폰 이메일·전화번호 입력 개선
• 브라우저 자동 완성 설정

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

모달을 열고 닫거나 화면이 바뀔 때 키보드 포커스가 올바르게 이동하고 돌아오는지 점검합니다. 동적 화면에서 조작 위치를 잃는 원인을 찾아 개선을 돕습니다.

• 모달을 열고 닫을 때 포커스 확인
• SPA 화면 전환 후 조작 위치 확인
• 동적 갱신 시 키보드 조작 개선

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

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

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

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

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

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

프런트엔드 점검 항목에 맞는 npm 패키지를 찾고 다운로드 수와 최근 배포 시점 등의 조건을 확인해, 적합한 패키지 이름을 규칙 파일의 메타데이터에 추가합니다.

• 점검 항목에 npm 패키지 참조 추가
• 다운로드 수와 배포 시점으로 후보 선별
• 문제 탐지·수정·테스트용 도구 검색

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

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

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

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

이미지 로드 실패 시 표시를 점검하고 대체 이미지나 의미 있는 자리 표시자 구현을 돕습니다. 오류 로그, 로딩 중 표시와 수정 결과의 검증 방법도 다룹니다.

• 끊어진 이미지 링크의 대체 표시를 정비합니다
• 이미지 로딩 중의 임시 표시를 검토합니다
• 로그와 DevTools로 이미지 오류를 조사합니다

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

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

JavaScript 비동기 작업과 React 화면의 오류 처리를 점검합니다. 처리되지 않거나 묻힌 오류를 찾고 예외 포착, 조사용 로그, 화면 오류 처리 추가를 안내합니다.

• 비동기 작업의 오류 처리를 점검합니다
• React 화면에 오류 처리를 추가합니다
• 원인 조사에 필요한 로그를 개선합니다

JavaScript의 코드 불러오기와 내보내기를 점검하고 CommonJS에서 import/export로 전환하도록 돕습니다. 브라우저 실행 경로와 수정 후 검증 방법도 확인합니다.

• require()를 import로 변환
• module.exports에서 전환
• 브라우저의 모듈 로딩 점검

웹 페이지가 중복으로 불러오는 JavaScript 라이브러리를 찾습니다. 측정으로 영향을 확인하며 의존성 버전을 통일하고 불필요한 로딩을 제거하도록 돕습니다.

• 페이지 로딩이 느린 원인 조사
• 의존 라이브러리 중복 확인
• 외부 스크립트의 의존성 점검

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

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

HTML에 직접 작성한 CSS와 페이지에 포함된 스타일을 점검합니다. 예외를 판단해 외부 파일로 정리하고 화면 너비와 조작 상태별 표시를 확인합니다.

• HTML 내부 스타일 점검
• 페이지에 포함된 CSS를 외부 파일로 정리
• 초기 표시용 CSS와 동적 값의 예외 판단

사용자 정의 HTML 요소와 Web Components를 점검합니다. 화면 읽기용 역할과 이름, 키보드 조작, 초점 관리, 폼 연동의 누락 사항과 수정안을 정리합니다.

• 사용자 정의 부품의 화면 읽기 지원 확인
• 메뉴의 키보드 조작 점검
• 사용자 정의 입력란의 폼 연동 확인

드래그 앤 드롭을 키보드와 스크린 리더로도 사용할 수 있는지 점검합니다. 실제 출력된 HTML을 바탕으로 대체 조작과 상태 안내를 보완합니다.

• 드래그 조작의 키보드 지원 확인
• 스크린 리더의 상태 안내 확인
• 실제 출력된 HTML 점검

이미지와 설명문의 HTML 구조를 점검하고 figure와 figcaption으로 연결합니다. 대체 텍스트와의 중복도 확인해 음성으로 읽을 때 의미가 전달되도록 정리합니다.

• 설명이 있는 이미지의 HTML을 점검합니다
• 이미지 설명과 대체 텍스트의 중복을 확인합니다
• 음성으로 읽는 이미지 설명을 개선합니다