개발 스킬

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

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

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

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

사이트 이미지 용량을 용도별 기준으로 점검해 큰 이미지와 감축 목표를 정리합니다. 압축, 형식 변환, 기기별 전송을 검토하고 용량과 표시 크기 문제를 구분합니다.

• 용량 초과 이미지와 감축 목표 목록 작성
• CMS에 등록한 이미지 점검
• 대표 이미지와 썸네일 용량 줄이기

자식 요소의 상태나 입력 내용에 따라 부모 요소의 모양을 바꾸는 처리를 검토합니다. JavaScript의 클래스 전환을 CSS의 :has() 규칙으로 대체하도록 돕습니다.

• 클래스 전환 처리를 CSS로 이동
• 입력 상태에 따른 폼 스타일 지정
• 자식 요소 유무에 따른 부모 스타일 지정

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

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

Google Tag Manager가 페이지 로딩과 화면 표시에 주는 영향을 측정합니다. 불필요한 태그와 트리거, 로딩 방식을 점검하고 측정 결과에 맞는 개선안을 제시합니다.

• GTM을 쓰는 페이지의 지연 원인 조사
• 불필요한 태그와 트리거 검토
• 비동기 로딩 설정 확인

긴 페이지와 대시보드에서 화면 밖의 무거운 구성 요소를 보이는 영역에 가까워질 때 불러오도록 개선해 초기 표시 부담과 스크롤 중 대기 시간을 조절합니다.

• 대시보드 하단 차트 지연 로딩
• 긴 랜딩 페이지의 로딩 방식 점검
• 임베드와 관련 상품을 표시 전에 로딩

웹 페이지의 HTML을 점검하고 일반적인 div를 내용의 역할에 맞는 요소로 바꾸는 방향을 제시하여, 스크린 리더 탐색과 검색 엔진의 구조 이해를 돕습니다.

• div 중심으로 구성한 페이지 구조 검토하기
• 템플릿과 공통 컴포넌트의 출력 HTML 확인하기
• 스크린 리더로 이동하기 쉬운 구조 만들기

같은 문구로 서로 다른 페이지에 연결되는 링크를 찾아 목적지를 통일하거나 문구를 수정하도록 돕고, 스크린 리더로도 링크의 목적지를 구분하기 쉽게 합니다.

• 같은 링크 문구의 목적지를 점검합니다
• 스크린 리더용 링크 문구를 개선합니다
• 공통 컴포넌트의 링크를 확인합니다

웹페이지 제목의 단계 누락과 내용에 맞지 않는 제목을 점검합니다. 화면 낭독기 사용자가 페이지 구성을 따라가기 쉽도록 HTML 구조를 정리합니다.

• 페이지 제목 계층 점검
• 화면 낭독기의 제목 탐색 개선
• 디자인 시스템의 제목 확인

웹 페이지의 제목 계층을 점검하고 제목 수준의 건너뜀과 구조 불일치를 수정합니다. 화면 읽기 프로그램으로 내용을 탐색하기 쉽게 만드는 데 사용합니다.

• 페이지의 제목 순서 점검
• 공통 컴포넌트의 제목 구조 확인
• 화면 읽기용 제목 목록 정리

클릭 등의 조작부터 화면 갱신까지 걸리는 시간을 INP로 측정합니다. 결과를 바탕으로 느린 이벤트 처리와 긴 작업을 찾아 개선하고 무거운 계산의 web workers 이전을 돕습니다.

• 클릭 등 조작 후 응답 지연을 조사할 때
• 측정에 근거해 이벤트 처리와 긴 작업을 검토할 때
• 무거운 계산의 web workers 이전을 검토할 때

웹페이지의 iframe과 frame에 내용을 설명하는 제목이 있는지 점검합니다. 누락되거나 설명이 부족한 제목을 찾아 화면 읽기 프로그램 사용자가 삽입된 내용을 쉽게 식별하도록 수정을 돕습니다.

• 삽입된 광고와 소셜 미디어 위젯의 제목을 확인할 때
• iframe의 title 누락이나 빈 값을 찾을 때
• 화면 읽기 프로그램으로 프레임 식별을 확인할 때

좁은 화면이나 브라우저 확대 시 생기는 가로 스크롤을 CSS 너비와 줄바꿈 설정에서 점검합니다. 원인이 되는 요소를 찾아 본문과 이미지가 화면 안에 들어오도록 수정을 돕습니다.

• 스마트폰 화면의 가로 스크롤을 수정할 때
• 400% 확대 시 화면 배치를 확인할 때
• 긴 URL과 이미지의 넘침을 점검할 때

ESLint로 JavaScript 문법 오류와 코딩 규칙 위반을 찾도록 돕습니다. 규칙 설정, 편집기와 CI/CD 연동, 오류와 경고 수정 및 브라우저 동작 검토를 지원합니다.

• JavaScript 프로젝트에 ESLint 도입
• 팀의 코딩 규칙 통일
• 편집기와 CI/CD에서 자동 검사

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

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

Front-End Checklist 규칙 문서를 채점 기준에 따라 점검하고, 모호한 에이전트 지시와 빠진 내용을 구체적인 절차와 코드 예시로 보완합니다.

• 미완성 체크리스트 규칙 보완
• 에이전트의 점검·수정 지시 구체화
• 풀 리퀘스트 전 규칙 구조와 품질 확인

본문을 가리는 팝업과 모달을 점검하고 모바일 열람, 닫기 동작, 키보드 초점 관리를 확인하여 검색 가시성과 접근성을 개선하도록 돕습니다.

• 모바일 광고 팝업 점검
• 키보드로 모달 닫기 확인
• 대화상자 개폐 시 초점 이동 점검

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

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

HTML에 직접 작성된 JavaScript를 점검합니다. 코드를 외부 파일로 옮기고 addEventListener로 이벤트 처리를 정리해 유지보수와 캐시 활용 개선을 돕습니다.

• HTML에서 JavaScript 분리
• onclick을 addEventListener로 변경
• 캐시 활용과 유지보수성 검토

JavaScript 객체나 배열을 직접 변경하는 코드를 찾아 복사본을 만들어 갱신하도록 수정합니다. 공유 상태의 변경 과정을 더 쉽게 추적할 수 있도록 코드를 정리합니다.

• 공유 객체를 직접 변경하는 코드 점검
• push와 splice를 사용하는 갱신 방식 검토
• 클라이언트 상태 갱신 코드 검토

이미지 입력 버튼의 HTML을 점검해 대체 텍스트가 없거나 비어 있는 항목을 찾습니다. 검색이나 제출 같은 동작을 낭독으로도 이해하도록 alt 속성 수정을 돕습니다.

• 이미지 입력 버튼의 대체 텍스트 점검
• 검색 및 제출 버튼의 설명 정리
• 공통 이미지 버튼 구성 요소 검토

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

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

웹페이지 이미지의 형식, 파일 크기, 표시 크기와 로딩 방식을 점검하고 수정을 지원합니다. 화면 너비별 이미지 제공과 로딩 중 레이아웃 이동도 다룹니다.

• 느린 페이지의 이미지 크기와 형식 점검
• 모바일과 컴퓨터에 다른 크기 이미지 제공
• 이미지 로딩 중 레이아웃 이동 방지