Skip to content

๐Ÿ—‚ ์ตœ์‹  ์›น์‚ฌ์ดํŠธ์™€ ๊ผผ๊ผผํ•œ ๊ฐœ๋ฐœ์ž๋“ค์„ ์œ„ํ•œ ์™„๋ฒฝ ํ”„๋ก ํŠธ์—”๋“œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ

License

Notifications You must be signed in to change notification settings

kesuskim/Front-End-Checklist

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


Front-End Checklist

ย  Front-End Checklist ย 

ํ”„๋ก ํŠธ์—”๋“œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋Š” ๋‹น์‹ ์˜ HTML ์‚ฌ์ดํŠธ ๋˜๋Š” ํŽ˜์ด์ง€๋ฅผ ํ”„๋กœ๋•์…˜์œผ๋กœ ๋Ÿฐ์นญํ•˜๊ธฐ ์ด์ „์— ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ• , ๋˜ํ•œ ํ…Œ์ŠคํŠธ ๋˜์–ด์•ผ ํ•  ์ „๋ฐ˜์ ์ธ ์š”์†Œ๋“ค์˜ ์ง‘ํ•ฉ์ž…๋‹ˆ๋‹ค.

PRs Welcome Contributors Frontโ€‘End_Checklist followed CC0

How To Use โ€ข Contributing โ€ข Website โ€ข Product Hunt

Other Checklists:
๐ŸŽฎ Front-End Performance Checklist โ€ข ๐Ÿ’Ž Front-End Design Checklist

์ด ๋ฆฌ์ŠคํŠธ๋Š” ๋‹ค๋…„๊ฐ„์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์˜ ๊ฒฝํ—˜์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์œผ๋ฉฐ, ๋ช‡๋ช‡ ํ•ญ๋ชฉ๋“ค์€ ํƒ€ ์˜คํ”ˆ์†Œ์Šค ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋“ค์˜ ์ฐธ๊ณ ๋ฅผ ํ†ตํ•ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ชฉ์ฐจ

  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

๋‹ค์Œ 2๊ฐœ์˜ ๋ฉ”ํƒ€ ํƒœ๊ทธ(Charset and Viewport)๋“ค์€ ๋‹ค๋ฅธ ์š”์†Œ๋“ค์— ๋น„ํ•ด head ์•ˆ์—์„œ๋„ ์ƒ๋‹จ์— ์œ„์น˜ํ•ด์•ผ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.

  • Charset: High ๋ฌธ์ž์ง‘ํ•ฉ(UTF-8)์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์„ ์–ธ๋จ
<!-- ์ด ๋ฌธ์„œ์— ๋Œ€ํ•œ ๋ฌธ์ž ์ธ์ฝ”๋”ฉ์„ ์„ค์ • -->
<meta charset="utf-8">
  • 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๊ฐœ ์ดํ•˜์˜ ๋ฌธ์ž)">
  • ํŒŒ๋น„์ฝ˜: Medium ๊ฐ๊ฐ์˜ ํŒŒ๋น„์ฝ˜์ด ์ œ๋Œ€๋กœ ์ƒ์„ฑ๋˜์—ˆ๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ณด์—ฌ์ง€๋Š”๊ฐ€? ๋งŒ์•ฝ favicon.ico ํŒŒ์ผ๋งŒ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด, ํ•ด๋‹น ๋‚ด์šฉ์„ ํŽ˜์ด์ง€์˜ ์ƒ๋‹จ๋ถ€์— ์ถ”๊ฐ€ํ•˜๋ผ. ์ผ๋ฐ˜์ ์œผ๋กœ๋Š” ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๋Š” ์—†์ง€๋งŒ, ์•„๋ž˜์˜ ์˜ˆ์‹œ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ์Šต๊ด€์ž„. ์˜ค๋Š˜๋‚ ์—๋Š” .ico ํฌ๋งท๋ณด๋‹ค PNG ํฌ๋งท์˜ ์•„์ด์ฝ˜ ์‚ฌ์šฉ์„ ์ถ”์ฒœํ•จ(ํฌ๊ธฐ: 32x32px).
<!-- ํ‘œ์ค€ ํŒŒ๋น„์ฝ˜ -->
<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 ์›น ์•ฑ ๋ฉ”ํƒ€ ํƒœ๊ทธ ์„ค์ •: Low Apple ์˜ ๋ฉ”ํƒ€ ํƒœ๊ทธ๊ฐ€ ์ œ๋Œ€๋กœ ์„ค์ •๋˜์—ˆ์Œ
<!-- 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">
  • ์œˆ๋„์šฐ ํƒ€์ผ: Low ์œˆ๋„์šฐ์˜ ํƒ€์ผ ๊ด€๋ จ ์ •๋ณด๋ฅผ ์„ค์ •ํ•˜์˜€๊ณ  ์ œ๋Œ€๋กœ ์—ฐ๊ฒฐํ•˜์˜€์Œ
