๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML

์›น ์ ‘๊ทผ์„ฑ/์›น ํ˜ธํ™˜์„ฑ

by Youcodein 2022. 8. 9.
728x90
๋ฐ˜์‘ํ˜•

์›น ์ ‘๊ทผ์„ฑ(Web Accessibility)

์žฅ์• ์ธ, ๊ณ ๋ น์ž ๋“ฑ ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋– ํ•œ ๊ธฐ์ˆ ์ด๋‚˜ ํ™˜๊ฒฝ์—์„œ๋„ ์ „๋ฌธ์ ์ธ ๋Šฅ๋ ฅ ์—†์ด ์›น์‚ฌ์ดํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ชจ๋“  ์ •๋ณด๋ฅผ ๋™๋“ฑํ•˜๊ฒŒ ์ ‘๊ทผํ•˜๊ณ  ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒ๋ฆฌ์ž…๋‹ˆ๋‹ค.

์›น ์ ‘๊ทผ์„ฑ ์ค€์ˆ˜ ์ด์œ 

์žฅ์• ์ธ, ๊ณ ๋ น์ž ๋“ฑ์„ ํฌํ•จํ•œ ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด ์›น์—์„œ ์›ํ•˜๋Š” ์ •๋ณด๋“ค์„ ์ž์œ ๋กญ๊ฒŒ ์ ‘๊ทผ ํ•˜๊ณ  ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ '08๋…„ 4์›” 11์ผ๋ถ€ํ„ฐ ์‹œํ–‰๋œ โ€˜์žฅ์• ์ธ์ฐจ๋ณ„๊ธˆ์ง€ ๋ฐ ๊ถŒ๋ฆฌ๊ตฌ์ œ ๋“ฑ์— ๊ด€ํ•œ ๋ฒ•๋ฅ โ€™ ๋ฐ ๋™๋ฒ• ์‹œํ–‰๋ น ๋“ฑ ๊ด€๋ จ ๊ทœ์ •์„ ์ค€์ˆ˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์›น ํ‘œ์ค€(Web Standard)

์›น ํ‘œ์ค€์ด๋ž€ ๋ธŒ๋ผ์šฐ์ € ์ข…๋ฅ˜ ๋ฐ ๋ฒ„์ „์— ๋”ฐ๋ฅธ ๊ธฐ๋Šฅ ์ฐจ์ด์— ๋Œ€ํ•˜์—ฌ ํ˜ธํ™˜์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ์ œ์‹œ๋œ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๊ธฐ์ข… ํ˜น์€ ํ”Œ๋žซํผ์— ๋”ฐ๋ผ ๋‹ฌ๋ฆฌ ๊ตฌํ˜„๋˜๋Š” ๊ธฐ์ˆ ์„ ๋™์ผํ•˜๊ฒŒ ๊ตฌํ˜„ํ•จ๊ณผ ๋™์‹œ์— ์–ด๋Š ํ•œ์ชฝ์— ์ตœ์ ํ™”๋˜์–ด ์น˜์šฐ์น˜์ง€ ์•Š๋„๋ก ๊ณตํ†ต์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. ํ‘œ์ค€ํ™” ๋‹จ์ฒด์ธ W3C(World Wide Consortium)๊ฐ€ ๊ถŒ๊ณ ํ•œ ํ‘œ์ค€์•ˆ์— ๋”ฐ๋ผ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์ด์šฉํ•˜๋Š” HTML, CSS, JavaScript ๋“ฑ์— ๋Œ€ํ•œ ๊ทœ์ •์„ ๋‹ด๊ณ  ์žˆ์œผ๋ฉฐ ์›น ํ‘œ์ค€์˜ ๊ถ๊ทน์ ์ธ ๋ชฉ์ ์€ ์›น์‚ฌ์ดํŠธ์— ์ ‘์†ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋– ํ•œ ์šด์˜์ฒด์ œ๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋”๋ผ๋„ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ด๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์›น ํ‘œ์ค€ ์ค€์ˆ˜ ์ด์œ 

๊ตญ๋‚ด ์›น์˜ ํ˜„์‹ค์€ ํŠน์ • ๋ธŒ๋ผ์šฐ์ €์™€ ์‚ฌ์šฉ์ž ๋“ฑ์˜ ์ด์šฉํ™˜๊ฒฝ๊ณผ ๋น„ํ‘œ์ค€ ํŽ˜์ด์ง€ ๋ฐ ๊ณผ๋„ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ ์‚ฌ์šฉ์œผ๋กœ ์žฅ์• ์ธ, ๋…ธ์•ฝ์ž๋ฅผ ํฌํ•จํ•œ ๋ชจ๋“  ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ์šด์˜์ฒด์ œ ๋ฐ ์›น ๋ธŒ๋ผ์šฐ์ € ๋“ฑ์˜ ์ •๋ณด ์ ‘๊ทผ ์ œ์•ฝ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ธŒ๋ผ์šฐ์ €์˜ ์ข…๋ฅ˜๋‚˜ ๋ฒ„์ „์— ์ƒ๊ด€์—†์ด ๋ชจ๋“  ์‚ฌ์šฉ์ž๋“ค์ด ๋™์ผํ•œ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์›น ํ‘œ์ค€๊ธฐ์ˆ  ์ž‘์—…์ด ํ•„์š”ํ•˜๋ฉฐ ์›น ํ‘œ์ค€ ์ค€์ˆ˜๋Š” ์›น ์ ‘๊ทผ์„ฑ ์ค€์ˆ˜๋ฅผ ์œ„ํ•œ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค.

