Front-End-Checklist

프런트엔드 체크리스트
현대 웹 개발을 위한 필수 체크리스트, 사람과 AI 에이전트 모두를 위해

프런트엔드 체크리스트는 사람과 AI 에이전트를 위한 오픈소스 프런트엔드 품질 시스템입니다. 프런트엔드 모범 사례를 실용적인 리뷰 워크플로로 전환하여, 웹에서 탐색하거나, MCP 호환 도구로 실행하거나, 이 README에서 직접 작업할 수 있습니다.

소개

웹사이트: frontendchecklist.io
규칙: frontendchecklist.io/rules
MCP 서버: mcp.frontendchecklist.io

동반 프로젝트: UX Patterns for Devs는 개발자가 구현 품질을 검증하기 위해 프런트엔드 체크리스트를 사용하기 전에 올바른 UI 패턴을 선택하도록 도와줍니다.

중요

탐색과 필터링에는 웹사이트를, 에이전트 워크플로에는 MCP 서버를, 체크리스트를 한곳에서 보고 싶을 때는 이 README를 사용하세요.

제공되는 것

11개 활성 카테고리에 걸친 386개의 영어 규칙
호스팅 서버가 제공하는 11개의 MCP 도구
설명, 해결 지침, 검증 단계가 포함된 규칙 페이지

이 체크리스트 사용 방법

아래 카테고리 내비게이터에서 시작하여 필요한 체크리스트 부분으로 바로 이동하세요.
프로젝트, 감사 또는 풀 리퀘스트에 해당하는 체크박스 항목을 작업하세요.
전체 지침, 예시, 검증 단계, AI 프롬프트가 필요하면 연결된 규칙 페이지를 여세요.
대화형 탐색에는 frontendchecklist.io를, 에이전트가 동일한 규칙 코퍼스를 직접 사용하도록 하려면 mcp.frontendchecklist.io를 사용하세요.

우선순위 범례

사이트를 망가뜨리거나 규정 준수에 민감하거나 보안에 민감한 문제로, 가장 먼저 수정해야 합니다.
사용자 경험, 접근성, 성능 또는 검색 가능성에 큰 영향을 미치는 문제입니다.
일반적인 프런트엔드 품질 리뷰에 포함되어야 하는 강력한 모범 사례입니다.
상황에 따라 다르거나 긴급도가 낮은 유용한 개선 사항입니다.

워크플로 선택
온라인에서 탐색

frontendchecklist.io/rules에서 모든 규칙을 살펴보세요
frontendchecklist.io/checklists에서 큐레이션된 체크리스트를 사용하세요
집중 감사와 구현 지침을 위해 카테고리 페이지를 여세요

먼저 올바른 패턴 선택
프런트엔드 체크리스트는 구현 품질을 검토하는 데 도움을 줍니다. 어떤 인터페이스를 만들지 아직 결정 중이라면, UX Patterns for Devs를 사용하여 일반적인 UI 패턴을 비교하고, 트레이드오프를 이해하고, 폼, 내비게이션, 데이터 표시, 피드백 상태, 인증, AI 인터페이스에 대한 실용적인 지침을 찾으세요.

체크리스트에 기여하기

의존성 설치: pnpm install
로컬 개발 실행: pnpm dev
구조 검증: pnpm validate:rule-structure
코퍼스 점수 매기기: pnpm score:rules
파생 아티팩트 재생성: pnpm generate:skills 및 pnpm generate:readme

MCP와 함께 사용
MCP 지원 에이전트를 프런트엔드 체크리스트에 연결하여 React, Next.js, HTML, CSS, JavaScript, 접근성, 성능, SEO, 보안, 이미지, 개인정보 보호, i18n, 테스트 전반에 걸친 프런트엔드 코드 리뷰, 구조화된 규칙 조회, 감사, 해결 워크플로를 수행하세요.

팁

최적의 첫 사용법: MCP 지원 에이전트를 실제 컴포넌트, 페이지 또는 공개 URL로 지정하고, 가장 신뢰도 높은 프런트엔드 발견 사항을 먼저 얻기 위해 프런트엔드 체크리스트 MCP를 사용하도록 명시적으로 요청하세요. 일부 클라이언트는 설치된 MCP 도구를 지연해서 발견하므로, 프롬프트에 서버 이름을 지정하면 도움이 됩니다.

