πŸ—‚ μ΅œμ‹  μ›Ήμ‚¬μ΄νŠΈμ™€ κΌΌκΌΌν•œ κ°œλ°œμžλ“€μ„ μœ„ν•œ μ™„λ²½ ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트
Branch: master
Clone or download
Pull request Compare This branch is 33 commits ahead, 125 commits behind thedaviddias:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Revert "Pugify HTML code πŸ˜…" Nov 16, 2017
data/en
src
test Remove draft mocha tests Nov 15, 2017
.babelrc
.codeclimate.yml 🌟First commit Front-End Checklist App 🌟 Nov 15, 2017
.editorconfig
.eslintrc.js
.gitignore Add tmp gitignore Nov 20, 2017
.nvmrc Add nvmrc file Nov 20, 2017
.prettierrc 🌟First commit Front-End Checklist App 🌟 Nov 15, 2017
.stylelintrc 🌟First commit Front-End Checklist App 🌟 Nov 15, 2017
.travis.yml Remove comment + cache node_modules Nov 20, 2017
CHANGELOG.md
CODE_OF_CONDUCT.md fix grammar Nov 15, 2017
LICENSE Changing MIT to CC0 Nov 15, 2017
README.md
README_APP.md Uncomment sponsor component Nov 16, 2017
ROADMAP.md 🌟First commit Front-End Checklist App 🌟 Nov 15, 2017
gulpfile.babel.js Add headers Nov 20, 2017
modernizr-config.json Remove pointerevents + animations Nov 20, 2017
package-lock.json
package.json Fix invalid package name Nov 29, 2017
webpack.config.js

README.md

ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트 둜고

ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트

ν”„λ‘ νŠΈμ—”λ“œ μ²΄ν¬λ¦¬μŠ€νŠΈλŠ” λ‹Ήμ‹ μ˜ HTML μ‚¬μ΄νŠΈ λ˜λŠ” νŽ˜μ΄μ§€λ₯Ό ν”„λ‘œλ•μ…˜μœΌλ‘œ λŸ°μΉ­ν•˜κΈ° 이전에 가지고 μžˆμ–΄μ•Ό ν• , λ˜ν•œ ν…ŒμŠ€νŠΈ λ˜μ–΄μ•Ό ν•  μ „λ°˜μ μΈ μš”μ†Œλ“€μ˜ μ§‘ν•©μž…λ‹ˆλ‹€.

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‑End_Checklist followed Backers on Open Collective Sponsors on Open Collective Contributors StackShare CC0

이 λ¦¬μŠ€νŠΈλŠ” λ‹€λ…„κ°„μ˜ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžλ“€μ˜ κ²½ν—˜μœΌλ‘œ μž‘μ„±λ˜μ—ˆμœΌλ©°, λͺ‡λͺ‡ ν•­λͺ©λ“€μ€ 타 μ˜€ν”ˆμ†ŒμŠ€ μ²΄ν¬λ¦¬μŠ€νŠΈλ“€μ˜ μ°Έκ³ λ₯Ό 톡해 μΆ”κ°€λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

Sponsor

λͺ©μ°¨

  1. Head
  2. HTML
  3. μ›Ήν°νŠΈ
  4. CSS
  5. 이미지
  6. μžλ°”μŠ€ν¬λ¦½νŠΈ
  7. λ³΄μ•ˆ
  8. μ„±λŠ₯
  9. μ ‘κ·Όμ„±
  10. SEO

이 λ¦¬μŠ€νŠΈλŠ” μ–΄λ–»κ²Œ μ‚¬μš©ν•˜λ‚˜μš”?

ν”„λ‘ νŠΈμ—”λ“œ μ²΄ν¬λ¦¬μŠ€νŠΈμ— μ†ν•΄μžˆλŠ” λͺ¨λ“  ν•­λͺ©λ“€μ€ λŒ€λ‹€μˆ˜μ˜ ν”„λ‘œμ νŠΈμ—μ„œ ν•„μš”λ‘œ ν•˜λŠ” μ‚¬ν•­λ“€μ΄μ§€λ§Œ, λͺ‡λͺ‡ μš”μ†Œλ“€μ€ μƒλž΅λ˜κ±°λ‚˜ ν•„μˆ˜μ μ΄ 아닐 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€(예λ₯Ό λ“€λ©΄ κ΄€λ¦¬ν˜• μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 경우 RSS ν”Όλ“œλŠ” ν•„μš” 없을 κ²ƒμž…λ‹ˆλ‹€). μš°λ¦¬λŠ” λ”°λΌμ„œ 각각의 ν•­λͺ©λ“€μ„ 3κ°€μ§€μ˜ κΈ°μ€€μœΌλ‘œ κ΅¬λΆ„ν•˜μ˜€μŠ΅λ‹ˆλ‹€:

  • Low 의 경우 ν•΄λ‹Ή ν•­λͺ©μ΄ ꢌ유 λ˜μ§€λ§Œ, λͺ‡λͺ‡ νŠΉμ •ν•œ μƒν™©μ—μ„œλŠ” μƒλž΅λ  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.
  • Medium 의 경우 ν•΄λ‹Ή ν•­λͺ©μ΄ ꢌ고 λ˜μ§€λ§Œ, ꡉμž₯히 νŠΉμ •ν•œ μƒν™©μ—μ„œλŠ” κ²°κ΅­ μƒλž΅μ΄ 될 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. λͺ‡λͺ‡ μš”μ†Œμ˜ 경우, μƒλž΅ μ‹œ μ„±λŠ₯μ΄λ‚˜ SEO μΈ‘λ©΄μ—μ„œ μ•ˆ 쒋은 영ν–₯을 끼칠 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.
  • High 의 경우 ν•΄λ‹Ή ν•­λͺ©μ€ μ–΄λ– ν•œ μƒν™©μ—μ„œλΌλ„ μƒλž΅λ  수 μ—†μŠ΅λ‹ˆλ‹€. 이λ₯Ό μƒλž΅ν•˜κ²Œ 되면 λ‹Ήμ‹ μ˜ νŽ˜μ΄μ§€λŠ” μ˜€λ™μž‘ν•˜κ±°λ‚˜ μ ‘κ·Ό, λ˜λŠ” SEO에 λ¬Έμ œκ°€ λ°œμƒν•  κ²ƒμž…λ‹ˆλ‹€. μ΄λŸ¬ν•œ μš”μ†Œλ“€μ— λŒ€ν•΄μ„œ μš°μ„ μ μœΌλ‘œ ν…ŒμŠ€νŠΈ ν•˜μ‹œκΈ° λ°”λžλ‹ˆλ‹€.