<!-- 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">
  • x-default: Low ์šด์˜ํ•˜์ง€ ์•Š๋Š” ์–ธ์–ด์˜ ์‚ฌ์šฉ์ž๊ฐ€ ๋“ค์–ด์˜ฌ ๊ฒฝ์šฐ๋ฅผ ์œ„ํ•ด ๋””ํดํŠธ ํŽ˜์ด์ง€๋ฅผ ์ •ํ•ด์ฃผ๋Š” ์†์„ฑ
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
  • ์กฐ๊ฑด๋ถ€ ์ฃผ์„: 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> ๋‚ด์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋ณด๋‹ค ์ด์ „์— ๋กœ๋”ฉ์ด ์™„๋ฃŒ๋จ (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋กœ๋”ฉ๋˜๋Š” ํŠน์ •ํ•œ ๊ฒฝ์šฐ๋Š” ์ œ์™ธํ•จ).

์†Œ์…œ๋ฏธ๋””์–ด ๊ด€๋ จ ๋ฉ”ํƒ€ ํƒœ๊ทธ

Meta Tags ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฉ”ํƒ€ ํƒœ๊ทธ๋ฅผ ์‹œ๊ฐํ™”ํ•˜๊ณ  ์ƒ์„ฑํ•˜์„ธ์š”.

๊ธฐ๋ณธ์ ์œผ๋กœ Facebook ์˜ Open Graph ์™€ Twitter ์˜ Card ๋Š” ๋ฐ˜๋“œ์‹œ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์†Œ์…œ๋ฏธ๋””์–ด ํƒœ๊ทธ๋“ค์€ ํŠน์ •ํ•œ ์ƒ๋Œ€๋ฅผ ๋Œ€์ƒ์œผ๋กœ ํ•  ๊ฒฝ์šฐ์— ๊ณ ๋ คํ•ด๋ณด์„ธ์š”.

  • 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="์ œ๋ชฉ">
<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">
  • 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="์ œ๋ชฉ">
<meta name="twitter:description" content="๋‚ด์šฉ์— ๋Œ€ํ•œ ์„ค๋ช…. 200์ž ๋ฏธ๋งŒ์ด์–ด์•ผ ํ•จ.">
<meta name="twitter:image" content="https://example.com/image.jpg">

โฌ† ๋ชฉ์ฐจ๋กœ


HTML

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • HTML5 ์‹œ๋งจํ‹ฑ ์—˜๋ฆฌ๋จผํŠธ: High HTML5์˜ ์‹œ๋งจํ‹ฑ ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ์ ์ ˆํžˆ ์‚ฌ์šฉ๋จ (header, section, footer, main... ๋“ฑ).
  • ์—๋Ÿฌ ํŽ˜์ด์ง€: High ์—๋Ÿฌ๋ฅผ ์œ„ํ•œ 404 ํŽ˜์ด์ง€์™€ 5xx ํŽ˜์ด์ง€๊ฐ€ ์กด์žฌํ•˜๋Š”๊ฐ€? 5xx ํŽ˜์ด์ง€๋Š” ์„œ๋ฒ„ ์—๋Ÿฌ์ด๊ธฐ ๋•Œ๋ฌธ์—, ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ์˜ ๋ณ„๋„์˜ ์ถ”๊ฐ€์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†ก๋ฐ›์ง€ ์•Š๊ณ  ๋…๋ฆฝ์ ์ธ ์ž์ฒด CSS๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์•ผ ํ•จ์„ ๊ธฐ์–ตํ•จ

  • Noopener: Medium ์™ธ๋ถ€ ๋งํฌ๋ฅผ target="_blank"๋ฅผ ์ด์šฉํ•˜์—ฌ ์—ฐ ๊ฒฝ์šฐ, tab nabbing ํ”ผ์‹ฑ ๊ณต๊ฒฉ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ rel="noopener" ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ํ•จ. ๋งŒ์•ฝ Firefox ์˜› ๋ฒ„์ „์„ ์ง€์›ํ•ด์•ผ๋งŒ ํ•œ๋‹ค๋ฉด, rel="noopener noreferrer" ์„ ์‚ฌ์šฉํ•จ

  • ์ฃผ์„ ์ง€์šฐ๊ธฐ: Low ์›น์‚ฌ์ดํŠธ๋ฅผ ํ”„๋กœ๋•์…˜ ํ•˜๊ธฐ ์ด์ „์— ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๋Š” ์ œ๊ฑฐํ•˜์˜€๋Š”์ง€, ์ฃผ์„์€ ์ œ๊ฑฐํ•˜์˜€๋Š”์ง€ ์ ๊ฒ€ํ•จ

