개발 스킬

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

배터리 잔량이나 저장 용량을 나타내는 미터의 접근성 이름을 점검합니다. 누락된 이름을 추가해 스크린 리더가 수치의 의미를 전달하도록 돕습니다.

• 잔량 및 용량 미터의 레이블 확인
• 미터에 스크린 리더용 이름 추가
• 공통 UI 컴포넌트의 미터 점검

대화 상자의 목적이 스크린 리더에 전달되는지 점검합니다. 제목과 레이블 지정 방식을 검토하고, 대상 요소와 수정 후 검증 방법을 안내합니다.

• 모달의 읽기용 이름 점검
• 경고 대화 상자의 레이블 확인
• 공통 대화 상자 구성 요소 검토

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

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

화면 요소의 역할과 ARIA 속성이 맞는지 점검합니다. 출력 HTML과 상호작용 상태를 살펴보고, 스크린 리더가 의미를 올바르게 이해하도록 속성 삭제나 수정을 안내합니다.

• 공통 컴포넌트의 ARIA 속성을 점검합니다
• 디자인 시스템의 접근성을 확인합니다
• 의도와 다른 읽기 결과를 조사합니다

페이지에 포함된 큰 애니메이션 GIF를 점검하고 측정으로 부하를 확인한 뒤, MP4나 WebM으로 변환하고 동영상 태그로 교체하도록 돕습니다.

• GIF가 포함된 페이지의 지연 원인 조사
• 큰 GIF를 MP4나 WebM으로 변환
• 반복 재생 동영상의 재생 속성 검토

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

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

화면 요소의 역할을 전달하는 ARIA 역할에 필수 속성이 있는지 점검합니다. 실제 HTML과 조작 중 상태를 확인하여 화면 낭독기에 필요한 정보의 누락을 수정합니다.

• 사용자 정의 슬라이더의 필수 속성 점검
• 공통 UI 구성 요소의 접근성 검토
• 화면 낭독기에 전달되는 상태 정보 확인

표 머리글과 셀의 대응 관계를 점검해 화면 낭독으로도 데이터의 의미가 전달되는 HTML로 정리합니다. 단순한 표부터 병합 셀이 있는 복잡한 표까지 확인합니다.

• 표의 화면 낭독 지원을 확인할 때
• 병합 셀과 머리글의 관계를 검토할 때
• 디자인 시스템의 표를 검토할 때

CSS 애니메이션에서 렌더링 부담이 큰 속성을 찾아 transform과 opacity를 사용하는 수정을 제안합니다. 화면 너비와 조작 상태별 표시 및 동작 줄이기 설정도 확인합니다.

• 끊기는 애니메이션 점검
• 위치나 크기를 바꾸는 속성 수정
• 동작 줄이기 설정 확인

도구 설명을 키보드와 화면 낭독기로 이용할 수 있는지 점검합니다. HTML 속성, 표시와 닫기 동작, 명암비를 검토하고 수정할 요소와 위치를 제시합니다.

• 도구 설명의 키보드 조작 점검
• 화면 낭독기의 보충 설명 전달 확인
• 표시 동작과 Escape 키 닫기 점검

툴팁의 보충 정보가 스크린 리더에 전달되는지 점검합니다. 읽기용 이름과 표시를 유발하는 요소의 연결을 확인하고 수정안과 검증 방법을 제시합니다.

• 툴팁의 스크린 리더 출력 확인
• 표시를 유발하는 요소와 설명의 연결 점검
• 공통 툴팁 구성 요소 검토