λͺ‡λͺ‡ μΆ”κ°€ λ‚΄μš©λ“€μ€ 그것듀이 μ–΄λ– ν•œ μ’…λ₯˜μ˜ λ‚΄μš©μΈμ§€ μ΄ν•΄ν•˜λŠ”λ°μ— 도움을 μ£ΌκΈ° μœ„ν•˜μ—¬ 이λͺ¨ν‹°μ½˜μ„ μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 이둜 인해 μ²΄ν¬λ¦¬μŠ€νŠΈμ—μ„œ ν•΄λ‹Ή ν•­λͺ©λ“€μ„ μ΄ν•΄ν•˜λŠ” 데에 도움이 될 κ²ƒμž…λ‹ˆλ‹€:

  • πŸ“–: λ¬Έμ„œ λ˜λŠ” 기사
  • πŸ› : 온라인 도ꡬ / ν…ŒμŠ€νŠΈ 도ꡬ
  • πŸ“Ή: λ―Έλ””μ–΄ λ˜λŠ” λΉ„λ””μ˜€ 컨텐츠

Head

λ…ΈνŠΈ: a list of everything μ—μ„œ HTML λ¬Έμ„œ λ‚΄μ˜ <head> μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λͺ¨λ“  것을 찾아보싀 수 μžˆμŠ΅λ‹ˆλ‹€.

메타 νƒœκ·Έ

  • Doctype: High HTML5 을 μ‚¬μš©ν•˜λ©°, Doctype이 λͺ¨λ“  HTML νŽ˜μ΄μ§€μ˜ μ΅œμƒλ‹¨μ— μœ„μΉ˜ν•¨
<!-- Doctype HTML5 -->
<!doctype html>

πŸ“– 문자 인코딩 κ²°μ •ν•˜κΈ° - HTML5 W3C

λ‹€μŒ 3개의 메타 νƒœκ·Έ(Charset, X-UA Compatible and Viewport)듀은 λ‹€λ₯Έ μš”μ†Œλ“€μ— λΉ„ν•΄ head μ•ˆμ—μ„œλ„ 상단에 μœ„μΉ˜ν•΄μ•Όλ§Œ ν•©λ‹ˆλ‹€.

  • Charset: High λ¬Έμžμ§‘ν•©(UTF-8)이 μ˜¬λ°”λ₯΄κ²Œ 선언됨
<!-- 이 λ¬Έμ„œμ— λŒ€ν•œ 문자 인코딩을 μ„€μ • -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium X-UA-Compatible 메타 νƒœκ·Έκ°€ μ‘΄μž¬ν•¨
<!-- Internet Explorerμ—κ²Œ μ΅œμ‹ μ˜ λ Œλ”λ§ 엔진을 μ‚¬μš©ν•˜λΌκ³  μ§€μ‹œ -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • Viewport: High Viewportκ°€ μ œλŒ€λ‘œ 선언됨
<!-- λ°˜μ‘ν˜• μ›Ή λ””μžμΈμ„ μœ„ν•œ Viewport μ„€μ • -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Title: High λͺ¨λ“  νŽ˜μ΄μ§€μ— title이 μ‚¬μš©λ¨ (SEO κ°€μ΄λ“œ: Google은 제λͺ©μ— μ‚¬μš©λœ κΈ€μžλ“€μ˜ λ„ˆλΉ„μ˜ ν”½μ…€ 값을 κ³„μ‚°ν•œ λ’€, 472~482px μ‚¬μ΄μ˜ κ°’μœΌλ‘œ μž˜λΌλƒ…λ‹ˆλ‹€. 평균적인 κΈ€μž 길이의 μ œν•œμ€ μ•½ 55개의 κΈ€μžμž…λ‹ˆλ‹€.)
<!-- λ¬Έμ„œμ˜ Title -->
<title>55개 μ΄ν•˜μ˜ 문자둜 κ΅¬μ„±λœ νŽ˜μ΄μ§€ 제λͺ©</title>
  • Description: High description이 μ œλŒ€λ‘œ 기재됨 (μ„€λͺ…값은 κ³ μœ ν•΄μ•Ό ν•˜λ©°, 150개 μ΄ν•˜μ˜ 문자둜 κ΅¬μ„±λ˜μ–΄μ•Ό 함)
<!-- Meta Description -->
<meta name="description" content="νŽ˜μ΄μ§€μ— λŒ€ν•œ μ„€λͺ… (150개 μ΄ν•˜μ˜ 문자)">
  • Favicons: Medium 각각의 favicon이 μ œλŒ€λ‘œ μƒμ„±λ˜μ—ˆκ³  μ˜¬λ°”λ₯΄κ²Œ λ³΄μ—¬μ§€λŠ”κ°€? λ§Œμ•½ 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 ν„°μΉ˜ μ•„μ΄μ½˜: Low μ•„μ΄ν°μ˜ λͺ¨λ°”일 μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ•„μ΄μ½˜μœΌλ‘œ μ‚¬μš©λ˜λŠ” favicon을 μ„€μ •ν•΄μ£ΌλŠ” apple-touch-icon 속성을 μ‚¬μš©ν•¨
<!-- 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">
  • μœˆλ„μš° 타일: Low μœˆλ„μš° 타일을 μ„€μ •ν•˜λŠ” msapplication-config 속성을 μ‚¬μš©ν•¨
<!-- 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: Medium μ»¨ν…μΈ μ˜ 쀑볡을 ν”Όν•˜κΈ° μœ„ν•˜μ—¬ rel="canonical" 을 μ‚¬μš©ν•¨
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

HTML νƒœκ·Έ

  • μ–Έμ–΄ 속성: High ν˜„μž¬ νŽ˜μ΄μ§€ λ‚΄μ˜ 언어에 μ•Œλ§žκ²Œ 속성 값이 뢀여됨
<html lang="ko">
  • κΈ€μž λ°©ν–₯ 속성: Medium κΈ€μžλ“€μ˜ λ°©ν–₯이 μ œλŒ€λ‘œ 섀정됨 (μš°λ¦¬λ‚˜λΌμ—μ„œλŠ” μ’Œμ—μ„œ 우둜 글씨λ₯Ό 읽고 μ“°μ§€λ§Œ λͺ‡λͺ‡ λ‚˜λΌμ—μ„œλŠ” μš°μ—μ„œ 쒌둜 읽고 μ“°λŠ” κ²½μš°λ„ 있음)
<!-- rtl: right to left -->
<html dir="rtl">
  • λŒ€μ²΄ μ–Έμ–΄: Low ν˜„μž¬ νŽ˜μ΄μ§€λ₯Ό 언어에 맞게 λŒ€μ²΄ν•  수 μžˆλŠ” νƒœκ·Έ 속성 값을 μ‚¬μš©ν•¨
