์›น ์ ‘๊ทผ์„ฑ ๊ฒ€์‚ฌ ์‚ฌ์ดํŠธ ๋ชจ์Œ Google Translate
์•Œ์“ธ์‹ ์žกโœจ

์›น ์ ‘๊ทผ์„ฑ ๊ฒ€์‚ฌ ์‚ฌ์ดํŠธ ๋ชจ์Œ

by ํ”„๋ฆฌ๋ฆด๋ฆฌ๐Ÿ›ซ 2024. 6. 20.

์›น ์ ‘๊ทผ์„ฑ ๋งˆํฌ๋ฅผ ํš๋“ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ฝค ๋งŽ์€ ๋น„์šฉ์ด ๋“ญ๋‹ˆ๋‹ค.

* 20ํŽ˜์ด์ง€ ์ดํ•˜ ๊ธฐ์ค€์œผ๋กœ 120๋งŒ์›

์žฌ์‹ฌ์‚ฌ์˜ ๊ฒฝ์šฐ 60% ๊ฐ๋ฉดํ•ด์ค€๋‹ค๊ณ  ํ•˜์ง€๋งŒ ๊ทธ๋ž˜๋„ ๋งŽ์€ ๋ˆ์ด์ฃ .

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์›น์ ‘๊ทผ์„ฑ ์‹ ์ฒญ ํ•˜๊ธฐ ์ „, ์›น ์ ‘๊ทผ์„ฑ์— ์ค€์ˆ˜ํ•˜๋Š” ๋งˆํฌ์—…์ธ์ง€ ํ™•์ธ์ž‘์—…์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.

์›น ์ ‘๊ทผ์„ฑ์„ ๊ฒ€์‚ฌ, ์ง„๋‹จํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ๋ชจ์•„๋ดค์œผ๋‹ˆ ์ฐธ๊ณ ํ•˜์„ธ์š”.

 

 

1. Open-WAX (chrome.google.com/webstore)

 

 

ํฌ๋กฌ์ด๋‚˜ ํŒŒ์ด์–ดํญ์Šค์—์„œ ์‚ฌ์šฉํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋‹ค์šด๋กœ๋“œ๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

 

์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€, ๋‹ค์šด๋กœ๋“œ ํ›„ ํผ์ฆ๋ชจ์–‘์˜ ์•„์ด์ฝ˜์„ ๋ˆ„๋ฅธ ๋’ค, ์˜คํ”ˆ ์™์Šค๋ฅผ ๊ณ ์ •์‹œ์ผœ์ค๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ ‘๊ทผ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์›ํ•˜๋Š” ํŽ˜์ด์ง€์—์„œ openwax๋ฅผ ์‹คํ–‰์‹œ์ผœ ์ค๋‹ˆ๋‹ค.

1 ํŽ˜์ด์ง€ ์”ฉ ๊ฒ€์‚ฌ ๊ฐ€๋Šฅํ•˜๋ฉฐ, 16๊ฐœ ํ•ญ๋ชฉ ๊ฒ€์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์š” ํ™•์ธ ํ•ญ๋ชฉ์€ ์ ์ ˆํ•œ ๋Œ€์ฒดํ…์ŠคํŠธ, ์ œ๋ชฉ ์ œ๊ณต, ๊ธฐ๋ณธ์–ธ์–ด ํ‘œ์‹œ, ํ‘œ์˜ ๊ตฌ์„ฑ, ๋ ˆ์ด๋ธ” ์ œ๊ณต์ž…๋‹ˆ๋‹ค.

 

