2023๋…„ 10์›” 06์ผยท1๋ถ„ ์ฝ๊ธฐ

WC3, WCAG 2.2 ์ตœ์‹  ์—…๋ฐ์ดํŠธ์—์„œ ํ–ฅ์ƒ๋œ ์›น ์ ‘๊ทผ์„ฑ ํ”„๋กœํ† ์ฝœ ๊ณต๊ฐœ

์›”๋“œ ์™€์ด๋“œ ์›น ์ปจ์†Œ์‹œ์—„(W3C)์€ ์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ(WCAG)์˜ ์ตœ์‹  ์—…๋ฐ์ดํŠธ๋ฅผ ๊ณต๊ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

WC3, WCAG 2.2 ์ตœ์‹  ์—…๋ฐ์ดํŠธ์—์„œ ํ–ฅ์ƒ๋œ ์›น ์ ‘๊ทผ์„ฑ ํ”„๋กœํ† ์ฝœ ๊ณต๊ฐœ

W3C (World Wide Web Consortium)๋Š” ์—…๋ฐ์ดํŠธ๋œ Web Content Accessibility Guidelines (WCAG) ๋ฒ„์ „์„ ์„ฑ๊ณต์ ์œผ๋กœ ์Šน์ธํ–ˆ๋‹ค๊ณ  ๋ฐœํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. ์›น ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์ƒˆ๋กญ๊ณ  ๋”์šฑ ์ •ํ™•ํ•œ ์ ‘๊ทผ์„ฑ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์„ ๋„ํ•˜๋Š” ์ตœ์‹  WCAG 2.2๋Š” ๋””์ง€ํ„ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์žฅ๋ฒฝ์„ ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ๋œ WCAG ๋ฒ„์ „์€ ์ƒˆ๋กœ ๊ฐœ๋ฐœ๋œ ์ด 9๊ฐ€์ง€ ์„ฑ๊ณต ๊ธฐ์ค€์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด 9๊ฐ€์ง€ ์ค‘ ์ฒซ ๋ฒˆ์งธ ํŠธ๋ฆฌ์˜ค๋Š” ํ‚ค๋ณด๋“œ ์ดˆ์ ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐ ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค. ์ตœ์‹  ์ˆ˜์ •์•ˆ์—๋Š” '์ดˆ์ ์„ ๋ชจํ˜ธํ•˜๊ฒŒ ํ•˜์ง€ ์•Š์Œ'์— ๋Œ€ํ•œ ๋‘ ๊ฐ€์ง€ ์ˆ˜์ค€์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ํ‚ค๋ณด๋“œ ์ดˆ์ ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๊ณ„์† ํ‘œ์‹œ๋˜์–ด์•ผ ํ•˜๋ฉฐ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ž‘์„ฑ์ž ํŒŒ์ƒ ์ฝ˜ํ…์ธ  ๋’ค์— ์™„์ „ํžˆ ์ˆจ๊ฒจ์ง€๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ํฌ์ปค์Šค ๊ด€๋ จ ์—…๋ฐ์ดํŠธ์—์„œ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ํฌ์ปค์Šค๊ฐ€ ์žˆ๋Š” ๊ฐœ์ฒด๊ฐ€ ๊ตฌ๋ณ„๋˜๋Š” ํŠน์„ฑ์„ ํ‘œ์‹œํ•˜๋Š”์ง€ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ํ‘œ์‹œ๊ธฐ๋Š” ์ดˆ์ ์ด ๋งž์ง€ ์•Š๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋‘˜๋Ÿฌ์‹ธ๋Š” ์ตœ์†Œ 2ํ”ฝ์…€ ๋‘๊ป˜์˜ ๋‘˜๋ ˆ๋ฅผ ํ˜•์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ๊ณ„๋Š” ์ดˆ์ ์ด ๋งž์ถฐ์ง„ ์ƒํƒœ์™€ ์ดˆ์ ์ด ๋งž์ง€ ์•Š์€ ์ƒํƒœ ์‚ฌ์ด์— 3:1์˜ ๋Œ€๋น„ ๋น„์œจ์„ ๋‚˜ํƒ€๋‚ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ œํ•œ๋œ ๋ชจํ„ฐ ์›€์ง์ž„์„ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋“ค์€ ๊ฐ€์‹œ์„ฑ์ด ํ–ฅ์ƒ๋˜์–ด ๋”์šฑ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ด๊ฒŒ ๋˜๋ฏ€๋กœ ์ด๋Ÿฌํ•œ ๋ฏธ๋ฌ˜ํ•œ ๋ณ€ํ™”๋กœ ์ธํ•ด ์—„์ฒญ๋‚œ ์ด์ ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