<link rel="alternate" href="https://en.example.com/" hreflang="en">
  • 쑰건뢀 주석: Low Internet Explorer λ₯Ό μœ„ν•œ 쑰건뢀 주석을 μ‚¬μš©ν•¨
  • RSS ν”Όλ“œ: Low 만일 νŽ˜μ΄μ§€κ°€ λΈ”λ‘œκ·Έμ΄κ±°λ‚˜ 기사가 μžˆλ‹€λ©΄, RSS 링크에 λŒ€ν•΄ ν™•μΈν•˜μ‹œμ˜€

  • CSS Critical: Medium νŽ˜μ΄μ§€κ°€ λ‘œλ”©λ˜λŠ” μ¦‰μ‹œ(νŽΌμ³μ§€λŠ” κ·Έ μˆœκ°„) 컨텐츠에 영ν–₯을 λΌμΉ˜λŠ” CSSλ₯Ό "critical CSS" 라고 함. μ΄λŠ” λ‹Ήμ‹ μ˜ μ‹€μ§ˆμ μΈ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ CSS κ°€ λ‘œλ”©λ˜κΈ° 이전에 <style></style> νƒœκ·Έ 사이에 μ΅œμ†Œν™” 된 μƒνƒœλ‘œ ν•œ μ€„λ‘œ μΆ”κ°€λ˜μ–΄ μž„λ² λ”© 됨

  • πŸ›  Critical by Addy Osmani on Github 이 λ ˆν¬λŠ” CSS Critical을 μžλ™ν™” ν•˜λŠ”λ°μ— 도움을 μ€λ‹ˆλ‹€.
  • CSS의 μˆœμ„œ: High λͺ¨λ“  CSS 파일이 <head> λ‚΄μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌλ³΄λ‹€ 이전에 λ‘œλ”©μ΄ μ™„λ£Œλ¨ (μžλ°”μŠ€ν¬λ¦½νŠΈ 파일이 λΉ„λ™κΈ°μ μœΌλ‘œ λ‘œλ”©λ˜λŠ” νŠΉμ •ν•œ κ²½μš°λŠ” μ œμ™Έν•¨).

μ†Œμ…œλ―Έλ””μ–΄ κ΄€λ ¨ 메타 νƒœκ·Έ

  • Facebook Open Graph: Low λͺ¨λ“  Facebook의 Open Graph (OG) κ°€ ν…ŒμŠ€νŠΈ λ˜μ—ˆμœΌλ©°, 그것듀 쀑에 λˆ„λ½λœ μ •λ³΄λ‚˜ 잘λͺ»λœ 정보λ₯Ό 가지고 μžˆμ§€λŠ” μ•Šλ‚˜? (μ΄λ―Έμ§€μ˜ 경우 μ΅œμ†Œν•œ 600 x 315 픽셀은 λ˜μ–΄μ•Ό ν•˜λ©°, 1200 x 630 ν”½μ…€ 크기λ₯Ό ꢌμž₯함)

λ…ΈνŠΈ: 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">
  • Twitter Card: Low
<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">

⬆ λͺ©μ°¨λ‘œ


HTML

λͺ¨λ²” 사둀

  • HTML5 μ‹œλ§¨ν‹± μ—˜λ¦¬λ¨ΌνŠΈ: High HTML5의 μ‹œλ§¨ν‹± μ—˜λ¦¬λ¨ΌνŠΈλ“€μ΄ 적절히 μ‚¬μš©λ¨ (header, section, footer, main... λ“±).
  • μ—λŸ¬ νŽ˜μ΄μ§€: High μ—λŸ¬λ₯Ό μœ„ν•œ 404 νŽ˜μ΄μ§€μ™€ 5xx νŽ˜μ΄μ§€κ°€ μ‘΄μž¬ν•˜λŠ”κ°€? 5xx νŽ˜μ΄μ§€λŠ” μ„œλ²„λ‘œλΆ€ν„°μ˜ 데이터λ₯Ό 전솑받지 μ•Šκ³  독립적인 자체 CSSλ₯Ό ν¬ν•¨ν•˜κ³  μžˆμ–΄μ•Ό 함을 κΈ°μ–΅ν•˜λΌ (5xx μ—λŸ¬λŠ” μ„œλ²„ μ—λŸ¬μ΄λ―€λ‘œ!).

  • Noopener: Medium μ™ΈλΆ€ 링크λ₯Ό target="_blank"λ₯Ό μ΄μš©ν•˜μ—¬ μ—° 경우, tab nabbing ν”Όμ‹± 곡격을 λ°©μ§€ν•˜κΈ° μœ„ν•˜μ—¬ rel="noopener" 속성을 μ‚¬μš©ν•΄μ•Όλ§Œ ν•œλ‹€. λ§Œμ•½ Firefox μ˜› 버전을 μ§€μ›ν•΄μ•Όλ§Œ ν•œλ‹€λ©΄, rel="noopener noreferrer" 을 μ‚¬μš©ν•˜λΌ.

  • 주석 μ§€μš°κΈ°: Low μ›Ήμ‚¬μ΄νŠΈλ₯Ό ν”„λ‘œλ•μ…˜ ν•˜κΈ° 이전에 λΆˆν•„μš”ν•œ μ½”λ“œλŠ” μ œκ±°ν•˜μ˜€λŠ”μ§€, 주석은 μ œκ±°ν•˜μ˜€λŠ”μ§€ μ κ²€ν•˜λΌ

HTML testing

  • W3C 규격: High λͺ¨λ“  νŽ˜μ΄μ§€λŠ” HTML μ½”λ“œ λ‚΄μ—μ„œ 일어날 수 μžˆλŠ” 경우λ₯Ό ν™•μΈν•˜κΈ° μœ„ν•˜μ—¬ W3C 의 validatorλ₯Ό μ΄μš©ν•˜μ—¬ ν…ŒμŠ€νŠΈ λ˜μ–΄μ•Ό 함
  • HTML Lint: High 도ꡬλ₯Ό μ΄μš©ν•˜μ—¬ HTML μ½”λ“œ 내에 λ°œμƒν•  수 μžˆλŠ” λ¬Έμ œλ“€μ„ λΆ„μ„ν•˜λ„λ‘ ν•˜μž
  • πŸ›  Dirty markup: HTML μ½”λ“œλ₯Ό μ •λˆν•΄μ£ΌλŠ” 온라인 도ꡬ
  • Link checker: High νŽ˜μ΄μ§€ 내에 깨진 λ§ν¬λŠ” μ—†λŠ”μ§€, 404 μ—λŸ¬κ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”μ§€ λ‹€μ‹œ ν•œλ²ˆ ν™•μΈν•˜λ„λ‘ 함
  • 광고차단기 ν…ŒμŠ€νŠΈ: Medium 광고차단기가 ν™œμ„±ν™” 된 μƒνƒœμ—μ„œλ„ 컨텐츠가 μ œλŒ€λ‘œ 보여짐 (μ‚¬λžŒλ“€μ—κ²Œ 광고차단기λ₯Ό λΉ„ν™œμ„±ν™” 해달라고 메세지λ₯Ό μ•Œλ¦΄μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€)