HTML testing

  • W3C ๊ทœ๊ฒฉ: High ํŽ˜์ด์ง€ ๋‚ด์˜ ๋ชจ๋“  HTML ์ด ํ‘œ์ค€์— ๋งž๊ฒŒ ์ •์ƒ์ ์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ๋Š”์ง€ W3C ์˜ validator๋ฅผ ์ด์šฉํ•˜์—ฌ ํ…Œ์ŠคํŠธ ํ•จ
  • HTML Lint: High Lint ๋„๊ตฌ๋ฅผ ์ด์šฉํ•˜์—ฌ 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 ์ „์ฒ˜๋ฆฌ๊ธฐ: Low ๋””์ž์ธ์— CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์ด์šฉํ•จ (์ถ”์ฒœ: Sass, Less, Stylus).
  • ๊ณ ์œ  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, ํ˜น์€ critical CSS)
  • ๋ฒค๋” ํ”„๋ฆฌํ”ฝ์Šค: High CSS ๋ฒค๋” ํ”„๋ฆฌํ”ฝ์Šค๋“ค์ด ์‚ฌ์šฉ๋˜์—ˆ๊ณ  ๋ธŒ๋ผ์šฐ์ € ์ง€์› ํ˜ธํ™˜์„ฑ์— ๋”ฐ๋ผ ์•Œ๋งž๊ฒŒ ์ƒ์„ฑ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ

์„ฑ๋Šฅ

  • ํŒŒ์ผ ๋‹จ์ผํ™”: High CSS ํŒŒ์ผ๋“ค์ด ํ•˜๋‚˜์˜ CSS ํŒŒ์ผ๋กœ ๋‹จ์ผํ™” ๋˜์—ˆ์Œ (HTTP/2์˜ ๊ฒฝ์šฐ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์„ฑ๋Šฅ์— ์ข‹์Œ)
  • ์ตœ์†Œํ™”: High ๋ชจ๋“  CSS ํŒŒ์ผ๋“ค์ด ์ตœ์†Œํ™” ๋จ
  • ๋…ผ ๋ธ”๋กœํ‚น: Medium CSS ํŒŒ์ผ๋“ค์€ DOM์ด ๋กœ๋”ฉํ•˜๋Š”๋ฐ์— ๋ฐฉํ•ด๊ฐ€ ๋˜์ง€ ์•Š๋„๋ก ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋กœ๋“œ ๋˜์–ด์•ผ ํ•จ
  • ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ CSS: Low ์‚ฌ์šฉ๋˜์ง€ ์•Š์€ CSS๋Š” ์ œ๊ฑฐํ•จ

CSS ํ…Œ์ŠคํŠธ

  • Stylelint: High ๋ชจ๋“  CSS์™€ SCSS ํŒŒ์ผ๋“ค์— ์•„๋ฌด๋Ÿฐ ์—๋Ÿฌ๊ฐ€ ์—†๋Š”์ง€ ํ™•์ธ
  • ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ: High ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ ๋‹ค์Œ ์ง€์ ์—์„œ ํ…Œ์ŠคํŠธ ์™„๋ฃŒ๋˜์—ˆ์Œ: 320px, 768px, 1024px (๊ทธ ์™ธ ๋‹น์‹ ์ด ํ•„์š”ํ•œ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Œ)

    Responsive Checker -

  • CSS ๊ฒ€์‚ฌ๊ธฐ: Medium CSS๊ฐ€ ์ œ๋Œ€๋กœ ํ…Œ์ŠคํŠธ ๋˜์—ˆ๊ณ , ์˜ค๋ฅ˜๋“ค์ด ์•Œ๋งž๊ฒŒ ์ˆ˜์ •๋˜์—ˆ์Œ
  • ๋ฐ์Šคํฌํƒ‘ ๋ธŒ๋ผ์šฐ์ €: High ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ ๋ชจ๋“  ํ˜„์กดํ•˜๋Š” ๋ฐ์Šคํฌํƒ‘ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ…Œ์ŠคํŠธ ๋จ (Safari, Firefox, Chrome, Internet Explorer, EDGE... ๋“ฑ).
  • ๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ €: High ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ ๋ชจ๋“  ํ˜„์กดํ•˜๋Š” ๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ…Œ์ŠคํŠธ ๋จ (Native browser, Chrome, Safari... ๋“ฑ).
  • ์šด์˜์ฒด์ œ: High ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ ๋ชจ๋“  ํ˜„์กดํ•˜๋Š” ์šด์˜์ฒด์ œ์—์„œ ํ…Œ์ŠคํŠธ ๋จ (Windows, Android, iOS, Mac... ๋“ฑ).
  • ๋””์ž์ธ๊ณผ์˜ ์ •ํ™•๋„: Low ํ”„๋กœ์ ํŠธ์— ๋”ฐ๋ผ ์›๋ž˜ ์˜๋„ํ–ˆ๋˜ ๋””์ž์ธ๋Œ€๋กœ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š”์ง€ ์ •ํ™•๋„๊ฐ€ ์š”๊ตฌ๋  ์ˆ˜ ์žˆ์Œ. ๋„๊ตฌ๋“ค์„ ์‚ฌ์šฉํ•ด์„œ ์‹คํ–‰๋œ ์ฝ”๋“œ์™€ ๋น„๊ตํ•˜๊ณ  ์ผ๊ด€์„ฑ์„ ์œ ์ง€.