공개 엔드포인트: mcp.frontendchecklist.io
공개 문서: frontendchecklist.io/mcp
로컬/에디터 통합: packages/mcp/src/cli.ts의 stdio 서버

할 수 있는 일:

붙여넣은 코드나 파일 내용을 체크리스트에 비추어 리뷰
라이브 공개 URL 감사
해결 지침과 함께 특정 규칙 가져오기
키워드, 카테고리 또는 우선순위로 규칙 검색
집중 감사를 위한 워크플로 또는 빠른 참조 가져오기

에이전트 사용 지침:

붙여넣은 HTML, CSS, JavaScript, React 또는 Next.js 코드에는 review_code를 먼저 사용하세요
프런트엔드 접근성, 성능, SEO, 보안 또는 이미지 권장 사항을 제시하기 전에 search_rules를 사용하세요
출시, 접근성, SEO, 보안, 성능 감사에는 get_workflow 또는 get_checklist_rules를 사용하세요
공개 https:// 페이지에는 audit_url을 사용하세요

예시 프롬프트:

프런트엔드 체크리스트 MCP를 사용하여 이 React 컴포넌트를 리뷰하고 가장 신뢰도 높은 발견 사항을 먼저 보고하세요.
프런트엔드 체크리스트 MCP를 사용하여 https://example.com의 접근성, 성능, SEO 문제를 감사하세요.
프런트엔드 체크리스트 MCP를 사용하여 canonical URL 규칙을 설명하고 코드 예시와 함께 수정 방법을 제안하세요.

스킬과 함께 사용
재사용 가능한 감사 워크플로나 집중적인 규칙별 지침을 지원하는 도구에서 사용하고 싶을 때 프런트엔드 체크리스트 스킬을 설치하세요.

설치:

npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https
유용한 진입점:

전역 감사 진입점: skills/frontend-checklist-global/SKILL.md
집중 규칙 스킬 예시: skills/https/SKILL.md

사용 예시:

전체 프런트엔드 체크리스트 코퍼스에 대해 광범위한 프런트엔드 감사 실행
https 같은 집중 스킬을 사용하여 한 가지 관심사에 대한 보안 리뷰 수행
규칙별 스킬을 사용하여 규칙이 중요한 이유와 수정 방법 설명

체크리스트

카테고리로 이동

HTML (25) · 사이트에서 열기
CSS (32) · 사이트에서 열기
JavaScript (26) · 사이트에서 열기
성능 (44) · 사이트에서 열기
접근성 (95) · 사이트에서 열기
SEO (94) · 사이트에서 열기
보안 (22) · 사이트에서 열기
이미지 (25) · 사이트에서 열기
테스트 (13) · 사이트에서 열기
개인정보 보호 (5) · 사이트에서 열기
국제화 (5) · 사이트에서 열기

카테고리
HTML
25개 규칙. 시맨틱 마크업, 메타데이터, 폼, 문서 구조 규칙.

frontendchecklist.io에서 HTML 살펴보기