⬆ λͺ©μ°¨λ‘œ


μ›Ήν°νŠΈ

λ…ΈνŠΈ: μ›Ήν°νŠΈλ₯Ό μ‚¬μš©ν•˜λ©΄ μŠ€νƒ€μΌλ§ λ˜μ§€ μ•Šμ€ κΈ€μžλ‚˜ 보이지 μ•ŠλŠ” κΈ€μžλ“€μ΄ 깜빑일 수 μžˆμŠ΅λ‹ˆλ‹€. μ‹€νŒ¨ν–ˆμ„ 경우λ₯Ό λŒ€λΉ„ν•œ λŒ€μ²΄μš© 폰트λ₯Ό ν¬ν•¨ν•˜κ±°λ‚˜, μ›Ήν°νŠΈ λ‘œλ”λ₯Ό ν™œμš©ν•˜μ—¬ μ΄λŸ¬ν•œ λ™μž‘λ“€μ„ μ œμ–΄ν•˜μ„Έμš”.

  • μ›Ήν°νŠΈ 포맷: High WOFF, WOFF2 와 TTFλŠ” λͺ¨λ“  μ΅œμ‹  λΈŒλΌμš°μ €μ—μ„œ 지원됨
  • μ›Ήν°νŠΈ 크기: High λͺ¨λ“  μ’…λ₯˜(이타릭, λ³Όλ“œμ²΄ λ“±λ“±)λ₯Ό ν¬ν•¨ν•œ μ›Ήν°νŠΈ 크기의 총 ν•©κ³„λŠ” 2 MBλ₯Ό λ„˜μ§€ μ•Šλ„λ‘ 함

  • μ›Ήν°νŠΈ λ‘œλ”: Low μ›Ήν°νŠΈ λ‘œλ”λ₯Ό μ΄μš©ν•˜μ—¬ ν°νŠΈκ°€ λ‘œλ”©λ˜λŠ” λ™μž‘μ„ μ œμ–΄ν•˜μ‹œμ˜€

⬆ λͺ©μ°¨λ‘œ

CSS

λ…ΈνŠΈ: λŒ€λ‹€μˆ˜μ˜ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžλ“€μ΄ λ”°λ₯΄λŠ” CSS κ°€μ΄λ“œλΌμΈκ³Ό Sass κ°€μ΄λ“œλΌμΈ 을 μ‚΄νŽ΄λ³΄μ„Έμš”. λ§Œμ•½ λͺ¨λ₯΄λŠ” CSS 속성 값이 μžˆλ‹€λ©΄, CSS 레퍼런슀λ₯Ό μ°Έμ‘°ν•˜κΈΈ λ°”λžλ‹ˆλ‹€. λ˜ν•œ CSS의 일관성을 μœ„ν•œ μ½”λ“œ κ°€μ΄λ“œλ„ 읽어보기 λ°”λžλ‹ˆλ‹€.

  • λ°˜μ‘ν˜• μ›Ή λ””μžμΈ: High μ›Ήμ‚¬μ΄νŠΈκ°€ λ°˜μ‘ν˜•μœΌλ‘œ λ””μžμΈ 됨
  • CSS Print: Medium ν”„λ¦°ν„°κ°€ μ‚¬μš©ν•  print μŠ€νƒ€μΌμ‹œνŠΈ 값이 μ„€μ •λ˜μ—ˆκ³ , 각각의 νŽ˜μ΄μ§€λ§ˆλ‹€ μ˜¬λ°”λ₯΄κ²Œ 섀정됨
  • CSS μ „μ²˜λ¦¬κΈ°: Medium λ””μžμΈμ— CSS μ „μ²˜λ¦¬κΈ°λ₯Ό μ΄μš©ν•¨ (μΆ”μ²œ: Sass).
  • 고유 IDκ°’: High μ—¬λŸ¬ 개의 ID 값이 μ‚¬μš©λœ 경우, 각각의 ID 값은 νŽ˜μ΄μ§€ 내에 κ³ μœ ν•΄μ•Όν•¨
  • Reset CSS: High μ΅œμ‹ μ˜ Reset CSS (reset, normalizeλ‚˜ reboot) 이 μ‚¬μš©λ¨ (Bootstrapμ΄λ‚˜ Foundation 같은 CSS ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•  경우, Normalizeκ°€ 이미 ν¬ν•¨λ˜μ–΄ 있음)
  • JS 접두사: Low js-둜 μ‹œμž‘ν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 파일 λ‚΄μ—μ„œ μ‚¬μš©λ˜λŠ” λͺ¨λ“  ν΄λž˜μŠ€λ‚˜ IDλŠ” CSS νŒŒμΌμ—μ„œ μŠ€νƒ€μΌλ§ λ˜μ§€ μ•Šλ„λ‘ 함
<div id="js-slider" class="my-slider">
<!-- λ˜λŠ” -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • CSS μž„λ² λ”© λ˜λŠ” 인라인: High μ–΄λ– ν•œ κ²½μš°μ—λ„ CSSλ₯Ό 직접 μž„λ² λ”©ν•˜κ±°λ‚˜ 인라인으둜 μ‚¬μš©ν•˜μ§€ λ§ˆμ‹œμ˜€! νƒ€λ‹Ήν•œ μ΄μœ κ°€ μžˆλŠ” κ²½μš°μ—λ§Œ μ‚¬μš©ν•˜μ‹œμ˜€ (예: μŠ¬λΌμ΄λ” λ‚΄μ˜ background-image, λ˜λŠ” CSS critical)
  • 벀더 ν”„λ¦¬ν”½μŠ€: High CSS 벀더 ν”„λ¦¬ν”½μŠ€λ“€μ΄ μ‚¬μš©λ˜μ—ˆκ³  λΈŒλΌμš°μ € 지원 ν˜Έν™˜μ„±μ— 따라 μ•Œλ§žκ²Œ μƒμ„±λ˜μ—ˆλŠ”μ§€ 확인

