๐ ๊ฐ๋ฐ ๊ณต๋ถ 3๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต blog๐๏พ Oct 24 ~ 30, 2021
์ด์ ํ์ฌ์์ 2020๋ ์ ๊น์ง Culture Day๋ผ๋ ๊ฑธ ํ๋ค. ํ ๋ฌ ํน์ ๋ ๋ฌ์ ํ ๋ฒ ๊ธ์์ผ์ ์ค์ ๊น์ง๋ง ๊ทผ๋ฌด๋ฅผ ํ๊ณ ์ ์ง์์ด ๋ค ๊ฐ์ด ํน๋ณํ ๊ฒฝํ์ ๋๋๋ ํ์ฌ์ด๋ค. ํ ๋ฒ์ ๊ฐํ๋ ์ชฝ์์ < ์ด๋ ์์ ๋ํ >๋ผ๋ ๊ฑธ ํ๋๋ฐ, ์ค๋ ๋ฐํ๋ฅผ ๋ณด๊ธฐ์ ์์ ์ด๋์ ๊ฒฝํ์ด ๋ ์ฌ๋๋ค.
< ์ด๋ ์์ ๋ํ >๋ ๋ช ๋ช
์ด์ ์กฐ๋ฅผ ์ง ํ ์๋ด์์ ๋ฐ๋ผ ๊น๊นํ ๊ณต๊ฐ์ ๋์๋ค๋๋ฉฐ ์ฌ๋ฌ ๊ฐ์ง ์ฒดํ์ ํ๋ค. ํ ์น ์๋ ๋ณด์ด์ง ์๊ธฐ ๋๋ฌธ์ ์์งํ ๊ณณ์ด๋ผ๊ณ ๋ ๋ด ์์ ์น๊ณ ์๋ ์์ฌ๋์ ์ด๊นจ๊ฐ ์ ๋ถ์ธ ๊ฝค ๊ธด์ฅ๋๋ ๊ฒฝํ์ด๋ค.
cf. < ์ด๋ ์์ ๋ํ >๋ ์ํ โช ์ด๋ฐ์ํ์ โซ์์ ์ฃผ์ธ๊ณต๋ค์ด ์ฒ์ ๋ง๋ ์ฅ์์ธ ์๋น์ ๋ ์ฌ๋ฆฌ๋ฉด ๋๋ค.
๋น์ทํ ๋์ด๋์ ์ ์ ์ฌ๋๋ค๋ผ๋ฆฌ ์กด๋๋ง์ ์ฃผ๊ณ ๋ฐ๋ ๊ฒ ํน์ดํ๋์ง ์๋ดํด ์ฃผ์๋ ๋ถ์ด ์ฐ๋ฆฌ๊ฐ ์๋ก ์ด๋ค ๊ด๊ณ์ธ์ง ๋ฌผ์ด๋ณด์ จ๋ค. ์ฐ๋ฆฐ ์๋์ค๋ฝ๊ฒ ์ฐ๋ฆฌ์ service๋ฅผ ์๊ฐํ๊ณ , ์ฐ๋ฆฐ ๊ทธ service๋ฅผ ๋ง๋๋ ์ฌ๋๋ค์ด๋ผ๋ฉฐ, ์ฐ๋ฆฌ app์ ์ ์ฉํ ์ ๋ณด๊ฐ ์ ๋ง ๋ง์ผ๋ smart phone์ app์ down ๋ฐ์ผ์ ์ ๊ผญ ํ๋ฒ ์จ๋ณด์๋ผ ๋ง์๋๋ ธ๋ค.
๋๋ฃ๋ค๊ณผ ์๊ณ ๋ ๋ค๋ฉฐ ๊ฑท๋ค ๋ณด๋ ๊ธ๋ฐฉ ๊ธด์ฅ์ด ํ๋ ธ๋ค. ๊ทธ๋ฆฌ๊ณ ์ค๋นํด ์ฃผ์ ๋ฐ์ ์ ๋๋ผ๋ฉฐ ๊ทธ๋์ ๋ฏฟ๊ณ ์์๋ ๋์ ๊ฐ๊ฐ์ ๋ํด ๋ค์ ์๊ฐํด ๋ณด๋ ๊ณ๊ธฐ๊ฐ ์๊ฒผ๋ค. ๋ง์ ๋ฏธ๊ฐ์ผ๋ก, ์ด๊ฐ์ ํผ๋ถ๋ก๋ง ๋๋ผ๋ ์ค ์์๋๋ฐ ์๊ฐ๋ณด๋ค ๋ง์ ์ ๋ณด๋ฅผ ์๊ฐ์ ์์กดํ๊ณ ์๋ค๋ ๊ฑธ ๊นจ๋ฌ์๊ธฐ ๋๋ฌธ์ด๋ค. ๋ถ๋ช ํ A ์๋ฃ๋ผ๊ณ ๋ชจ๋ ํ์ ํ๋ ์๋ฃ๋ ์ ํ ์๊ฐ์ง ๋ชปํ Z์๊ณ , ๋ง์ง์๋ง์ โณ๋ผ๊ณ ์๊ฐํ๋ ๋ฌผ์ฒด๋ ์๋ฑ๋ง๊ฒ๋ โก์๋ค. ์๊ฐ์ ์ ์ธํ๊ณ ์ ํ๋ ์ ํ ๋ค๋ฅธ ์ธ์์ด ๋ ๊ฒ ๊ฐ์๊ณ ๋ด ๊ฐ๊ฐ์ ์ ํ๋์ ๋ํ ์์ฌ์ด ๋ค์๋ค.
์ด๋ ๊ฒ ์๋ค๋ฅธ ๊ฒฝํ์ ์ค๋นํด ์ฃผ์ ๋ถ๊ป ๊ฐ์ฌ๋ฅผ ํํ๋ฉฐ ๋ง์ง๋ง ์ธ์ฌ๋ฅผ ๋๋๋๋ฐ, ์๋ด์๋ถ์ด ์์ ์ ์๊ฐ์ฅ์ ์ธ์ด๋ผ๊ณ ์๊ฐํด ์ฃผ์ จ๋ค.
์๋ฟ์ธ.
๋ ๋น์ฐํ๊ฒ ์๊ฐํ๋ฉฐ ์ฐ๋ฆฌ์ service๋ฅผ ์๊ฐํ๋ ์๊ฐ์ด ๋ ์ฌ๋๋ค. '์๊ฐ์ฅ์ ๋ฅผ ๊ฐ์ง ์ฌ๋์ด ์ฐ๋ฆฌ service๋ฅผ ์ด์ฉํ ์ ์๋? ์ด์ฉํ ์ ์๋ค๋ฉด, ์ด์ฉ ์ ์๋? ์ฐ๋ฆฌ์ ๋น์ฐํจ์ด ์ ๋ถ๊ป ์์ฒ๊ฐ ๋์ง๋ ์์๋?' ๋ฑ ๊ฐ๊ฐ์ง ์๊ฐ์ ํ๋๋ผ ์ ์ ์ด ์์๋ค.
์ฌ์ค 2014๋ ์ ํ์ฌ์ ์ ์ฌํ๊ณ ์ฒ์์ผ๋ก ์ฉ๊ธฐ ๋ด์ ๊ฑด์ํ ๊ฒ Web ์ ๊ทผ์ฑ์ด์๋ค. ๊ทธ๋ Web ์ ๊ทผ์ฑ์ด๋ผ๋ ๋จ์ด๋ ๋ชจ๋ฅด๊ณ screen reader์ ์กด์ฌ๋ ๋ชฐ๋๋ค. unversal design ์ ๋๋ง ์๊ณ ์์์ผ๋ ค๋. ๋ ๋จ์ํ ์๊ฐํ์ ๋ ์ ์ผํ๊ฒ ์ฐ๋ฆฌ๋ง ์ ๊ณตํ๋ ์ด ์ ๋ณด๊ฐ ์๋น์๊ฐ ์ ํ์ ์ ํํ ๋ ์์ฒญ ์ ์ฉํ ๊ฒ ๊ฐ์๋ฐ, ๋ชจ๋ ์ ๋ณด๊ฐ text๋ก ๋์ด ์์ผ๋ ์๊ฐ ์ ๋ณด๋ฅผ ์ป๊ธฐ ์ด๋ ค์ด ์ฌ๋๋ ์ด ์ ๋ณด๋ฅผ ์ป์ ์ ์๋๋ก ์์ฑ ์๋ด ๊ธฐ๋ฅ์ด ์์ผ๋ฉด ์ข๊ฒ ๋ค๊ณ ๋งํ์๋ค. startup ์ด๊ธฐ์ ๊ฐ๋ฐ ์์๋ ๋ถ์กฑํ๋ฐ ์ด๋ฐ ๊ฑด์(?)๋ฅผ ํ ์ง์์๊ฒ ํ์ฌ๋ ์น์ ํ๊ฒ๋ ์ง๊ธ ๋น์ฅ์ ๊ทธ๋ฌ๊ธฐ ํ๋ ์ํฉ์์ ์ค๋ช ํด ์ฃผ์๋ค.
๋ช ๋
ํ์๋ ์ค๋ช
ํด ์ฃผ์๊ณ ,
๋ช ๋
ํ์๋ ์ ํด ๋ค์์ผ๋ฉฐ,
๊ทธ ๋ค๋ก ๋์ด์ ๋ฌป์ง ์์๋ค.
app download ์๊ฐ 10๋ฐฐ๊ฐ ๋์๊ณ , ํ์ฌ ๊ตฌ์ฑ์๋ ๋ด๊ฐ ์
์ฌํ์ ๋๋ณด๋ค 12๋ฐฐ๊ฐ ๋ง์์ก๋ค.
'์์ง๋ ๋ชป ํ๋.'
์์ฌ์ ๋ค.
์ด์ฏค Front-end๋ฅผ ๋ฐฐ์ ๊ณ , ์ด ์ผ์ ๋ฐฐ์ฐ๋ฉด ์ง๊ธ๊น์ง ๋๋๋ฆฌ๊ธฐ๋ง ํ๋ ์ผ์ ๋ด๊ฐ ์ด ์ ์๋ค๋ ๊ฑธ ๊นจ๋ฌ์๋ค. ๊ฐ๋ฐ๊ณผ ๊ด๋ จํด์ ๋ชจ๋ ๊ฒ ์ด๋ณด์ด์ง๋ง, ์ด๋ฐ ๊ฑธ ์ด๋ณด์๊ฒ ์ํค์ง ์๊ฒ ์ง๋ง, ์ด๊ฑธ ๋ชฉํ๋ก ๋๋ ๊ฐ๋ฐ์๋ ์๋ ๊ฒ ๊ฐ์ง๋ง ๋ ํ๊ณ ์ถ์๋ค. '์ฅ๋ฒฝ์ ๋ฎ์ถ๋ ๊ฐ๋ฐ์' ์ด๊ฒ ๋ด ์๊ธฐ์๊ฐ์ ์ ๋ชฉ์ด๋ค.
" '์กฐ๊ธ๋ง' ์ ๊ฒฝ ์จ๋ ๋์ ๋๋ ๊ฐ์ ์ ํ ์ ์์๊ธฐ์ ์ ํ ๋ด ์์ญ ๊ฐ์ service์ ์ ๊ทผ์ฑ์ '์กฐ๊ธ๋ง' ์ ๊ฒฝ ์จ์ ๊ฐ์ ํ์ต๋๋ค. "
screen reader๋ก ํ๋ service ์ฌ์ฉ ๊ฒฝํ์ ํ์ค๊ณผ ์ด๋ ต์ง ์์ code๋ก ์ฒ๋ฆฌํ๋ ํด๊ฒฐ๋ฒ์ ๋ณด๊ณ ์์๋ ์์๊ฐ์ ์๊ฐ์ด ํ๋ ๋ค. ์์๋ก ๋ณด์ฌ์ฃผ์ ์ฌ์ฏ ๊ฐ์ง ๋ฌธ์ ์ํฉ์ด ์ํ๊น์ ๊ณ , ๊ทธ๊ฑธ ํด๊ฒฐํ๋ code๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฐ๋ฐ์๋๊ณผ ๊ทธ team์ด ๋ฉ์์๋ค. ๋ง์์ผ๋ก๋ '์กฐ๊ธ๋ง' ์ ๊ฒฝ ์ฐ๋ฉด ๋๋ ๋ฌธ์ ๋ผ๊ณ ํ์ จ์ผ๋, ๊ทธ ์กฐ๊ธ์๋ resource๋ฅผ ๋ชป ์ฐ๋ ๊ณณ์ด ๋ง๋ค๋ ๊ฑธ ์๊ธฐ์ design system์ ์ด์ด '๋ TOSS๊ฐ...' ํ๋ฉฐ ๊ฐํํ๋ค.
๋ด ์๊ธฐ์๊ฐ์์ '์๋์น ์์ ์ฐจ๋ณ, ์ ๋ํ ์ฐจ๋ณ์ ํ์ง ์๊ฒ ํ๋ ๋ฐ์ ์ผ์กฐํ๊ณ ์ถ๋ค'๊ณ ์ ์๋๋ฐ, ๋ฐํ์์๋ ๋น์ทํ ๋ด์ฉ์ด ๋์๋ค. ์ด ์๊ฐ์ ๋์ํด ์ฃผ๊ณ ์ค์ฒํ๋ service๊ฐ ๋ง์์ก์ผ๋ฉด ์ข๊ฒ ๋ค๊ณ ์๊ฐํ๋ ํํธ, ํน์ resource ์ธ์ ๊ฐ๋ฐ๋ถ์์์ ์ฌ์ด ํ ์ ์๊ฒ ๋ฐ๋ชฉ์ ๋ถ์ก๋ ์์๊ฐ ์๋์ง, ์๋ค๋ฉด ์ด๋ป๊ฒ ํด์ํ๋ฉด ์ข์์ง ๋ ผ์๋ ๊ฒ ์๋์ง ๊ถ๊ธํด์ง๊ธฐ๋ ํ๋ค.
//๐ต ๋ชฉ์ ์ ๋ง๋ button์ผ๋ก ์ธ์ํ๊ฒ ํ๊ธฐ
<button onClick="moveToPointPage()">
<img src="/point-logo.png" alt="">
</button>
// โฌ๏ธ Output
// ๐"๋ฒํผ"
// โ
<button onClick="moveToPointPage()">
<img
src="/point-logo.png"
alt="๋ด ํฌ์ธํธ ๋ด์ญ์ผ๋ก ์ด๋" // alt๋ฅผ ํตํด img tag์ author๋ฅผ ๋ช
์ํด accessible name์ด ๋จ
>
</button>
// โฌ๏ธ Output
// ๐"'๋ด ํฌ์ธํธ ๋ด์ญ์ผ๋ก ์ด๋' ๋ฒํผ"