Pixel Perfect - Chrome ํ™•์žฅ๋„๊ตฌ

  • ๊ธ€์ž ๋ฐฉํ–ฅ: High ๋‹ค๊ตญ์–ด๋ฅผ ์ง€์›ํ•ด์•ผ ํ•  ๊ฒฝ์šฐ, ๊ธ€์ž ๋ฐฉํ–ฅ์— ๋งž๊ฒŒ ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ ์ •์ƒ ๋™์ž‘ํ•จ (LTR / RTL)

โฌ† ๋ชฉ์ฐจ๋กœ


์ด๋ฏธ์ง€

๋…ธํŠธ: ์ด๋ฏธ์ง€ ์ตœ์ ํ™”์˜ ์™„์ „ํ•œ ์ดํ•ด๋ฅผ ์œ„ํ•ด์„œ๋Š”, Addy Osmani๊ฐ€ ์“ด ๋ฌด๋ฃŒ ebook Essential Image Optimization ์„ ํ™•์ธํ•˜์„ธ์š”.

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • ์ตœ์ ํ™”: High ๋ชจ๋“  ์ด๋ฏธ์ง€๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์— ๋ Œ๋”๋ง ๋  ์ˆ˜ ์žˆ๋„๋ก ์ตœ์ ํ™” ๋˜์—ˆ๋‚˜? ํ™ˆํŽ˜์ด์ง€ ๊ฐ™์ด ์„ฑ๋Šฅ์ด ์ค‘์š”ํ•œ ํŽ˜์ด์ง€์—๋Š” WebP ํฌ๋งท์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Œ
  • ๐Ÿ›  Imagemin
  • ๐Ÿ›  ImageOptim๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹น์‹ ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ฌด๋ฃŒ๋กœ ์ตœ์ ํ™”ํ•˜์„ธ์š”
  • ๐Ÿ›  Kraken.io๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ png์™€ jpg์„ ๊ฝค๋‚˜ ๋Œ€๋‹จํ•˜๊ฒŒ ์ตœ์ ํ™” ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ ๋‹น 1MB์— ๋Œ€ํ•ด์„œ๋Š” ๋ฌด๋ฃŒ์ž…๋‹ˆ๋‹ค.
  • ๐Ÿ›  KeyCDN Image Processing ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”
  • ๐Ÿ›  TinyPNG png, apng (animated png), jpg images๋ฅผ ๋ฌด์†์‹ค ์ตœ์ ํ™” ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌด๋ฃŒ ๋ฒ„์ „๊ณผ ์œ ๋ฃŒ ๋ฒ„์ „์ด ์กด์žฌ
  • ๐Ÿ›  SVGO SVG ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ ํŒŒ์ผ๋“ค์„ ์ตœ์ ํ™”ํ•˜๋Š” Nodejs ๊ธฐ๋ฐ˜ ๋„๊ตฌ
  • ๐Ÿ›  SVGOMG SVGO์˜ ์›น ๋ฒ„์ „
  • Picture/Srcset: Medium picture์™€ srcset์„ ์ด์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ํ˜„์žฌ ๋ทฐํฌํŠธ์— ๊ฐ€์žฅ ์ ํ•ฉํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ œ๊ณตํ•˜์˜€์Œ
  • ๋ ˆํ‹ฐ๋‚˜ ๋””์Šคํ”Œ๋ ˆ์ด ์ง€์›: Low ๋ ˆํ‹ฐ๋‚˜ ๋””์Šคํ”Œ๋ ˆ์ด๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ๋‹น์‹ ์˜ ํ˜„ ๋ ˆ์ด์•„์›ƒ์— ํ•ด๋‹นํ•˜๋Š” 2๋ฐฐ, ๋˜๋Š” 3๋ฐฐ ์ด์ƒ ํฐ ์ด๋ฏธ์ง€๋ฅผ ์ง€์›ํ•จ
  • ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ: Medium ์ž‘์€ ์ด๋ฏธ์ง€์˜ ๊ฒฝ์šฐ ์Šคํ”„๋ผ์ดํŠธ ํŒŒ์ผ๋กœ ๊ตฌ์„ฑ๋˜์–ด์ ธ ์žˆ์Œ (์•„์ด์ฝ˜์˜ ๊ฒฝ์šฐ, SVG ์Šคํ”„๋ผ์ดํŠธ ์ด๋ฏธ์ง€ ์ผ ์ˆ˜๋„ ์žˆ์Œ)
  • ๋„ˆ๋น„์™€ ๋†’์ด: High ๋ชจ๋“  <img> ํƒœ๊ทธ์— ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ์„ค์ •๋˜์—ˆ์Œ (px์ด๋‚˜ %๋กœ ์ง€์ •ํ•˜์ง€ ๋งˆ์‹œ์˜ค)
  • ๋Œ€์ฒด ํ…์ŠคํŠธ: High ๋ชจ๋“  <img> ํƒœ๊ทธ๊ฐ€ ์ด๋ฏธ์ง€๋ฅผ ์ž˜ ์„œ์ˆ ํ•˜๋Š” ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Œ (alt ์†์„ฑ์œผ๋กœ ๋ถ€์—ฌ)
  • Lazy ๋กœ๋”ฉ: Medium ์ด๋ฏธ์ง€๋“ค์ด lazy ๋กœ๋“œ ๋จ (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฏธ์ง€์›์— ๋Œ€ํ•œ ์˜ˆ์™ธ์ฒ˜๋ฆฌ๊ฐ€ ํ•ญ์ƒ ์ œ๊ณต ๋˜์–ด์•ผ ํ•จ)