μ„±λŠ₯

  • 파일 단일화: High CSS νŒŒμΌλ“€μ΄ ν•˜λ‚˜μ˜ CSS 파일둜 단일화 λ˜μ—ˆμŒ (HTTP/2의 κ²½μš°λŠ” μ—¬λŸ¬ 개의 νŒŒμΌμ„ μ‚¬μš©ν•˜λŠ” 것이 더 μ„±λŠ₯에 μ’‹μŒ)
  • μ΅œμ†Œν™”: High λͺ¨λ“  CSS νŒŒμΌλ“€μ΄ μ΅œμ†Œν™” 됨
  • Non-blocking: Medium CSS νŒŒμΌλ“€μ€ DOM이 λ‘œλ”©ν•˜λŠ”λ°μ— λ°©ν•΄κ°€ λ˜μ§€ μ•Šλ„λ‘ λΉ„λ™κΈ°μ μœΌλ‘œ λ‘œλ“œ λ˜μ–΄μ•Ό 함
  • μ‚¬μš©ν•˜μ§€ μ•Šμ€ CSS: Low μ‚¬μš©λ˜μ§€ μ•Šμ€ CSSλŠ” μ œκ±°ν•¨

CSS ν…ŒμŠ€νŠΈ

  • Stylelint: High λͺ¨λ“  CSS와 SCSS νŒŒμΌλ“€μ— μ•„λ¬΄λŸ° μ—λŸ¬κ°€ μ—†λŠ”μ§€ 확인
  • λ°˜μ‘ν˜• μ›Ή λ””μžμΈ: High λͺ¨λ“  νŽ˜μ΄μ§€κ°€ λ‹€μŒ μ§€μ μ—μ„œ ν…ŒμŠ€νŠΈ μ™„λ£Œλ˜μ—ˆμŒ: 320px, 768px, 1024px (κ·Έ μ™Έ 당신이 ν•„μš”ν•œ 크기에 따라 λ‹€λ₯Ό 수 있음)

  • CSS 검사기: Medium CSSκ°€ μ œλŒ€λ‘œ ν…ŒμŠ€νŠΈ λ˜μ—ˆκ³ , 였λ₯˜λ“€μ΄ μ•Œλ§žκ²Œ μˆ˜μ •λ˜μ—ˆμŒ

  • λ°μŠ€ν¬νƒ‘ λΈŒλΌμš°μ €: High λͺ¨λ“  νŽ˜μ΄μ§€κ°€ λͺ¨λ“  ν˜„μ‘΄ν•˜λŠ” λ°μŠ€ν¬νƒ‘ λΈŒλΌμš°μ €μ—μ„œ ν…ŒμŠ€νŠΈ 됨 (Safari, Firefox, Chrome, Internet Explorer, EDGE... λ“±).
  • λͺ¨λ°”일 λΈŒλΌμš°μ €: High λͺ¨λ“  νŽ˜μ΄μ§€κ°€ λͺ¨λ“  ν˜„μ‘΄ν•˜λŠ” λͺ¨λ°”일 λΈŒλΌμš°μ €μ—μ„œ ν…ŒμŠ€νŠΈ 됨 (Native browser, Chrome, Safari... λ“±).
  • 운영체제: High λͺ¨λ“  νŽ˜μ΄μ§€κ°€ λͺ¨λ“  ν˜„μ‘΄ν•˜λŠ” μš΄μ˜μ²΄μ œμ—μ„œ ν…ŒμŠ€νŠΈ 됨 (Windows, Android, iOS, Mac... λ“±).
  • Pixel perfect: High νŽ˜μ΄μ§€κ°€ Pixel perfectν•œ μƒνƒœ(μ›λž˜ μ˜λ„ν–ˆλ˜ λ””μžμΈλŒ€λ‘œ 화면에 보여짐)인가? μ°½μž‘λ¬Όμ— λ”°λΌμ„œ 100% μ •ν™•ν•˜μ§€ μ•Šμ„ μˆ˜λ„ μžˆμ§€λ§Œ, μ˜λ„ν–ˆλ˜ ν…œν”Œλ¦Ώμ— κ°€κΉŒμ›Œμ•Ό 함

Pixel Perfect - Chrome ν™•μž₯도ꡬ

  • κΈ€μž λ°©ν–₯: High λ‹€κ΅­μ–΄λ₯Ό 지원해야 ν•  경우, κΈ€μž λ°©ν–₯에 맞게 λͺ¨λ“  νŽ˜μ΄μ§€κ°€ 정상 λ™μž‘ν•¨ (LTR / RTL)

⬆ λͺ©μ°¨λ‘œ


이미지

λ…ΈνŠΈ: 이미지 μ΅œμ ν™”μ˜ μ™„μ „ν•œ 이해λ₯Ό μœ„ν•΄μ„œλŠ”, Addy Osmaniκ°€ μ“΄ 무료 ebook Essential Image Optimization 을 ν™•μΈν•˜μ„Έμš”.

λͺ¨λ²” 사둀

  • μ΅œμ ν™”: High λͺ¨λ“  이미지가 λΈŒλΌμš°μ €μ— λ Œλ”λ§ 될 수 μžˆλ„λ‘ μ΅œμ ν™” λ˜μ—ˆλ‚˜? ν™ˆνŽ˜μ΄μ§€ 같이 μ„±λŠ₯이 μ€‘μš”ν•œ νŽ˜μ΄μ§€μ—λŠ” WebP 포맷을 μ‚¬μš©ν•  μˆ˜λ„ 있음
  • πŸ›  Imagemin
  • πŸ›  ImageOptimλ₯Ό μ‚¬μš©ν•˜μ—¬ λ‹Ήμ‹ μ˜ 이미지λ₯Ό 무료둜 μ΅œμ ν™”ν•˜μ„Έμš”
  • πŸ›  Kraken.ioλ₯Ό μ‚¬μš©ν•˜μ—¬ png와 jpg을 κ½€λ‚˜ λŒ€λ‹¨ν•˜κ²Œ μ΅œμ ν™” ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 파일 λ‹Ή 1MB에 λŒ€ν•΄μ„œλŠ” λ¬΄λ£Œμž…λ‹ˆλ‹€.
  • Picture/Srcset: Medium picture와 srcset을 μ΄μš©ν•˜μ—¬ μ‚¬μš©μžμ˜ ν˜„μž¬ λ·°ν¬νŠΈμ— κ°€μž₯ μ ν•©ν•œ 이미지λ₯Ό μ œκ³΅ν•˜μ˜€μŒ
  • λ ˆν‹°λ‚˜ λ””μŠ€ν”Œλ ˆμ΄ 지원: Low λ ˆν‹°λ‚˜ λ””μŠ€ν”Œλ ˆμ΄λ₯Ό μ§€μ›ν•˜κΈ° μœ„ν•˜μ—¬ λ‹Ήμ‹ μ˜ ν˜„ λ ˆμ΄μ•„μ›ƒμ— ν•΄λ‹Ήν•˜λŠ” 2λ°°, λ˜λŠ” 3λ°° 이상 큰 이미지λ₯Ό 지원함
  • 이미지 μŠ€ν”„λΌμ΄νŠΈ: Medium μž‘μ€ μ΄λ―Έμ§€μ˜ 경우 μŠ€ν”„λΌμ΄νŠΈ 파일둜 κ΅¬μ„±λ˜μ–΄μ Έ 있음 (μ•„μ΄μ½˜μ˜ 경우, SVG μŠ€ν”„λΌμ΄νŠΈ 이미지 일 μˆ˜λ„ 있음).
  • λ„ˆλΉ„μ™€ 높이: High λͺ¨λ“  <img> νƒœκ·Έμ— λ„ˆλΉ„μ™€ 높이가 μ„€μ •λ˜μ—ˆμŒ (pxμ΄λ‚˜ %둜 μ§€μ •ν•˜μ§€ λ§ˆμ‹œμ˜€)
  • λŒ€μ²΄ ν…μŠ€νŠΈ: High λͺ¨λ“  <img> νƒœκ·Έκ°€ 이미지λ₯Ό 잘 μ„œμˆ ν•˜λŠ” λŒ€μ²΄ ν…μŠ€νŠΈλ₯Ό 가지고 있음 (alt μ†μ„±μœΌλ‘œ λΆ€μ—¬)
  • Lazy λ‘œλ”©: Medium 이미지듀이 lazy λ‘œλ“œ 됨 (μžλ°”μŠ€ν¬λ¦½νŠΈ 미지원에 λŒ€ν•œ μ˜ˆμ™Έμ²˜λ¦¬κ°€ 항상 제곡 λ˜μ–΄μ•Ό 함)

