프론트엔드 체크리스트는 당신의 HTML 사이트 또는 페이지를 프로덕션으로 런칭하기 이전에 가지고 있어야 할, 또한 테스트 되어야 할 전반적인 요소들의 집합입니다.
이 리스트는 다년간의 프론트엔드 개발자들의 경험으로 작성되었으며, 몇몇 항목들은 타 오픈소스 체크리스트들의 참고를 통해 추가되었습니다.
프론트엔드 체크리스트에 속해있는 모든 항목들은 대다수의 프로젝트에서 필요로 하는 사항들이지만, 몇몇 요소들은 생략되거나 필수적이 아닐 수도 있습니다(예를 들면 관리형 웹 어플리케이션의 경우 RSS 피드는 필요 없을 것입니다). 우리는 따라서 각각의 항목들을 3가지의 기준으로 구분하였습니다:
의 경우 해당 항목이 권유 되지만, 몇몇 특정한 상황에서는 생략될 수도 있습니다.
의 경우 해당 항목이 권고 되지만, 굉장히 특정한 상황에서는 결국 생략이 될 수도 있습니다. 몇몇 요소의 경우, 생략 시 성능이나 SEO 측면에서 안 좋은 영향을 끼칠 수도 있습니다.
의 경우 해당 항목은 어떠한 상황에서라도 생략될 수 없습니다. 이를 생략하게 되면 당신의 페이지는 오동작하거나 접근, 또는 SEO에 문제가 발생할 것입니다. 이러한 요소들에 대해서 우선적으로 테스트 하시기 바랍니다.
몇몇 추가 내용들은 그것들이 어떠한 종류의 내용인지 이해하는데에 도움을 주기 위하여 이모티콘을 추가하였습니다. 이로 인해 체크리스트에서 해당 항목들을 이해하는 데에 도움이 될 것입니다:
- 📖: 문서 또는 기사
- 🛠: 온라인 도구 / 테스트 도구
- 📹: 미디어 또는 비디오 컨텐츠
노트: a list of everything 에서 HTML 문서 내의
<head>에서 사용할 수 있는 모든 것을 찾아보실 수 있습니다.
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>다음 3개의 메타 태그(Charset, X-UA Compatible and Viewport)들은 다른 요소들에 비해 head 안에서도 상단에 위치해야만 합니다.
- Charset:
<!-- 이 문서에 대한 문자 인코딩을 설정 -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- Internet Explorer에게 최신의 렌더링 엔진을 사용하라고 지시 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
<!-- 반응형 웹 디자인을 위한 Viewport 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">- Title:
<!-- 문서의 Title -->
<title>55개 이하의 문자로 구성된 페이지 제목</title>- Description:
<!-- Meta Description -->
<meta name="description" content="페이지에 대한 설명 (150개 이하의 문자)">- Favicons:
favicon.ico파일만 가지고 있다면, 해당 내용을 페이지의 상단부에 추가하라. 일반적으로는 해당 태그를 사용할 필요는 없지만, 아래의 예시를 포함하는 것이 좋은 습관임. 오늘날에는.ico포맷보다 PNG 포맷의 아이콘 사용을 추천함(크기: 32x32px).
<!-- 표준 favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 추천 favicon 포맷 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">- Apple 터치 아이콘:
<!-- Apple 터치 아이콘 (최소한 200x200 px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">- 윈도우 타일:
<!-- Microsoft 타일 -->
<meta name="msapplication-config" content="browserconfig.xml" />browserconfig.xml 파일에서 사용되는 최소한의 XML 내용은 다음과 같습니다:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>- Canonical:
rel="canonical"을 사용함
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">- 언어 속성:
<html lang="ko">- 글자 방향 속성:
<!-- rtl: right to left -->
<html dir="rtl">- 대체 언어:
<link rel="alternate" href="https://en.example.com/" hreflang="en">- 조건부 주석:
-
RSS 피드:
-
CSS Critical:
<style></style>태그 사이에 최소화 된 상태로 한 줄로 추가되어 임베딩 됨
- 🛠 Critical by Addy Osmani on Github 이 레포는 CSS Critical을 자동화 하는데에 도움을 줍니다.
- CSS의 순서:
<head>내에서 자바스크립트 파일보다 이전에 로딩이 완료됨 (자바스크립트 파일이 비동기적으로 로딩되는 특정한 경우는 제외함).
- Facebook Open Graph:
노트:
og:image:width와og:image:height를 사용하는 것은 이미지의 크기를 웹 크롤러에게 알려주어서, 이미지를 비동기적으로 다운로드하고 처리할 필요 없이 즉시 보여줄 수 있도록 합니다.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 웹마스터를 위한 쉐어링 가이드
- 📖 쉐어링 - 모범 사례
- 🛠 Facebook OG testing 도구를 이용하여 당신의 페이지 테스트하기
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Twitter cards 시작하기 — Twitter Developers
- 🛠 Twitter card 검사기 도구를 이용하여 당신의 페이지 테스트하기
- HTML5 시맨틱 엘리먼트:
-
에러 페이지:
-
Noopener:
target="_blank"를 이용하여 연 경우, tab nabbing 피싱 공격을 방지하기 위하여rel="noopener"속성을 사용해야만 한다. 만약 Firefox 옛 버전을 지원해야만 한다면,rel="noopener noreferrer"을 사용하라.
- 주석 지우기:
- W3C 규격:
- 🛠 W3C 검사기
- HTML Lint:
- 🛠 Dirty markup: HTML 코드를 정돈해주는 온라인 도구
- Link checker:
- 광고차단기 테스트:
노트: 웹폰트를 사용하면 스타일링 되지 않은 글자나 보이지 않는 글자들이 깜빡일 수 있습니다. 실패했을 경우를 대비한 대체용 폰트를 포함하거나, 웹폰트 로더를 활용하여 이러한 동작들을 제어하세요.
- 웹폰트 포맷:
-
웹폰트 크기:
-
웹폰트 로더:
노트: 대다수의 프론트엔드 개발자들이 따르는 CSS 가이드라인과 Sass 가이드라인 을 살펴보세요. 만약 모르는 CSS 속성 값이 있다면, CSS 레퍼런스를 참조하길 바랍니다. 또한 CSS의 일관성을 위한 코드 가이드도 읽어보기 바랍니다.
- 반응형 웹 디자인:
- CSS Print:
- CSS 전처리기:
- 고유 ID값:
- Reset CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS 접두사:
<div id="js-slider" class="my-slider">
<!-- 또는 -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS 임베딩 또는 인라인:
- 벤더 프리픽스:
- 파일 단일화:
- 최소화:
- Non-blocking:
- 사용하지 않은 CSS:
- Stylelint:
-
반응형 웹 디자인:
-
CSS 검사기:
- 🛠 CSS 검사기
- 데스크탑 브라우저:
- 모바일 브라우저:
- 운영체제:
- Pixel perfect:
- 글자 방향:
노트: 이미지 최적화의 완전한 이해를 위해서는, Addy Osmani가 쓴 무료 ebook Essential Image Optimization 을 확인하세요.
- 최적화:
- 🛠 Imagemin
- 🛠 ImageOptim를 사용하여 당신의 이미지를 무료로 최적화하세요
- 🛠 Kraken.io를 사용하여 png와 jpg을 꽤나 대단하게 최적화 할 수 있습니다. 파일 당 1MB에 대해서는 무료입니다.
- Picture/Srcset:
- 레티나 디스플레이 지원:
- 이미지 스프라이트:
- 너비와 높이:
<img>태그에 너비와 높이가 설정되었음 (px이나 %로 지정하지 마시오) - 대체 텍스트:
<img>태그가 이미지를 잘 서술하는 대체 텍스트를 가지고 있음 (alt속성으로 부여)
- Lazy 로딩:
- 인라인 자바스크립트:
- 파일 단일화:
- 최소화:
.min접미사를 붙이는 것을 추천)
- 자바스크립트 보안:
-
noscript태그:<noscript>태그를 사용하시오. 이는 React.js 어플리케이션처럼 클라이언트 사이드에 렌더링이 굉장히 무거운 어플리케이션의 경우 굉장히 유용함. 다음의 예제 를 살펴보시오
<noscript>
이 어플리케이션을 실행시키기 위해선 자바스크립트를 활성화 시켜야 합니다.
</noscript>- Non-blocking:
async와defer속성값을 이용하여 비동기적으로 로드 되어야 함
- Modernizr:
<html>태그 내에 클래스들을 추가할 수 있음
- ESLint:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- 사이트 간 요청 위조(CSRF; Cross Site Request Forgery):
- 사이트 간 스크립팅(XSS; Cross Site Scripting):
- Content Type Options:
- X-Frame-Options (XFO)
- 컨텐츠 보안 정책(CSP; Content Security Policy)
- 페이지 용량:
- 최소화:
-
Lazy 로딩:
-
쿠키 크기: 쿠키를 사용한다면, 각 쿠키의 크기가 4096 바이트를 넘지 않고, 도메인 내에 20개 이상의 쿠키를 가지지 않도록 주의하시오
- 📖 쿠키 사양: RFC 6265
- 📖 쿠키
- 🛠 브라우저 쿠키의 제한점
- 서드 파티 컴포넌트:
- DNS resolution:
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">- Preconnection:
preconnect.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">- Preloading:
<body>) in advance usingpreload.
<link rel="preload" href="app.js">- Google PageSpeed:
노트: 유튜브의 재생 목록을 확인해보세요 A11ycasts with Rob Dodson 📹
- Progressive enhancement:
- 색상 대비:
- 🛠 대비율
- H1:
- 헤딩:
- banner 역할:
<header>태그가role="banner"속성값을 가지고 있음 - navigation 역할:
<nav>태그가role="navigation"속성값을 가지고 있음 - main 역할:
<main>태그가role="main"속성값을 가지고 있음
- 특정한 HTML5의 input 타입들의 사용:
- 레이블:
aria-label을 대신 사용하시오
- 접근성 표준 테스트:
- 🛠 Wave 테스트
- 키보드 네비게이션:
- 스크린 리더:
- 포커스 스타일링:
- 구글 애널리틱스:
- 적절한 제목 배치:
- sitemap.xml:
- robots.txt:
- 📖 The robots.txt file
- 🛠 Google Robots 테스트 도구를 이용하여 당신의 robots.txt 파일을 테스트 해보세요
- 구조화 된 데이터:
- 📖 구조화 된 데이터 소개 - Search - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 구조화 된 데이터 테스트 도구를 이용하여 당신의 페이지를 테스트 해보세요
- 🛠 구조화 된 데이터로 사용될 수 있는 단어들의 목록을 만들어보세요 Schema.org Full Heirarchy
- HTML 사이트맵:
- Pagination link tags:
rel="prev"andrel="next"to indicate paginated content.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">프론트엔드 체크리스트는 다른 언어로도 이용 가능합니다. 모든 번역자들과 그들의 멋진 노력에 감사합니다!
- 🇯🇵 Japanese: miya0001/Front-End-Checklist
- 🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korean: kesuskim/Front-End-Checklist
- 🇧🇷 Portuguese: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
- 🇫🇷 French: ynizon/Front-End-Checklist
- 🇷🇺 Russian: ungear/Front-End-Checklist
- 🇹🇷 Turkish: eraycetinay/Front-End-Checklist
만약 당신이 프론트엔드 체크리스트의 규칙을 따르고 있다고 보여주길 원한다면, 하단의 배지를 README 파일에 추가하세요!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)이슈를 새로 생성하거나 PR을 날려서 수정 사항이나 추가할 부분에 대해 알려주세요.
프론트엔드 체크리스트 레포지토리는 2개의 브랜치로 구성되어져 있습니다:
이 브랜치는 프론트엔드 체크리스트 웹사이트에 반영되는 README.md파일로 구성되어져 있습니다.
이 브랜치는 필요하다면 구조나 컨텐츠에 상당한 변화를 줄 수 있습니다. 간단한 에러 수정을 하거나 새로운 항목을 추가할 경우, master 브랜치에 직접 하는 것을 추천드립니다.
질문이나 제안이 있다면, 주저하지 말고 Gitter나 Twitter를 이용하세요:
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
