WCAG ์ค์๋ฅผ ์ํ ์์ ๋๋น ์๊ตฌ์ฌํญ์ ์์๋ณด๊ณ , ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ํฌํจํ ์ ์ธ๊ณ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์.
์์ ๋๋น: ๊ธ๋ก๋ฒ ์ ๊ทผ์ฑ์ ์ํ WCAG ์ค์ ์ข ํฉ ๊ฐ์ด๋
์ค๋๋ ์ ๋์งํธ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ๋ ๊ฒ์ ๋จ์ํ ๋ชจ๋ฒ ์ฌ๋ก๊ฐ ์๋๋ผ ํฌ์ฉ์ ๋์์ธ์ ์ค์ํ ์์์ ๋๋ค. ์น ์ ๊ทผ์ฑ์ ํต์ฌ ๊ตฌ์ฑ ์์๋ ์น ์ฝํ ์ธ ์ ๊ทผ์ฑ ๊ฐ์ด๋๋ผ์ธ(WCAG), ํนํ ์์ ๋๋น์ ๊ดํ ๊ฐ์ด๋๋ผ์ธ์ ์ค์ํ๋ ๊ฒ์ ๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋๋ WCAG์ ๋ฐ๋ฅธ ์์ ๋๋น ์๊ตฌ์ฌํญ์ ๋ณต์กํ ๋ด์ฉ์ ์์ธํ ์ดํด๋ณด๊ณ , ์ ์ธ๊ณ์ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ ๊ทผํ ์ ์๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์ํ ์ง์๊ณผ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
๊ธ๋ก๋ฒ ์ ๊ทผ์ฑ์์ ์์ ๋๋น๊ฐ ์ค์ํ ์ด์
์์ ๋๋น๋ ์ ๊ฒฝ(ํ ์คํธ, ์์ด์ฝ)๊ณผ ๋ฐฐ๊ฒฝ์ ๊ฐ์ ํ๋(๋ฐ๊ธฐ) ์ฐจ์ด๋ฅผ ์๋ฏธํฉ๋๋ค. ์ถฉ๋ถํ ์์ ๋๋น๋ ์ ์๋ ฅ, ์๋งน ๋๋ ๊ธฐํ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ธ์ํ๊ณ ์ดํดํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ ์ ํ ๋๋น๊ฐ ์์ผ๋ฉด ํ ์คํธ๋ฅผ ์ฝ๊ธฐ ์ด๋ ต๊ฑฐ๋ ๋ถ๊ฐ๋ฅํด์ ธ ์ ๋ณด ๋ฐ ๊ธฐ๋ฅ์ ๋ํ ์ ๊ทผ์ ๋ฐฉํดํ ์ ์์ต๋๋ค. ๋ํ, ๋ถ๋ํ ์์ ๋๋น๋ ๊ตฌํ ๋ชจ๋ํฐ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๋ฐ์ ํ๋น ์๋์ ์๋ ์ฌ์ฉ์์๊ฒ๋ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
์ ์ธ๊ณ์ ์ผ๋ก ์๋ฐฑ๋ง ๋ช ์ ์ฌ๋๋ค์ด ์ด๋ค ํํ๋ก๋ ์๊ฐ ์ฅ์ ๋ฅผ ๊ฒช๊ณ ์์ต๋๋ค. ์ธ๊ณ๋ณด๊ฑด๊ธฐ๊ตฌ(WHO)์ ๋ฐ๋ฅด๋ฉด, ์ต์ 22์ต ๋ช ์ ์ฌ๋๋ค์ด ๊ทผ๊ฑฐ๋ฆฌ ๋๋ ์๊ฑฐ๋ฆฌ ์๋ ฅ ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ด๋ ์ ๊ทผ์ฑ์ ์ผ๋์ ๋๊ณ ๋์์ธํ๋ ๊ฒ์ด ์ผ๋ง๋ ์ค์ํ์ง๋ฅผ ๊ฐ์กฐํฉ๋๋ค. WCAG ์์ ๋๋น ํ์ค์ ์ค์ํจ์ผ๋ก์จ ์น์ฌ์ดํธ๊ฐ ํจ์ฌ ๋ ๋ง์ ์ ์ฌ ๊ณ ๊ฐ์๊ฒ ์ฌ์ฉ๋ ์ ์๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ๋๋ค.
WCAG ์์ ๋๋น ์๊ตฌ์ฌํญ ์ดํดํ๊ธฐ
WCAG๋ ์ฝํ ์ธ ๋ฅผ ๋ ์ ๊ตฌ๋ณํ ์ ์๋๋ก ํ๋ ๋ฐ ์ค์ ์ ๋ ๊ฐ์ด๋๋ผ์ธ 1.4์ ๋ฐ๋ผ ์์ ๋๋น์ ๋ํ ํน์ ์ฑ๊ณต ๊ธฐ์ค์ ์ ์ํฉ๋๋ค. ์์ ๋๋น์ ๊ด๋ จ๋ ์ฃผ์ ์ฑ๊ณต ๊ธฐ์ค์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- 1.4.3 ๋๋น (์ต์): ํ ์คํธ ๋ฐ ํ ์คํธ ์ด๋ฏธ์ง์ ์๊ฐ์ ํํ์ ์ต์ 4.5:1์ ๋ช ์๋น๋ฅผ ๊ฐ์ง๋๋ค. ์ด๋ ํ์ค ํฌ๊ธฐ ํ ์คํธ(์ผ๋ฐ์ ์ผ๋ก ๊ตต์ ํ ์คํธ์ ๊ฒฝ์ฐ 14ํฌ์ธํธ ์ดํ, ์ผ๋ฐ ํ ์คํธ์ ๊ฒฝ์ฐ 18ํฌ์ธํธ ์ดํ๋ก ๊ฐ์ฃผ๋จ)์ ์ ์ฉ๋ฉ๋๋ค.
- 1.4.11 ํ
์คํธ๊ฐ ์๋ ์ฝํ
์ธ ์ ๋๋น: ๋ค์ ์์์ ์ธ์ ํ ์์ ๊ฐ์ ๋ช
์๋น๊ฐ ์ต์ 3:1์ด์ด์ผ ํฉ๋๋ค:
- ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ์์(์: ์์ ํ๋, ๋ฒํผ, ๋งํฌ).
- ์ฝํ ์ธ ๋ฅผ ์ดํดํ๋ ๋ฐ ํ์ํ ๊ทธ๋ํฝ ๊ฐ์ฒด(์: ์ฐจํธ์ ์ผ๋ถ).
- 1.4.6 ๋๋น (ํฅ์): ํ ์คํธ ๋ฐ ํ ์คํธ ์ด๋ฏธ์ง์ ์๊ฐ์ ํํ์ ์ต์ 7:1์ ๋ช ์๋น๋ฅผ ๊ฐ์ง๋๋ค. ์ด๋ ํ์ค ํฌ๊ธฐ ํ ์คํธ์ ์ ์ฉ๋ฉ๋๋ค.
- 1.4.8 ์๊ฐ์ ํํ: ํ
์คํธ ๋ธ๋ก์ ์๊ฐ์ ํํ์ ์ํด ๋ค์์ ๋ฌ์ฑํ ์ ์๋ ๋ฉ์ปค๋์ฆ์ด ์ ๊ณต๋ฉ๋๋ค: (์์ค AAA)
- ์ ๊ฒฝ์๊ณผ ๋ฐฐ๊ฒฝ์์ ์ฌ์ฉ์๊ฐ ์ ํํ ์ ์์ต๋๋ค.
- ๋๋น๋ 80์ ๋๋ ๊ธ๋ฆฌํ(์ค๊ตญ์ด, ์ผ๋ณธ์ด, ํ๊ตญ์ด์ ๊ฐ์ด ๊ธ๋ฆฌํ๊ฐ ๋์ ๋ฌธ์๋ฅผ ์ฌ์ฉํ๋ ์ธ์ด์ ๊ฒฝ์ฐ)๋ฅผ ์ด๊ณผํ์ง ์์ต๋๋ค.
- ํ ์คํธ๋ ์์ชฝ ์ ๋ ฌ(์ผ์ชฝ ๋ฐ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ ๋ชจ๋์ ์ ๋ ฌ)๋์ง ์์ต๋๋ค.
- ์ค ๊ฐ๊ฒฉ(ํ๊ฐ)์ ๋จ๋ฝ ๋ด์์ ์ต์ 1.5๋ฐฐ์ด๋ฉฐ, ๋จ๋ฝ ๊ฐ๊ฒฉ์ ์ค ๊ฐ๊ฒฉ๋ณด๋ค ์ต์ 1.5๋ฐฐ ๋ ํฝ๋๋ค.
- ํ ์คํธ๋ ๋ณด์กฐ ๊ธฐ์ ์์ด๋ ์ต๋ 200%๊น์ง ํฌ๊ธฐ ์กฐ์ ์ด ๊ฐ๋ฅํ๋ฉฐ, ์ฌ์ฉ์๊ฐ ์ ์ฒด ํ๋ฉด ์ฐฝ์์ ํ ์คํธ ํ ์ค์ ์ฝ๊ธฐ ์ํด ๊ฐ๋ก๋ก ์คํฌ๋กคํ ํ์๊ฐ ์์ต๋๋ค.
WCAG ์์ค: A, AA, AAA
WCAG๋ A, AA, AAA์ ์ธ ๊ฐ์ง ์ค์ ์์ค์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ๊ฐ ์์ค์ ์ ์ง์ ์ผ๋ก ๋ ๋์ ์ ๊ทผ์ฑ ์์ค์ ๋ํ๋ ๋๋ค. ์์ค A๊ฐ ์ต์ ํ์ฉ ์์ค์ ๋ํ๋ด๋ ๋ฐ๋ฉด, ์์ค AA๋ ๋๋ถ๋ถ์ ์น์ฌ์ดํธ์์ ํ์ค์ผ๋ก ๋๋ฆฌ ๊ฐ์ฃผ๋ฉ๋๋ค. ์์ค AAA๋ ์ต๊ณ ์์ค์ ์ ๊ทผ์ฑ์ ๋ํ๋ด๋ฉฐ ๋ชจ๋ ์ฝํ ์ธ ์ ๋ํด ๋ฌ์ฑํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
- ์์ค A: ๊ธฐ๋ณธ์ ์ธ ์์ค์ ์ ๊ทผ์ฑ์ ์ ๊ณตํฉ๋๋ค. ์์ค A ์ฑ๊ณต ๊ธฐ์ค์ ์ถฉ์กฑํ๋ ๊ฒ์ ํ์์ ์ ๋๋ค.
- ์์ค AA: ๋ ์ค์ํ ์ ๊ทผ์ฑ ์ฅ๋ฒฝ์ ํด๊ฒฐํฉ๋๋ค. ์์ค AA ์ค์๋ ๋ง์ ์ง์ญ์์ ๋ฒ์ ์ผ๋ก ์๊ตฌ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๋๋ถ๋ถ์ ์น์ฌ์ดํธ๋ ์์ค AA ์ค์๋ฅผ ๋ชฉํ๋ก ํด์ผ ํฉ๋๋ค.
- ์์ค AAA: ์ต๊ณ ์์ค์ ์ ๊ทผ์ฑ์ ์ ๊ณตํ๋ฉฐ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ต์์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์์ค AAA๋ฅผ ๋ฌ์ฑํ๋ ๊ฒ์ ํ์ค์ ์ธ ์ ์ฝ์ผ๋ก ์ธํด ๋ชจ๋ ์ฝํ ์ธ ์ ๋ํด ์คํ ๊ฐ๋ฅํ์ง ์์ ์ ์์ต๋๋ค.
์์ ๋๋น์ ๊ฒฝ์ฐ, ์์ค AA๋ ํ์ค ํ ์คํธ์ ๋ํด 4.5:1, ํฐ ํ ์คํธ ๋ฐ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ ์์์ ๋ํด 3:1์ ๋ช ์๋น๋ฅผ ์๊ตฌํฉ๋๋ค. ์์ค AAA๋ ํ์ค ํ ์คํธ์ ๋ํด 7:1, ํฐ ํ ์คํธ์ ๋ํด 4.5:1์ ๋ช ์๋น๋ฅผ ์๊ตฌํฉ๋๋ค.
"ํฐ ํ ์คํธ"์ ์ ์
WCAG๋ "ํฐ ํ ์คํธ"๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์ ์ํฉ๋๋ค:
- ๊ตต๊ฒ ํ์๋์ง ์์ ๊ฒฝ์ฐ 18ํฌ์ธํธ(24 CSS ํฝ์ ) ์ด์.
- ๊ตต๊ฒ ํ์๋ ๊ฒฝ์ฐ 14ํฌ์ธํธ(18.66 CSS ํฝ์ ) ์ด์.
์ด๋ฌํ ํฌ๊ธฐ๋ ๊ทผ์ฌ์น์ด๋ฉฐ ๊ธ๊ผด ๊ณ์ด์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค. ์ค์๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ํญ์ ์์ ๋๋น ๋ถ์๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ ๋ ๋๋ง๋ ํ ์คํธ๋ฅผ ํ ์คํธํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค.
์์ ๋๋น์จ ๊ณ์ฐํ๊ธฐ
์์ ๋๋น์จ์ ์ ๊ฒฝ์๊ณผ ๋ฐฐ๊ฒฝ์์ ์๋ ํ๋๋ฅผ ๊ธฐ์ค์ผ๋ก ๊ณ์ฐ๋ฉ๋๋ค. ๊ณต์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
(L1 + 0.05) / (L2 + 0.05)
์ฌ๊ธฐ์:
- L1์ ๋ ๋ฐ์ ์์ ์๋ ํ๋์ ๋๋ค.
- L2๋ ๋ ์ด๋์ด ์์ ์๋ ํ๋์ ๋๋ค.
์๋ ํ๋๋ ๊ฐ ์์์ ๋นจ๊ฐ, ๋ น์, ํ๋(RGB) ๊ฐ์ ๊ณ ๋ คํ๋ ๋ณต์กํ ๊ณ์ฐ์ ๋๋ค. ๋คํํ๋ ์ด๋ฌํ ๊ณ์ฐ์ ์๋์ผ๋ก ์ํํ ํ์๋ ์์ต๋๋ค. ์๋ง์ ์จ๋ผ์ธ ๋๊ตฌ์ ์ํํธ์จ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋์ผ๋ก ์์ ๋๋น์จ์ ๊ณ์ฐํด ์ค ์ ์์ต๋๋ค.
์์ ๋๋น ํ์ธ ๋๊ตฌ
WCAG ํ์ค ์ค์๋ฅผ ํ๊ฐํ๊ณ ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋๋ ๋ช ๊ฐ์ง ํ๋ฅญํ ๋๊ตฌ๊ฐ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ธ๊ธฐ ์๋ ์ต์ ์ ๋๋ค:
- WebAIM Contrast Checker: 16์ง์ ์์ ์ฝ๋๋ฅผ ์ ๋ ฅํ๊ฑฐ๋ ์์ ์ ํ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ช ์๋น๋ฅผ ๊ฒฐ์ ํ ์ ์๋ ๋ฌด๋ฃ ์จ๋ผ์ธ ๋๊ตฌ์ ๋๋ค. ๋ช ์๋น๊ฐ WCAG AA ๋ฐ AAA ํ์ค์ ์ถฉ์กฑํ๋์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ ๋๋ค.
- Colour Contrast Analyser (CCA): ์๋งน ์๋ฎฌ๋ ์ด์ ๊ณผ ๊ฐ์ ๋ ๊ณ ๊ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๋ค์ด๋ก๋ ๊ฐ๋ฅํ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ (Windows ๋ฐ macOS์ฉ)์ ๋๋ค.
- Chrome DevTools: Chrome์ ๋ด์ฅ ๊ฐ๋ฐ์ ๋๊ตฌ์๋ ๋ช ์๋น๋ฅผ ํ์ํ๊ณ WCAG ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ๋์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ด๋ ์์ ์ ํ๊ธฐ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค.
- Firefox Accessibility Inspector: Chrome DevTools์ ์ ์ฌํ๊ฒ Firefox๋ ์์ ๋๋น ํ์ธ ๊ธฐ๋ฅ์ด ์๋ ์ ๊ทผ์ฑ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- Adobe Color: ์์ ๋๋น ๋ฐ ์ ๊ทผ์ฑ ํ์ธ ๊ธฐ๋ฅ์ ํฌํจํ์ฌ ์์ ํ๋ ํธ๋ฅผ ๋ง๋ค๊ณ ํ์ํ ์ ์๋ ์จ๋ผ์ธ ๋๊ตฌ์ ๋๋ค.
- Stark: Sketch, Figma, Adobe XD์ ๊ฐ์ ๋์์ธ ๋๊ตฌ๋ฅผ ์ํ ์ธ๊ธฐ ์๋ ํ๋ฌ๊ทธ์ธ์ผ๋ก, ๋์์ธ ์ํฌํ๋ก ๋ด์์ ์ง์ ์ค์๊ฐ ์์ ๋๋น ๋ถ์์ ์ ๊ณตํฉ๋๋ค.
๋๊ตฌ๋ฅผ ์ ํํ ๋ ์ฌ์ฉ ํธ์์ฑ, ๊ธฐ๋ฅ ๋ฐ ๊ธฐ์กด ์ํฌํ๋ก์์ ํตํฉ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ฌํ ๋๊ตฌ ์ค ๋ค์๋ ์๋งน ์๋ฎฌ๋ ์ด์ ๋ ์ ๊ณตํ๋ฏ๋ก, ๋ค์ํ ์ ํ์ ์๊ฐ ์ด์์ ๊ฐ์ง ์ฌ์ฉ์๊ฐ ๋์์ธ์ ์ด๋ป๊ฒ ์ธ์ํ๋์ง ์ดํดํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ค์ฉ์ ์ธ ์์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
์น์ฌ์ดํธ๊ฐ WCAG ์์ ๋๋น ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ๋๋ก ๋ณด์ฅํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์์์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
- ๋ฐฐ๊ฒฝ ์์ ํ ์คํธ: ํ ์คํธ์ ๋ฐฐ๊ฒฝ ์ฌ์ด์ ์ถฉ๋ถํ ๋๋น๋ฅผ ๋ณด์ฅํ์ญ์์ค. ๋ฐ์ ๋ฐฐ๊ฒฝ์ ๋ฐ์ ํ ์คํธ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์ด๋์ด ๋ฐฐ๊ฒฝ์ ์ด๋์ด ํ ์คํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ํผํ์ญ์์ค. ์๋ฅผ ๋ค์ด, ๋ฐ์ ํ์ ๋ฐฐ๊ฒฝ(#EEEEEE)์ ํฐ์ ํ ์คํธ(#FFFFFF)๋ WCAG ๋๋น ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ์ง ๋ชปํฉ๋๋ค. ๋์ ๋ ์ด๋์ด ํ์ ๋ฐฐ๊ฒฝ(#999999)์ ์ ํํ์ฌ ์ถฉ๋ถํ ๋ช ์๋น๋ฅผ ํ๋ณดํ์ญ์์ค.
- ๋งํฌ: ๋งํฌ๋ ์์ ๋ฐ ๊ธฐํ ์๊ฐ์ ์ ํธ(์: ๋ฐ์ค, ๊ตต๊ฒ ํ์) ๋ชจ๋์์ ์ฃผ๋ณ ํ ์คํธ์ ์๊ฐ์ ์ผ๋ก ๊ตฌ๋ณ๋์ด์ผ ํฉ๋๋ค. ์์ ๋๋น๊ฐ ๋ถ์ ์ ํ ๊ฒฝ์ฐ ๋งํฌ์ ์์์ ๋ณ๊ฒฝํ๋ ๊ฒ๋ง์ผ๋ก๋ ์ถฉ๋ถํ์ง ์์ ์ ์์ต๋๋ค. ๋งํฌ๋ฅผ ์ฝ๊ฒ ์๋ณํ ์ ์๋๋ก ์์๊ณผ ๋ฐ์ค์ ์กฐํฉํ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ฒํผ: ๋ฒํผ์ ๋ช ํํ ์๊ฐ์ ๊ฒฝ๊ณ์ ํ ์คํธ์ ๋ฒํผ ๋ฐฐ๊ฒฝ ๊ฐ์ ์ถฉ๋ถํ ๋๋น๋ฅผ ๊ฐ์ ธ์ผ ํฉ๋๋ค. ๋๋น๋ฅผ ๊ฐ์์ํฌ ์ ์๋ ๋ฏธ๋ฌํ ๊ทธ๋ผ๋ฐ์ด์ ์ด๋ ๊ทธ๋ฆผ์ ์ฌ์ฉ์ ํผํ์ญ์์ค. ์๋ฅผ ๋ค์ด, ํฐ์ ํ ์คํธ๊ฐ ์๋ ๋ฐ์ ํ๋์ ๋ฒํผ์ WCAG ํ์ค์ ์ถฉ์กฑํ์ง ๋ชปํ ์ ์์ต๋๋ค. ํ ์คํธ์ ๋ ์ด๋์ด ํ๋์์ด๋ ๊ฒ์์๊ณผ ๊ฐ์ ๋๋น๋๋ ์์์ ์ฌ์ฉํ์ญ์์ค.
- ์์ ํ๋: ์์ ํ๋๋ ๋์ ๋ณด์ด๋ ํ ๋๋ฆฌ์ ํ ๋๋ฆฌ์ ๋ฐฐ๊ฒฝ ๊ฐ์ ์ถฉ๋ถํ ๋๋น๋ฅผ ๊ฐ์ ธ์ผ ํฉ๋๋ค. ์์ ํ๋ ๋ด์ ํ ์คํธ๋ ํ๋ ๋ฐฐ๊ฒฝ๊ณผ ์ถฉ๋ถํ ๋๋น๋ฅผ ๊ฐ์ ธ์ผ ํฉ๋๋ค.
- ์์ด์ฝ: ์์ด์ฝ์ ํนํ ์ค์ํ ์ ๋ณด๋ฅผ ์ ๋ฌํ๋ ๊ฒฝ์ฐ ๋ฐฐ๊ฒฝ๊ณผ ์ถฉ๋ถํ ๋๋น๋ฅผ ๊ฐ์ ธ์ผ ํฉ๋๋ค. ์ ์ ํ ๋ช ์๋น๋ฅผ ๊ฒฐ์ ํ ๋ ์์ด์ฝ์ ํฌ๊ธฐ๋ฅผ ๊ณ ๋ คํ์ญ์์ค. ์์ ์์ด์ฝ์ ์ฝ๊ฒ ๋ณด์ด๋๋ก ๋ ๋์ ๋๋น๊ฐ ํ์ํ ์ ์์ต๋๋ค.
- ์ฐจํธ ๋ฐ ๊ทธ๋ํ: ์ฐจํธ ๋ฐ ๊ทธ๋ํ์ ๋ค๋ฅธ ๋ฐ์ดํฐ ์๋ฆฌ์ฆ๊ฐ ์๋ก ๋ฐ ๋ฐฐ๊ฒฝ๊ณผ ๊ตฌ๋ณ๋๋๋ก ํ์ญ์์ค. ๋๋น๋๋ ์์๊ณผ ํจํด์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ํฌ์ธํธ๋ฅผ ๊ตฌ๋ณํ์ญ์์ค. ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ฅผ ์ํด ๋์ฒด ํ ์คํธ ์ค๋ช ์ ์ ๊ณตํ์ญ์์ค.
- ๋ก๊ณ : ๋ก๊ณ ์กฐ์ฐจ๋ ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์์ ๋๋น ๊ฐ์ด๋๋ผ์ธ์ ์ค์ํด์ผ ํฉ๋๋ค. ๋ก๊ณ ๊ฐ ์๋ ํํ๋ก ๋๋น ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ์ง ๋ชปํ๋ ๊ฒฝ์ฐ, ์ ๊ทผ์ฑ์ ์ํด ์์์ ์กฐ์ ํ ๋์ฒด ๋ฒ์ ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ์ฅ์์ฉ ์ด๋ฏธ์ง: ์ฅ์์ฉ ์ด๋ฏธ์ง๋ ํ ์คํธ ๋ฐ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ ์์์ ๋์ผํ ๋๋น ์๊ตฌ์ฌํญ์ ์ ์ฉ์ ๋ฐ์ง๋ ์์ง๋ง, ๊ฐ๋ ์ฑ์ด๋ ์ฌ์ฉ์ฑ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ก ํ๋ ๊ฒ์ด ์ฌ์ ํ ์ข์ ๊ดํ์ ๋๋ค. ํ ์คํธ ๋ค์ ๋งค์ฐ ์ฐ๋งํ๊ฑฐ๋ ์๊ฐ์ ์ผ๋ก ๋ณต์กํ ์ฅ์์ฉ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ํผํ์ญ์์ค.
๋ค์ํ ๋ฌธํ์ ์ธ์ด์ ๊ฑธ์น ์์
์์ ์ฐ์์ ๋ฌธํ์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์ต๋๋ค. ํน์ ์์์ด ํ ๋ฌธํ์์๋ ๊ธ์ ์ ์ผ๋ก ๊ฐ์ฃผ๋ ์ ์์ง๋ง, ๋ค๋ฅธ ๋ฌธํ์์๋ ๋ถ์ ์ ์ผ๋ก ์ธ์๋ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ์ ์์ ์กฐํฉ์ ์ ํํ ๋ ๋์ ๊ณ ๊ฐ๊ณผ ์ ์ฌ์ ์ธ ๋ฌธํ์ ๋ฏผ๊ฐ์ฑ์ ๊ณ ๋ คํ์ญ์์ค. ๊ทธ๋ฌ๋ ์์ ๋๋น์ ๊ธฐ๋ณธ ์์น์ ๋ณดํธ์ ์ ๋๋ค. ๋ฌธํ์ ๋ฐฐ๊ฒฝ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์ ๊ฐ๋ ์ฑ๊ณผ ์ฌ์ฉ์ฑ์ ์ ์งํ๊ธฐ ์ํด ์ ๊ฒฝ ์์์ ๋ฐฐ๊ฒฝ ์์ ๊ฐ์ ์ถฉ๋ถํ ๋๋น๋ฅผ ๋ณด์ฅํด์ผ ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ์ผ๋ถ ์์ ๋ฌธํ๊ถ์์๋ ๋นจ๊ฐ์์ด ์ค๋ฅ๋ ๊ฒฝ๊ณ ์ ๊ด๋ จ์ด ์์ต๋๋ค. ํฐ์ ๋ฐฐ๊ฒฝ์ ๋นจ๊ฐ์ ํ ์คํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ๋ช ์๋น ๊ธฐ์ค์ ์ถฉ์กฑํ๋์ง ํ์ธํด์ผ ํฉ๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก ์ผ๋ถ ์์์ ๋ฌธํ๊ถ์์๋ ํฐ์์ด ์ ๋์ ๊ด๋ จ์ด ์์ต๋๋ค. ๋์์ธ์ด ํฐ์ ๋ฐฐ๊ฒฝ์ ํฌ๊ฒ ์์กดํ๋ ๊ฒฝ์ฐ, ์ ํํ ์์์ ๋ฌธํ์ ์ฐ์๊ณผ ๊ด๊ณ์์ด ํ ์คํธ ์์๊ฐ ์ ์ ํ ๋๋น๋ฅผ ๊ฐ๋๋ก ํด์ผ ํฉ๋๋ค.
๋ค์ํ ์คํฌ๋ฆฝํธ์ ๋ฌธ์ ์งํฉ์ ์ฌ์ฉ์ ๊ณ ๋ คํ์ญ์์ค. ์ค๊ตญ์ด, ์ผ๋ณธ์ด, ํ๊ตญ์ด(CJK)์ ๊ฐ์ ์ธ์ด๋ ์ข ์ข ๋ณต์กํ ๋ฌธ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ํนํ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์ ๊ฐ๋ ์ฑ์ ์ํด ์ ์ ํ ์์ ๋๋น๋ฅผ ์ ์งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ค์ํ ๊ธ๊ผด ํฌ๊ธฐ์ ๊ตต๊ธฐ๋ก ํ ์คํธํ๋ฉด ๋ค์ํ ๋ฌธ์ ์งํฉ์์ ๊ฐ๋ ์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
ํผํด์ผ ํ ์ผ๋ฐ์ ์ธ ์ค์
๋ค์์ ์์ ๋๋น๋ฅผ ๊ตฌํํ ๋ ํผํด์ผ ํ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ค์์ ๋๋ค.
- ์ ๋ณด ์ ๋ฌ์ ์ํด ์์์๋ง ์์กดํ๊ธฐ: ์์์ ์ ๋ณด ์ ๋ฌ์ ์ ์ผํ ์๋จ์ด ๋์ด์๋ ์ ๋ฉ๋๋ค. ์์์ ๊ตฌ๋ณํ ์ ์๋ ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ๋ฅผ ์ดํดํ ์ ์๋๋ก ํ ์คํธ ๋ ์ด๋ธ์ด๋ ์์ด์ฝ๊ณผ ๊ฐ์ ๋์ฒด ์ ํธ๋ฅผ ์ ๊ณตํ์ญ์์ค. ์ด๋ ์๋งน์ด ์๋ ์ฌ์ฉ์์๊ฒ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ํ ์คํธ๊ฐ ์๋ ์์์ ๋๋น ๋ฌด์ํ๊ธฐ: ๋ฒํผ, ์์ ํ๋, ์์ด์ฝ๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ ์์์ ๋๋น๋ฅผ ํ์ธํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์ด๋ฌํ ์์๋ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ํ ์คํธ๋งํผ ์ค์ํฉ๋๋ค.
- ์ค์ ์ฌ์ฉ์์ ํ ์คํธํ์ง ์๊ธฐ: ์์ ๋๋น ๋ถ์๊ธฐ๋ ์ ์ฉํ ๋๊ตฌ์ด์ง๋ง, ํนํ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ค์ ์ฌ์ฉ์์์ ํ ์คํธ๋ฅผ ๋์ฒดํ ์๋ ์์ต๋๋ค. ์ฌ์ฉ์ ํ ์คํธ๋ฅผ ์ํํ์ฌ ์ ์ฌ์ ์ธ ์ ๊ทผ์ฑ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ํ ํผ๋๋ฐฑ์ ์์งํ์ญ์์ค.
- ๋งค์ฐ ํฌ๋ฏธํ ์์ ์ฌ์ฉํ๊ธฐ: ์์ ์กฐํฉ์ด ๊ธฐ์ ์ ์ผ๋ก ๋ช ์๋น ์๊ตฌ์ฌํญ์ ํต๊ณผํ๋๋ผ๋ ๋งค์ฐ ํฌ๋ฏธํ ์์์ ํน์ ํ๋ฉด์ด๋ ๋ฐ์ ๋น ์๋์์ ์ฝ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์ถฉ๋ถํ ๊ตฌ๋ณ๋๊ณ ์ธ์ํ๊ธฐ ์ฌ์ด ์์์ ์ ํํ์ญ์์ค.
- ๊ธฐ๋ณธ ์์ ๊ตฌ์ฑํ๊ฐ ์ ๊ทผ ๊ฐ๋ฅํ๋ค๊ณ ๊ฐ์ ํ๊ธฐ: ์น์ฌ์ดํธ ํ ํ๋ฆฟ์ด๋ ๋์์ธ ํ๋ ์์ํฌ์ ๊ธฐ๋ณธ ์์ ๊ตฌ์ฑํ๊ฐ ์ ๊ทผ ๊ฐ๋ฅํ๋ค๊ณ ๊ฐ์ ํ์ง ๋ง์ญ์์ค. ํญ์ ๋๋น ๋ถ์๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์์ ๋๋น๋ฅผ ํ์ธํ์ญ์์ค.
๋ค์ํ ๊ธฐ์ ์์ ์์ ๋๋น ๊ตฌํํ๊ธฐ
์์ ๋๋น์ ์์น์ ๋ค์ํ ์น ๊ธฐ์ ๊ณผ ํ๋ซํผ์ ๊ฑธ์ณ ์ ์ฉ๋ฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ๊ธฐ์ ์์ ์์ ๋๋น๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
- HTML ๋ฐ CSS: CSS๋ฅผ ์ฌ์ฉํ์ฌ ํ ์คํธ ๋ฐ ๊ธฐํ ์์์ ์ ๊ฒฝ์๊ณผ ๋ฐฐ๊ฒฝ์์ ์ ์ํ์ญ์์ค. ์์ ์กฐํฉ์ด WCAG ๋๋น ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ๋์ง ํ์ธํ์ญ์์ค. ์๋ฏธ ์๋ HTML ์์(์: <button>, <a>)๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ์ ์ ์ ํ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ๋ถ์ฌํ์ญ์์ค.
- JavaScript: JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๋์ ์ผ๋ก ์์์ ๋ณ๊ฒฝํ ๋ ์๋ก์ด ์์ ์กฐํฉ์ด WCAG ๋๋น ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ๋์ง ํ์ธํ์ญ์์ค. ๋๋น๊ฐ ๋ถ์ถฉ๋ถํ ๊ฒฝ์ฐ ์ฌ์ฉ์์๊ฒ ์ ์ ํ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ญ์์ค.
- ์ด๋ฏธ์ง: ํ ์คํธ๊ฐ ํฌํจ๋ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ ํ ์คํธ๊ฐ ์ด๋ฏธ์ง ๋ฐฐ๊ฒฝ๊ณผ ์ถฉ๋ถํ ๋๋น๋ฅผ ๊ฐ๋๋ก ํ์ญ์์ค. ์ด๋ฏธ์ง๊ฐ ๋ณต์กํ๊ฑฐ๋ ๋ฐฐ๊ฒฝ์ด ๋ค์ํ ๊ฒฝ์ฐ ํ ์คํธ ๋ค์ ๋จ์ ์ค๋ฒ๋ ์ด๋ฅผ ์ถ๊ฐํ์ฌ ๋๋น๋ฅผ ํฅ์์ํค๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- SVG: SVG ๊ทธ๋ํฝ์ ์ฌ์ฉํ ๋ ์ฑ์ฐ๊ธฐ ๋ฐ ํ ์์์ ์ง์ ํ์ฌ ๋๋น ์๊ตฌ์ฌํญ์ ์ถฉ์กฑํ๋๋ก ํ์ญ์์ค. ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ฅผ ์ํด ๋์ฒด ํ ์คํธ ์ค๋ช ์ ์ ๊ณตํ์ญ์์ค.
- ๋ชจ๋ฐ์ผ ์ฑ (iOS ๋ฐ Android): ํ๋ซํผ์ ๊ธฐ๋ณธ ์ ๊ทผ์ฑ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ์์ ๋๋น๋ฅผ ์กฐ์ ํ๊ณ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ์ํ ๋์ฒด ๋์คํ๋ ์ด ์ต์ ์ ์ ๊ณตํ์ญ์์ค. ๊ฐ ํ๋ซํผ์ ํน์ ํ ์ ๊ทผ์ฑ ๊ฐ์ด๋๋ผ์ธ์ ๋ฐ๋ฅด์ญ์์ค.
WCAG ์ต์ ์ ๋ณด ์ ์งํ๊ธฐ
WCAG๋ ์น ๊ธฐ์ ๋ฐ ์ ๊ทผ์ฑ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ณํ๋ฅผ ๋ฐ์ํ๊ธฐ ์ํด ์ ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ ์ด์์๋ ๋ฌธ์์ ๋๋ค. ์ต์ ์ ๋ฐ์ดํธ์ ๋ํ ์ ๋ณด๋ฅผ ์ ์งํ๊ณ ์น์ฌ์ดํธ๊ฐ ํ์ฌ ๋ฒ์ ์ WCAG๋ฅผ ์ค์ํ๋์ง ํ์ธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. 2023๋ ํ์ฌ, WCAG 2.1์ด ๊ฐ์ฅ ๋๋ฆฌ ์ฑํ๋ ๋ฒ์ ์ด๋ฉฐ, WCAG 2.2๊ฐ ์ต๊ทผ์ ๋ฐํ๋์์ต๋๋ค. WCAG ๊ฐ์ด๋๋ผ์ธ์ ๊ฐ๋ฐํ๊ณ ๊ฒ์ํ๋ W3C(World Wide Web Consortium)์ ์ ๋ฐ์ดํธ ๋ฐ ์๋ก์ด ๊ถ์ฅ ์ฌํญ์ ์ฃผ์ํ์ญ์์ค.
์ ๊ทผ ๊ฐ๋ฅํ ์์ ๋๋น์ ๋น์ฆ๋์ค ์ฌ๋ก
์ค๋ฆฌ์ ๊ณ ๋ ค๊ฐ ๊ฐ์ฅ ์ค์ํ์ง๋ง, ์ ๊ทผ ๊ฐ๋ฅํ ์์ ๋๋น๋ฅผ ๋ณด์ฅํ๋ ๋ฐ์๋ ๊ฐ๋ ฅํ ๋น์ฆ๋์ค ์ฌ๋ก๋ ์์ต๋๋ค. ์ ๊ทผ ๊ฐ๋ฅํ ์น์ฌ์ดํธ๋ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฟ๋ง ์๋๋ผ ๋ชจ๋ ์ฌ๋์๊ฒ ์ด์ต์ด ๋ฉ๋๋ค. ์ข์ ์์ ๋๋น๋ฅผ ๊ฐ์ง ์น์ฌ์ดํธ๋ ์ผ๋ฐ์ ์ผ๋ก ์ฝ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ์ฐธ์ฌ๋๋ฅผ ๋์ด๋ฉฐ ์ ํ์จ์ ๋์ ๋๋ค.
๋์ฑ์ด, ๋ง์ ์ง์ญ์์ ์ ๊ทผ์ฑ์ ๋ฒ์ ์ผ๋ก ์๋ฌดํ๋์ด ์์ต๋๋ค. ์ ๊ทผ์ฑ ํ์ค์ ์ค์ํ์ง ์์ผ๋ฉด ๋ฒ์ ์กฐ์น์ ํํ ์์์ ์ด๋ํ ์ ์์ต๋๋ค. ์ ๊ทผ์ฑ์ ์ฐ์ ์ํจ์ผ๋ก์จ ๋น์ ์ ์ฌ๋ฐ๋ฅธ ์ผ์ ํ ๋ฟ๋ง ์๋๋ผ ๋น์ฆ๋์ค๋ฅผ ๋ณดํธํ๊ณ ๋ ๋์ ๊ณ ๊ฐ์ธต์ผ๋ก ๋ฒ์๋ฅผ ํ์ฅํ๋ ๊ฒ์ ๋๋ค.
๊ฒฐ๋ก
์์ ๋๋น๋ ์น ์ ๊ทผ์ฑ์ ๊ทผ๋ณธ์ ์ธ ์ธก๋ฉด์ ๋๋ค. WCAG ์์ ๋๋น ์๊ตฌ์ฌํญ์ ์ดํดํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ตฌํํจ์ผ๋ก์จ ์๊ฐ์ ๋ฅ๋ ฅ์ ๊ด๊ณ์์ด ์ ์ธ๊ณ ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๊ณ ์ ๊ทผํ ์ ์๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ ์ ํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ ๊ธฐ์ ์ผ๋ก ์น์ฌ์ดํธ์ ์์ ๋๋น๋ฅผ ํ ์คํธํ๊ณ ํ ์คํธ ๊ณผ์ ์ ์ค์ ์ฌ์ฉ์๋ฅผ ์ฐธ์ฌ์ํค๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์ ๊ทผ์ฑ์ ์์ฉํ๋ ๊ฒ์ ๋จ์ง ๊ธฐ์ ์ ์ธ ์๊ตฌ์ฌํญ์ด ์๋๋ผ, ๋ ํฌ์ฉ์ ์ด๊ณ ๊ณตํํ ๋์งํธ ์ธ์์ ๋ง๋ค๊ธฐ ์ํ ์ฝ์์ ๋๋ค.