⬆ λͺ©μ°¨λ‘œ


μžλ°”μŠ€ν¬λ¦½νŠΈ

λͺ¨λ²” 사둀

  • 인라인 μžλ°”μŠ€ν¬λ¦½νŠΈ: High HTML μ½”λ“œμ™€ μ„žμ–΄ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό 인라인으둜 ν¬ν•¨ν•˜μ§€ μ•Šλ„λ‘ ν•˜μ‹œμ˜€
  • 파일 단일화: High μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌλ“€μ΄ ν•˜λ‚˜μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ 파일둜 단일화 λ˜μ—ˆμŒ
  • μ΅œμ†Œν™”: High λͺ¨λ“  μžλ°”μŠ€ν¬λ¦½νŠΈ 파일이 μ΅œμ†Œν™” λ˜μ—ˆμŒ(뒀에 .min 접미사λ₯Ό λΆ™μ΄λŠ” 것을 μΆ”μ²œ)
  • μžλ°”μŠ€ν¬λ¦½νŠΈ λ³΄μ•ˆ:
  • noscript νƒœκ·Έ: Medium λΈŒλΌμš°μ € 내에 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ§€μ›ν•˜μ§€ μ•Šκ±°λ‚˜ κΊΌμ Έ μžˆμ„ 경우λ₯Ό κ³ λ €ν•˜μ—¬ HTML 내에 <noscript> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ‹œμ˜€. μ΄λŠ” React.js μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ²˜λŸΌ ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œμ— λ Œλ”λ§μ΄ ꡉμž₯히 무거운 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 경우 ꡉμž₯히 μœ μš©ν•¨. λ‹€μŒμ˜ 예제 λ₯Ό μ‚΄νŽ΄λ³΄μ‹œμ˜€
<noscript>
  이 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ‹€ν–‰μ‹œν‚€κΈ° μœ„ν•΄μ„  μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό ν™œμ„±ν™” μ‹œμΌœμ•Ό ν•©λ‹ˆλ‹€.
</noscript>
  • Non-blocking: Medium JavaScript νŒŒμΌλ“€μ€ async와 defer 속성값을 μ΄μš©ν•˜μ—¬ λΉ„λ™κΈ°μ μœΌλ‘œ λ‘œλ“œ λ˜μ–΄μ•Ό 함
  • Modernizr: Low νŠΉμ •ν•œ κΈ°λŠ₯을 μ§€μΉ­ν•˜κ³  μ‹Άλ‹€λ©΄, μ»€μŠ€ν„°λ§ˆμ΄μ§• 된 Modernizrλ₯Ό μ΄μš©ν•˜μ—¬ <html> νƒœκ·Έ 내에 ν΄λž˜μŠ€λ“€μ„ μΆ”κ°€ν•  수 있음

μžλ°”μŠ€ν¬λ¦½νŠΈ ν…ŒμŠ€νŠΈ

  • ESLint: High ν‘œμ€€ κ·œμΉ™μ΄λ‚˜ λ‹Ήμ‹ μ˜ 섀정에 따라 ESLintλ₯Ό μ—λŸ¬ 없이 톡과함

⬆ λͺ©μ°¨λ‘œ


λ³΄μ•ˆ

λ‹Ήμ‹ μ˜ μ›Ήμ‚¬μ΄νŠΈλ₯Ό 미리 κ²€ν† ν•˜κ³  ν™•μΈν•˜μ„Έμš”