โฌ† ๋ชฉ์ฐจ๋กœ


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • ์ธ๋ผ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ: High HTML ์ฝ”๋“œ์™€ ์„ž์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ธ๋ผ์ธ์œผ๋กœ ํฌํ•จํ•˜์ง€ ์•Š๋„๋ก ํ•˜์‹œ์˜ค
  • ํŒŒ์ผ ๋‹จ์ผํ™”: High ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋“ค์ด ํ•˜๋‚˜์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋กœ ๋‹จ์ผํ™” ๋˜์—ˆ์Œ
  • ์ตœ์†Œํ™”: High ๋ชจ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ์ตœ์†Œํ™” ๋˜์—ˆ์Œ(๋’ค์— .min ์ ‘๋ฏธ์‚ฌ๋ฅผ ๋ถ™์ด๋Š” ๊ฒƒ์„ ์ถ”์ฒœ)
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณด์•ˆ: High
  • noscript ํƒœ๊ทธ: Medium ๋ธŒ๋ผ์šฐ์ € ๋‚ด์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ๊บผ์ ธ ์žˆ์„ ๊ฒฝ์šฐ๋ฅผ ๊ณ ๋ คํ•˜์—ฌ HTML ๋‚ด์— <noscript> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์‹œ์˜ค. ์ด๋Š” React.js ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ฒ˜๋Ÿผ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์— ๋ Œ๋”๋ง์ด ๊ต‰์žฅํžˆ ๋ฌด๊ฑฐ์šด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ฒฝ์šฐ ๊ต‰์žฅํžˆ ์œ ์šฉํ•จ. ๋‹ค์Œ์˜ ์˜ˆ์ œ ๋ฅผ ์‚ดํŽด๋ณด์‹œ์˜ค
<noscript>
  ์ด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹คํ–‰์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์„ฑํ™” ์‹œ์ผœ์•ผ ํ•ฉ๋‹ˆ๋‹ค.
</noscript>
  • ๋…ผ ๋ธ”๋กœํ‚น: Medium JavaScript ํŒŒ์ผ๋“ค์€ async์™€ defer ์†์„ฑ๊ฐ’์„ ์ด์šฉํ•˜์—ฌ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋กœ๋“œ ๋˜์–ด์•ผ ํ•จ
  • ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉํ•˜๊ธฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์ ํ™”ํ•˜๊ธฐ: Medium ํ”„๋กœ์ ํŠธ ๋‚ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์ˆ˜์ ์ธ ๊ฒƒ๋“ค์ž„ (๊ฐ„๋‹จํ•œ ๊ธฐ๋Šฅ๋“ค์— ๋Œ€ํ•ด์„œ๋Š” ๊ธฐ๋ณธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋งŒ์„ ์“ฐ๋„๋ก ํ•˜์ž). ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ–ˆ์œผ๋ฉฐ, ํ•˜๋‚˜์˜ ์ž‘์€ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ณผ๋„ํ•˜๊ฒŒ ํฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š์Œ (๊ฐ€๋ น debounce ํ•˜๋‚˜๋ฅผ ์“ฐ๊ธฐ ์œ„ํ•ด lodash ์ „์ฒด๋ฅผ ํฌํ•จํ•˜์ง€ ๋ง๊ธฐ)
  • Modernizr: Low ํŠน์ •ํ•œ ๊ธฐ๋Šฅ์„ ์ง€์นญํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๋œ Modernizr๋ฅผ ์ด์šฉํ•˜์—ฌ <html> ํƒœ๊ทธ ๋‚ด์— ํด๋ž˜์Šค๋“ค์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ…Œ์ŠคํŠธ

  • ESLint: High ํ‘œ์ค€ ๊ทœ์น™์ด๋‚˜ ๋‹น์‹ ์˜ ์„ค์ •์— ๋”ฐ๋ผ ESLint๋ฅผ ์—๋Ÿฌ ์—†์ด ํ†ต๊ณผํ•จ

โฌ† ๋ชฉ์ฐจ๋กœ


๋ณด์•ˆ