2. AChecker(http://achecker.ca/checker/)

 

 

์˜๋ฌธ์œผ๋กœ ๋˜์–ด ์žˆ์œผ๋ฉฐ, url, html, html ๋งˆํฌ์—… ํ‰๊ฐ€๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์˜ต์…˜์„ ์ œ๊ณตํ•˜์—ฌ, ์ ‘๊ทผ์„ฑ ์ค€์ˆ˜์ˆ˜์ค€์„ ์ง€์ •ํ•˜์—ฌ ํ‰๊ฐ€๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

 

3. Colour Contrast Analyser(https://www.paciellogroup.com/resources/contrastanalyser/ )

 

 

๋ช…๋„ ๋Œ€๋น„ ๊ฒ€์‚ฌ ํ”„๋กœ๊ทธ๋žจ์ž…๋‹ˆ๋‹ค. ์œ„์˜ url์— ์ ‘์†ํ•˜์…”์„œ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

4. W3C (https://www.w3.org/WAI/ER/tools/)

 

 

๊ฝค๋‚˜ ์œ ๋ช…ํ•œ ์›นํ‘œ์ค€ ๊ฒ€์‚ฌ์‚ฌ์ดํŠธ์ธ W3C๋Š” ์›น ํ‘œ์ค€ ๋ฟ ์•„๋‹ˆ๋ผ, ์›น ์ ‘๊ทผ์„ฑ ํ‰๊ฐ€๋„๊ตฌ ๋ฆฌ์ŠคํŠธ๊ฐ€ 150์—ฌ๊ฐœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ๊ฒ€์‚ฌ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

5. kwcag a11y inspector

chrome.google.com/webstore/detail/kwcag-a11y-inspector/ngcmkfaolkgkjbddhjnhgoekgaamjibo?hl=ko

 

 

์›น์ ‘๊ทผ์„ฑ ์ง€์‹œ์‚ฌํ•ญ ์ค‘ ํ•˜๋‚˜์ธ, ์ปจํŠธ๋กค์€ 6mm๊ฐ€ ๋„˜์–ด์•ผ ํ•˜๋Š” ํ•ญ๋ชฉ์„ ๊ฒ€์‚ฌํ•ด์ฃผ๋Š” ํฌ๋กฌ์˜ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ž…๋‹ˆ๋‹ค.

 

 

6. wave (wave.webaim.org/)

 

 

์™ธ๊ตญ์‚ฌ์ดํŠธ์ธ wave๋Š” url๋กœ ๊ฒ€์‚ฌ๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

ui/ux๊ฐ€ ์ง๊ด€์ ์ด๋ผ์„œ ์–ด๋””๋ถ€๋ถ„์— ์˜ค๋ฅ˜๊ฐ€ ๋‚ฌ๋Š”์ง€ ์‰ฝ๊ฒŒ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

 

๊ทธ ๋ฐ–์—, ์›น์ ‘๊ทผ์„ฑ ์ž๊ฐ€์ง„๋‹จ

ํ‚ค๋ณด๋“œ ์ ๊ฒ€ ๋ฐฉ๋ฒ•

๋‹ค์–‘ํ•œ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €(ie11, chrome, firefox)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฃผ์†Œ์ฐฝ๋ถ€ํ„ฐ Tab(์ •๋ฐฉํ–ฅ), Shift+Tab(์—ญ๋ฐฉํ–ฅ), Enterํ‚ค์™€ ๊ฐ™์€ ํ‚ค๋ณด๋“œ ๋™์ž‘์œผ๋กœ ๋ฌธ์„œ์˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์ด์šฉ ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ ๊ฒ€ํ•œ๋‹ค.

 

* ์ฃผ์š” ์ ๊ฒ€์‚ฌํ•ญ

- ํ‚ค๋ณด๋“œ ๋งŒ์œผ๋กœ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

- ์ดˆ์ ์˜ ์ด๋™์ˆœ์„œ๊ฐ€ ๋…ผ๋ฆฌ์ ์ธ๊ฐ€?

- ํŠน์ • ์˜์—ญ์ด ๋งˆ์šฐ์Šค๋‚˜ ํ‚ค๋ณด๋“œ ์กฐ์ž‘์„ ํ†ตํ•ด ์ดˆ์ ์„ ๋ฐ›์•˜์„ ๋•Œ ์‹œ๊ฐ์ ์œผ๋กœ ์•Œ์ˆ˜ ์žˆ๋„๋ก ๋˜์–ด ์žˆ๋Š”๊ฐ€? (hover ํšจ๊ณผ)

 

 

์ถœ์ฒ˜: https://eunyoe.tistory.com/76 [eunyo์˜ it์ด์•ผ๊ธฐ:ํ‹ฐ์Šคํ† ๋ฆฌ]
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€