ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ๋ ๋น์ ์ HTML ์ฌ์ดํธ ๋๋ ํ์ด์ง๋ฅผ ํ๋ก๋์ ์ผ๋ก ๋ฐ์นญํ๊ธฐ ์ด์ ์ ๊ฐ์ง๊ณ ์์ด์ผ ํ , ๋ํ ํ ์คํธ ๋์ด์ผ ํ ์ ๋ฐ์ ์ธ ์์๋ค์ ์งํฉ์ ๋๋ค.
How To Use โข Contributing โข Website โข Product Hunt
Other Checklists:
๐ฎ Front-End Performance Checklist โข ๐ Front-End Design Checklist
์ด ๋ฆฌ์คํธ๋ ๋ค๋ ๊ฐ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ ๊ฒฝํ์ผ๋ก ์์ฑ๋์์ผ๋ฉฐ, ๋ช๋ช ํญ๋ชฉ๋ค์ ํ ์คํ์์ค ์ฒดํฌ๋ฆฌ์คํธ๋ค์ ์ฐธ๊ณ ๋ฅผ ํตํด ์ถ๊ฐ๋์์ต๋๋ค.
ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ์ ์ํด์๋ ๋ชจ๋ ํญ๋ชฉ๋ค์ ๋๋ค์์ ํ๋ก์ ํธ์์ ํ์๋ก ํ๋ ์ฌํญ๋ค์ด์ง๋ง, ๋ช๋ช ์์๋ค์ ์๋ต๋๊ฑฐ๋ ํ์์ ์ด ์๋ ์๋ ์์ต๋๋ค(์๋ฅผ ๋ค๋ฉด ๊ด๋ฆฌํ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ RSS ํผ๋๋ ํ์ ์์ ๊ฒ์ ๋๋ค). ์ฐ๋ฆฌ๋ ๋ฐ๋ผ์ ๊ฐ๊ฐ์ ํญ๋ชฉ๋ค์ 3๊ฐ์ง์ ๊ธฐ์ค์ผ๋ก ๊ตฌ๋ถํ์์ต๋๋ค:
- ์ ๊ฒฝ์ฐ ํด๋น ํญ๋ชฉ์ด ๊ถ์ ๋์ง๋ง, ๋ช๋ช ํน์ ํ ์ํฉ์์๋ ์๋ต๋ ์๋ ์์ต๋๋ค.
- ์ ๊ฒฝ์ฐ ํด๋น ํญ๋ชฉ์ด ๊ถ๊ณ ๋์ง๋ง, ๊ต์ฅํ ํน์ ํ ์ํฉ์์๋ ๊ฒฐ๊ตญ ์๋ต์ด ๋ ์๋ ์์ต๋๋ค. ๋ช๋ช ์์์ ๊ฒฝ์ฐ, ์๋ต ์ ์ฑ๋ฅ์ด๋ SEO ์ธก๋ฉด์์ ์ ์ข์ ์ํฅ์ ๋ผ์น ์๋ ์์ต๋๋ค.
- ์ ๊ฒฝ์ฐ ํด๋น ํญ๋ชฉ์ ์ด๋ ํ ์ํฉ์์๋ผ๋ ์๋ต๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ์๋ตํ๊ฒ ๋๋ฉด ๋น์ ์ ํ์ด์ง๋ ์ค๋์ํ๊ฑฐ๋ ์ ๊ทผ, ๋๋ SEO์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ๊ฒ์ ๋๋ค. ์ด๋ฌํ ์์๋ค์ ๋ํด์ ์ฐ์ ์ ์ผ๋ก ํ ์คํธ ํ์๊ธฐ ๋ฐ๋๋๋ค.
๋ช๋ช ์ถ๊ฐ ๋ด์ฉ๋ค์ ๊ทธ๊ฒ๋ค์ด ์ด๋ ํ ์ข ๋ฅ์ ๋ด์ฉ์ธ์ง ์ดํดํ๋๋ฐ์ ๋์์ ์ฃผ๊ธฐ ์ํ์ฌ ์ด๋ชจํฐ์ฝ์ ์ถ๊ฐํ์์ต๋๋ค. ์ด๋ก ์ธํด ์ฒดํฌ๋ฆฌ์คํธ์์ ํด๋น ํญ๋ชฉ๋ค์ ์ดํดํ๋ ๋ฐ์ ๋์์ด ๋ ๊ฒ์ ๋๋ค:
- ๐: ๋ฌธ์ ๋๋ ๊ธฐ์ฌ
- ๐ : ์จ๋ผ์ธ ๋๊ตฌ / ํ ์คํธ ๋๊ตฌ
- ๐น: ๋ฏธ๋์ด ๋๋ ๋น๋์ค ์ปจํ ์ธ
๋ ธํธ: a list of everything ์์ HTML ๋ฌธ์ ๋ด์
<head>
์์ ์ฌ์ฉํ ์ ์๋ ๋ชจ๋ ๊ฒ์ ์ฐพ์๋ณด์ค ์ ์์ต๋๋ค.
<!-- Doctype HTML5 -->
<!doctype html>
๋ค์ 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์ด ์ฌ์ฉ๋จ (SEO ๊ฐ์ด๋: Google์ ์ ๋ชฉ์ ์ฌ์ฉ๋ ๊ธ์๋ค์ ๋๋น์ ํฝ์ ๊ฐ์ ๊ณ์ฐํ ๋ค, 472~482px ์ฌ์ด์ ๊ฐ์ผ๋ก ์๋ผ๋ ๋๋ค. ํ๊ท ์ ์ธ ๊ธ์ ๊ธธ์ด์ ์ ํ์ ์ฝ 55๊ฐ์ ๊ธ์์ ๋๋ค.)
<!-- ๋ฌธ์์ Title -->
<title>55๊ฐ ์ดํ์ ๋ฌธ์๋ก ๊ตฌ์ฑ๋ ํ์ด์ง ์ ๋ชฉ</title>
- ๐ Title - HTML - MDN
- ๐ SERP Snippet Generator
- Description: description์ด ์ ๋๋ก ๊ธฐ์ฌ๋จ (์ค๋ช ๊ฐ์ ๊ณ ์ ํด์ผ ํ๋ฉฐ, 150๊ฐ ์ดํ์ ๋ฌธ์๋ก ๊ตฌ์ฑ๋์ด์ผ ํจ)
<!-- Meta Description -->
<meta name="description" content="ํ์ด์ง์ ๋ํ ์ค๋ช
(150๊ฐ ์ดํ์ ๋ฌธ์)">
- ํ๋น์ฝ: ๊ฐ๊ฐ์ ํ๋น์ฝ์ด ์ ๋๋ก ์์ฑ๋์๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ๋ณด์ฌ์ง๋๊ฐ? ๋ง์ฝ
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 ํฐ์น ์์ด์ฝ (์ต์ํ 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 lang="ko">
- ๊ธ์ ๋ฐฉํฅ ์์ฑ: ๊ธ์๋ค์ ๋ฐฉํฅ์ด ์ ๋๋ก ์ค์ ๋จ (์ฐ๋ฆฌ๋๋ผ์์๋ ์ข์์ ์ฐ๋ก ๊ธ์จ๋ฅผ ์ฝ๊ณ ์ฐ์ง๋ง ๋ช๋ช ๋๋ผ์์๋ ์ฐ์์ ์ข๋ก ์ฝ๊ณ ์ฐ๋ ๊ฒฝ์ฐ๋ ์์)
<!-- rtl: right to left; ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ ๋ฐฉํฅ์ผ๋ก -->
<html dir="rtl">
- ๐ dir - HTML - MDN
- ๋์ฒด ์ธ์ด: ํ์ฌ ํ์ด์ง๋ฅผ ์ธ์ด์ ๋ง๊ฒ ๋์ฒดํ ์ ์๋ ํ๊ทธ ์์ฑ ๊ฐ์ ์ฌ์ฉํจ
<link rel="alternate" href="https://en.example.com/" hreflang="en">
- x-default: ์ด์ํ์ง ์๋ ์ธ์ด์ ์ฌ์ฉ์๊ฐ ๋ค์ด์ฌ ๊ฒฝ์ฐ๋ฅผ ์ํด ๋ํดํธ ํ์ด์ง๋ฅผ ์ ํด์ฃผ๋ ์์ฑ
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
- ๐ x-default - Google
-
RSS ํผ๋: ๋ง์ผ ํ์ด์ง๊ฐ ๋ธ๋ก๊ทธ์ด๊ฑฐ๋ ๊ธฐ์ฌ๊ฐ ์๋ค๋ฉด, RSS ๋งํฌ์ ๋ํด ํ์ธํ์์ค
-
CSS Critical: ํ์ด์ง๊ฐ ๋ก๋ฉ๋๋ ์ฆ์(ํผ์ณ์ง๋ ๊ทธ ์๊ฐ) ์ปจํ ์ธ ์ ์ํฅ์ ๋ผ์น๋ CSS๋ฅผ "critical CSS" ๋ผ๊ณ ํจ. ์ด๋ ๋น์ ์ ์ค์ง์ ์ธ ์ดํ๋ฆฌ์ผ์ด์ ์ CSS ๊ฐ ๋ก๋ฉ๋๊ธฐ ์ด์ ์
<style></style>
ํ๊ทธ ์ฌ์ด์ ์ต์ํ ๋ ์ํ๋ก ํ ์ค๋ก ์ถ๊ฐ๋์ด ์๋ฒ ๋ฉ ๋จ
- ๐ Critical by Addy Osmani on Github ์ด ๋ ํฌ๋ CSS Critical์ ์๋ํ ํ๋๋ฐ์ ๋์์ ์ค๋๋ค.
- CSS์ ์์: ๋ชจ๋ CSS ํ์ผ์ด
<head>
๋ด์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ณด๋ค ์ด์ ์ ๋ก๋ฉ์ด ์๋ฃ๋จ (์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ฉ๋๋ ํน์ ํ ๊ฒฝ์ฐ๋ ์ ์ธํจ).
Meta Tags ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉํ ํ๊ทธ๋ฅผ ์๊ฐํํ๊ณ ์์ฑํ์ธ์.
๊ธฐ๋ณธ์ ์ผ๋ก Facebook ์ Open Graph ์ Twitter ์ Card ๋ ๋ฐ๋์ ์ค์ ํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค. ๋ค๋ฅธ ์์ ๋ฏธ๋์ด ํ๊ทธ๋ค์ ํน์ ํ ์๋๋ฅผ ๋์์ผ๋ก ํ ๊ฒฝ์ฐ์ ๊ณ ๋ คํด๋ณด์ธ์.
- Facebook Open Graph: ๋ชจ๋ 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">
- ๐ ์น๋ง์คํฐ๋ฅผ ์ํ ์์ด๋ง ๊ฐ์ด๋
- ๐ ์์ด๋ง - ๋ชจ๋ฒ ์ฌ๋ก
- ๐ Facebook OG testing ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ํ์ด์ง ํ
์คํธํ๊ธฐ
<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">
- ๐ Twitter cards ์์ํ๊ธฐ โ Twitter Developers
- ๐ Twitter card ๊ฒ์ฌ๊ธฐ ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ํ์ด์ง ํ
์คํธํ๊ธฐ
- HTML5 ์๋งจํฑ ์๋ฆฌ๋จผํธ: HTML5์ ์๋งจํฑ ์๋ฆฌ๋จผํธ๋ค์ด ์ ์ ํ ์ฌ์ฉ๋จ (header, section, footer, main... ๋ฑ).
- ๐ HTML ๋ ํผ๋ฐ์ค
-
์๋ฌ ํ์ด์ง: ์๋ฌ๋ฅผ ์ํ 404 ํ์ด์ง์ 5xx ํ์ด์ง๊ฐ ์กด์ฌํ๋๊ฐ? 5xx ํ์ด์ง๋ ์๋ฒ ์๋ฌ์ด๊ธฐ ๋๋ฌธ์, ์๋ฒ๋ก๋ถํฐ์ ๋ณ๋์ ์ถ๊ฐ์ ์ธ ๋ฐ์ดํฐ๋ฅผ ์ ์ก๋ฐ์ง ์๊ณ ๋ ๋ฆฝ์ ์ธ ์์ฒด CSS๋ฅผ ํฌํจํ๊ณ ์์ด์ผ ํจ์ ๊ธฐ์ตํจ
-
Noopener: ์ธ๋ถ ๋งํฌ๋ฅผ
target="_blank"
๋ฅผ ์ด์ฉํ์ฌ ์ฐ ๊ฒฝ์ฐ, tab nabbing ํผ์ฑ ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํ์ฌrel="noopener"
์์ฑ์ ์ฌ์ฉํด์ผ๋ง ํจ. ๋ง์ฝ Firefox ์ ๋ฒ์ ์ ์ง์ํด์ผ๋ง ํ๋ค๋ฉด,rel="noopener noreferrer"
์ ์ฌ์ฉํจ
- ์ฃผ์ ์ง์ฐ๊ธฐ: ์น์ฌ์ดํธ๋ฅผ ํ๋ก๋์ ํ๊ธฐ ์ด์ ์ ๋ถํ์ํ ์ฝ๋๋ ์ ๊ฑฐํ์๋์ง, ์ฃผ์์ ์ ๊ฑฐํ์๋์ง ์ ๊ฒํจ
- W3C ๊ท๊ฒฉ: ํ์ด์ง ๋ด์ ๋ชจ๋ HTML ์ด ํ์ค์ ๋ง๊ฒ ์ ์์ ์ผ๋ก ์์ฑ๋์๋์ง W3C ์ validator๋ฅผ ์ด์ฉํ์ฌ ํ ์คํธ ํจ
- ๐ W3C ๊ฒ์ฌ๊ธฐ
- HTML Lint: Lint ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ HTML ์ฝ๋ ๋ด์ ๋ฐ์ํ ์ ์๋ ์ฝ๋ ์์ ๋ฌธ์ ๋ค์ ๋ถ์ํจ
- ๐ Dirty markup: HTML ์ฝ๋๋ฅผ ์ ๋ํด์ฃผ๋ ์จ๋ผ์ธ ๋๊ตฌ
- Link checker: ํ์ด์ง ๋ด์ ๊นจ์ง ๋งํฌ๋ ์๋์ง, 404 ์๋ฌ๊ฐ ์กด์ฌํ์ง ์๋์ง ๋ค์ ํ๋ฒ ํ์ธํ๋๋ก ํจ
- ๐ W3C Link Checker
- ๊ด๊ณ ์ฐจ๋จ๊ธฐ ํ ์คํธ: ๊ด๊ณ ์ฐจ๋จ๊ธฐ๊ฐ ํ์ฑํ ๋ ์ํ์์๋ ์ปจํ ์ธ ๊ฐ ์ ๋๋ก ๋ณด์ฌ์ง (์ฌ๋๋ค์๊ฒ ๊ด๊ณ ์ฐจ๋จ๊ธฐ๋ฅผ ๋นํ์ฑํ ํด๋ฌ๋ผ๊ณ ๋ฉ์ธ์ง๋ฅผ ์๋ฆด์๋ ์์)
๋
ธํธ: ์นํฐํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์คํ์ผ๋ง ๋์ง ์์ ๊ธ์๋ ๋ณด์ด์ง ์๋ ๊ธ์๋ค์ด ๊น๋นก์ผ ์ ์์ต๋๋ค. ์คํจํ์ ๊ฒฝ์ฐ๋ฅผ ๋๋นํ ๋์ฒด์ฉ ํฐํธ๋ฅผ ํฌํจํ๊ฑฐ๋, ์นํฐํธ ๋ก๋๋ฅผ ํ์ฉํ์ฌ ์ด๋ฌํ ๋์๋ค์ ์ ์ดํ์ธ์.
-
์นํฐํธ ํฌ๊ธฐ: ๋ชจ๋ ์ข ๋ฅ(์ดํค๋ฆญ, ๋ณผ๋์ฒด ๋ฑ๋ฑ์ ํฌํจ)์ ์นํฐํธ ํฌ๊ธฐ์ ์ด ํฉ๊ณ๋ 2 MB๋ฅผ ๋์ง ์๋๋ก ํจ
-
์นํฐํธ ๋ก๋: ์นํฐํธ ๋ก๋๋ฅผ ์ด์ฉํ์ฌ ํฐํธ๊ฐ ๋ก๋ฉ๋๋ ๋์์ ์ ์ดํจ
๋
ธํธ: ๋๋ค์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ด ๋ฐ๋ฅด๋ CSS ๊ฐ์ด๋๋ผ์ธ๊ณผ Sass ๊ฐ์ด๋๋ผ์ธ ์ ์ดํด๋ณด์ธ์. ๋ง์ฝ ๋ชจ๋ฅด๋ CSS ์์ฑ ๊ฐ์ด ์๋ค๋ฉด, CSS ๋ ํผ๋ฐ์ค๋ฅผ ์ฐธ์กฐํ๊ธธ ๋ฐ๋๋๋ค. ๋ํ CSS์ ์ผ๊ด์ฑ์ ์ํ ์ฝ๋ ๊ฐ์ด๋๋ ์ฝ์ด๋ณด๊ธฐ ๋ฐ๋๋๋ค.
- ๋ฐ์ํ ์น ๋์์ธ: ์น์ฌ์ดํธ๊ฐ ๋ฐ์ํ์ผ๋ก ๋์์ธ ๋จ
- CSS Print: ํ๋ฆฐํฐ๊ฐ ์ฌ์ฉํ print ์คํ์ผ์ํธ ๊ฐ์ด ์ค์ ๋์๊ณ , ๊ฐ๊ฐ์ ํ์ด์ง๋ง๋ค ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ ๋จ
- CSS ์ ์ฒ๋ฆฌ๊ธฐ: ๋์์ธ์ CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ด์ฉํจ (์ถ์ฒ: Sass, Less, Stylus).
- ๊ณ ์ ID๊ฐ: ์ฌ๋ฌ ๊ฐ์ ID ๊ฐ์ด ์ฌ์ฉ๋ ๊ฒฝ์ฐ, ๊ฐ๊ฐ์ ID ๊ฐ์ ํ์ด์ง ๋ด์์ ๊ณ ์ ํด์ผํจ
- Reset CSS: ์ต์ ์ Reset CSS (reset, normalize ํน์ reboot) ์ด ์ฌ์ฉ๋จ (Bootstrap์ด๋ Foundation ๊ฐ์ CSS ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, ์๋ง๋ Normalize๊ฐ ์ด๋ฏธ ํฌํจ๋์ด ์์ ๊ฒ์)
- ๐ Reset.css
- ๐ Normalize.css
- ๐ Reboot
- JS ์ ๋์ฌ: js-๋ก ์์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ๋ด์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ํด๋์ค๋ ID๋ CSS ํ์ผ์์ ์คํ์ผ๋ง ๋์ง ์๋๋ก ํจ
<div id="js-slider" class="my-slider">
<!-- ๋๋ -->
<div id="id-used-by-cms" class="js-slider my-slider">
- CSS ์๋ฒ ๋ฉ ๋๋ ์ธ๋ผ์ธ: ์ด๋ ํ ๊ฒฝ์ฐ์๋ CSS๋ฅผ ์ง์ ์๋ฒ ๋ฉํ๊ฑฐ๋ ์ธ๋ผ์ธ์ผ๋ก ์ฌ์ฉํ์ง ์๊ธฐ. ํ๋นํ ์ด์ ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉ (์: ์ฌ๋ผ์ด๋ ๋ด์ background-image, ํน์ critical CSS)
- ๋ฒค๋ ํ๋ฆฌํฝ์ค: CSS ๋ฒค๋ ํ๋ฆฌํฝ์ค๋ค์ด ์ฌ์ฉ๋์๊ณ ๋ธ๋ผ์ฐ์ ์ง์ ํธํ์ฑ์ ๋ฐ๋ผ ์๋ง๊ฒ ์์ฑ๋์๋์ง ํ์ธ
- ํ์ผ ๋จ์ผํ: CSS ํ์ผ๋ค์ด ํ๋์ CSS ํ์ผ๋ก ๋จ์ผํ ๋์์ (HTTP/2์ ๊ฒฝ์ฐ๋ ์ฌ๋ฌ ๊ฐ์ ํ์ผ์ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ฑ๋ฅ์ ์ข์)
- ์ต์ํ: ๋ชจ๋ CSS ํ์ผ๋ค์ด ์ต์ํ ๋จ
- ๋ ผ ๋ธ๋กํน: CSS ํ์ผ๋ค์ DOM์ด ๋ก๋ฉํ๋๋ฐ์ ๋ฐฉํด๊ฐ ๋์ง ์๋๋ก ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ ๋์ด์ผ ํจ
-
๋ฐ์ํ ์น ๋์์ธ: ๋ชจ๋ ํ์ด์ง๊ฐ ๋ค์ ์ง์ ์์ ํ ์คํธ ์๋ฃ๋์์: 320px, 768px, 1024px (๊ทธ ์ธ ๋น์ ์ด ํ์ํ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์)
Responsive Checker -
- ๐ Am I Responsive?
- ๐ Mobile Friendly Test
- ๐ Responsive Website Design Tester
- ๐ Responsinator
- ๐ XRespond
- ๐ CSS ๊ฒ์ฌ๊ธฐ
- ๋ฐ์คํฌํ ๋ธ๋ผ์ฐ์ : ๋ชจ๋ ํ์ด์ง๊ฐ ๋ชจ๋ ํ์กดํ๋ ๋ฐ์คํฌํ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ ๋จ (Safari, Firefox, Chrome, Internet Explorer, EDGE... ๋ฑ).
- ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ : ๋ชจ๋ ํ์ด์ง๊ฐ ๋ชจ๋ ํ์กดํ๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ ๋จ (Native browser, Chrome, Safari... ๋ฑ).
- ์ด์์ฒด์ : ๋ชจ๋ ํ์ด์ง๊ฐ ๋ชจ๋ ํ์กดํ๋ ์ด์์ฒด์ ์์ ํ ์คํธ ๋จ (Windows, Android, iOS, Mac... ๋ฑ).
- ๋์์ธ๊ณผ์ ์ ํ๋: ํ๋ก์ ํธ์ ๋ฐ๋ผ ์๋ ์๋ํ๋ ๋์์ธ๋๋ก ํ๋ฉด์ ๋ณด์ฌ์ง๋์ง ์ ํ๋๊ฐ ์๊ตฌ๋ ์ ์์. ๋๊ตฌ๋ค์ ์ฌ์ฉํด์ ์คํ๋ ์ฝ๋์ ๋น๊ตํ๊ณ ์ผ๊ด์ฑ์ ์ ์ง.
- ๊ธ์ ๋ฐฉํฅ: ๋ค๊ตญ์ด๋ฅผ ์ง์ํด์ผ ํ ๊ฒฝ์ฐ, ๊ธ์ ๋ฐฉํฅ์ ๋ง๊ฒ ๋ชจ๋ ํ์ด์ง๊ฐ ์ ์ ๋์ํจ (LTR / RTL)
๋
ธํธ: ์ด๋ฏธ์ง ์ต์ ํ์ ์์ ํ ์ดํด๋ฅผ ์ํด์๋, Addy Osmani๊ฐ ์ด ๋ฌด๋ฃ ebook Essential Image Optimization ์ ํ์ธํ์ธ์.
- ์ต์ ํ: ๋ชจ๋ ์ด๋ฏธ์ง๊ฐ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๋ ์ ์๋๋ก ์ต์ ํ ๋์๋? ํํ์ด์ง ๊ฐ์ด ์ฑ๋ฅ์ด ์ค์ํ ํ์ด์ง์๋ 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: picture์ srcset์ ์ด์ฉํ์ฌ ์ฌ์ฉ์์ ํ์ฌ ๋ทฐํฌํธ์ ๊ฐ์ฅ ์ ํฉํ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ์์
- ๋ ํฐ๋ ๋์คํ๋ ์ด ์ง์: ๋ ํฐ๋ ๋์คํ๋ ์ด๋ฅผ ์ง์ํ๊ธฐ ์ํ์ฌ ๋น์ ์ ํ ๋ ์ด์์์ ํด๋นํ๋ 2๋ฐฐ, ๋๋ 3๋ฐฐ ์ด์ ํฐ ์ด๋ฏธ์ง๋ฅผ ์ง์ํจ
- ์ด๋ฏธ์ง ์คํ๋ผ์ดํธ: ์์ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ ์คํ๋ผ์ดํธ ํ์ผ๋ก ๊ตฌ์ฑ๋์ด์ ธ ์์ (์์ด์ฝ์ ๊ฒฝ์ฐ, SVG ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง ์ผ ์๋ ์์)
- ๋๋น์ ๋์ด: ๋ชจ๋
<img>
ํ๊ทธ์ ๋๋น์ ๋์ด๊ฐ ์ค์ ๋์์ (px์ด๋ %๋ก ์ง์ ํ์ง ๋ง์์ค) - ๋์ฒด ํ
์คํธ: ๋ชจ๋
<img>
ํ๊ทธ๊ฐ ์ด๋ฏธ์ง๋ฅผ ์ ์์ ํ๋ ๋์ฒด ํ ์คํธ๋ฅผ ๊ฐ์ง๊ณ ์์ (alt
์์ฑ์ผ๋ก ๋ถ์ฌ)
- Lazy ๋ก๋ฉ: ์ด๋ฏธ์ง๋ค์ด lazy ๋ก๋ ๋จ (์๋ฐ์คํฌ๋ฆฝํธ ๋ฏธ์ง์์ ๋ํ ์์ธ์ฒ๋ฆฌ๊ฐ ํญ์ ์ ๊ณต ๋์ด์ผ ํจ)
- ์ธ๋ผ์ธ ์๋ฐ์คํฌ๋ฆฝํธ: HTML ์ฝ๋์ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ํฌํจํ์ง ์๋๋ก ํ์์ค
- ํ์ผ ๋จ์ผํ: ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ค์ด ํ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ก ๋จ์ผํ ๋์์
- ์ต์ํ: ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ์ต์ํ ๋์์(๋ค์
.min
์ ๋ฏธ์ฌ๋ฅผ ๋ถ์ด๋ ๊ฒ์ ์ถ์ฒ)
-
noscript
ํ๊ทธ: ๋ธ๋ผ์ฐ์ ๋ด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ง์ํ์ง ์๊ฑฐ๋ ๊บผ์ ธ ์์ ๊ฒฝ์ฐ๋ฅผ ๊ณ ๋ คํ์ฌ HTML ๋ด์<noscript>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์์ค. ์ด๋ React.js ์ดํ๋ฆฌ์ผ์ด์ ์ฒ๋ผ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์ ๋ ๋๋ง์ด ๊ต์ฅํ ๋ฌด๊ฑฐ์ด ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ๊ต์ฅํ ์ ์ฉํจ. ๋ค์์ ์์ ๋ฅผ ์ดํด๋ณด์์ค
<noscript>
์ด ์ดํ๋ฆฌ์ผ์ด์
์ ์คํ์ํค๊ธฐ ์ํด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฑํ ์์ผ์ผ ํฉ๋๋ค.
</noscript>
- ๋
ผ ๋ธ๋กํน: JavaScript ํ์ผ๋ค์
async
์defer
์์ฑ๊ฐ์ ์ด์ฉํ์ฌ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ ๋์ด์ผ ํจ
- ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉํ๊ธฐ, ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ํํ๊ธฐ: ํ๋ก์ ํธ ๋ด์์ ์ฌ์ฉํ๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์์ ์ธ ๊ฒ๋ค์ (๊ฐ๋จํ ๊ธฐ๋ฅ๋ค์ ๋ํด์๋ ๊ธฐ๋ณธ ์๋ฐ์คํฌ๋ฆฝํธ๋ง์ ์ฐ๋๋ก ํ์). ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ต์ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธ ํ์ผ๋ฉฐ, ํ๋์ ์์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด ๊ณผ๋ํ๊ฒ ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํฌํจํ์ง ์์ (๊ฐ๋ น debounce ํ๋๋ฅผ ์ฐ๊ธฐ ์ํด lodash ์ ์ฒด๋ฅผ ํฌํจํ์ง ๋ง๊ธฐ)
- Modernizr: ํน์ ํ ๊ธฐ๋ฅ์ ์ง์นญํ๊ณ ์ถ๋ค๋ฉด, ์ปค์คํฐ๋ง์ด์ง ๋ Modernizr๋ฅผ ์ด์ฉํ์ฌ
<html>
ํ๊ทธ ๋ด์ ํด๋์ค๋ค์ ์ถ๊ฐํ ์ ์์
- HTTPS: ํ์ด์ง ๋ด์ ์กด์ฌํ๋ ๋ชจ๋ ์ธ๋ถ ์ปจํ ์ธ (ํ๋ฌ๊ทธ์ธ, ์ด๋ฏธ์ง...)์ ๋ํด์๋ HTTPS ๊ฐ ์ฌ์ฉ๋์์.
- HTTP Strict Transport Security (HSTS): HTTP ํค๋ ๊ฐ์ผ๋ก 'Strict-Transport-Security'๊ฐ ์ค์ ๋จ.
- ์ฌ์ดํธ ๊ฐ ์์ฒญ ์์กฐ(CSRF; Cross Site Request Forgery): CSRF ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํ์ฌ ์ํ์ฌ ๋น์ ์ ์๋ฒ ์ชฝ์ผ๋ก ๋ฐ์ํ๋ ๋ชจ๋ HTTP ์์ฒญ์ด ํฉ๋ฒ์ ์ด๊ณ ๋น์ ์ ์น์ฌ์ดํธ๋ ์ดํ๋ฆฌ์ผ์ด์ ์ผ๋ก๋ถํฐ ๋ฐ์ํ ๊ฒ์์ ํ์ ํจ
- ์ฌ์ดํธ ๊ฐ ์คํฌ๋ฆฝํ (XSS; Cross Site Scripting): ๋น์ ์ ํ์ด์ง๋ ์น์ฌ์ดํธ๊ฐ ์ฌ์ดํธ ๊ฐ ์คํฌ๋ฆฝํ ์ด ๋ฐ์ํ ์ฌ์ง๊ฐ ์ ํ ์์
- Content Type Options: ์๋ฒ์์ ์ค์ ํ ํ์ ๊ณผ ๋ค๋ฅธ ์๋ต์ด ์ฌ ๊ฒฝ์ฐ mime-sniffing์ ํ์ง ์๋๋ก ํจ
- ์ปจํ ์ธ ๋ณด์ ์ ์ฑ (CSP; Content Security Policy) ์ฌ์ดํธ ๋ด์ ์ปจํ ์ธ ๊ฐ ์ด๋ป๊ฒ ๋ก๋ฉ๋๊ณ , ์ด๋์ ๋ก๋ฉ๋๋๋ก ํ๊ฐ๋ฐ์๋์ง๋ฅผ ํ์ธ. ์ด๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ํด๋ฆญ์ฌํน ๊ณต๊ฒฉ์ ๋ฐฉ์งํ ์ ์์
- ์ฑ์ทจ ๋ชฉํ: ํ์ด์ง๊ฐ ์ด ๋ชฉํ์ ๋๋ฌํ๋ ๊ฒ์ด ์ข์:
- First Meaningful Paint (์ฌ์ฉ์์๊ฒ ์๋ฏธ ์๋ ์ปจํ ์ธ ๊ฐ ๊ทธ๋ ค์ง๋ ์ฒซ ์๊ฐ)์ 1์ด ์ดํ์ฌ์ผ ํ๋ค
- 3G ๋คํธ์ํฌ๋ฅผ ์ฌ์ฉํ๋ ์ ๊ฐํ ์๋๋ก์ด๋ ํฐ, 400kbps ์ ์ก ์๋์ 400ms ์ ๋คํธ์ํฌ ๋๊ธฐ ์๊ฐ ๊ธฐ์ค์ผ๋ก, ํ์ด์ง๊ฐ ํ์ฑํ ๋๊ธฐ๊น์ง์ ์๋ต ์๋๋ ์ต๋ 5์ด ์ดํ์ฌ์ผ ํ๋ฉฐ, ์ฌ์ ์์ ๊ฒฝ์ฐ ์ต๋ 2์ด ์ดํ์ฌ์ผ ํจ
- ํต์ฌ์ ์ธ ํ์ผ๋ค์ GZIP ์์ถ ์ 170Kb ์ดํ์ฌ์ผ ํจ
-
Lazy ๋ก๋ฉ: ์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, CSS ํ์ผ๋ค์ด lazy ๋ก๋ ๋์ด์ ํ ํ์ด์ง์ ์๋ต์๊ฐ์ ํฅ์์ํด (๊ฐ ์น์ ์ ์์ธํ ๋ถ๋ถ์ ์ฐธ์กฐํ์์ค)
-
์ฟ ํค ํฌ๊ธฐ: ์ฟ ํค๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, ๊ฐ ์ฟ ํค์ ํฌ๊ธฐ๊ฐ 4096 ๋ฐ์ดํธ๋ฅผ ๋์ง ์๊ณ , ๋๋ฉ์ธ ๋ด์ 20๊ฐ ์ด์์ ์ฟ ํค๋ฅผ ๊ฐ์ง์ง ์๋๋ก ์ฃผ์ํ์์ค
- ๐ ์ฟ ํค ์ฌ์: RFC 6265
- ๐ ์ฟ ํค
- ๐ ๋ธ๋ผ์ฐ์ ์ฟ ํค์ ์ ํ์
- ์๋ ํํฐ ์ปดํฌ๋ํธ: ๊ณต์ ํ๊ธฐ ๋ฒํผ์ฒ๋ผ ์ธ๋ถ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์กดํ๋ ์๋ํํฐ iframe์ด๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ๊ฐ๊ธ์ ์ ์ ์ธ ์ปดํฌ๋ํธ๋ก ๊ต์ฒดํ์ฌ์ ์ธ๋ถ API ํธ์ถ์ ์ ํํ๊ณ ์ฌ์ฉ์๋ค์ ํ๋๋ค์ ์ธ๋ถ๋ก ์ ์ถ๋์ง ์๋๋ก ํ์์ค
- DNS resolution:
dns-prefetch
๋ฅผ ์ฌ์ฉํ์ฌ ์๋ํํฐ ์๋น์ค์ DNS ๊ฐ ์ ํด ์๊ฐ์ ๋ฏธ๋ฆฌ resolve ๋๋๋ก ํจ
<link rel="dns-prefetch" href="https://example.com">
- Preconnect:
preconnect
๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ๋ก ํ์ํ ์๋น์ค์ DNS ์ ๋ฃฉ์ , TCP ํธ๋์ ฐ์ดํฌ์ TLS ํ์์ ์ ํด ์๊ฐ์ ๋ฏธ๋ฆฌ ์ฒ๋ฆฌํ๋๋ก ํจ
<link rel="preconnect" href="https://example.com">
- Prefetching:
prefetch
๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ๋ก ํ์ํ ๋ฆฌ์์ค๋ค(์์: ๋ ์ด์ง ๋ก๋ ๋๋ ์ด๋ฏธ์ง) ์ ์ ํด ์๊ฐ์ ๋ฏธ๋ฆฌ ์์ฒญํ๋๋ก ํจ
<link rel="prefetch" href="image.png">
- Preloading:
preload
๋ฅผ ์ฌ์ฉํ์ฌ ์ ํด ์๊ฐ์ ํ์ฌ ํ์ด์ง ๋ด์ ํ์ํ ๋ฆฌ์์ค๋ค (์์: body ํ๋จ์ ์์นํ๊ณ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ค) ์ ์ ํด ์๊ฐ์ ๋ฏธ๋ฆฌ ์์ฒญํ๋๋ก ํจ
<link rel="preload" href="app.js">
- Google PageSpeed: ํํ์ด์ง ๋ฟ ์๋๋ผ ๋ชจ๋ ํ์ด์ง๊ฐ ํ ์คํธ ์๋ฃ ๋์๊ณ ์ต์ํ 100์ ๋ง์ 90์ ์ ํ๋ํ์์
๋
ธํธ: ์ ํ๋ธ์ ์ฌ์ ๋ชฉ๋ก์ ํ์ธํด๋ณด์ธ์ A11ycasts with Rob Dodson ๐น
- Progressive enhancement: ๋ฉ์ธ ๋ค๋น๊ฒ์ด์ ์ด๋ ๊ฒ์๊ณผ ๊ฐ์ ๋๋ค์์ ๊ธฐ๋ฅ๋ค์ด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์๋ํ์ง ์๊ณ ๋ ๋์ํด์ผ ํจ
- ์์ ๋๋น: ์์ ๋๋น ๊ธฐ์ค์ด ์ต์ํ WCAG AA๋ฅผ ํต๊ณผํด์ผ ํจ (๋ชจ๋ฐ์ผ์ ๊ฒฝ์ฐ AAA๋ฅผ ํต๊ณผํด์ผ ํจ)
- ๐ ๋๋น์จ
- H1: ๋ชจ๋ ํ์ด์ง ๋ด์ ์น์ฌ์ดํธ์ ํ์ดํ๊ณผ ๋ค๋ฅธ H1 ํ๊ทธ๊ฐ ์กด์ฌํด์ผ ํจ
- ํค๋ฉ: ํค๋ฉ์ด ์ฌ๋ฐ๋ฅธ ์์(H1๋ถํฐ H6๊น์ง)๋ก ์ ์ ํ ์ฌ์ฉ๋์ด์ผ ํจ
- ํน์ ํ HTML5์ input ํ์ ๋ค์ ์ฌ์ฉ: ์ด ํญ๋ชฉ์ ๊ฐ๊ฐ ๋ค๋ฅธ input ํ์ ์ ๋ํ์ฌ ๊ฐ๋ณ์ ์ธ ํคํจ๋๋ ์์ ฏ์ ๋ณด์ฌ์ฃผ๋ ๋ชจ๋ฐ์ผ ์ฅ์น๋ค์ ๋ํด ํนํ ๋์ฑ ์ค์ํจ
- ๋ ์ด๋ธ: ๋ ์ด๋ธ์ ๊ฐ๊ฐ์ ์
๋ ฅ ํผ ์๋ฆฌ๋จผํธ์ ์ฐ๊ด๋จ. ๋ ์ด๋ธ์ด ๋ณด์ฌ์ง ์ ์๋ ๊ฒฝ์ฐ
aria-label
์ ๋์ ์ฌ์ฉํ์์ค
- ์ ๊ทผ์ฑ ํ์ค ํ ์คํธ: WAVE ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ํ์ด์ง๊ฐ ์ ๊ทผ์ฑ ํ์ค์ ๋ง์กฑํ์๋์ง ํ ์คํธ ํด๋ณด์ธ์
- ๐ Wave ํ
์คํธ
- ํค๋ณด๋ ๋ค๋น๊ฒ์ด์ : ํค๋ณด๋๋ง์ ์ด์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ์์ธก ๊ฐ๋ฅํ๋๋ก ์์ง์ผ ์ ์๋์ง ํ ์คํธ ํ์์ค. ๋ชจ๋ ์ธํฐ๋ํฐ๋ธ ์๋ฆฌ๋จผํธ๋ค์ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ์ฌ์ฉ ๊ฐ๋ฅํด์ผ ํจ
- ์คํฌ๋ฆฐ ๋ฆฌ๋: ๋ชจ๋ ํ์ด์ง๋ค์ด ์คํฌ๋ฆฐ ๋ฆฌ๋ (VoiceOver, ChromeVox, NVDA or Lynx) ํ ์คํธ๋ฅผ ์๋ฃํจ
- ํฌ์ปค์ค ์คํ์ผ๋ง: ํฌ์ปค์ค ๋์ง ์์ ๊ฒฝ์ฐ, ๋์ ๋ณด์ด๋ ์ํ์ CSS๋ก ๋์ฒด๋์ด์ผ ํจ
- Search Console: Search Console์ google์ด ์ ๊ณตํ๋ ๋ฌด๋ฃ ์๋น์ค์ด๋ฉฐ ์ฌ์ดํธ์ ๊ฒ์ ํธ๋ํฝ ๋ฐ ์ค์ ์ ์ธก์ ํ๊ณ , ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ฉฐ, Google ๊ฒ์๊ฒฐ๊ณผ์์ ์ฌ์ดํธ๊ฐ ๋๋ณด์ด๊ฒ ํ ์ ์์ต๋๋ค.
- ๐ Search Console
- sitemap.xml: sitemap.xml ํ์ผ์ด ์กด์ฌํ๊ณ Google Search Console(์์ ์ด๋ฆ: Google Webmaster Tools)์ผ๋ก ์ ์ถ๋์์
- ๐ The robots.txt file
- ๐ Google Robots ํ
์คํธ ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ robots.txt ํ์ผ์ ํ
์คํธ ํด๋ณด์ธ์
- ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ: ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง๊ฐ ํ ์คํธ๋์๊ณ ์๋ฌ๊ฐ ์กด์ฌํ์ง ์๋๊ฐ? ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ๋ ์น ํฌ๋กค๋ฌ๊ฐ ํ ํ์ด์ง ๋ด์ ์ปจํ ์ธ ๋ฅผ ์ดํดํ๋ ๋ฐ์ ๋์์ด ๋จ
- ๐ ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ ์๊ฐ - Search - Google Developers
- ๐ JSON-LD
- ๐ Microdata
- ๐ Test your page with the Rich Restults Test
- ๐ ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ๋ก ์ฌ์ฉ๋ ์ ์๋ ๋จ์ด๋ค์ ๋ชฉ๋ก์ ๋ง๋ค์ด๋ณด์ธ์ Schema.org Full Heirarchy
- HTML ์ฌ์ดํธ๋งต: HTML ์ฌ์ดํธ๋งต์ด ์ ๊ณต๋์์ผ๋ฉฐ ์น์ฌ์ดํธ์ ํธํฐ ๋ด์ ์กด์ฌํ๋ ๋งํฌ๋ฅผ ํตํ์ฌ ์ ๊ทผ์ด ๊ฐ๋ฅํจ
- ํ์ด์ง๋ค์ด์
๋งํฌ ํ๊ทธ: ํ์ด์ง๋ค์ด์
๋ ์ปจํ
์ธ ์์ ์๋ฆฌ๊ธฐ ์ํ์ฌ
rel="prev"
์rel="next"
ํ๊ทธ๋ฅผ ์ ๊ณตํจ
<!-- Example: ํ์ด์ง๋ค์ด์
๋ชฉ๋ก์ 2ํ์ด์ง์ ํ์ด์ง๋ค์ด์
๋งํฌ ํ๊ทธ -->
<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
- ๐ฉ๐ช German: xfuture603/Front-End-Checklist
- ๐ต๐ฑ Polish: mbiesiad/Front-End-Checklist
๋ง์ฝ ๋น์ ์ด ํ๋ก ํธ์๋ ์ฒดํฌ๋ฆฌ์คํธ์ ๊ท์น์ ๋ฐ๋ฅด๊ณ ์๋ค๊ณ ๋ณด์ฌ์ฃผ๊ธธ ์ํ๋ค๋ฉด, ํ๋จ์ ๋ฐฐ์ง๋ฅผ README ํ์ผ์ ์ถ๊ฐํ์ธ์!
[![FrontโEnd_Checklist followed](https://img.shields.io/badge/FrontโEnd_Checklist-followed-brightgreen.svg)](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]
front-end-checklist's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.