11์ 7์ผ์ ์น ์ ๊ทผ์ฑ์ ๋ํ ๊ฐ์ฐ์ ๋ฃ๊ณ ์๋ค.
์ง์ง ๋ง์ ๊ฑธ ์ป์๋ ๊ฐ์์๋ค.
์๋ํ๋ฉด ๋๋ ์ ์ด์ ์๋ชป ์๊ณ ์์๋ ๊ฐ๋ ์ด์๊ธฐ ๋๋ฌธ์ด๋ค.
์ฐฝํผํ์ง๋ง, ์ ๋ณด ์ ๊ทผ์ฑ์ด๋ผ๋ ๋ง์ ๋ณด์ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ๋ค๋ฃฌ๋ค๊ณ ์๊ฐํ๋ ๋๋ ๋จธ๋ฆฌ๋ฅผ ๋~~ ๋ง์๋ค.
์ด๋ฒ ๊ธฐํ์ ์๋ชป๋ ์ง์์ ๋ฐ๋ก ์ก์ ์ ์์ด์ ๋๋ฌด ์ข์๋ค.
์๋ ๋ด์ฉ์ ๊ฐ์ฐ์ ๋ค์ผ๋ฉด์ ์ ๋ฆฌํ ๋ด์ฉ์ด๋ค.
๋์ฒ๋ผ '์น ์ ๊ทผ์ฑ'์ ๋ํด์ ์ ๋ชจ๋ฅธ๋ค๊ฑฐ๋, ๋ค์ด๋ง ๋ณธ ์ฌ๋์ด ์ฐธ๊ณ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
๋ง์ฝ, ์ ๊ทผ์ฑ์ ๋ํด์ ์กฐ๊ธ ์๊ณ ์๋ค๋ฉด ์๋ ์ง๋ฌธ์ ํ ๋ฒ ๋ตํด๋ณด๋ ๊ฒ ์ข์ ๊ฒ ๊ฐ๋ค.
์๋น์ค๋ฅผ ๋ง๋ค๋ ์ ๊ทผ์ฑ์ ์ด๋์ ๋ ๊ฐ์น๋ฅผ ๋๋๊ฐ?
- ์ ๊ทผ์ฑ์ ์ค์์ฑ๊ณผ ํ์์ฑ์ ์๋์ง
- ์๋น์ค ๊ฐ๋ฐ ํ๋ก์ธ์ค์์ ๊ณ ๋ คํ๊ณ ์๋์ง
๋ด๊ฐ ๋ง๋ ์๋น์ค๋ฅผ ์ฅ์ ์ธ์ด ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ํ์๋, ์ด๋ ์ ๋ ์ฌ์ฉํ ์ ์์๊ฑฐ๋ผ ์๊ฐํ๋๊ฐ?
๋๋ ์ด ์ง๋ฌธ์ ํ๋๋ ์ ๋๋ก ๋ตํ ์ ์๋ ๊ฒ ์์๋ค.
์น ์ ๊ทผ์ฑ ๊ด์ ์์์ ์๋น์ค๋ฅผ ๋ฉ์ธ์ผ๋ก ๊ตฌํํ ์ ์ด ์์๊ธฐ ๋๋ฌธ์ด๋ค. ๋๋ฌด ๋ถ๋๋ฝ๋ค.
ํ์ง๋ง, ์ด์ ๋ผ๋ ์์์ผ๋ ๋คํ์ด๋ผ๊ณ ์๊ฐํ๋ฉด์ ์น ์ ๊ทผ์ฑ์ ๋ํด์ ์์๋ณด๊ฒ ๋ค.
*์๋ ๋ด์ฉ์ ๋๋ถ๋ถ ํด๋น ๊ฐ์ฐ์์ ์ค๋ช ํด์ฃผ์ ๋ด์ฉ์ผ๋ก ์ด๋ฃจ์ด์ ธ์์ต๋๋ค*
์ ๊ทผ์ฑ?
Accessibility = Access + Ability
-> ์ฅ์ ์ธ์ ์ํ ์ถ๊ฐ ๊ธฐ๋ฅ ์ ๊ณต / ๊ณ ๋ํ
Universal design
Inclusive design
Design for all
=> ๋ค์ํ ์ฌ์ฉ์๋ฅผ ํฌ๊ดํ๋ ๋์์ธ (๋ฒ์ฉ ๋์์ธ)
์ด๋ ๊ฒ ์ด๋ ค์ด ์ฉ์ด๋ก ๋ง์ ํ๋ฉด ๋๊ฒ ์ด๋ ค์ด ๊ฐ๋ ์ฒ๋ผ ๋ค๊ฐ์จ๋ค.
์ข ๋ ์ดํด๊ฐ ์ฝ๊ฒ ๊ฐ๋๋ก ์๋ฅผ ๋ค์ด๋ณด์.
์ ๊ทธ๋ฆผ์ฒ๋ผ ์์ก์ด ๋ ๋ฒ์ ์ ๋์นซ์์ ์๊ฐํด๋ณด์.
๋ ๋ฒํ ์์ก์ด๋ ์ํ ์์ก์ด ์ค์ ์ด๋ค ๊ฒ ๋ ํธํ๋ค๊ณ ์๊ฐํ๋๊ฐ?
๋๋ ๋ ๋ฒ๊ฐ ๋ ํธํ๋ค๊ณ ์๊ฐํ๋ค. ์๋ํ๋ฉด, ์์ด ๋ฏธ๋๋ฝ๊ฑฐ๋ ๋ฌผ์ด ๋ฌป์ด์์ผ๋ฉด ํ๋์์ ์ ์์ด๋ฆฌ๋ ๊ฒฝ์ฐ๋ฅผ ๋ง์ด ๊ฒฝํํ๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋ ๋ค๋ฉด, ์ ๋ ์นซ์์ ์ด๋ค๊ฐ?
๊ทธ๋ฅ ์นซ์์ ๋นํด ํ์ ์์ง์์ด ๋ํด ์ถฉ์ ์ ํด์ผํ๋ค๋ ์๊ณ ๋ก์์ ์ ์ธํ๋ฉด ๋ ํธํ๊ฒ ๋๊ปด์ง๋ค.
์ ๋ ์นซ์์ ๋ณธ๋ ์์ ์์ง์์ด ๋ถํธํ ํ์๋ ๊ต์ ํ์๋ฅผ ์ํด ๊ฐ๋ฐ๋์ด ์ข์ฐ ์๋ณต ์ด๋๋ง ๊ฐ๋ฅํ ๋จ์ํ ํํ๋ก ๋ง๋ค์ด์ก๋ค๊ณ ํ๋ค.
์ด๋ ๊ฒ ๋ ๋ฒํ ์์ก์ด, ์ ๋ ์นซ์ ๋ฑ์ฒ๋ผ ์ฅ์ ์ธ์ ์ํด์ ๋ง๋ค์ด์ก์ง๋ง, ๋น์ฅ์ ์ธ ์ฌ์ฉ์๊ฐ ํจ์ฌ ๋ง์์ง๊ณ ์๋ ๊ฒ๋ค์ด ๋ง๋ค.
๊ทธ ๋ง์ ๋น์ฅ์ ์ธ์๊ฒ๋ ๊ต์ฅํ ํธ๋ฆฌํจ์ ์ ๊ณตํ๊ณ ์๋ค๋ ๊ฒ์ด๋ค!
์ ๊ทผ์ฑ์ด๋?
Barrier Free
๋ค์ํ ์ฌ์ฉ์๋ฅผ ํฌ๊ดํ๊ธฐ ์ํด ์ฒ์๋ถํฐ ๋ค์ํ ์ฌ์ฉ์๋ฅผ ๊ณ ๋ คํ์ฌ ์ค๊ณํ์ฌ ๊ฐ ์ฌ์ฉ์์๊ฒ ์ฅ์ ๊ฐ ์ฅ๋ฒฝ์ด ๋์ง ์๋๋ก ์ฅ๋ฒฝ์ผ๋ก ์์ฉํ๋ ๊ฒ์ ์ ๊ฑฐํ๊ณ ๋์ด์ ์ฅ์ ๋ฅผ ๋๋ผ์ง ์๊ฒ ํ๋ ๊ฒ
์ ๊ทผ์ฑ์ ๋ถ์ฌ == ์ค๋ฅ
์ฅ์ ์ธ ์ธ๊ตฌ์ ๋๊ตฌ ํน์ ๊ฒฝ๋ถ ์ธ๊ตฌ๊ฐ ๊ฑฐ์ ๋น์ทํ ๊ฒ์ ๋ณด๊ณ ์๊ฐ์ ๋ค์ ํ๊ฒ ๋๋ค.
'๋๊ตฌ, ๊ฒฝ๋ถ ์ฌ๋ ์ฌ๋๋ค์ด ๋ด๊ฐ ๋ง๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ์ง ๋ชปํ๋ค.' ๋ผ๊ณ ์๊ฐํ๋ฉด ์ด๊ฑด ํฐ ์ด์๋ค ๋ผ๊ณ ์๊ฐ์ด ๋ค์ง๋ง,
'์ฅ์ ์ธ์ด ๋ด ์๋น์ค๋ฅผ ์ฌ์ฉํ์ง ๋ชปํ๋ค'๋ผ๊ณ ์๊ฐํ๋ฉด ๊ฐ๋ฐ ํ์์๋ก ๋ฏธ๋ฃจ๊ฒ ๋๋ ๋์ ์๊ฐ์ ๊ณ ์ณ๋จน๊ฒ ๋์๋ค.
๋์ด ๋์ผํ ๊ฒ์ผ ๋ฟ๋๋ฌ
์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ง ์๋ ๊ฒ = ๋๊ตฌ or ๊ฒฝ๋ถ ์ธ๊ตฌ๊ฐ ์ฌ์ฉํ์ง ๋ชปํ๋ค
์๋ชป๋ ์๊ฐ!
์ ๊ทผ์ฑ์ ๋ํด์ ์๊ฒ ๋๋ฉด ๋๋ถ๋ถ '์ ๊ทผ์ฑ์ ๊ฒฐ๊ตญ ์ฅ์ ์ธ ์ฌ์ฉ์๋ฅผ ๋์ํ๊ธฐ ์ํ ๊ฒ ์๋๊ฐ?' ๋ฑ ์ฌ๊ธฐ์ ์๊ฐ์ด ๊ทธ์น๋ ๊ฒ ๊ฐ๋ค.
์ ๊ทผ์ฑ์ด๋ผ๊ณ ํ๋ฉด ๋๋ถ๋ถ ์คํฌ๋ฆฐ ๋ฆฌ๋๋ฅผ ์๊ฐํ๊ธฐ๋ ํ๊ณ , ์ค์ ์ฅ์ ์ธํํ ์ฌ์ฌ๋ฅผ ๋ฐ๊ธฐ๋ ํ๊ณ ~ ๊ทธ๋ ๋ค๋ฉด ์ฅ์ ์ธ์ ์ํ ๊ฒ ์๋๊ฐ?๋ผ๋ ์๊ฐ์ด ์์ฐ์ค๋ฝ๊ฒ ๋ค ์ ๋ฐ์ ์๋ค.
๋๋ ์ด ๊ฐ์ฐ์ ๋ฃ๊ธฐ ์ ๊น์ง๋ ๊ทธ๋ฌ๋ค.
ํ์ง๋ง, ์๊น ๋ ๋ฒํ ์์ก์ด, ์ ๋ ์นซ์์ ์๊ฐํ๋ฉด ์ ์ ์๋ค์ถ์ด ์ฅ์ ์ธ์ด๋ผ๊ณ ์๊ฐํ๊ธฐ๋ณด๋ค ๋ ํธ๋ฆฌํจ!์ ์ด์ ์ ๋๋ณด๋ฉด ์ด๋จ๊น
์ฆ, ๊ฐ์ฅ ์ทจ์ฝํ ์ฌ์ฉ์ธต์ ์ต์ ๊ธฐ์ค์ผ๋ก ๋๋ฉด ๊ฑฐ์ ๋ชจ๋ ์ฌ์ฉ์์ ๋ฌธ์ ๊ฐ ์์ฐ์ค๋ฝ๊ฒ ํด๊ฒฐ ๋ ์ ์๋ค.
๊ทธ ๊ธฐ์ค์ ์ฅ์ ์ธ์ด ์๋ 20๋ ํ์ ๋ ธํ๋ ๋ชธ์ ๊ฐ์ง ๋ด๊ฐ ๋ ์๋ ์๋ค๋ ์ ์ ๊ผญ ์์ง ๋ง์
๊ฐ์ฅ ๋ณดํธ์ ์ผ๋ก ์๊ฐํ๋ ์ ๊ทผ์ฑ ๊ฐ๋ฐ
'<img>์ alt๋ฅผ ๋ฃ์ด์ผํ๋ค'
์ ๊ทผ์ฑ ๊ฐ๋ฐ์ ํ๋ค๊ณ ํ๋ฉด ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ผ๋ก ์๊ฐํ๋ ๋ฐฉ๋ฒ์ผ ๊ฒ์ด๋ค.
ํ์ง๋ง, ์ด๋ ์ ๊ทผ์ฑ ๋์์ด ์๋ชป๋๋ค
์๋ํ๋ฉด '~๋ฅผ ~ํด์ผํ๋ค'์ ๊ฐ์ ๋ ์ํผ์ฒ๋ผ ๋ง๋๋ ๊ฒ์ด ์๋๋ผ, ์ฅ์ ์ ๋ํ ์ดํด๊ฐ ์ฐ์ ๋ ์ฑ ๊ทธ์ ๋ํ ๊ธฐ๋ฅ์ ์๊ฐํ๋ฉด์ ๊ตฌํ๋์ด์ผ ๋๋๊ฒ์ด๋ค.
<์ ๊ทผ์ฑ์ 4์์น P.O.U.R>
Perceivable ์ธ์๊ฐ๋ฅ์์น (ํ ์คํธ ๊ธฐ๋ฐ์์น)
Operable ์กฐ์๊ฐ๋ฅ (์ด๋ค ์ํ์์๋ ์ธํฐ๋์ ์ ํ ์ ์์ด์ผ๋จ)
Understandable ์ดํด ๊ฐ๋ฅ ( ์ธํฐํ์ด์ค์ ์กฐ์๋ฐฉ๋ฒ์ด๋ ์ ๋ณด๋ฅผ ์ดํดํ ์ ์์ด์ผํจ, ์ง๊ด์ ์ผ๋ก ์ ์ ์๋ ์๋น์ค)
Robust ๊ฒฌ๊ณ ( ๊ธฐ์ ๋ฐ์ ์ ๋ฐ๋ผ ์ฝํ ์ธ ๋ ๊ณ์ ์ ๊ทผํ ์ ์์ด์ผํจ )
์ ๊ทผ์ฑ๋ ์ ๋๋ก ๊ณ ๋ คํ์ง ์์ผ๋ฉด์ ๊ณผ์ฐ ๋ด๊ฐ '์ฌ์ฉ์ ์นํ์ ์ธ' ์ด๋ผ๋ ๋ง์ ์ธ ์๊ฒฉ์ด ์๋?
์ด ์๊ฐ์ด ์์ฒญ ๋ค์๋ค.
๊ทธ๋ฆฌ๊ณ ์ ๊ทผ์ฑ์ด๋ผ๋ ๊ฒ ์ฅ์ ์ธ๋ฟ๋ง ์๋๋ผ ๋์ด๊ฐ ๋ค์ด์ ๋ถํธํ ์๋, ์ ์ผ ์ทจ์ฝํ ์ฌ์ฉ์ธต์ ๋์์ผ๋ก ํ๋ฉด ๋์ด์ด์ด์ด ํธ๋ฆฌํ ์๋น์ค๊ฐ ๋ง๋ค์ด์ง๋ค๋ ๊ฒ์ ๋๊ผ๋ค.
์์ผ๋ก ๊ฐ๋ฐ์ ํ ๋ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํด์ ๋ง๋ค์ด๋ด์ผ๊ฒ ๋ค.
์ ๊ทผ์ฑ์ด ์ ํ์ํ์ง, ์ด๋ค๊ฑด์ง๋ ํ์คํ๊ฒ ์์์ผ๋ ์ด๋ป๊ฒ ํ๋ฉด ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ ๊ฐ๋ฐ์ ํ ์ ์์์ง๋ ๋ ์ฐพ์๋ด์ผํ ๊ฒ ๊ฐ๋ค.
๋ด ๋ถ์กฑํ ๋ถ๋ถ์ด ๋ญ์ง ์๊ฒ ๋ผ์ ๋๋ฌด ๊ธฐ๋ถ์ด ์ข์๋ ํ๋ฃจ์๋ค.
'WEB' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
styled-components๋ฌด์์ tailwind CSS ๋์ ๊ธฐ - 1 (0) | 2024.01.08 |
---|---|
CSR vs SSR (0) | 2022.01.02 |
Sass์ฌ์ฉ ์ค๋ฅ & Sass๋ฅผ CSS๋ก ๋ฐ๊พธ๊ธฐ (0) | 2021.01.13 |
Input ํ๊ทธ, ์์ฑ (0) | 2021.01.03 |