Home

Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/master/data/images/logo-front-end-checklist.jpg" alt="Front-End Checklist" width="130"> <br> <br>   Front-End Checklist   <br> </h1> <p align="center"> <em>프론트엔드 체크리스트는 당신의 HTML 사이트 또는 페이지를 프로덕션으로 런칭하기 이전에 가지고 있어야 할, 또한 테스트 되어야 할 전반적인 요소들의 집합입니다.</em> </p> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"> <img src="https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg?style=flat-square" alt="Contributors"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/"> <img src="https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg?style=flat-square" alt="Front‑End_Checklist followed"> </a> <a href="https://creativecommons.org/publicdomain/zero/1.0/"> <img src="https://img.shields.io/badge/license-CC0-green.svg?style=flat-square" alt="CC0"> </a> </p> <p align="center"> <a href="#how-to-use">How To Use</a> • <a href="#contributing">Contributing</a> • <a href="https://frontendchecklist.io">Website</a> • <a href="https://www.producthunt.com/posts/front-end-checklist">Product Hunt</a> </p> <p align="center"> <span>Other Checklists:</span> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist#---------front-end-performance-checklist-">🎮 Front-End Performance Checklist</a> • <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">💎 Front-End Design Checklist</a> </p>

이 리스트는 다년간의 프론트엔드 개발자들의 경험으로 작성되었으며, 몇몇 항목들은 타 오픈소스 체크리스트들의 참고를 통해 추가되었습니다.

목차

  1. Head
  2. HTML
  3. 웹폰트
  4. CSS
  5. 이미지
  6. 자바스크립트
  7. 보안
  8. 성능
  9. 접근성
  10. SEO

이 리스트는 어떻게 사용하나요?

프론트엔드 체크리스트에 속해있는 모든 항목들은 대다수의 프로젝트에서 필요로 하는 사항들이지만, 몇몇 요소들은 생략되거나 필수적이 아닐 수도 있습니다(예를 들면 관리형 웹 어플리케이션의 경우 RSS 피드는 필요 없을 것입니다). 우리는 따라서 각각의 항목들을 3가지의 기준으로 구분하였습니다:

몇몇 추가 내용들은 그것들이 어떠한 종류의 내용인지 이해하는데에 도움을 주기 위하여 이모티콘을 추가하였습니다. 이로 인해 체크리스트에서 해당 항목들을 이해하는 데에 도움이 될 것입니다:

Head

노트: a list of everything 에서 HTML 문서 내의 <head> 에서 사용할 수 있는 모든 것을 찾아보실 수 있습니다.

메타 태그

<!-- Doctype HTML5 -->
<!doctype html>

📖 문자 인코딩 결정하기 - HTML5 W3C

다음 2개의 메타 태그(Charset and Viewport)들은 다른 요소들에 비해 head 안에서도 상단에 위치해야만 합니다.

<!-- 이 문서에 대한 문자 인코딩을 설정 -->
<meta charset="utf-8">

<!-- 반응형 웹 디자인을 위한 Viewport 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<!-- 문서의 Title -->
<title>55개 이하의 문자로 구성된 페이지 제목</title>

<!-- Meta Description -->
<meta name="description" content="페이지에 대한 설명 (150개 이하의 문자)">

<!-- 표준 파비콘 -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 추천 파비콘 포맷 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