λͺ¨λ²” 사둀

  • HTTPS: Medium νŽ˜μ΄μ§€ 내에 μ‘΄μž¬ν•˜λŠ” λͺ¨λ“  μ™ΈλΆ€ 컨텐츠(ν”ŒλŸ¬κ·ΈμΈ, 이미지...)에 λŒ€ν•΄μ„œλ„ HTTPS κ°€ μ‚¬μš©λ˜μ—ˆμŒ.
  • HTTP Strict Transport Security (HSTS): Medium HTTP 헀더 κ°’μœΌλ‘œ 'Strict-Transport-Security'κ°€ 섀정됨.
  • μ‚¬μ΄νŠΈ κ°„ μš”μ²­ μœ„μ‘°(CSRF; Cross Site Request Forgery): High CSRF 곡격을 λ°©μ§€ν•˜κΈ° μœ„ν•˜μ—¬ μœ„ν•˜μ—¬ λ‹Ήμ‹ μ˜ μ„œλ²„ μͺ½μœΌλ‘œ λ°œμƒν•˜λŠ” λͺ¨λ“  HTTP μš”μ²­μ΄ 합법적이고 λ‹Ήμ‹ μ˜ μ›Ήμ‚¬μ΄νŠΈλ‚˜ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μœΌλ‘œλΆ€ν„° λ°œμƒν•œ κ²ƒμž„μ„ 확신함
  • μ‚¬μ΄νŠΈ κ°„ μŠ€ν¬λ¦½νŒ…(XSS; Cross Site Scripting): High λ‹Ήμ‹ μ˜ νŽ˜μ΄μ§€λ‚˜ μ›Ήμ‚¬μ΄νŠΈκ°€ μ‚¬μ΄νŠΈ κ°„ μŠ€ν¬λ¦½νŒ…μ΄ λ°œμƒν•  여지가 μ „ν˜€ μ—†μŒ
  • Content Type Options: Medium Prevents Google Chrome and Internet Explorer from trying to mime-sniff the content-type of a response away from the one being declared by the server.
  • X-Frame-Options (XFO) Medium 방문자λ₯Ό ν΄λ¦­μž¬ν‚Ή κ³΅κ²©μœΌλ‘œλΆ€ν„° λ³΄ν˜Έν•¨
  • 컨텐츠 λ³΄μ•ˆ μ •μ±…(CSP; Content Security Policy) Medium μ‚¬μ΄νŠΈ λ‚΄μ˜ 컨텐츠가 μ–΄λ–»κ²Œ λ‘œλ”©λ˜κ³ , μ–΄λ””μ„œ λ‘œλ”©λ˜λ„λ‘ ν—ˆκ°€λ°›μ•˜λŠ”μ§€λ₯Ό 확인. 이λ₯Ό μ μš©ν•¨μœΌλ‘œμ¨ ν΄λ¦­μž¬ν‚Ή 곡격을 방지할 수 있음

⬆ λͺ©μ°¨λ‘œ


μ„±λŠ₯

λͺ¨λ²” 사둀

  • νŽ˜μ΄μ§€ μš©λŸ‰: High 각 νŽ˜μ΄μ§€μ˜ μš©λŸ‰μ΄ 500KB μ΄ν•˜μž„
  • μ΅œμ†Œν™”: Medium HTML이 μ΅œμ†Œν™”κ°€ λ˜μ—ˆμŒ
  • Lazy λ‘œλ”©: Medium 이미지, 슀크립트, CSS νŒŒμΌλ“€μ΄ lazy λ‘œλ“œ λ˜μ–΄μ„œ ν˜„ νŽ˜μ΄μ§€μ˜ μ‘λ‹΅μ‹œκ°„μ„ ν–₯μƒμ‹œν‚΄ (각 μ„Ήμ…˜μ˜ μžμ„Έν•œ 뢀뢄을 μ°Έμ‘°ν•˜μ‹œμ˜€).

  • μΏ ν‚€ 크기: μΏ ν‚€λ₯Ό μ‚¬μš©ν•œλ‹€λ©΄, 각 μΏ ν‚€μ˜ 크기가 4096 λ°”μ΄νŠΈλ₯Ό λ„˜μ§€ μ•Šκ³ , 도메인 내에 20개 μ΄μƒμ˜ μΏ ν‚€λ₯Ό 가지지 μ•Šλ„λ‘ μ£Όμ˜ν•˜μ‹œμ˜€

  • μ„œλ“œ νŒŒν‹° μ»΄ν¬λ„ŒνŠΈ: Medium κ³΅μœ ν•˜κΈ° λ²„νŠΌμ²˜λŸΌ μ™ΈλΆ€ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ— μ˜μ‘΄ν•˜λŠ” μ„œλ“œνŒŒν‹° iframeμ΄λ‚˜ μ»΄ν¬λ„ŒνŠΈμ˜ 경우, 가급적 정적인 μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅μ²΄ν•˜μ—¬μ„œ μ™ΈλΆ€ API ν˜ΈμΆœμ„ μ œν•œν•˜κ³  μ‚¬μš©μžλ“€μ˜ ν™œλ™λ“€μ„ μ™ΈλΆ€λ‘œ μœ μΆœλ˜μ§€ μ•Šλ„λ‘ ν•˜μ‹œμ˜€

λ‹€μŒμ— λ°œμƒν•  HTTP μš”μ²­μ„ 미리 μ€€λΉ„ν•˜κΈ°

  • DNS resolution: Low DNS of third-party services that may be needed are resolved in advance during idle time using dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Low DNS lookup, TCP handshake and TLS negotiation with services that will be needed soon is done in advance during idle time using preconnect.
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using prefetch.
<link rel="prefetch" href="image.png">
  • Preloading: Low Resources needed in the current page (e.g. scripts placed at the end of <body>) in advance using preload.
<link rel="preload" href="app.js">

μ„±λŠ₯ ν…ŒμŠ€νŠΈ

  • Google PageSpeed: High ν™ˆνŽ˜μ΄μ§€ 뿐 μ•„λ‹ˆλΌ λͺ¨λ“  νŽ˜μ΄μ§€κ°€ ν…ŒμŠ€νŠΈ μ™„λ£Œ λ˜μ—ˆκ³  μ΅œμ†Œν•œ 100점 만점 90점은 νšλ“ν•˜μ˜€μŒ

⬆ λͺ©μ°¨λ‘œ


μ ‘κ·Όμ„±

λ…ΈνŠΈ: 유튜브의 μž¬μƒ λͺ©λ‘μ„ ν™•μΈν•΄λ³΄μ„Έμš” A11ycasts with Rob Dodson πŸ“Ή

λͺ¨λ²” 사둀

  • Progressive enhancement: Medium 메인 λ„€λΉ„κ²Œμ΄μ…˜μ΄λ‚˜ 검색과 같은 λŒ€λ‹€μˆ˜μ˜ κΈ°λŠ₯듀이 μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μž‘λ™ν•˜μ§€ μ•Šκ³ λ„ λ™μž‘ν•΄μ•Ό 함
  • 색상 λŒ€λΉ„: Medium 색상 λŒ€λΉ„ 기쀀이 μ΅œμ†Œν•œ WCAG AAλ₯Ό 톡과해야 함 (λͺ¨λ°”μΌμ˜ 경우 AAAλ₯Ό 톡과해야 함)

ν—€λ”©

  • H1: High λͺ¨λ“  νŽ˜μ΄μ§€ 내에 μ›Ήμ‚¬μ΄νŠΈμ˜ 타이틀과 λ‹€λ₯Έ H1 νƒœκ·Έκ°€ μ‘΄μž¬ν•΄μ•Ό 함
  • ν—€λ”©: High 헀딩이 μ˜¬λ°”λ₯Έ μˆœμ„œ(H1λΆ€ν„° H6κΉŒμ§€)둜 적절히 μ‚¬μš©λ˜μ–΄μ•Ό 함