외부 스크립트에 Subresource Integrity 추가 : CDN에서 로드되는 외부 스크립트와 스타일시트에 Subresource Integrity(SRI) 해시 속성을 사용하여 콘텐츠가 변조되지 않았는지 확인하세요.
동영상에 썸네일 이미지 추가 : HTML5 video 요소에는 동영상이 로드되거나 재생되기 전에 표시되는 썸네일 이미지를 제공하는 poster 속성이 있어야 합니다.
사용자 정의 404 오류 페이지 생성 : 사용자 정의 404 오류 페이지는 길을 잃은 사용자를 위한 유용한 내비게이션 옵션으로 설계됩니다.
UTF-8 문자 인코딩 선언 : charset(UTF-8)이 head의 첫 번째 요소로 올바르게 선언됩니다.
모든 ID가 고유한지 확인 : 모든 ID 속성은 문서 내에서 고유합니다. 페이지에 중복 ID가 존재하지 않습니다.
접근 가능한 브레드크럼 내비게이션 구현 : 브레드크럼 내비게이션은 접근성을 위해 적절한 시맨틱 마크업과 ARIA 속성으로 구현됩니다.
모든 기기를 위한 파비콘 구현 : 브라우저, 기기, PWA 지원을 위해 필요한 모든 파비콘 형식이 구현됩니다.
설치 가능성을 위한 Web App Manifest 연결 : 홈 화면 설치, 독립 실행형 표시, 스플래시 화면 같은 Progressive Web App 기능을 활성화하려면 HTML head에서 연결되는 Web App Manifest(manifest.json)를 포함하세요.
defer, async 또는 type=module로 스크립트 로드 : script 태그에 defer, async 또는 type=module 속성을 사용하여 JavaScript가 HTML 파싱을 차단하지 않도록 하여, 스크립트가 다운로드되는 동안 브라우저가 DOM을 계속 구축할 수 있게 하세요.
사용자 정의 요소와 Web Components를 접근 가능하게 만들기 : 사용자 정의 요소는 ElementInternals를 통한 ARIA 반영, 키보드 상호작용, 폼 연결을 구현하여 스크린 리더와 보조 기술이 이를 올바르게 해석할 수 있도록 해야 합니다.
파일 업로드를 접근 가능하게 만들기 : 파일 업로드 컴포넌트는 적절한 레이블, 파일 형식 제한, 진행 피드백으로 접근 가능합니다.
페이지네이션을 접근 가능하게 만들기 : 페이지네이션 컨트롤은 적절한 ARIA 레이블, 키보드 내비게이션, 현재 페이지 표시로 접근 가능합니다.
검색 입력을 접근 가능하게 만들기 : 검색 기능은 적절한 input type, 레이블, role, 자동완성 제안으로 접근 가능합니다.
캡션으로 동영상을 접근 가능하게 만들기 : 동영상에는 캡션, 오디오 설명, 대본, 일시정지 컨트롤이 있으며, 청각, 시각 또는 인지 장애가 있는 사용자를 위해 자동 재생을 피합니다.
PWA 설치 가능성 기준 충족 : 웹 앱은 브라우저의 최소 PWA 설치 가능성 요구 사항(유효한 웹 앱 매니페스트, 등록된 서비스 워커, HTTPS, 마스커블 아이콘)을 충족합니다.
noscript 대체 콘텐츠 제공 : noscript 태그는 JavaScript가 비활성화된 사용자를 위한 대체 콘텐츠를 제공합니다.
프로덕션에서 주석과 디버그 코드 제거 : 불필요한 코드, 주석, 디버그 요소는 프로덕션에 배포하기 전에 제거됩니다.
RTL 언어를 위한 텍스트 방향 설정 : dir 속성은 오른쪽에서 왼쪽으로 읽는(RTL) 언어나 혼합 콘텐츠에 사용됩니다.
페이지 lang 속성 설정 : 요소에는 유효한 BCP 47 언어 코드가 포함된 lang 속성이 있어야 하며, 이를 통해 스크린 리더, 번역 도구, 검색 엔진이 페이지의 기본 언어를 알 수 있습니다.
반응형 뷰포트 메타 태그 설정 : viewport 메타 태그는 반응형 디자인을 위해 올바르게 선언됩니다.
시맨틱 HTML 요소 사용 : HTML5 시맨틱 요소(header, section, footer, main, article, aside...)가 적절하게 사용됩니다.
시맨틱 input type 속성 사용 : input 요소에 올바른 type 속성을 설정하여 적절한 모바일 키보드를 트리거하고, 브라우저 유효성 검사를 활성화하며, 자동 채우기 정확도를 향상시키세요.
HTML5 doctype 사용 : HTML5 doctype 선언은 모든 브라우저에서 표준 모드 렌더링을 트리거하기 위해 모든 HTML 문서의 첫 줄에 나타나야 합니다.
폼을 접근 가능하게 검증 : 폼은 접근 가능한 오류 메시지와 적절한 ARIA 속성으로 명확한 유효성 검사 피드백을 제공합니다.
W3C 표준에 대해 HTML 검증 : HTML 마크업은 브라우저 간 호환성을 위해 W3C 표준에 대해 검증됩니다.