๋‹น์‹ ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฏธ๋ฆฌ ๊ฒ€ํ† ํ•˜๊ณ  ํ™•์ธํ•˜์„ธ์š”

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • HTTPS: High ํŽ˜์ด์ง€ ๋‚ด์— ์กด์žฌํ•˜๋Š” ๋ชจ๋“  ์™ธ๋ถ€ ์ปจํ…์ธ (ํ”Œ๋Ÿฌ๊ทธ์ธ, ์ด๋ฏธ์ง€...)์— ๋Œ€ํ•ด์„œ๋„ 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 ์„œ๋ฒ„์—์„œ ์„ค์ •ํ•œ ํƒ€์ž…๊ณผ ๋‹ค๋ฅธ ์‘๋‹ต์ด ์˜ฌ ๊ฒฝ์šฐ mime-sniffing์„ ํ•˜์ง€ ์•Š๋„๋ก ํ•จ
  • X-Frame-Options (XFO) Medium ๋ฐฉ๋ฌธ์ž๋ฅผ ํด๋ฆญ์žฌํ‚น ๊ณต๊ฒฉ์œผ๋กœ๋ถ€ํ„ฐ ๋ณดํ˜ธํ•จ
  • ์ปจํ…์ธ  ๋ณด์•ˆ ์ •์ฑ…(CSP; Content Security Policy) Medium ์‚ฌ์ดํŠธ ๋‚ด์˜ ์ปจํ…์ธ ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋กœ๋”ฉ๋˜๊ณ , ์–ด๋””์„œ ๋กœ๋”ฉ๋˜๋„๋ก ํ—ˆ๊ฐ€๋ฐ›์•˜๋Š”์ง€๋ฅผ ํ™•์ธ. ์ด๋ฅผ ์ ์šฉํ•จ์œผ๋กœ์จ ํด๋ฆญ์žฌํ‚น ๊ณต๊ฒฉ์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Œ

โฌ† ๋ชฉ์ฐจ๋กœ


์„ฑ๋Šฅ

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • ์„ฑ์ทจ ๋ชฉํ‘œ: Medium ํŽ˜์ด์ง€๊ฐ€ ์ด ๋ชฉํ‘œ์— ๋„๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ:
    • First Meaningful Paint (์‚ฌ์šฉ์ž์—๊ฒŒ ์˜๋ฏธ ์žˆ๋Š” ์ปจํ…์ธ ๊ฐ€ ๊ทธ๋ ค์ง€๋Š” ์ฒซ ์ˆœ๊ฐ„)์€ 1์ดˆ ์ดํ•˜์—ฌ์•ผ ํ•œ๋‹ค
    • 3G ๋„คํŠธ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ €๊ฐ€ํ˜• ์•ˆ๋“œ๋กœ์ด๋“œ ํฐ, 400kbps ์ „์†ก ์†๋„์™€ 400ms ์˜ ๋„คํŠธ์›Œํฌ ๋Œ€๊ธฐ ์‹œ๊ฐ„ ๊ธฐ์ค€์œผ๋กœ, ํŽ˜์ด์ง€๊ฐ€ ํ™œ์„ฑํ™” ๋˜๊ธฐ๊นŒ์ง€์˜ ์‘๋‹ต ์†๋„๋Š” ์ตœ๋Œ€ 5์ดˆ ์ดํ•˜์—ฌ์•ผ ํ•˜๋ฉฐ, ์žฌ์ ‘์†์˜ ๊ฒฝ์šฐ ์ตœ๋Œ€ 2์ดˆ ์ดํ•˜์—ฌ์•ผ ํ•จ
    • ํ•ต์‹ฌ์ ์ธ ํŒŒ์ผ๋“ค์€ GZIP ์••์ถ• ์‹œ 170Kb ์ดํ•˜์—ฌ์•ผ ํ•จ
  • ์ตœ์†Œํ™”: Medium HTML์ด ์ตœ์†Œํ™”๊ฐ€ ๋˜์—ˆ์Œ
  • Lazy ๋กœ๋”ฉ: Medium ์ด๋ฏธ์ง€, ์Šคํฌ๋ฆฝํŠธ, CSS ํŒŒ์ผ๋“ค์ด lazy ๋กœ๋“œ ๋˜์–ด์„œ ํ˜„ ํŽ˜์ด์ง€์˜ ์‘๋‹ต์‹œ๊ฐ„์„ ํ–ฅ์ƒ์‹œํ‚ด (๊ฐ ์„น์…˜์˜ ์ž์„ธํ•œ ๋ถ€๋ถ„์„ ์ฐธ์กฐํ•˜์‹œ์˜ค)

  • ์ฟ ํ‚ค ํฌ๊ธฐ: ์ฟ ํ‚ค๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ๊ฐ ์ฟ ํ‚ค์˜ ํฌ๊ธฐ๊ฐ€ 4096 ๋ฐ”์ดํŠธ๋ฅผ ๋„˜์ง€ ์•Š๊ณ , ๋„๋ฉ”์ธ ๋‚ด์— 20๊ฐœ ์ด์ƒ์˜ ์ฟ ํ‚ค๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์‹œ์˜ค

  • ์„œ๋“œ ํŒŒํ‹ฐ ์ปดํฌ๋„ŒํŠธ: Medium ๊ณต์œ ํ•˜๊ธฐ ๋ฒ„ํŠผ์ฒ˜๋Ÿผ ์™ธ๋ถ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์— ์˜์กดํ•˜๋Š” ์„œ๋“œํŒŒํ‹ฐ iframe์ด๋‚˜ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฝ์šฐ, ๊ฐ€๊ธ‰์  ์ •์ ์ธ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ต์ฒดํ•˜์—ฌ์„œ ์™ธ๋ถ€ API ํ˜ธ์ถœ์„ ์ œํ•œํ•˜๊ณ  ์‚ฌ์šฉ์ž๋“ค์˜ ํ™œ๋™๋“ค์„ ์™ธ๋ถ€๋กœ ์œ ์ถœ๋˜์ง€ ์•Š๋„๋ก ํ•˜์‹œ์˜ค

