/Front-End-Checklist

πŸ—‚ μ΅œμ‹  μ›Ήμ‚¬μ΄νŠΈμ™€ κΌΌκΌΌν•œ κ°œλ°œμžλ“€μ„ μœ„ν•œ μ™„λ²½ ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트

Creative Commons Zero v1.0 UniversalCC0-1.0

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

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

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

λͺ©μ°¨

Product Hunt에 μΆ”μ²œκ³Ό νˆ¬ν‘œλ₯Ό 톡해 ν”„λ‘ νŠΈμ—”λ“œ 체크리슀트λ₯Ό 널리 μ•Œλ¦¬λŠ”λ° 도움을 μ£Όμ„Έμš”

  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">
  • Title: High λͺ¨λ“  νŽ˜μ΄μ§€μ— title이 μ‚¬μš©λ¨ (SEO κ°€μ΄λ“œ: μ›Ήμ‚¬μ΄νŠΈμ˜ 타이틀을 ν¬ν•¨ν•˜μ—¬ 65개 μ΄ν•˜μ˜ 문자둜 κ΅¬μ„±ν•˜κΈ°)
<!-- λ¬Έμ„œμ˜ 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 속성을 μ‚¬μš©ν•¨ (μ΅œμ†Œν•œ 200x200px의 크기둜 Apple μ•„μ΄μ½˜μ„ μƒμ„±ν•˜λ©΄, ν•„μš”ν•œ λͺ¨λ“  크기의 μ•„μ΄μ½˜μ„ 지원할 수 있음)
<!-- Apple ν„°μΉ˜ μ•„μ΄μ½˜ -->
<link rel="apple-touch-icon" href="/custom-icon.png">
  • μœˆλ„μš° 타일: 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-red.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의 OG 와 Twitter Cards λ₯Ό μ‚¬μš©ν•˜λŠ” 것은 μ–΄λ– ν•œ μ›Ήμ‚¬μ΄νŠΈλ“ μ§€κ°„μ— κΆŒκ³ λ©λ‹ˆλ‹€. 타 μ†Œμ…œλ―Έλ””μ–΄μ˜ νƒœκ·ΈλŠ” νŠΉμ •ν•˜κ²Œ 그듀을 λŒ€μƒμœΌλ‘œ νŽ˜μ΄μ§€λ₯Ό λ…ΈμΆœ ν•˜λ €λŠ” κ²½μš°μ—λŠ” κ³ λ €ν•΄ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

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

Notes: Using use og:image:width and og:image:height will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

<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 You use picture/srcset to provide the most appropriate image for the current viewport of the user.
  • λ ˆν‹°λ‚˜ λ””μŠ€ν”Œλ ˆμ΄ 지원: Low λ ˆν‹°λ‚˜ λ””μŠ€ν”Œλ ˆμ΄λ₯Ό μ§€μ›ν•˜κΈ° μœ„ν•˜μ—¬ λ‹Ήμ‹ μ˜ ν˜„ λ ˆμ΄μ•„μ›ƒμ— ν•΄λ‹Ήν•˜λŠ” 2λ°°, λ˜λŠ” 3λ°° 이상 큰 이미지λ₯Ό 지원함
  • 이미지 μŠ€ν”„λΌμ΄νŠΈ: Medium μž‘μ€ μ΄λ―Έμ§€μ˜ 경우 μŠ€ν”„λΌμ΄νŠΈ 파일둜 κ΅¬μ„±λ˜μ–΄μ Έ 있음 (μ•„μ΄μ½˜μ˜ 경우, SVG μŠ€ν”„λΌμ΄νŠΈ 이미지 일 μˆ˜λ„ 있음).
  • λ„ˆλΉ„μ™€ 높이: High λͺ¨λ“  <img> νƒœκ·Έμ— λ„ˆλΉ„μ™€ 높이가 μ„€μ •λ˜μ—ˆμŒ (pxμ΄λ‚˜ %둜 μ§€μ •ν•˜μ§€ λ§ˆμ‹œμ˜€)
  • λŒ€μ²΄ ν…μŠ€νŠΈ: High λͺ¨λ“  <img> νƒœκ·Έκ°€ 이미지λ₯Ό 잘 μ„œμˆ ν•˜λŠ” λŒ€μ²΄ ν…μŠ€νŠΈλ₯Ό 가지고 있음 (alt μ†μ„±μœΌλ‘œ λΆ€μ—¬)
  • Lazy λ‘œλ”©: Medium 이미지듀이 lazy λ‘œλ“œ 됨 (μžλ°”μŠ€ν¬λ¦½νŠΈ 미지원에 λŒ€ν•œ μ˜ˆμ™Έμ²˜λ¦¬κ°€ 항상 제곡 λ˜μ–΄μ•Ό 함)

⬆ λͺ©μ°¨λ‘œ

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

λͺ¨λ²” 사둀

  • 인라인 μžλ°”μŠ€ν¬λ¦½νŠΈ: High HTML μ½”λ“œμ™€ μ„žμ–΄ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό 인라인으둜 ν¬ν•¨ν•˜μ§€ μ•Šλ„λ‘ ν•˜μ‹œμ˜€
  • 파일 단일화: High μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌλ“€μ΄ ν•˜λ‚˜μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ 파일둜 단일화 λ˜μ—ˆμŒ
  • μ΅œμ†Œν™”: High λͺ¨λ“  μžλ°”μŠ€ν¬λ¦½νŠΈ 파일이 μ΅œμ†Œν™” λ˜μ—ˆμŒ(뒀에 .min 접미사λ₯Ό λΆ™μ΄λŠ” 것을 μΆ”μ²œ)
  • μžλ°”μŠ€ν¬λ¦½νŠΈ λ³΄μ•ˆ:
  • 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 negociation 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 메인 λ„€λΉ„κ²Œμ΄μ…˜μ΄λ‚˜ 검색과 같은 λŒ€λ‹€μˆ˜μ˜ κΈ°λŠ₯듀이 μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μž‘λ™ν•˜μ§€ μ•Šκ³ λ„ λ™μž‘ν•΄μ•Ό 함
  • Color contrast: Medium Color contrast should at least pass WCAG AA (AAA for mobile).

ν—€λ”©

  • 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 μ‚¬μ΄νŠΈλ§΅μ΄ μ œκ³΅λ˜μ—ˆμœΌλ©° μ›Ήμ‚¬μ΄νŠΈμ˜ ν‘Έν„° 내에 μ‘΄μž¬ν•˜λŠ” 링크λ₯Ό ν†΅ν•˜μ—¬ 접근이 κ°€λŠ₯함

⬆ λͺ©μ°¨λ‘œ

λ²ˆμ—­

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

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

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

Contributors

Check out all the super awesome contributors.

Support

μ§ˆλ¬Έμ΄λ‚˜ μ œμ•ˆμ΄ μžˆλ‹€λ©΄, μ£Όμ €ν•˜μ§€ 말고 Gitterλ‚˜ Twitterλ₯Ό μ΄μš©ν•˜μ„Έμš”:

μ €μž

David Dias

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

CC0

⬆ λͺ©μ°¨λ‘œ