λžœλ“œλ§ˆν¬

  • banner μ—­ν• : High <header> νƒœκ·Έκ°€ role="banner" 속성값을 가지고 있음
  • navigation μ—­ν• : High <nav> νƒœκ·Έκ°€ role="navigation" 속성값을 가지고 있음
  • main μ—­ν• : High <main> νƒœκ·Έκ°€ role="main" 속성값을 가지고 있음

μ‹œλ§¨ν‹±

  • νŠΉμ •ν•œ HTML5의 input νƒ€μž…λ“€μ˜ μ‚¬μš©: Medium 이 ν•­λͺ©μ€ 각각 λ‹€λ₯Έ input νƒ€μž…μ— λŒ€ν•˜μ—¬ κ°œλ³„μ μΈ ν‚€νŒ¨λ“œλ‚˜ μœ„μ ―μ„ λ³΄μ—¬μ£ΌλŠ” λͺ¨λ°”일 μž₯μΉ˜λ“€μ— λŒ€ν•΄ 특히 λ”μš± μ€‘μš”ν•¨

폼

  • λ ˆμ΄λΈ”: High λ ˆμ΄λΈ”μ€ 각각의 μž…λ ₯ 폼 μ—˜λ¦¬λ¨ΌνŠΈμ™€ 연관됨. λ ˆμ΄λΈ”μ΄ λ³΄μ—¬μ§ˆ 수 μ—†λŠ” 경우 aria-label 을 λŒ€μ‹  μ‚¬μš©ν•˜μ‹œμ˜€

μ ‘κ·Όμ„± ν…ŒμŠ€νŠΈ

  • μ ‘κ·Όμ„± ν‘œμ€€ ν…ŒμŠ€νŠΈ: High WAVE 도ꡬλ₯Ό μ΄μš©ν•˜μ—¬ λ‹Ήμ‹ μ˜ νŽ˜μ΄μ§€κ°€ μ ‘κ·Όμ„± ν‘œμ€€μ„ λ§Œμ‘±ν•˜μ˜€λŠ”μ§€ ν…ŒμŠ€νŠΈ ν•΄λ³΄μ„Έμš”
  • ν‚€λ³΄λ“œ λ„€λΉ„κ²Œμ΄μ…˜: High ν‚€λ³΄λ“œλ§Œμ„ μ΄μš©ν•˜μ—¬ μ›Ήμ‚¬μ΄νŠΈλ₯Ό 예츑 κ°€λŠ₯ν•˜λ„λ‘ 움직일 수 μžˆλŠ”μ§€ ν…ŒμŠ€νŠΈ ν•˜μ‹œμ˜€. λͺ¨λ“  μΈν„°λž™ν‹°λΈŒ μ—˜λ¦¬λ¨ΌνŠΈλ“€μ€ μ ‘κ·Ό κ°€λŠ₯ν•˜κ³  μ‚¬μš© κ°€λŠ₯ν•΄μ•Ό 함
  • 슀크린 리더: Medium λͺ¨λ“  νŽ˜μ΄μ§€λ“€μ΄ 슀크린 리더 (VoiceOver, ChromeVox, NVDA or Lynx) ν…ŒμŠ€νŠΈλ₯Ό μ™„λ£Œν•¨
  • 포컀슀 μŠ€νƒ€μΌλ§: High 포컀슀 λ˜μ§€ μ•Šμ€ 경우, λˆˆμ— λ³΄μ΄λŠ” μƒνƒœμ˜ CSS둜 λŒ€μ²΄λ˜μ–΄μ•Ό 함

⬆ λͺ©μ°¨λ‘œ


SEO

  • ꡬ글 μ• λ„λ¦¬ν‹±μŠ€: High ꡬ글 μ• λ„λ¦¬ν‹±μŠ€κ°€ μ„€μΉ˜λ˜μ—ˆκ³  μ œλŒ€λ‘œ μ„€μ •λ˜μ—ˆμŒ
  • μ μ ˆν•œ 제λͺ© 배치: Medium 제λͺ©μ€ ν˜„ νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ„ μ΄ν•΄ν•˜λŠ” 데에 도움을 쀌
  • sitemap.xml: High sitemap.xml 파일이 μ‘΄μž¬ν•˜κ³  Google Search Console(μ˜ˆμ „ 이름: Google Webmaster Tools)으둜 μ œμΆœλ˜μ—ˆμŒ
  • robots.txt: High robots.txt 파일이 μ›ΉνŽ˜μ΄μ§€λ₯Ό 블둝킹 ν•˜μ§€ μ•ŠμŒ
  • ꡬ쑰화 된 데이터: High ꡬ쑰화 된 데이터λ₯Ό μ‚¬μš©ν•˜μ—¬ νŽ˜μ΄μ§€κ°€ ν…ŒμŠ€νŠΈλ˜μ—ˆκ³  μ—λŸ¬κ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”κ°€? ꡬ쑰화 된 λ°μ΄ν„°λŠ” μ›Ή ν¬λ‘€λŸ¬κ°€ ν˜„ νŽ˜μ΄μ§€ λ‚΄μ˜ 컨텐츠λ₯Ό μ΄ν•΄ν•˜λŠ” 데에 도움이 됨
  • HTML μ‚¬μ΄νŠΈλ§΅: Medium HTML μ‚¬μ΄νŠΈλ§΅μ΄ μ œκ³΅λ˜μ—ˆμœΌλ©° μ›Ήμ‚¬μ΄νŠΈμ˜ ν‘Έν„° 내에 μ‘΄μž¬ν•˜λŠ” 링크λ₯Ό ν†΅ν•˜μ—¬ 접근이 κ°€λŠ₯함
  • Pagination link tags: Medium Provide rel="prev" and rel="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">

⬆ λͺ©μ°¨λ‘œ


λ²ˆμ—­

ν”„λ‘ νŠΈμ—”λ“œ μ²΄ν¬λ¦¬μŠ€νŠΈλŠ” λ‹€λ₯Έ μ–Έμ–΄λ‘œλ„ 이용 κ°€λŠ₯ν•©λ‹ˆλ‹€. λͺ¨λ“  λ²ˆμ—­μžλ“€κ³Ό κ·Έλ“€μ˜ 멋진 λ…Έλ ₯에 κ°μ‚¬ν•©λ‹ˆλ‹€!


ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트 배지

λ§Œμ•½ 당신이 ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트의 κ·œμΉ™μ„ λ”°λ₯΄κ³  μžˆλ‹€κ³  보여주길 μ›ν•œλ‹€λ©΄, ν•˜λ‹¨μ˜ 배지λ₯Ό 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].

backers

Thank you to all our backers! πŸ™ [Become a backer]

sponsors

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

λΌμ΄μ„ΌμŠ€

CC0

⬆ λͺ©μ°¨λ‘œ