WCAG์˜ ์ƒˆ ๋ฒ„์ „์—๋Š” ๋“œ๋ž˜๊ทธํ•˜์ง€ ์•Š๊ณ  ์ž‘์—…์„ ์™„๋ฃŒํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์ด ํ–ฅ์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ณ€ํ™”๋Š” ํ™”๋ฉด์—์„œ ๋งˆ์šฐ์Šค์˜ ์ •ํ™•ํ•œ ์œ„์น˜๋ฅผ ์ œํ•œํ•  ์ˆ˜ ์žˆ๋Š” ๋–จ๋ฆผ๊ณผ ๊ฐ™์€ ์šด๋™ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.

์ง€์นจ์˜ ๋‹ค์„ฏ ๋ฒˆ์งธ ์ถ”๊ฐ€ ์‚ฌํ•ญ์€ ๋ชฉํ‘œ ํฌ๊ธฐ์— ๋Œ€ํ•œ ์ตœ์†Œ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค. ์ด์ œ ๋Œ€์ƒ์€ ์ตœ์†Œํ•œ 24 x 24 CSS ํ”ฝ์…€์„ ์ธก์ •ํ•ด์•ผ ํ•˜๋ฉฐ ์˜ˆ์™ธ๋Š” ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ „๋ฐ˜์ ์ธ ์น˜์ˆ˜ ์ˆ˜์ •์€ ๋” ๋‚˜์€ ํ„ฐ์น˜ ์ •ํ™•์„ฑ์„ ์ด‰์ง„ํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ตœ์ ํ™”ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ์„ฏ ๋ฒˆ์งธ ์—…๋ฐ์ดํŠธ๋Š” ์›น์‚ฌ์ดํŠธ์—์„œ ๋„์›€๋ง ๊ธฐ๋Šฅ์„ ์ผ๊ด€์„ฑ์žˆ๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋„์›€๋ง ๋„๊ตฌ์˜ ์•ˆ์ •์ ์ธ ์œ„์น˜๋ฅผ ์œ ์ง€ํ•˜๋ฉด ์ธ์ง€ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ๊ฐœ์ธ์—๊ฒŒ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์ „๋ฐ˜์ ์œผ๋กœ ์›น ์‚ฌ์ดํŠธ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋งˆ์ง€๋ง‰์œผ๋กœ, ์ƒˆ๋กœ์šด WCAG ๋ฒ„์ „์—๋Š” ์ตœ์†Œ ๋ฒ„์ „๊ณผ ํ–ฅ์ƒ๋œ ๋ฒ„์ „์ด ์žˆ๋Š” ์•ก์„ธ์Šค ๊ฐ€๋Šฅํ•œ ์ธ์ฆ์ด ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ์ค€์€ ์‚ฌ์šฉ์ž๊ฐ€ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๊ธฐ์–ตํ•˜๊ฑฐ๋‚˜ ์ธ์ง€ ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ๋ฅผ ํ’€ ํ•„์š”๊ฐ€ ์—†๋Š” ์ธ์ฆ ํ”„๋กœ์„ธ์Šค์˜ ํ•„์š”์„ฑ์„ ๊ทœ์ •ํ•ฉ๋‹ˆ๋‹ค.

์ผ๊ด€๋œ ๋„์›€๊ณผ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ์ธ์ฆ์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ์›น ํ”Œ๋žซํผ์€ ์ธ์ง€ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ๊ฐœ์ธ์˜ ์‚ฌ์šฉ์„ฑ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. ์‹ ๊ฒฝ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž์˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ธ์ •ํ•˜๊ณ  ๋””์ง€ํ„ธ ๋…๋ฆฝ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ์ ๊ทน์ ์œผ๋กœ ๋…ธ๋ ฅํ•˜๋Š” ๊ฒƒ์ด ์ ‘๊ทผ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋‹ค์Œ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.

Easy to start
Create something amazing

Experiment with AppMaster with free plan.
When you will be ready you can choose the proper subscription.

Get Started
WC3, WCAG 2.2 ์ตœ์‹  ์—…๋ฐ์ดํŠธ์—์„œ ํ–ฅ์ƒ๋œ ์›น ์ ‘๊ทผ์„ฑ ํ”„๋กœํ† ์ฝœ ๊ณต๊ฐœ | AppMaster