๋‹ค์Œ์— ๋ฐœ์ƒํ•  HTTP ์š”์ฒญ์„ ๋ฏธ๋ฆฌ ์ค€๋น„ํ•˜๊ธฐ

  • DNS resolution: Low dns-prefetch ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋“œํŒŒํ‹ฐ ์„œ๋น„์Šค์˜ DNS ๊ฐ€ ์œ ํœด ์‹œ๊ฐ„์— ๋ฏธ๋ฆฌ resolve ๋˜๋„๋ก ํ•จ
<link rel="dns-prefetch" href="https://example.com">
  • Preconnect: Low preconnect ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ”๋กœ ํ•„์š”ํ•œ ์„œ๋น„์Šค์˜ DNS ์˜ ๋ฃฉ์—…, TCP ํ•ธ๋“œ์…ฐ์ดํฌ์™€ TLS ํ˜‘์ƒ์„ ์œ ํœด ์‹œ๊ฐ„์— ๋ฏธ๋ฆฌ ์ฒ˜๋ฆฌํ•˜๋„๋ก ํ•จ
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low prefetch ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ”๋กœ ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋“ค(์˜ˆ์‹œ: ๋ ˆ์ด์ง€ ๋กœ๋“œ ๋˜๋Š” ์ด๋ฏธ์ง€) ์„ ์œ ํœด ์‹œ๊ฐ„์— ๋ฏธ๋ฆฌ ์š”์ฒญํ•˜๋„๋ก ํ•จ
<link rel="prefetch" href="image.png">
  • Preloading: Low preload ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ ํœด ์‹œ๊ฐ„์— ํ˜„์žฌ ํŽ˜์ด์ง€ ๋‚ด์— ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋“ค (์˜ˆ์‹œ: body ํ•˜๋‹จ์— ์œ„์น˜ํ•˜๊ณ  ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋“ค) ์„ ์œ ํœด ์‹œ๊ฐ„์— ๋ฏธ๋ฆฌ ์š”์ฒญํ•˜๋„๋ก ํ•จ
<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๊นŒ์ง€)๋กœ ์ ์ ˆํžˆ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•จ

์‹œ๋งจํ‹ฑ

  • ํŠน์ •ํ•œ HTML5์˜ input ํƒ€์ž…๋“ค์˜ ์‚ฌ์šฉ: Medium ์ด ํ•ญ๋ชฉ์€ ๊ฐ๊ฐ ๋‹ค๋ฅธ input ํƒ€์ž…์— ๋Œ€ํ•˜์—ฌ ๊ฐœ๋ณ„์ ์ธ ํ‚คํŒจ๋“œ๋‚˜ ์œ„์ ฏ์„ ๋ณด์—ฌ์ฃผ๋Š” ๋ชจ๋ฐ”์ผ ์žฅ์น˜๋“ค์— ๋Œ€ํ•ด ํŠนํžˆ ๋”์šฑ ์ค‘์š”ํ•จ

ํผ

  • ๋ ˆ์ด๋ธ”: High ๋ ˆ์ด๋ธ”์€ ๊ฐ๊ฐ์˜ ์ž…๋ ฅ ํผ ์—˜๋ฆฌ๋จผํŠธ์™€ ์—ฐ๊ด€๋จ. ๋ ˆ์ด๋ธ”์ด ๋ณด์—ฌ์งˆ ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ aria-label ์„ ๋Œ€์‹  ์‚ฌ์šฉํ•˜์‹œ์˜ค