맨 위로

CSS
32개 규칙. 레이아웃, 타이포그래피, 반응형 디자인, 스타일링 규칙.

frontendchecklist.io에서 CSS 살펴보기

Flexbox 모범 사례 적용 : 1차원 레이아웃에는 Flexbox를 사용하되, flex:1 남용, min-width:0 무시, flex-basis 오해 같은 흔한 실수를 피하세요.
임베디드 및 인라인 CSS 피하기 : 임베디드 및 인라인 CSS는 크리티컬 CSS와 성능 최적화를 제외하고 피합니다.
방해가 되는 인터스티셜 피하기 : 모바일에서 주요 콘텐츠를 차단하는 전체 화면 인터스티셜(팝업, 오버레이, 쿠키 배너)은 순위 페널티 신호이자 접근성 장벽입니다. 방해가 되지 않는 대안을 사용하세요.
핀치 줌 비활성화 금지 : viewport 메타 태그는 user-scalable=no 또는 maximum-scale=1을 설정해서는 안 됩니다. 이는 사용자가 콘텐츠를 읽기 위해 확대하는 것을 막아 WCAG 2.1 SC 1.4.4(텍스트 크기 조정)를 위반하기 때문입니다.
인쇄 스타일시트 포함 : 인쇄 스타일시트가 제공되며 인쇄된 페이지에 맞게 올바르게 최적화됩니다.
더 빠른 렌더링을 위한 크리티컬 CSS 인라인화 : 크리티컬 CSS(접힌 부분 위 콘텐츠)는 더 빠른 초기 렌더링을 위해 head에 인라인됩니다.
CSS 명시도를 낮고 평평하게 유지 : 작동하는 가장 낮은 명시도로 선택자를 작성하고, ID 선택자와 깊은 중첩을 피하여 !important에 의존하지 않고도 스타일을 깔끔하게 재정의할 수 있게 하세요.
CSS 및 SCSS 파일 린트 : 모든 CSS/SCSS 파일은 오류를 감지하고 표준을 강제하기 위해 Stylelint로 린트됩니다.
렌더링을 차단하지 않고 CSS 로드 : 중요하지 않은 CSS는 DOM 렌더링을 차단하지 않도록 비동기적으로 로드됩니다.
모든 CSS 파일 최소화 : 모든 CSS 파일은 파일 크기를 줄이고 페이지 로드 성능을 향상시키기 위해 최소화됩니다.
웹 폰트 형식 최적화 : 웹 폰트는 적절한 대체 및 로딩 전략과 함께 최신 형식(WOFF2, WOFF)을 사용합니다.
CSS 파일을 올바르게 정렬 : 렌더링 차단을 방지하기 위해 모든 CSS 파일은 JavaScript 파일보다 먼저 로드됩니다.
가로 스크롤 방지 : 웹 페이지는 표준 뷰포트 너비에서 가로 스크롤을 요구해서는 안 됩니다. 가로 오버플로는 반응형 레이아웃을 깨뜨리고 확대하는 저시력 사용자가 콘텐츠에 접근할 수 없게 만듭니다.
눈에 보이는 사용자 정의 포커스 표시기 제공 : 모든 대화형 요소에 키보드 내비게이션을 위한 명확히 보이는 포커스 표시기가 있는지 확인하세요 — 더 나은 대안을 제공하지 않고 기본 아웃라인을 제거하기만 해서는 안 됩니다.
애니메이션과 타입 안전성을 위해 @property로 CSS 사용자 정의 속성 등록 : @property를 사용하여 타입, 초기 값, 상속 제어와 함께 CSS 사용자 정의 속성을 등록하세요 — 사용자 정의 속성의 애니메이션을 가능하게 하고 디자인 토큰에 대한 컴파일 타임 검증을 제공합니다.
사용하지 않는 CSS 규칙 제거 : 번들 크기를 줄이고 성능을 향상시키기 위해 사용하지 않는 CSS가 제거됩니다.
prefers-color-scheme으로 다크 모드 지원 : 다크 모드를 t…