개발 스킬

웹페이지 이미지의 표시 위치에 맞춰 로딩 설정을 점검합니다. 화면 밖 이미지는 지연 로딩하고 첫 화면의 중요 이미지는 우선 로딩하도록 조정하며 크기도 확인합니다.

• 화면 밖 이미지의 지연 로딩 점검
• 히어로 이미지의 로딩 우선순위 확인
• 지연 로딩 이미지의 너비와 높이 지정

화면 밖의 이미지, 동영상, iframe과 무거운 구성 요소를 필요할 때까지 늦게 불러오도록 돕습니다. 실제 측정과 배치를 확인해 초기 표시 부담을 줄일 수정 대상을 정합니다.

• 페이지 초기 표시가 느린 원인 조사
• 첫 화면 아래 이미지의 지연 로딩 적용
• 화면 밖 동영상과 무거운 요소의 로딩 연기

페이지의 주요 영역을 나타내는 HTML 요소와 레이블을 점검합니다. 스크린 리더로 본문이나 탐색 영역에 쉽게 이동할 수 있도록 구조 개선을 돕습니다.

• 스크린 리더의 페이지 내 이동 점검
• 일반 컨테이너를 의미에 맞는 HTML로 개선
• 여러 탐색 영역의 레이블 확인

API 응답이나 저장 데이터를 읽는 JavaScript의 JSON 처리를 점검합니다. 잘못된 입력의 예외 처리와 파싱 결과의 데이터 구조 검증을 추가합니다.

• API 응답의 JSON 처리 점검
• localStorage의 손상된 데이터 처리
• 속성 접근 전 데이터 구조 검증

페이지의 HTML을 검사해 body 내부 등 잘못된 위치에 있는 메타 태그를 찾습니다. 태그를 head로 옮기거나 스크립트가 태그를 삽입하는 위치를 수정하도록 돕습니다.

• CMS 플러그인 변경 후 태그 위치 확인
• JavaScript의 body 내 태그 삽입 조사
• robots와 OG 등 태그의 위치 점검

페이지의 주요 콘텐츠가 표시될 때까지 걸리는 시간을 측정합니다. 이미지, 서버 응답, 렌더링의 병목을 찾아 측정 근거에 따른 개선을 돕습니다.

• 주요 콘텐츠 표시 지연 조사
• 메인 이미지 로딩 방식 검토
• 측정 결과에 따른 개선 우선순위 결정

현대 브라우저에 불필요한 구형 JavaScript와 호환 코드를 조사합니다. 실제 측정으로 부하를 확인하며 코드 제공 방식과 빌드 설정의 검토를 돕습니다.

• 느린 페이지 로딩 원인 조사
• 불필요한 호환 코드 점검
• 현대 브라우저용 빌드 설정 검토

JavaScript 파일의 압축 후 용량과 로딩 부담을 조사하고, 코드 분할과 미사용 코드 제거, 의존성 검토로 화면 표시와 조작 지연을 개선합니다.

• 압축 후 200KB를 넘는 파일을 찾습니다
• 페이지 조작까지 걸리는 시간을 조사합니다
• 코드 분할로 용량을 줄입니다

JavaScript의 이벤트 리스너, 타이머, 불필요해진 통신 등을 점검하고, 화면을 계속 사용할수록 메모리 사용량이 늘어나는 원인을 조사해 수정합니다.

• 장시간 사용 시 메모리 증가 원인 조사
• 컴포넌트 제거 시 정리 작업 확인
• 화면 전환 후 불필요한 통신 중지

JavaScript 라이브러리의 구버전, 알려진 취약점과 불필요한 용량을 점검하고, 실측한 문제를 근거로 안전한 업데이트나 가벼운 대체 라이브러리를 검토합니다.

• 의존 라이브러리의 취약점을 확인합니다
• 페이지 로딩이 느린 원인을 조사합니다
• 가벼운 대체 라이브러리를 검토합니다

모달 대화 상자의 키보드 조작과 화면 읽기 프로그램 지원을 점검합니다. 초점 이동, Escape로 닫기, 제목 연결을 검토하고 문제와 수정 후 확인 방법을 정리합니다.

• 모달의 키보드 조작 점검
• 열고 닫을 때 초점 이동 확인
• 제목과 화면 읽기용 레이블 확인

TypeScript에서 타입 검사를 우회하는 any를 찾아 unknown, 제네릭 또는 외부 데이터 검증으로 대체하고, 사용하는 곳의 수정과 타입 확인을 돕습니다.

• ESLint의 any 관련 경고를 수정합니다
• 외부 API 데이터의 타입 안전성을 검토합니다
• 호출부로 any가 퍼지는 함수를 점검합니다