์ ‘๊ทผ์„ฑ ํ…Œ์ŠคํŠธ

  • ์ ‘๊ทผ์„ฑ ํ‘œ์ค€ ํ…Œ์ŠคํŠธ: High WAVE ๋„๊ตฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‹น์‹ ์˜ ํŽ˜์ด์ง€๊ฐ€ ์ ‘๊ทผ์„ฑ ํ‘œ์ค€์„ ๋งŒ์กฑํ•˜์˜€๋Š”์ง€ ํ…Œ์ŠคํŠธ ํ•ด๋ณด์„ธ์š”
  • ํ‚ค๋ณด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜: High ํ‚ค๋ณด๋“œ๋งŒ์„ ์ด์šฉํ•˜์—ฌ ์›น์‚ฌ์ดํŠธ๋ฅผ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๋„๋ก ์›€์ง์ผ ์ˆ˜ ์žˆ๋Š”์ง€ ํ…Œ์ŠคํŠธ ํ•˜์‹œ์˜ค. ๋ชจ๋“  ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์—˜๋ฆฌ๋จผํŠธ๋“ค์€ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ณ  ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ด์•ผ ํ•จ
  • ์Šคํฌ๋ฆฐ ๋ฆฌ๋”: Medium ๋ชจ๋“  ํŽ˜์ด์ง€๋“ค์ด ์Šคํฌ๋ฆฐ ๋ฆฌ๋” (VoiceOver, ChromeVox, NVDA or Lynx) ํ…Œ์ŠคํŠธ๋ฅผ ์™„๋ฃŒํ•จ
  • ํฌ์ปค์Šค ์Šคํƒ€์ผ๋ง: High ํฌ์ปค์Šค ๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ, ๋ˆˆ์— ๋ณด์ด๋Š” ์ƒํƒœ์˜ CSS๋กœ ๋Œ€์ฒด๋˜์–ด์•ผ ํ•จ

โฌ† ๋ชฉ์ฐจ๋กœ


SEO

  • ๊ตฌ๊ธ€ ์• ๋„๋ฆฌํ‹ฑ์Šค: Low ๊ตฌ๊ธ€ ์• ๋„๋ฆฌํ‹ฑ์Šค๊ฐ€ ์„ค์น˜๋˜์—ˆ๊ณ  ์ œ๋Œ€๋กœ ์„ค์ •๋˜์—ˆ์Œ
  • Search Console: Low Search Console์€ google์ด ์ œ๊ณตํ•˜๋Š” ๋ฌด๋ฃŒ ์„œ๋น„์Šค์ด๋ฉฐ ์‚ฌ์ดํŠธ์˜ ๊ฒ€์ƒ‰ ํŠธ๋ž˜ํ”ฝ ๋ฐ ์‹ค์ ์„ ์ธก์ •ํ•˜๊ณ , ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ฉฐ, Google ๊ฒ€์ƒ‰๊ฒฐ๊ณผ์—์„œ ์‚ฌ์ดํŠธ๊ฐ€ ๋‹๋ณด์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ ์ ˆํ•œ ์ œ๋ชฉ ๋ฐฐ์น˜: Medium ์ œ๋ชฉ์€ ํ˜„ ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์„ ์ดํ•ดํ•˜๋Š” ๋ฐ์— ๋„์›€์„ ์คŒ
  • sitemap.xml: High sitemap.xml ํŒŒ์ผ์ด ์กด์žฌํ•˜๊ณ  Google Search Console(์˜ˆ์ „ ์ด๋ฆ„: Google Webmaster Tools)์œผ๋กœ ์ œ์ถœ๋˜์—ˆ์Œ
  • robots.txt: High robots.txt ํŒŒ์ผ์ด ์›นํŽ˜์ด์ง€๋ฅผ ๋ธ”๋กํ‚น ํ•˜์ง€ ์•Š์Œ
  • ๊ตฌ์กฐํ™” ๋œ ๋ฐ์ดํ„ฐ: High ๊ตฌ์กฐํ™” ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๊ฐ€ ํ…Œ์ŠคํŠธ๋˜์—ˆ๊ณ  ์—๋Ÿฌ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๊ฐ€? ๊ตฌ์กฐํ™” ๋œ ๋ฐ์ดํ„ฐ๋Š” ์›น ํฌ๋กค๋Ÿฌ๊ฐ€ ํ˜„ ํŽ˜์ด์ง€ ๋‚ด์˜ ์ปจํ…์ธ ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ์— ๋„์›€์ด ๋จ
  • HTML ์‚ฌ์ดํŠธ๋งต: Medium HTML ์‚ฌ์ดํŠธ๋งต์ด ์ œ๊ณต๋˜์—ˆ์œผ๋ฉฐ ์›น์‚ฌ์ดํŠธ์˜ ํ‘ธํ„ฐ ๋‚ด์— ์กด์žฌํ•˜๋Š” ๋งํฌ๋ฅผ ํ†ตํ•˜์—ฌ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•จ
  • ํŽ˜์ด์ง€๋„ค์ด์…˜ ๋งํฌ ํƒœ๊ทธ: Medium ํŽ˜์ด์ง€๋„ค์ด์…˜ ๋œ ์ปจํ…์ธ ์ž„์„ ์•Œ๋ฆฌ๊ธฐ ์œ„ํ•˜์—ฌ rel="prev" ์™€ rel="next" ํƒœ๊ทธ๋ฅผ ์ œ๊ณตํ•จ
<!-- 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].

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

โฌ† ๋ชฉ์ฐจ๋กœ

About

๐Ÿ—‚ ์ตœ์‹  ์›น์‚ฌ์ดํŠธ์™€ ๊ผผ๊ผผํ•œ ๊ฐœ๋ฐœ์ž๋“ค์„ ์œ„ํ•œ ์™„๋ฒฝ ํ”„๋ก ํŠธ์—”๋“œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published