์ ์ธ๊ณ์ ์ผ๋ก 10์ต ๋ช ์ด์์ ์ฌ๋๋ค์ด ์ด๋ค ํํ๋ก๋ ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์ด์๊ฐ๊ณ ์์ต๋๋ค. ์ด๋ฉ์ผ์ด ์ ๊ทผ ๊ฐ๋ฅํ์ง ์์ผ๋ฉด ๋์ ๊ณ ๊ฐ์ ์๋น ๋ถ๋ถ์ ๋ฐฐ์ ํ๋ ๊ฒ์ด๋ฉฐ, ๋ฒ์ ์๊ตฌ ์ฌํญ์ ์๋ฐํ ๊ฐ๋ฅ์ฑ๋ ์์ต๋๋ค. ์ด ๊ฐ์ด๋๋ ๋ชจ๋ ์ฌ๋์ ์ํด ์๋ํ๋ ์ด๋ฉ์ผ์ ๋ง๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ๊ฒ์ ๋ค๋ฃน๋๋ค.
์ด๋ฉ์ผ ์ ๊ทผ์ฑ์ด ์ค์ํ ์ด์
ํฌ์ฉ์ ์ธ ์ด๋ฉ์ผ ๋์์ธ์ ์ค์์ฑ์ ์ดํดํฉ๋๋ค.
ํต๊ณ ์์น
์ฅ์ ํต๊ณ:
- ์ ์ธ๊ณ์ ์ผ๋ก 13์ต ๋ช ์ด ์ฌ๊ฐํ ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค
- 2์ต 8,500๋ง ๋ช ์ด ์๊ฐ ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค
- 4์ต 6,600๋ง ๋ช ์ด ์ฒญ๊ฐ ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค
- ์ ์ธ๊ณ ์ธ๊ตฌ์ 15%๊ฐ ์ด๋ค ํํ๋ก๋ ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค
์ด๋ฉ์ผ ์ฌ์ฉ: ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค๋ ๋ค๋ฅธ ๋ชจ๋ ์ฌ๋๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ด๋ฉ์ผ์ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฉ์ผ์ด ์ ๊ทผ ๊ฐ๋ฅํ์ง ์์ผ๋ฉด ์ฝํ ์ธ ์ ์ํธ์์ฉํ ์ ์์ต๋๋ค.
๋ฒ์ ์๊ตฌ ์ฌํญ
์ฃผ์ ๊ท์ :
๋ฏธ๊ตญ ์ฅ์ ์ธ๋ฒ(ADA): ๊ธฐ์ ์ด ์ ๊ทผ ๊ฐ๋ฅํ ์ปค๋ฎค๋์ผ์ด์ ์ ์ ๊ณตํ๋๋ก ์๊ตฌํฉ๋๋ค.
Section 508: ์ฐ๋ฐฉ ๊ธฐ๊ด์ ์ ์ ์ฝํ ์ธ ๋ฅผ ์ ๊ทผ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค์ด์ผ ํฉ๋๋ค.
์ ๋ฝ ์ ๊ทผ์ฑ๋ฒ: ์ ๊ทผ ๊ฐ๋ฅํ ๋์งํธ ์ฝํ ์ธ ์ ๋ํ EU ์๊ตฌ ์ฌํญ์ ๋๋ค.
AODA(์บ๋๋ค): ์จํ๋ฆฌ์ค์ ์กฐ์ง ์ ๊ทผ์ฑ ์๊ตฌ ์ฌํญ์ ๋๋ค.
๋น์ค์ ์ํ:
- ๋ฒ์ ์กฐ์น ๋ฐ ์์ก
- ๋ฒ๊ธ ๋ฐ ์ฒ๋ฒ
- ํํ ์์
- ๊ณ ๊ฐ ์์ค
๋น์ฆ๋์ค ์ฌ๋ก
๊ท์ ์ค์๋ฅผ ๋์ด์:
- ๋ ๋ง์ ๊ณ ๊ฐ์๊ฒ ๋๋ฌ
- ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์
- ๋ชจ๋ ์ฌ๋์ ์ฐธ์ฌ๋ ํฅ์
- ๊ธ์ ์ ์ธ ๋ธ๋๋ ์ธ์
- SEO ํํ(์ผ๋ถ ๊ธฐ์ ์ด ๊ฒน์นจ)
์ ๊ทผ์ฑ์ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ด์ต: ๋ง์ ์ ๊ทผ์ฑ ๊ฐ์ ์ด ๋ชจ๋ ์ฌ๋์๊ฒ ๋์์ด ๋ฉ๋๋ค:
- ๋ช ํํ ํ ์คํธ๋ ๋ชจ๋ ๋ ์์๊ฒ ์ด์ต
- ์ข์ ๋๋น๋ ๋ฐ์ ํ๋น์์ ๋์
- ๋ ผ๋ฆฌ์ ๊ตฌ์กฐ๋ ์ค์บ ๊ฐ๋ฅ์ฑ ํฅ์
์ฅ์ ์ ์ด๋ฉ์ผ ์ดํดํ๊ธฐ
๋ค์ํ ์ฅ์ ๊ฐ ์ด๋ฉ์ผ ์๋น์ ๋ฏธ์น๋ ์ํฅ์ ์ดํดํฉ๋๋ค.
์๊ฐ ์ฅ์
์ ํ:
- ์ค๋ช (์์ ๋๋ ๋ถ๋ถ)
- ์ ์๋ ฅ
- ์๋งน
- ๋ ธํ ๊ด๋ จ ์๋ ฅ ๋ณํ
์ด๋ฉ์ผ์ ์ฝ๋ ๋ฐฉ๋ฒ:
- ์คํฌ๋ฆฐ ๋ฆฌ๋(JAWS, NVDA, VoiceOver)
- ํ๋ฉด ํ๋๊ธฐ
- ๊ณ ๋๋น ๋ชจ๋
- ์ ์ ๋์คํ๋ ์ด
๋ฌธ์ ์ :
- ์ค๋ช ์ด ์๋ ์ด๋ฏธ์ง
- ๋ฎ์ ์์ ๋๋น
- ์์ ํ ์คํธ
- ๋ณต์กํ ๋ ์ด์์
- ๊ตฌ์กฐํ๋์ง ์์ ์ฝํ ์ธ
์ด๋ ์ฅ์
์ ํ:
- ์ ํ๋ ์ ์์ง์
- ๋จ๋ฆผ
- ๋ง๋น
- ๋ฐ๋ณต์ ๊ธด์ฅ ์์
์ํธ์์ฉ ๋ฐฉ๋ฒ:
- ํค๋ณด๋ ํ์
- ์ค์์น ์ฅ์น
- ์์ฑ ์ ์ด
- ์์ ์ถ์
๋ฌธ์ ์ :
- ์์ ํด๋ฆญ ๋์
- ์๊ฐ ์ ํ์ด ์๋ ์์
- ๋ณต์กํ ์ํธ์์ฉ
- ํธ๋ฒ ์์กด ์์
์ธ์ง ์ฅ์
์ ํ:
- ๋๋ ์ฆ
- ADHD
- ์ํ ์คํํธ๋ผ
- ๊ธฐ์ต ์ฅ์
- ํ์ต ์ฅ์
๋ฌธ์ ์ :
- ๋ณต์กํ ์ธ์ด
- ๋ฐ์ง๋ ์ฝํ ์ธ
- ์ฃผ์๋ฅผ ์ฐ๋งํ๊ฒ ํ๋ ์์
- ๋ถ๋ช ํํ ๊ตฌ์กฐ
- ์ผ๊ด์ฑ ์๋ ๋์์ธ
์ฒญ๊ฐ ์ฅ์
์ด๋ฉ์ผ์ ๋ฏธ์น๋ ์ํฅ์ด ์ ์: ์ด๋ฉ์ผ์ ์ฃผ๋ก ์๊ฐ์ ์ด๋ฏ๋ก ์ฒญ๊ฐ ์ฅ์ ๊ฐ ์ง์ ์ ์ธ ์ํฅ์ ๋ ๋ฏธ์นฉ๋๋ค. ๊ทธ๋ฌ๋:
- ๋น๋์ค ์ฝํ ์ธ ์๋ ์๋ง์ด ํ์ํฉ๋๋ค
- ์ค๋์ค ์ฝํ ์ธ ์๋ ๋๋ณธ์ด ํ์ํฉ๋๋ค
- ์ค๋์ค ์ ํธ์ ๋ํ ์๊ฐ์ ๋์์ ์์กดํฉ๋๋ค
์คํฌ๋ฆฐ ๋ฆฌ๋ ๊ธฐ์ด
์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ด๋ฉ์ผ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ดํดํฉ๋๋ค.
์คํฌ๋ฆฐ ๋ฆฌ๋ ์๋ ๋ฐฉ์
ํ๋ก์ธ์ค:
- ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ด๋ฉ์ผ ์ฝํ ์ธ ์ ์ก์ธ์ค
- HTML ์์๋ฅผ ์์๋๋ก ์ฝ์
- ์์ ์ ํ(์ ๋ชฉ, ๋งํฌ, ์ด๋ฏธ์ง ๋ฑ)์ ์๋ฆผ
- ์ฌ์ฉ์๊ฐ ํค๋ณด๋ ๋ช ๋ น์ ์ฌ์ฉํ์ฌ ํ์
- ์ฝํ ์ธ ๊ฐ ์์ฑ์ผ๋ก ๋ค๋ฆฌ๊ฑฐ๋ ์ ์ ๋์คํ๋ ์ด๋ก ์ ์ก๋จ
์ธ๊ธฐ ์๋ ์คํฌ๋ฆฐ ๋ฆฌ๋:
- JAWS(Windows)
- NVDA(Windows, ๋ฌด๋ฃ)
- VoiceOver(Mac, iOS)
- TalkBack(Android)
- Narrator(Windows)
์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์๋ ค์ฃผ๋ ๋ด์ฉ
๋ค์ํ ์์์ ๋ํด:
์ ๋ชฉ: "๋ ๋ฒจ 2 ์ ๋ชฉ: ๋ด์ค๋ ํฐ์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค"
์ด๋ฏธ์ง: "์ด๋ฏธ์ง: [๋์ฒด ํ ์คํธ ๋ด์ฉ]" ๋๋ ๋์ฒด ํ ์คํธ๊ฐ ์์ผ๋ฉด "์ด๋ฏธ์ง"
๋งํฌ: "๋งํฌ: ์ง๊ธ ์ผํํ๊ธฐ"
๋ฒํผ: "๋ฒํผ: ๊ตฌ๋ ํ๊ธฐ"
ํ: "3๊ฐ ์ด๊ณผ 5๊ฐ ํ์ด ์๋ ํ"
ํ์ ํจํด
์ฌ์ฉ์๊ฐ ํ์ํ๋ ๋ฐฉ๋ฒ:
- ์ ๋ชฉ๋ณ๋ก ๊ฑด๋๋ฐ๊ธฐ
- ๋งํฌ ๊ฐ ์ด๋
- ํ๋ฅผ ํตํด ์ด๋
- ๋๋๋งํฌ๋ก ํ์
์ค์ํ ์ด์ : ์ด๋ฉ์ผ ๊ตฌ์กฐ๊ฐ ์ฌ์ฉ์๊ฐ ์ผ๋ง๋ ์ฝ๊ฒ ํ์ํ ์ ์๋์ง๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.
์ ๊ทผ์ฑ์ ์ํ ์๋งจํฑ HTML
์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฉ์ผ ๊ตฌ์กฐ ๊ตฌ์ถํ๊ธฐ.
์ ์ ํ ์ ๋ชฉ ๊ณ์ธต ๊ตฌ์กฐ
์ ๋ชฉ์ ๋ ผ๋ฆฌ์ ์ผ๋ก ์ฌ์ฉ:
<h1>๋ฉ์ธ ์ด๋ฉ์ผ ์ ๋ชฉ</h1>
<h2>์น์
1</h2>
<h3>ํ์ ์น์
</h3>
<h2>์น์
2</h2>
<h3>ํ์ ์น์
</h3>
๋ ๋ฒจ์ ๊ฑด๋๋ฐ์ง ๋ง์ธ์:
- โ ์๋ชป๋จ: h1 โ h3 โ h2
- โ ์ฌ๋ฐ๋ฆ: h1 โ h2 โ h3
์ค์ํ ์ด์ : ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ ์ ๋ชฉ์ผ๋ก ํ์ํฉ๋๋ค. ๋ ผ๋ฆฌ์ ๊ณ์ธต ๊ตฌ์กฐ๋ ์ฝํ ์ธ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์๋งจํฑ ์์
์ ์ ํ ํ๊ทธ ์ฌ์ฉ:
<p>๋ ๋จ๋ฝ์<ul>๋ฐ<ol>์ ๋ชฉ๋ก์<table>์ ๋ฐ์ดํฐ ํ์<strong>์ ์ค์ํ ํ ์คํธ์<em>์ ๊ฐ์กฐ์
ํผํด์ผ ํ ๊ฒ:
- ๊ฐ๊ฒฉ์ ์ํด
<br>์ฌ์ฉ(CSS ์ฌ์ฉ) - ๊ณต๊ฐ์ ์ํ ๋น ๋จ๋ฝ
- ๋ ์ด์์์ ์ํ ํ(๊ฐ๋ฅํ ๊ฒฝ์ฐ)
์ธ์ด ์์ฑ
์ธ์ด ์ ์ธ:
<html lang="ko">
์ค์ํ ์ด์ : ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์ธ์ด ์์ฑ์ ์ฌ์ฉํ์ฌ ํ ์คํธ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐ์ํฉ๋๋ค.
๋ค๊ตญ์ด ์ฝํ ์ธ ์ ๊ฒฝ์ฐ:
<p lang="es">Hola, ยฟcรณmo estรกs?</p>
์ด๋ฏธ์ง ์ ๊ทผ์ฑ
์๊ฐ์ ์ฝํ ์ธ ๋ฅผ ์ ๊ทผ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค๊ธฐ.
๋์ฒด ํ ์คํธ ํ์ ์ฌํญ
๋์ฒด ํ ์คํธ๋: ์ด๋ฏธ์ง๋ฅผ ๋ณผ ์ ์๋ ์ฌ๋๋ค์ ์ํด ์ด๋ฏธ์ง๋ฅผ ์ค๋ช ํ๋ ๋์ฒด ํ ์คํธ์ ๋๋ค.
<img src="product.jpg" alt="๊ณจ๋ ํด๋์คํ๊ฐ ๋ฌ๋ฆฐ ๋นจ๊ฐ์ ๊ฐ์ฃฝ ํธ๋๋ฐฑ, $199">
๋์ฒด ํ ์คํธ ๋ชจ๋ฒ ์ฌ๋ก:
์ค๋ช ์ ์ด์ด์ผ ํจ: ์ด๋ฏธ์ง๊ฐ ๋ฌด์์ ๋ณด์ฌ์ฃผ๊ณ ์ ์ค์ํ์ง ์ค๋ช ํฉ๋๋ค.
- โ ๋์จ: "์ด๋ฏธ์ง" ๋๋ "์ฌ์ง"
- โ ๋์จ: "img_12345.jpg"
- โ ์ข์: "ํด๋ํฐ์ผ๋ก ์ฑ์ ์ฌ์ฉํ๋ฉฐ ๋ฏธ์ ์ง๋ ๊ณ ๊ฐ Sarah"
๊ฐ๊ฒฐํด์ผ ํจ: ๊ฐ๋ฅํ๋ฉด 125์ ์ดํ๋ก ๋ชฉํ๋ฅผ ์ค์ ํฉ๋๋ค.
์ค์ํ ์ ๋ณด ํฌํจ: ์ด๋ฏธ์ง์ ํ ์คํธ๊ฐ ํฌํจ๋์ด ์์ผ๋ฉด ๋์ฒด ํ ์คํธ์ ํด๋น ํ ์คํธ๋ฅผ ํฌํจํฉ๋๋ค.
- ์ด๋ฏธ์ง์ "50% ํ ์ธ" ํ์ โ ๋์ฒด ํ ์คํธ์ "50% ํ ์ธ ์ธ์ผ" ํฌํจ
๋ฌธ๋งฅ์ด ์ค์: ํน์ ๋ฌธ๋งฅ์์ ์ด๋ฏธ์ง์ ๋ชฉ์ ์ ์ค๋ช ํฉ๋๋ค.
์ฅ์์ฉ ์ด๋ฏธ์ง
๋น ๋์ฒด ํ ์คํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ: ์ ๋ณด๋ฅผ ์ถ๊ฐํ์ง ์๋ ์์ ํ ์ฅ์์ฉ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ:
<img src="decorative-line.png" alt="">
์ฅ์์ฉ ์ด๋ฏธ์ง์ ์:
- ๊ตฌ๋ถ์
- ๋ฐฐ๊ฒฝ ํจํด
- ์์ ํ ๋ฏธ์ ๊ทธ๋ํฝ
- ์ด๋ฏธ ์ค๋ช ํ๋ ํ ์คํธ ์์ ์์ด์ฝ
์ฌ์ฉํ์ง ๋ง์ธ์:
<img src="decorative.png" alt="์ฅ์์ฉ ์ด๋ฏธ์ง">
์ด๋ ๊ฒ ํ๋ฉด ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ "์ฅ์์ฉ ์ด๋ฏธ์ง"๋ฅผ ์๋ฆฌ๋๋ฐ, ์ด๋ ์ธ๋ชจ๊ฐ ์์ต๋๋ค.
๋ณต์กํ ์ด๋ฏธ์ง
์ธํฌ๊ทธ๋ํฝ ๋ฐ ์ฐจํธ์ ๊ฒฝ์ฐ: ๊ทผ์ฒ์ ์ ์ฒด ํ ์คํธ ๋์์ ์ ๊ณตํฉ๋๋ค.
<img src="sales-chart.png" alt="์ฑ์ฅ์ ๋ณด์ฌ์ฃผ๋ ํ๋งค ์ฐจํธ. ์๋ ํ์ ์ ์ฒด ๋ฐ์ดํฐ๊ฐ ์์ต๋๋ค."> <!-- ์ค์ ์ซ์๊ฐ ์๋ ๋ฐ์ดํฐ ํ --> <table> <tr><th>์</th><th>ํ๋งค</th></tr> <tr><td>1์</td><td>$50,000</td></tr> ... </table>
ํ ์คํธ ์ด๋ฏธ์ง
์ด๋ฏธ์ง์ ํ ์คํธ ํผํ๊ธฐ:
- ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์ด๋ฏธ์ง์ ํ ์คํธ๋ฅผ ์ฝ์ ์ ์์ต๋๋ค
- ํ ์คํธ๋ฅผ ์ฌ์ฉ์๊ฐ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ์ ์์ต๋๋ค
- ์ฌ์ฉ์ ๊ธฐ๋ณธ ์ค์ ์ ์ ์ํ์ง ์์ต๋๋ค
๋ถ๊ฐํผํ ๊ฒฝ์ฐ: ๋์ฒด ์์ฑ์ ๋ชจ๋ ํ ์คํธ๋ฅผ ํฌํจํฉ๋๋ค.
<img src="sale-banner.jpg" alt="์ฌ๋ฆ ์ธ์ผ: ๋ชจ๋ ํ๋ชฉ 40% ํ ์ธ. ์ฝ๋ SUMMER40 ์ฌ์ฉ. 7์ 31์ผ ์ข ๋ฃ.">
์์ ๋ฐ ๋๋น
์๊ฐ์ ์ ๊ทผ์ฑ ๋ณด์ฅํ๊ธฐ.
์์ ๋๋น ์๊ตฌ ์ฌํญ
์ผ๋ฐ ํ ์คํธ(18px ๋ฏธ๋ง ๋๋ 14px ๊ตต๊ฒ):
- AA: ์ต์ 4.5:1 ๋๋น ๋น์จ
- AAA: 7:1 ๋๋น ๋น์จ(ํฅ์)
ํฐ ํ ์คํธ(18px ์ด์ ๋๋ 14px ์ด์ ๊ตต๊ฒ):
- AA: ์ต์ 3:1 ๋๋น ๋น์จ
- AAA: 4.5:1 ๋๋น ๋น์จ
๋นํ ์คํธ ์์(๋ฒํผ, ์์ ํ๋):
- ์ต์ 3:1 ๋๋น ๋น์จ
๋๋น ํ์ธ
๋ฌด๋ฃ ๋๊ตฌ:
- WebAIM ๋๋น ๊ฒ์ฌ๊ธฐ
- Colour Contrast Analyser
- Stark(Figma ํ๋ฌ๊ทธ์ธ)
- ๋ด์ฅ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ
ํ ์คํธ ํ๋ก์ธ์ค:
- ํ ์คํธ ์์๊ณผ ๋ฐฐ๊ฒฝ์ ์๋ณ
- ๊ฒ์ฌ๊ธฐ์ 16์ง์ ๊ฐ ์ ๋ ฅ
- AA ํ์ค ์ต์๊ฐ ์ถฉ์กฑ ํ์ธ
- ํ์ํ ๊ฒฝ์ฐ ์์ ์กฐ์
์ผ๋ฐ์ ์ธ ๋๋น ์คํจ
๋ฌธ์ ๊ฐ ์๋ ์กฐํฉ:
- ํฐ์ ์์ ์ฐํ ํ์
- ํฐ์ ์์ ๋ ธ๋์
- ํฐ์ ์์ ์ฐํ ํ๋์
- ๋นจ๊ฐ์ ์์ ์ฃผํฉ์
- ๋นจ๊ฐ์ ์์ ๋ น์
๋ ๋์ ๋์:
- ํฐ์(#FFF) ์์ ์งํ ํ์(#333) = 12.63:1 โ
- ํฐ์ ์์ ์งํ ํ๋์(#0000AA) = 9.98:1 โ
- ์งํ ํ๋์(#003366) ์์ ํฐ์ = 8.6:1 โ
์์๋ง์ผ๋ก ์์กดํ์ง ๋ง์ธ์
๋ฌธ์ : ์๋งน ์ฌ์ฉ์๋ ์ผ๋ถ ์์์ ๊ตฌ๋ณํ ์ ์์ต๋๋ค.
์:
- ์ค๋ฅ/์ฑ๊ณต์ ๋นจ๊ฐ์/๋ น์
- ์์์ผ๋ก ๊ตฌ๋ถ๋ ์นดํ ๊ณ ๋ฆฌ
- ์์๋ง ์๋ ๋ฒ๋ก๊ฐ ์๋ ์ฐจํธ
ํด๊ฒฐ์ฑ : ์์๊ณผ ๋ค๋ฅธ ํ์๊ธฐ๋ฅผ ํจ๊ป ์ฌ์ฉ:
- ์์ด์ฝ
- ํ ์คํธ ๋ ์ด๋ธ
- ํจํด
- ๋ชจ์
์:
<!-- ๋์จ --> <span style="color: red;">์ค๋ฅ</span> <!-- ์ข์ --> <span style="color: red;">โ ์ค๋ฅ: ์ ํจํ ์ด๋ฉ์ผ์ ์ ๋ ฅํ์ธ์</span>
๋งํฌ ์ ๊ทผ์ฑ
๋ชจ๋ ์ฌ๋์ด ์ฌ์ฉํ ์ ์๋ ๋งํฌ ๋ง๋ค๊ธฐ.
์ค๋ช ์ ์ธ ๋งํฌ ํ ์คํธ
์ฌ์ฉํ์ง ๋ง์ธ์:
- "์ฌ๊ธฐ๋ฅผ ํด๋ฆญํ์ธ์"
- "๋ ์ฝ๊ธฐ"
- "์์ธํ ์์๋ณด๊ธฐ"
- "์ฌ๊ธฐ"
๋ฌธ์ ์ธ ์ด์ : ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ ์ข ์ข ๋งํฌ๋ก ํ์ํฉ๋๋ค. ๋ฌธ๋งฅ ์์ด "์ฌ๊ธฐ๋ฅผ ํด๋ฆญํ์ธ์"๋ ์๋ฏธ๊ฐ ์์ต๋๋ค.
๋์ ์ฌ์ฉ: ๋งํฌ๊ฐ ์ด๋๋ก ๊ฐ๋์ง ์ค๋ช ํ๋ ์ค๋ช ์ ์ธ ํ ์คํธ.
<!-- ๋์จ --> <a href="/sale">์ฌ๊ธฐ๋ฅผ ํด๋ฆญํ์ธ์</a> ์ฌ๋ฆ ์ธ์ผ์ ๋ณด๋ ค๋ฉด. <!-- ์ข์ --> <a href="/sale">์ฌ๋ฆ ์ธ์ผ ๋ณด๊ธฐ</a> <!-- ๋ํ ์ข์ --> <a href="/sale">๋ชจ๋ ํ๋ชฉ 40% ํ ์ธ ์ฌ๋ฆ ์ธ์ผ</a>์ ํ์ธํ์ธ์.
๋งํฌ ์คํ์ผ๋ง
๋งํฌ๋ฅผ ์ธ์ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค๊ธฐ:
- ๋ฐ์ค(๊ฐ์ฅ ์ ๋ขฐํ ์ ์์)
- ์์ ๋ณ๊ฒฝ(์ถฉ๋ถํ ๋๋น ์ฌ์ฉ)
- ๋ฐ์ค๊ณผ ์์ ๋ชจ๋(์ต์ )
์์๋ง์ผ๋ก ์์กดํ์ง ๋ง์ธ์: ์๋งน ์ฌ์ฉ์๋ ์์๋ง ์๋ ๋งํฌ๋ฅผ ์์์ฐจ๋ฆฌ์ง ๋ชปํ ์ ์์ต๋๋ค.
๋งํฌ ํฌ๊ธฐ ๋ฐ ๊ฐ๊ฒฉ
ํฐ์น ๋์ ํฌ๊ธฐ:
- ์ต์ 44x44 ํฝ์ ๊ถ์ฅ
- ๋งํฌ ์ฌ์ด์ ์ ์ ํ ๊ฐ๊ฒฉ
- ์ค์๋ก ํด๋ฆญํ๋ ๊ฒ์ ๋ฐฉ์ง
์:
<a href="/option1" style="display: inline-block; padding: 10px;">์ต์ 1</a> <a href="/option2" style="display: inline-block; padding: 10px;">์ต์ 2</a>
์ ์ฐฝ์ ์ฌ๋ ๋งํฌ
์ธ๋ถ ๋งํฌ ํ์: ๋งํฌ๊ฐ ์ ์ฐฝ์ด๋ ํญ์ ์ด ๋ ์ฌ์ฉ์์๊ฒ ์๋ฆฝ๋๋ค.
<a href="https://external.com" target="_blank"> ์ธ๋ถ ์ฌ์ดํธ(์ ์ฐฝ์์ ์ด๋ฆผ) </a>
๋๋ ์๊ฐ์ ํ์๊ธฐ ์ฌ์ฉ:
<a href="https://external.com" target="_blank"> ์ธ๋ถ ์ฌ์ดํธ โ </a>
ํ ์ ๊ทผ์ฑ
๋ฐ์ดํฐ ํ๋ฅผ ์ ๊ทผ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค๊ธฐ.
ํ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ
ํ ์ฌ์ฉ ๋์:
- ์ค์ ๋ฐ์ดํฐ(์คํ๋ ๋์ํธ์ ์ ์ฌํ ์ฝํ ์ธ )
- ๋น๊ต ์ ๋ณด
- ์ผ์ ๋ฐ ๋ฌ๋ ฅ
ํ๋ฅผ ์ฌ์ฉํ์ง ๋ง์์ผ ํ ๊ฒฝ์ฐ:
- ๋ ์ด์์/์์น ์ง์ (๊ฐ๋ฅํ ๊ฒฝ์ฐ)
- ์ด ๋ง๋ค๊ธฐ(CSS ์ฌ์ฉ)
- ์ฝํ ์ธ ๊ฐ๊ฒฉ ์กฐ์
์ ๊ทผ ๊ฐ๋ฅํ ํ ๊ตฌ์กฐ
ํ์ ์์:
<table role="presentation"> <!-- ๋ ์ด์์ ํ์ ๊ฒฝ์ฐ -->
<!-- ๋ฐ์ดํฐ ํ์ ๊ฒฝ์ฐ -->
<table>
<caption>์ ํ ๋น๊ต</caption>
<thead>
<tr>
<th scope="col">๊ธฐ๋ฅ</th>
<th scope="col">๊ธฐ๋ณธ</th>
<th scope="col">ํ๋ก</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">์ ์ฅ ๊ณต๊ฐ</th>
<td>10GB</td>
<td>100GB</td>
</tr>
</tbody>
</table>
ํ ํค๋
<th> ์์ ์ฌ์ฉ: ํค๋ ์
์ ์คํ์ผ์ด ์ ์ฉ๋ <td>๊ฐ ์๋ <th>๋ก ํ์ํฉ๋๋ค.
๋ฒ์ ์์ฑ ์ฌ์ฉ:
scope="col"์ ์ด ํค๋์scope="row"๋ ํ ํค๋์
๋ณต์กํ ํ: ์ฌ๋ฌ ํค๋ ๋ ๋ฒจ์ด ์๋ ๋ณต์กํ ํ์ ๊ฒฝ์ฐ id ๋ฐ headers ์์ฑ์ ์ฌ์ฉํฉ๋๋ค.
ํ ์บก์
๋ฌธ๋งฅ ์ ๊ณต:
<table> <caption>2024๋ 3๋ถ๊ธฐ ์ง์ญ๋ณ ํ๋งค</caption> ... </table>
์บก์ ์ ์ฌ์ฉ์๊ฐ ๋ฐ์ดํฐ์ ๋ค์ด๊ฐ๊ธฐ ์ ์ ํ์ ๋ชฉ์ ์ ์ดํดํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ ๊ณ ๋ ค ์ฌํญ
๋ค์ํ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์์์ ์ ๊ทผ์ฑ.
์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ ์ ํ ์ฌํญ
์ผ๋ฐ์ ์ธ ๋ฌธ์ :
- ์คํ์ผ์ด ์ ๊ฑฐ๋๊ฑฐ๋ ์์ ๋จ
- ์ ํ๋ CSS ์ง์
- ๋ค์ํ ๋ ๋๋ง ์์ง
- ์ผ๊ด๋์ง ์์ ARIA ์ง์
ํด๋ผ์ด์ธํธ ๊ฐ ํ ์คํธ
์ฐ์ ์์ ํด๋ผ์ด์ธํธ:
- Apple Mail(์ต๊ณ ์ ์ ๊ทผ์ฑ)
- Outlook(๊ฐ๋ณ์ )
- Gmail(๋ง์ CSS ์ ๊ฑฐ)
- Yahoo(์ ํ์ )
ํ ์คํธ ๋๊ตฌ:
- Litmus
- Email on Acid
- ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์๋ ์ค์ ์ฅ์น
๋คํฌ ๋ชจ๋ ์ ๊ทผ์ฑ
๋คํฌ ๋ชจ๋ ๋ฌธ์ :
- ์์ ๋ฐ์
- ๋๋น ๋ณ๊ฒฝ
- ์ด๋ฏธ์ง ๋ฐฐ๊ฒฝ
ํด๊ฒฐ์ฑ :
- ๋คํฌ ๋ชจ๋์์ ํ ์คํธ
- ํฌ๋ช ํ ์ด๋ฏธ์ง ๋ฐฐ๊ฒฝ ์ฌ์ฉ
- ๋๋น๊ฐ ์๋ฐฉํฅ์ผ๋ก ์๋ํ๋์ง ํ์ธ
- ๊ฐ๋ฅํ ๊ฒฝ์ฐ ๋คํฌ ๋ชจ๋ ์ ์ฉ ์คํ์ผ ์ ๊ณต
์ฝํ ์ธ ์ ๊ทผ์ฑ
์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฉ์ผ ์ฝํ ์ธ ์์ฑํ๊ธฐ.
ํ์ดํ ์ธ์ด
๋ช ํํ๊ฒ ์์ฑ:
- ๊ฐ๋จํ ๋จ์ด ์ฌ์ฉ
- ์งง์ ๋ฌธ์ฅ
- ๋ฅ๋ํ
- ์ ๋ฌธ ์ฉ์ด ํผํ๊ธฐ
๊ฐ๋ ์ฑ ๋ชฉํ: 8ํ๋ ๋ ์ ์์ค ์ดํ๋ฅผ ๋ชฉํ๋ก ํฉ๋๋ค.
์:
์ด์ : "์ํฌํ๋ก๋ฅผ ์ต์ ํํ๊ธฐ ์ํด ํฌ๊ด์ ์ธ ์๋ฃจ์ ์ ํ์ฉํ์ญ์์ค" ์ดํ: "๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋น ๋ฅด๊ฒ ์์ ํ์ธ์"
๊ตฌ์กฐ ๋ฐ ์์
๋ช ํํ ๊ตฌ์กฐ ์ฌ์ฉ:
- ์น์ ์ฉ ์ ๋ชฉ
- ๋ชฉ๋ก์ฉ ๊ธ๋จธ๋ฆฌ ๊ธฐํธ
- ์งง์ ๋จ๋ฝ
- ์ฌ๋ฐฑ
์๊ฐ์ ๊ณ์ธต:
- ๊ฐ์ฅ ์ค์ํ ์ ๋ณด๋ฅผ ๋จผ์
- ๋ช ํํ ์๊ฐ์ ๊ตฌ๋ถ
- ์ผ๊ด๋ ์์
์ฝ๊ธฐ ์์
๋ ผ๋ฆฌ์ ์์ ๋ณด์ฅ: ์ฝ๋์ ์ฝ๊ธฐ ์์๋ ์๊ฐ์ ์์์ ์ผ์นํด์ผ ํฉ๋๋ค.
ํ ์คํธ: CSS๋ฅผ ๋นํ์ฑํํ๊ณ ์ฝํ ์ธ ๊ฐ ์ฌ์ ํ ์๋ฏธ๊ฐ ์๋์ง ํ์ธํฉ๋๋ค.
ํ ์คํธ ๋ฒฝ ํผํ๊ธฐ
์ฝํ ์ธ ๋๋๊ธฐ:
- ๋จ๋ฝ๋น ์ต๋ 3-4๊ฐ ๋ฌธ์ฅ
- ๋ช ๋จ๋ฝ๋ง๋ค ๋ถ์ ๋ชฉ ์ฌ์ฉ
- ์๊ฐ์ ๊ตฌ๋ถ ํฌํจ
๋ฒํผ ๋ฐ CTA ์ ๊ทผ์ฑ
์ ๊ทผ ๊ฐ๋ฅํ ํ๋ ์ ๋ ๋ง๋ค๊ธฐ.
๋ฒํผ vs. ๋งํฌ
๋ฒํผ ์ฌ์ฉ ๋์: ์์ (์ ์ถ, ์ฅ๋ฐ๊ตฌ๋์ ์ถ๊ฐ, ๊ฐ์ )
๋งํฌ ์ฌ์ฉ ๋์: ํ์(ํ์ด์ง๋ก ์ด๋, ๋ ์ฝ๊ธฐ)
์ ๊ทผ ๊ฐ๋ฅํ ๋ฒํผ ๋์์ธ
๋ฒํผ ์๊ตฌ ์ฌํญ:
- ์์ ์ ์ค๋ช ํ๋ ๋ช ํํ ํ ์คํธ
- ์ถฉ๋ถํ ํฌ๊ธฐ(์ต์ 44x44px)
- ๋์ ๋๋น
- ๋ช ๋ฐฑํ๊ฒ ํด๋ฆญ ๊ฐ๋ฅํ ๋ชจ์
๋ฒํผ ํ ์คํธ:
<!-- ๋์จ --> <a href="/buy">์ ์ถ</a> <!-- ์ข์ --> <a href="/buy">์ง๊ธ ๊ตฌ๋งค - $49</a>
์ฌ๋ฌ ๋ฒํผ
์์ ๊ตฌ๋ณ: ์ฌ๋ฌ ๋ฒํผ์ด ์์ ๋ ๊ฐ๊ฐ์ ๊ณ ์ ํ๊ณ ๋ช ํํ๊ฒ ๋ง๋ญ๋๋ค.
<a href="/plan-basic">๊ธฐ๋ณธ ํ๋ ์ ํ</a> <a href="/plan-pro">ํ๋ก ํ๋ ์ ํ</a> <!-- ์๋ --> <a href="/plan-basic">์ ํ</a> <a href="/plan-pro">์ ํ</a>
์ด๋ฉ์ผ์ ์์
์ ๊ทผ ๊ฐ๋ฅํ ์์ ์์(์ง์๋๋ ๊ฒฝ์ฐ).
์์ ์ ๊ทผ์ฑ ๊ธฐ์ด
์ฐธ๊ณ : ์ค์ ์์์ ์ด๋ฉ์ผ ์ง์์ด ์ ํ์ ์ ๋๋ค. ๋๋ถ๋ถ์ "์์"์ ์น ํ์ด์ง๋ก ์ฐ๊ฒฐ๋ฉ๋๋ค.
์์์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ:
๋ ์ด๋ธ:
<label for="email">์ด๋ฉ์ผ ์ฃผ์</label> <input type="email" id="email" name="email">
ํ์ ํ๋:
<label for="email">์ด๋ฉ์ผ ์ฃผ์(ํ์)</label> <input type="email" id="email" required aria-required="true">
์ค๋ฅ ๋ฉ์์ง
์ ๊ทผ ๊ฐ๋ฅํ ์ค๋ฅ ์ฒ๋ฆฌ:
- ๋ช ํํ ์ค๋ฅ ๋ฉ์์ง
- ์์ ํ๋์ ์ฐ๊ฒฐ๋จ
- ์์๋ง์ผ๋ก ํ์ํ์ง ์์
<label for="email">์ด๋ฉ์ผ ์ฃผ์</label> <input type="email" id="email" aria-describedby="email-error"> <span id="email-error" style="color: red;"> โ ์ ํจํ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์ ๋ ฅํ์ธ์ </span>
์ ๊ทผ์ฑ ํ ์คํธ
์ด๋ฉ์ผ์ด ์ ๊ทผ ๊ฐ๋ฅํ์ง ํ์ธํ๊ธฐ.
์๋ํ๋ ํ ์คํธ
๋๊ตฌ:
- WAVE ๋ธ๋ผ์ฐ์ ํ์ฅ ํ๋ก๊ทธ๋จ
- axe ์ ๊ทผ์ฑ ๊ฒ์ฌ๊ธฐ
- Lighthouse(Chrome DevTools)
- ์ ๊ทผ์ฑ ๊ธฐ๋ฅ์ด ์๋ ์ด๋ฉ์ผ ํ ์คํธ ํ๋ซํผ
์๋ํ๋ ํ ์คํธ๊ฐ ์ฐพ๋ ๊ฒ:
- ๋๋ฝ๋ ๋์ฒด ํ ์คํธ
- ์์ ๋๋น ๋ฌธ์
- ๋๋ฝ๋ ๋ ์ด๋ธ
- ์ ๋ชฉ ๊ณ์ธต ๊ตฌ์กฐ ๋ฌธ์
- ์ธ์ด ์์ฑ
์ ํ ์ฌํญ: ์๋ํ๋ ํ ์คํธ๋ ์ฝ 30%์ ๋ฌธ์ ๋ฅผ ์ฐพ์ต๋๋ค. ์๋ ํ ์คํธ๊ฐ ํ์์ ์ ๋๋ค.
์๋ ํ ์คํธ
ํค๋ณด๋ ํ ์คํธ:
- Tab ํค๋ง ์ฌ์ฉํ์ฌ ์ด๋ฉ์ผ ํ์
- ๋ชจ๋ ๋ํํ ์์์ ๋๋ฌํ ์ ์์ต๋๊น?
- ํฌ์ปค์ค๊ฐ ๋ณด์ ๋๊น?
- ์์๊ฐ ๋ ผ๋ฆฌ์ ์ ๋๊น?
์คํฌ๋ฆฐ ๋ฆฌ๋ ํ ์คํธ:
- ์คํฌ๋ฆฐ ๋ฆฌ๋๋ก ์ด๋ฉ์ผ ๋ฃ๊ธฐ
- ์๋ฏธ๊ฐ ์์ต๋๊น?
- ์ด๋ฏธ์ง๊ฐ ์ ๋๋ก ์ค๋ช ๋์ด ์์ต๋๊น?
- ๊ตฌ์กฐ๊ฐ ๋ช ํํฉ๋๊น?
์๊ฐ์ ํ ์คํธ:
- 200%๋ก ํ๋ - ์ฝํ ์ธ ๊ฐ ์ฌ์ ํ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๊น?
- ์ด๋ฏธ์ง ์ ๊ฑฐ - ์ด๋ฉ์ผ์ด ์ฌ์ ํ ์๋ํฉ๋๊น?
- ํ์์กฐ๋ก ํ์ธ - ์ดํดํ ์ ์์ต๋๊น?
ํ ์คํธ ์ฒดํฌ๋ฆฌ์คํธ
๋ชจ๋ ์ ์ก ์ :
- [ ] ๋ชจ๋ ์ด๋ฏธ์ง์ ๋์ฒด ํ ์คํธ ์์
- [ ] ์์ ๋๋น๊ฐ ํ์ค ์ถฉ์กฑ
- [ ] ์ ๋ชฉ์ด ์ ์ ํ๊ฒ ๊ตฌ์กฐํ๋จ
- [ ] ๋งํฌ๊ฐ ์ค๋ช ์ ์
- [ ] ์ฝํ ์ธ ๊ฐ ๋ช ํํ๊ฒ ๊ตฌ์ฑ๋จ
- [ ] ์คํฌ๋ฆฐ ๋ฆฌ๋๋ก ํ ์คํธ๋จ
- [ ] ํค๋ณด๋ ํ์ ํ ์คํธ๋จ
์ ๊ทผ์ฑ ์ฒดํฌ๋ฆฌ์คํธ
๊ตฌ์กฐ
- [ ] ์ ์ ํ ์ ๋ชฉ ๊ณ์ธต ๊ตฌ์กฐ(h1, h2, h3)
- [ ] ๋ ผ๋ฆฌ์ ์ฝ๊ธฐ ์์
- [ ] ์ธ์ด ์์ฑ ์ค์ ๋จ
- [ ] ์๋งจํฑ HTML ์ฌ์ฉ๋จ
์ด๋ฏธ์ง
- [ ] ์๋ฏธ ์๋ ๋ชจ๋ ์ด๋ฏธ์ง์ ๋์ฒด ํ ์คํธ
- [ ] ์ฅ์์ฉ ์ด๋ฏธ์ง์ ๋น ๋์ฒด ํ ์คํธ
- [ ] ์ด๋ฏธ์ง์ ํ ์คํธ์ ๋์ฒด ํ ์คํธ ๋๋ฑ๋ฌผ
- [ ] ๋ณต์กํ ์ด๋ฏธ์ง์ ์์ธํ ์ค๋ช
์์ ๋ฐ ๋๋น
- [ ] ํ ์คํธ๊ฐ 4.5:1 ๋๋น ๋น์จ ์ถฉ์กฑ
- [ ] ๋งํฌ๋ฅผ ๊ตฌ๋ณํ ์ ์์
- [ ] ์์์ด ์ ์ผํ ํ์๊ธฐ๊ฐ ์๋
- [ ] ๋คํฌ ๋ชจ๋์์ ์๋ํจ
๋งํฌ ๋ฐ ๋ฒํผ
- [ ] ์ค๋ช ์ ์ธ ๋งํฌ ํ ์คํธ
- [ ] ์ ์ ํ ํฐ์น ๋์(44px)
- [ ] ๋ช ํํ ์๊ฐ์ ๊ตฌ๋ถ
- [ ] ์ธ๋ถ ๋งํฌ ํ์๋จ
์ฝํ ์ธ
- [ ] ํ์ดํ ์ธ์ด ์ฌ์ฉ๋จ
- [ ] ์งง์ ๋จ๋ฝ
- [ ] ๋ช ํํ ๊ตฌ์กฐ
- [ ] ์ค์ํ ์ ๋ณด๋ฅผ ๋จผ์
ํ
- [ ] ํค๋ ์
์ด
<th>๋ก ํ์๋จ - [ ] ๋ฒ์ ์์ฑ ์ฌ์ฉ๋จ
- [ ] ์บก์ ์ ๊ณต๋จ
- [ ] ๊ฐ๋จํ ๊ตฌ์กฐ ์ ํธ๋จ
์ผ๋ฐ์ ์ธ ์ ๊ทผ์ฑ ์ค์
์ค์ 1: ๋์ฒด ํ ์คํธ ๋๋ฝ
๋ฌธ์ : ๋์ฒด ํ ์คํธ๊ฐ ์๋ ์ด๋ฏธ์ง. ์์ : ์๋ฏธ ์๋ ๋ชจ๋ ์ด๋ฏธ์ง์ ์ค๋ช ์ ์ธ ๋์ฒด ํ ์คํธ ์ถ๊ฐ.
์ค์ 2: "์ฌ๊ธฐ๋ฅผ ํด๋ฆญํ์ธ์" ๋งํฌ
๋ฌธ์ : ์ค๋ช ์ด ์๋ ๋งํฌ ํ ์คํธ. ์์ : ๋ชฉ์ ์ง๋ฅผ ์ค๋ช ํ๋ ์ค๋ช ์ ์ธ ํ ์คํธ ์ฌ์ฉ.
์ค์ 3: ๋ฎ์ ๋๋น
๋ฌธ์ : ์ฝ๊ธฐ ์ด๋ ค์ด ํ ์คํธ. ์์ : ์ต์ 4.5:1 ๋๋น ๋น์จ ๋ณด์ฅ.
์ค์ 4: ์์๋ง์ผ๋ก ์๋ฏธ ์ ๋ฌ
๋ฌธ์ : ์ ๋ณด๋ฅผ ์ ๋ฌํ๊ธฐ ์ํด ์์๋ง ์ฌ์ฉ. ์์ : ๋ณด์กฐ ํ์๊ธฐ๋ก ํ ์คํธ, ์์ด์ฝ ๋๋ ํจํด ์ถ๊ฐ.
์ค์ 5: ํ ์คํธ ์ด๋ฏธ์ง
๋ฌธ์ : ์ค์ํ ํ ์คํธ๊ฐ ์ด๋ฏธ์ง์ ์์. ์์ : ์ค์ ํ ์คํธ ์ฌ์ฉ; ๋ถ๊ฐํผํ ๊ฒฝ์ฐ ๋์ฒด ํ ์คํธ์ ์ด๋ฏธ์ง ํ ์คํธ ํฌํจ.
์ค์ 6: ๊ฑด๋๋ด ์ ๋ชฉ ๋ ๋ฒจ
๋ฌธ์ : h1์ด h3๋ก ๊ฑด๋๋. ์์ : ๋ ผ๋ฆฌ์ ์ ๋ชฉ ๊ณ์ธต ๊ตฌ์กฐ ์ฌ์ฉ.
์ค์ 7: ๋ณต์กํ ํ
๋ฌธ์ : ์ค์ฒฉ๋๊ฑฐ๋ ๋ณํฉ๋ ์ ์ด ํ๋ฅผ ํ์ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ฆ. ์์ : ํ ๊ตฌ์กฐ ๋จ์ํ; ๊ฐ๋จํ ํ๊ณผ ์ด ์ฌ์ฉ.
๋ฐ์ดํฐ ํ์ง๊ณผ ์ ๊ทผ์ฑ
๋ชฉ๋ก ๊ฑด๊ฐ๊ณผ ์ ๊ทผ ๊ฐ๋ฅํ ๊ฒฝํ ๊ฐ์ ์ฐ๊ฒฐ.
์ค์ํ ์ด์
์ ํจํ ์ด๋ฉ์ผ๋ก ๊ฐ๋ฅํ ๊ฒ:
- ์ผ๊ด๋ ๊ฒฝํ ์ ๊ณต
- ์ ํํ ์ฐธ์ฌ๋ ์ถ์
- ์ ์ ํ ์ ๊ทผ์ฑ ํ ์คํธ ํผ๋๋ฐฑ
์๋ชป๋ ์ฃผ์์ ์๋ฏธ:
- ์ ๊ทผ์ฑ ๋ ธ๋ ฅ ๋ญ๋น
- ์๊ณก๋ ์ฐธ์ฌ๋ ์งํ
- ์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฉ์ผ์ด ๋ ๋์ ์ฑ๊ณผ๋ฅผ ๋ด๋์ง ์ธก์ ํ ์ ์์
๋ชจ๋ ์ ํจํ ๊ตฌ๋ ์๋ฅผ ์ํ ์ ๊ทผ์ฑ
๋ชฉ๋ก์ ํ์ธํ๋ฉด ์ ๊ทผ์ฑ ๊ฐ์ ์ด ํํ์ ๋ฐ๋ ์ค์ ์ฌ๋๋ค์๊ฒ ๋๋ฌํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
๊ฒฐ๋ก
์ด๋ฉ์ผ ์ ๊ทผ์ฑ์ ์ ํ ์ฌํญ์ด ์๋๋๋ค. ์ ์ฒด ๋์ ๊ณ ๊ฐ์๊ฒ ๋๋ฌํ๊ณ ๋ฒ์ ์๊ตฌ ์ฌํญ์ ์ค์ํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ๋ ์ค์ํ ๊ฒ์ ์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฉ์ผ์ด ๋ชจ๋ ์ฌ๋์๊ฒ ๋ ๋์ ๊ฒฝํ์ ์ ๊ณตํ๋ค๋ ๊ฒ์ ๋๋ค.
์ฃผ์ ์ ๊ทผ์ฑ ์์น:
- ์๋งจํฑ ๊ตฌ์กฐ ์ฌ์ฉ: ์ ์ ํ ์ ๋ชฉ, ๋ชฉ๋ก ๋ฐ ์์
- ์ด๋ฏธ์ง ์ค๋ช : ๋ชจ๋ ๋น์ฅ์ ์ด๋ฏธ์ง์ ์๋ฏธ ์๋ ๋์ฒด ํ ์คํธ
- ๋๋น ๋ณด์ฅ: ํ ์คํธ์ ์ต์ 4.5:1
- ์ค๋ช ์ ์ธ ๋งํฌ ์์ฑ: "์ฌ๊ธฐ๋ฅผ ํด๋ฆญํ์ธ์" ์ฌ์ฉ ๊ธ์ง
- ๋ณด์กฐ ๊ธฐ์ ๋ก ํ ์คํธ: ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ๋ณผ ์ ์๋ ๋ฌธ์ ๋ฅผ ๋๋ฌ๋
์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฉ์ผ์ ์ ํจํ ๋ฐ์ ํธ์งํจ์ ๋๋ฌํ ๋๋ง ์ค์ํฉ๋๋ค. ์๋ชป๋ ์ด๋ฉ์ผ์ ์ ๊ทผ์ฑ ๋ ธ๋ ฅ์ด ํ์ํ ์ฌ๋๋ค์๊ฒ ์ ๋ ๋๋ฌํ์ง ๋ชปํ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฉ์ผ์ด ์ ํจํ ๊ตฌ๋ ์์๊ฒ ๋๋ฌํ๋๋ก ๋ณด์ฅํ ์ค๋น๊ฐ ๋์ จ์ต๋๊น? BillionVerify๋ก ์์ํ์ธ์ ๋ชฉ๋ก์ ํ์ธํ๊ณ ํฌ์ฉ์ ์ธ ์ด๋ฉ์ผ ๋์์ธ์ ์ํฅ์ ๊ทน๋ํํ์ธ์.