<!-- Apple 터치 아이콘 (최소한 200x200 px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- 웹 어플리케이션 모드 설정하기 (Apple 웹 앱을 위해 기본적으로 필요함) -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 상태창 스타일 (밑의 링크에서 지원 가능한 메타 태그들을 확인해보세요) -->
<!-- 웹 어플리케이션 모드여야 동작함 -->
<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>

<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

HTML 태그

<html lang="ko">

<!-- rtl: right to left; 오른쪽에서 왼쪽 방향으로 -->
<html dir="rtl">

<link rel="alternate" href="https://en.example.com/" hreflang="en">

<link rel="alternate" href="https://example.com/" hreflang="x-default" />

소셜미디어 관련 메타 태그

Meta Tags 를 사용하여 메타 태그를 시각화하고 생성하세요.

기본적으로 Facebook 의 Open Graph 와 Twitter 의 Card 는 반드시 설정하는 것을 추천합니다. 다른 소셜미디어 태그들은 특정한 상대를 대상으로 할 경우에 고려해보세요.

노트: 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="제목">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="내용에 대한 설명">
<meta property="og:site_name" content="사이트명">
<meta property="og:locale" content="en_US">

<!-- 다음의 태그는 필수는 아니지만, 성능을 위하여 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<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="제목">
<meta name="twitter:description" content="내용에 대한 설명. 200자 미만이어야 함.">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ 목차로

HTML

모범 사례

HTML testing

⬆ 목차로

웹폰트

노트: 웹폰트를 사용하면 스타일링 되지 않은 글자나 보이지 않는 글자들이 깜빡일 수 있습니다. 실패했을 경우를 대비한 대체용 폰트를 포함하거나, 웹폰트 로더를 활용하여 이러한 동작들을 제어하세요.

⬆ 목차로

CSS

노트: 대다수의 프론트엔드 개발자들이 따르는 CSS 가이드라인과 Sass 가이드라인 을 살펴보세요. 만약 모르는 CSS 속성 값이 있다면, CSS 레퍼런스를 참조하길 바랍니다. 또한 CSS의 일관성을 위한 코드 가이드도 읽어보기 바랍니다.

<div id="js-slider" class="my-slider">
<!-- 또는 -->
<div id="id-used-by-cms" class="js-slider my-slider">

성능

CSS 테스트

Pixel Perfect - Chrome 확장도구

⬆ 목차로

이미지

노트: 이미지 최적화의 완전한 이해를 위해서는, Addy Osmani가 쓴 무료 ebook Essential Image Optimization 을 확인하세요.

모범 사례

⬆ 목차로

자바스크립트

모범 사례

<noscript>
  이 어플리케이션을 실행시키기 위해선 자바스크립트를 활성화 시켜야 합니다.
</noscript>

자바스크립트 테스트

⬆ 목차로

보안

당신의 웹사이트를 미리 검토하고 확인하세요

모범 사례

⬆ 목차로

성능

모범 사례

다음에 발생할 HTTP 요청을 미리 준비하기

<link rel="dns-prefetch" href="https://example.com">

<link rel="preconnect" href="https://example.com">

<link rel="prefetch" href="image.png">

<link rel="preload" href="app.js">

성능 테스트

⬆ 목차로

접근성

노트: 유튜브의 재생 목록을 확인해보세요 A11ycasts with Rob Dodson 📹

모범 사례

헤딩

시맨틱

폼

접근성 테스트

⬆ 목차로

SEO

<!-- Example: 페이지네이션 목록의 2페이지의 페이지네이션 링크 태그 -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ 목차로

번역

프론트엔드 체크리스트는 다른 언어로도 이용 가능합니다. 모든 번역자들과 그들의 멋진 노력에 감사합니다!

프론트엔드 체크리스트 배지

만약 당신이 프론트엔드 체크리스트의 규칙을 따르고 있다고 보여주길 원한다면, 하단의 배지를 README 파일에 추가하세요!

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ 목차로

프로젝트에 기여

이슈를 새로 생성하거나 PR을 날려서 수정 사항이나 추가할 부분에 대해 알려주세요.

가이드

프론트엔드 체크리스트 레포지토리는 2개의 브랜치로 구성되어져 있습니다:

1. master

이 브랜치는 프론트엔드 체크리스트 웹사이트에 반영되는 README.md파일로 구성되어져 있습니다.

2. develop

이 브랜치는 필요하다면 구조나 컨텐츠에 상당한 변화를 줄 수 있습니다. 간단한 에러 수정을 하거나 새로운 항목을 추가할 경우, master 브랜치에 직접 하는 것을 추천드립니다.

support

질문이나 제안이 있다면, 주저하지 말고 Gitter나 Twitter를 이용하세요:

저자

David Dias

contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>

backers

Thank you to all our backers! 🙏 [Become a backer]

<a href="https://opencollective.com/front-end-checklist#backers" target="_blank"><img src="https://opencollective.com/front-end-checklist/backers.svg?width=890"></a>

sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

<a href="https://opencollective.com/front-end-checklist/sponsor/0/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/1/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/2/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/3/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/4/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/5/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/6/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/7/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/8/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/9/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/9/avatar.svg"></a>

라이센스

CC0

⬆ 목차로