데이터 조회나 전송 중 처리 상태를 알리는 표시를 점검하고 구현합니다. 스피너, 임시 표시 영역, 화면 읽기 프로그램 지원, 로딩 완료 시 레이아웃 이동과 실제 성능 병목을 확인합니다.

• 데이터 조회 중 대기 표시 추가
• 작업 실행 중 진행 상태 안내
• 로딩 상태의 화면 읽기 프로그램 지원 점검

CSS의 여백, 테두리, 위치 지정을 점검하고 고정 방향을 글의 흐름에 맞는 논리 속성으로 바꿉니다. 오른쪽에서 왼쪽으로 쓰는 언어와 세로쓰기에 대응합니다.

• 아랍어와 히브리어 레이아웃 대응
• CSS의 고정된 좌우 여백 지정 교체
• 세로쓰기 레이아웃 확인

HTML의 언어 지정을 점검해 누락, 빈 값, 본문과의 불일치를 찾아 수정합니다. 여러 언어가 섞인 부분도 확인하여 낭독과 번역에 쓰이는 언어 정보를 정리합니다.

• 페이지 전체의 언어 지정 확인하기
• 다국어 콘텐츠의 언어 전환 표시하기
• 화면 낭독기 발음 관련 설정 점검하기

웹 화면을 키보드만으로 조작할 수 있는지 점검합니다. Tab 이동 순서, 숨겨진 요소로의 이동, 벗어날 수 없는 영역을 확인하고 수정 및 검증 방법을 제시합니다.

• Tab으로 모든 조작 요소에 도달하는지 확인
• 화면 배치에 맞게 초점 순서 수정
• 숨겨진 요소를 Tab 이동 대상에서 제외

TypeScript 배열과 객체의 인덱스 접근을 점검합니다. 설정을 검토하고 정의되지 않은 값의 확인을 추가해 런타임 오류로 이어지는 누락을 줄입니다.

• TypeScript 안전 설정 점검
• 데이터 처리의 배열 접근 검토
• 예상치 못한 미정의 값 오류 조사

페이지를 열자마자 보이는 이미지의 지연 로딩 설정을 점검합니다. 표시 지연을 실제로 측정한 뒤 속성 제거와 로딩 우선순위 조정을 안내합니다.

• 메인 이미지의 로딩 설정 점검
• LCP에 영향을 주는 이미지 지연 조사
• 첫 화면 이미지의 로딩 속성 조정

JavaScript의 직접 작성한 반복문을 점검하고 배열과 객체의 표준 메서드로 바꿔 데이터 변환·추출·집계의 의도가 잘 드러나도록 코드를 정리합니다.

• 직접 작성한 반복문 정리
• 데이터 변환·추출·집계의 의도 명확화
• 객체 변환과 깊은 복사 검토

많은 행이나 카드를 표시하는 화면을 점검하고 보이는 범위만 렌더링하는 가상화를 검토하여, 조작 편의성과 접근성을 유지하면서 렌더링 부하를 줄이도록 돕습니다.

• 관리자 표의 속도 저하 원인 점검
• 긴 검색 결과의 표시 방식 검토
• 피드의 렌더링 부하 줄이기

HTML 목록 항목과 부모 요소의 관계를 점검하고 중첩 구조와 ARIA 설정을 수정하여 화면 읽기 프로그램이 목록 종류와 항목 수를 인식하도록 돕습니다.

• 여러 컴포넌트에 나뉜 목록 구조 점검
• 탐색 메뉴의 목록 중첩 수정
• 사용자 정의 목록의 부모 역할 확인

CSS 클래스 이름의 모호함과 명명 규칙의 불일치를 찾아 BEM 형식으로 정리합니다. 화면 너비와 상호작용 상태에 따른 실제 표시도 확인합니다.

• CSS 클래스 명명 규칙의 불일치 점검
• 컴포넌트 클래스 이름을 BEM으로 통일
• 보조 클래스와 JavaScript용 클래스 구분

링크 문구만으로도 이동할 곳을 알 수 있는지 점검하고, 모호한 표현과 화면 낭독기용 이름을 개선합니다. 키보드 조작과 다운로드 링크의 파일 안내도 확인합니다.

• 모호한 링크 문구 수정
• 화면 낭독기의 링크 이름 점검
• 다운로드 링크의 파일 안내 확인

웹사이트 이미지 형식을 점검하고 WebP·AVIF 변환과 대체 이미지 설정을 돕습니다. 표시 크기와 로딩 방식도 살펴 구체적인 수정 위치를 제시합니다.

• JPEG·PNG 변환 후보 찾기
• WebP·AVIF 및 대체 이미지 설정
• CSS 배경 이미지 형식 검토