์›น ํ‘œ์ค€ ์žฅ์ 

1. ์ˆ˜์ • ๋ฐ ์šด์˜๊ด€๋ฆฌ ์šฉ์ด
2. ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ
3. ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™” (SEO)
4. File Size ์ถง๊ณ , ์„œ๋ฒ„ ๊ณต๊ฐ„ ์ ˆ์•ฝ
5. ํšจ์œจ์ ์ธ ๋งˆํฌ์—…
6. ํ˜ธํ™˜์„ฑ ๊ฐ€๋Šฅ

์›น ํ˜ธํ™˜์„ฑ(Cross Browsing)

์›น ํ˜ธํ™˜์„ฑ์€ ํ‘œ์ค€ ์›น ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ์šด์˜์ฒด์ œ, ๋ธŒ๋ผ์šฐ์ €์— ์ƒ๊ด€ ์—†์ด ์›น ์‚ฌ์ดํŠธ ์‚ฌ์šฉ ์‹œ ์šด์˜์ฒด์ œ ๋ฐ ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ๋™์ผํ•œ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๋„๋ก ์˜๋ฏธํ•˜๋Š” ์›น ์ƒํ˜ธ์šด์šฉ์„ฑ์˜ ๊ฐœ๋…์— ์›น ํ‘œ์ค€์˜ ์ค€์ˆ˜๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.

์›น ํ˜ธํ™˜์„ฑ ์ค€์ˆ˜ ์ด์œ 

์›น ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜์ง€ ์•Š๊ณ  ํŠน์ • ์šด์˜์ฒด์ œ์™€ ๋ธŒ๋ผ์šฐ์ €์— ์ข…์†๋˜์–ด ์žˆ๋‹ค๋ฉด ๋‹ค์–‘ํ•œ ์šด์˜์ฒด์ œ ํ™˜๊ฒฝ ๋ฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ์˜ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ๋ฌธ์ œ์ ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์›น ํ‘œ์ค€, ์›น ํ˜ธํ™˜์„ฑ, ์›น ์ ‘๊ทผ์„ฑ์˜ ์ดํ•ด

๊ตฌ๋ถ„ ๋ชฉ์  ์ค€์ˆ˜๋‚ด์šฉ ์ฐจ์ด
์›น ํ‘œ์ค€ ์›น์˜ ์‚ฌ์šฉ์„ฑ ๋ฐ ์ ‘๊ทผ์„ฑ ๋ณด์žฅ HTML, CSS ๋“ฑ์— ๋Œ€ํ•œ WC3๊ทœ๊ฒฉ(๋ฌธ๋ฒ•) ์ค€์ˆ˜ ๋“ฑ
- HTML, CSS, Javascript ๋“ฑ ๊ตฌ์กฐ์™€ ํ‘œํ˜„, ๋™์ž‘ ๋ถ„๋ฆฌ ๊ถŒ๊ณ 
์›น์˜ ๋‚ด์šฉ, ํ‘œํ˜„, ํ–‰๋™์— ๊ด€๋ จ๋œ ๊ธฐ์ˆ ํ‘œ์ค€
์›น ํ˜ธํ™˜์„ฑ ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „, ์ข…๋ฅ˜์™€ ๊ด€๊ณ„์—†๋Š” ์›น์‚ฌ์ดํŠธ ์ ‘๊ทผ ์›น ํ‘œ์ค€ ์ค€์ˆ˜๋ฅผ ํ†ตํ•œ ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ ํ™•๋ณด
- HTML, CSS ๋ฌธ๋ฒ• ์ค€์ˆ˜
- ๋™์ž‘, ๋ ˆ์ด์•„์›ƒ, ํ”Œ๋Ÿฌ๊ทธ์ธ ํ˜ธํ™˜์„ฑ
์›น ํ‘œ์ค€์„ ๊ณตํ†ต์œผ๋กœ ํฌํ•จ
์›น ์ ‘๊ทผ์„ฑ ์ธ์ , ํ™˜๊ฒฝ์  ์š”์ธ์— ์ œ์•ฝ์—†๋Š” ์›น ์ •๋ณด ์ ‘๊ทผ W3C ์›น ์ ‘๊ทผ์„ฑ ์ด๋‹ˆ์…”ํ‹ฐ๋ธŒ(WAI) ํ•œ๊ตญํ˜• ์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ2.0
- ์ธ์‹์˜ ์šฉ์ด์„ฑ, ์šด์šฉ์˜ ์šฉ์ด์„ฑ, ์ดํ•ด์˜ ์šฉ์ด์„ฑ, ๊ฒฌ๊ณ ์„ฑ
728x90
๋ฐ˜์‘ํ˜•

'HTML' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

๋ธ”๋ก ๊ตฌ์กฐ / ์ธ๋ผ์ธ ๊ตฌ์กฐ  (2) 2022.08.22
๊ตฌ์กฐ ๊ด€๋ จ ์š”์†Œ  (2) 2022.08.17

๋Œ“๊ธ€