Accessibility is our responsibility
Medium

๐ [์ฑ์ฅ์ ์ํ ๋ฐ์ผ๋ฆฌ ์ํฐํด] ๐ง ์ ๊ทผ์ฑ์ ๋์์ด๋์ ์ฑ ์์ด๋ค ์๋ ฅ๊ณผ ์ฒญ๋ ฅ์ ์ง์ฅ์ด ์๊ณ ์ฝ๊ฒ ์ฝ๊ณ ์ธ ์ ์๋ ์ฌ๋์ด ์ธ๊ตฌ์ ์ฝ 50% ์ ๋ ๋ฐ์ ์๋๋ค๋ ๊ฑธ ์๊ณ ์์๋์? ๋์์ธ ๋จ๊ณ์์ ๋ช ๊ฐ์ง ๊ฐ๋จํ ์์น์ ์งํค๋ ๊ฒ ๋ง์ผ๋ก๋ ์ ๋ฐ์ ์ธ UX๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค. ์ด๊ฒ์ '์ธํด๋ฃจ์๋ธ ๋์์ธ(Inclusivie Design)' ์ด๋ผ๊ณ ํฉ๋๋ค. ์ธํด๋ฃจ์๋ธ ๋์์ธ์ด๋? - ๊ฐ๋ฅํ ํ ๋ง์ ์ฌ๋๋ค์ ๋์ฆ์ ๋ฅ๋ ฅ์ ๊ณ ๋ คํ๋ ๋์์ธ. ๋ฌธ์ ๊ฐ ์๊ธฐ๊ธฐ ์ ํด๊ฒฐํ์ฌ ์ข์ ํ๋ก๋ํธ์ ๊ธฐ์ค์ ๋์ด๊ณ ๋ฐ๊พธ๋๊ฑธ ๋ชฉํ๋กํจ - POUR (Percivable Operable Understandable Robust)์ ์ฐธ์กฐ -- Percivable: ๋์งํธ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ๋ค์ํ ๋ฐฉ์์ผ๋ก ํด์ํ๊ฑฐ๋ ์ฒ๋ฆฌํ ์ ์๋์ง? -- Operable: ํ๋ก๋ํธ๋ฅผ ๋ณต์กํ์ง ์๊ฒ ์ฝ๊ฒ ์๋ํ๊ณ ์ ์ดํ ์ ์๋์ง? -- Understandable: UI์ ๊ธฐ๋ฅ๊ณผ ์ ๋ณด๋ฅผ ์ดํดํ ์ ์๋์ง? -- Robust: ํ๋ก๋ํธ๊ฐ ๋ค์ํ ๋ณด์กฐ ๊ธฐ์ ๊ณผ ์ฅ์น์ ํธํ์ด ๋๋์ง? ๋์์ด๋๊ฐ ์ด๋ป๊ฒ ์ ๊ทผ์ฑ์ ํฅ์ ์ํฌ ์ ์์๊น? (๐ก์๋ฌธ ๋งํฌ์ ๊ฐ ํญ๋ชฉ์ ๋ํ ์ ์ ํ ์์์ ์ค๋ช ์ด ์์ธํ ๋์์์ผ๋ ๊ผญ ํ๋ฒ ํ์ธํด๋ณด์ธ์!) 1, ์๊ฐ์ ๊ฒฝํ: ๋ชจ์, ์ปฌ๋ฌ, ๋๋น, ํ ์คํธ ์คํ์ผ ๋ฑ์ ๋ชจ๋ ๊ทธ๋ํฝ ์์ - ๋ช ์๋น: AAA (์ ๊ทผ์ฑ ์ต๊ณ ์์ค)์ ๋ฌ์ฑํ๋ ค๋ฉด 7:1์ ๋ช ์๋น๊ฐ ํ์ํจ - ๋ช ๋: ๋ฐ์ ์์์ผ ์๋ก ๋น์ ๋ฐ์ฌํ์ฌ ์ ๋ณด๋ฅผ ์ฝ๊ณ ์ฒ๋ฆฌํ๋ ๋ฅ๋ ฅ์ ๋ฐฉํดํจ. Yellow ๊ฐ 50% ์ด์ ํํจ๋ ์์์ ๋๋ง์ ๋น์ ๋ฐ์ฌํจ. - ์๋งน: coolors.co (์ง์ ํ ํ๋ ํธ๊ฐ ์๋งน์๊ฒ ์ด๋ป๊ฒ ๋ณด์ด๋์ง ๋ณด์ฌ์ฃผ๋ ์ฌ์ดํธ) * ์์์ ์ค์ํ ๋ฉ์ธ์ง๋ฅผ ์ ๋ฌํ๋ ์ ์ผํ ๋ฐฉ๋ฒ์ผ๋ก ์ฐ์ง ๋ง ๊ฒ. - ํ์ดํฌ ๊ทธ๋ผํผ: 14px ์๋๋ก ์ฌ์ฉํ์ง ์์ ๊ฒ. ์ค ๊ฐ๊ฒฉ์ 2.0์ ์ด๊ณผํ์ง ๋ง ๊ฒ. 2. ์ฒญ๊ฐ์ ๊ฒฝํ: ์ ํ ์ธํฐ๋ ์ ์ ์๊ธฐ๋ ์๋ฆฌ, ๋ณผ๋ฅจ ๋ฐ ์ ๋ช ๋ 3. ์ธ์ง์ ๊ฒฝํ: ์ธํฐํ์ด์ค๋ฅผ ํด์ํ๋๋ฐ ์๋นํ๋ ์๊ฐ - ์ธ์: ์ฌ๋๋ค์ ์ธ์์ ์ฐ๋ น, ์ ๊ทผ์ฑ, ๋ฉํ๋ชจ๋ธ, ๋ฌธํ์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์ผ๋ฏ๋ก ์ค์ ์ฌ์ฉ์์ ํจ๊ป ํจ์จ์ฑ์ ํ ์คํธ ํ์ฌ ๋์์ธ์ ๊ฒฐ์ ํ๋ ๊ฒ์ด ์ค์ํจ. - ์๊ฐ์ ๊ณ์ธต ๊ตฌ์กฐ: ์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ์ฝํ ์ธ ๋ฅผ ํ์ํ๊ณ ๋ฐ๊ฒฌํ ์ ์๋๋ก ๋ฐฐ์ด - ์ํธ์์ฉ: ๋๋ฌด ๋ง์ ์ต์ ์ ์ ๊ณตํ์ง ์๊ณ (์ต๋ 5๊ฐ) ์์ฌ ๊ฒฐ์ ์๋๋ฅผ ์ค์ด๊ธฐ. ์ ๋๋ฉ์ด์ ๋ฐ gif๋ ๊ผญ ํ์ํ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉํ๊ธฐ. ํผ๋๋ฐฑ์ ํตํด ์ฌ์ฉ์์๊ฒ ํ์ค์ฑ๊ณผ ํต์ ๊ฐ์ ์ฃผ๊ธฐ. 4. ๋ชจํฐ ๊ฒฝํ ํฅ์: ํ๋ก๋ํธ์ ์ํธ์์ฉํ๋ ๋ฐ ํ์ํ ๋ชจ๋ ๋์๊ณผ ์์ง์ - ํผ์ธ ์ ๋ฒ์น: ์ฌ์ฉ์์ ๋์ ์ฌ์ด์ ๊ฑฐ๋ฆฌ๋ฅผ ์ค์ด๊ณ ํฌ๊ธฐ๋ฅผ ๋๋ฆฌ๊ธฐ - ๊ณต๋ฐฑ: ์ฌ์ฉ์์ UI๊ฐ์ ๋ช ํํ ์ธํฐ๋ ์ ์ ๋์์ด๋จ. --- ์์ฝ ๋ฐ ๋ฒ์ญ: ๊น์์ง --- ๐ B2B ๋์์ด๋๋ค์ ๋ชจ์ ์๊ฐ B2B ํ๋ก๋ํธ๋ฅผ ๋ง๋ค๊ณ ์๋ B2B ๋์์ด๋๋ค์ B2C ๋์์ด๋๋ณด๋ค ๋ ์ด๋ ค์ด ๋ฌธ์ ๋ฅผ ํ๊ณ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ ๋ฐ ๋นํด ์๋ฃ, ์ง์, ํผ๋๋ฐฑ์ ์ฐพ๋๋ฐ๋ ์ด๋ ค์์ ๊ฒช๊ณ ์์ต๋๋ค. ๋ ๋ง์ B2B ํ๋ก๋ํธ ๋์์ด๋๋ค์ด ํ์๋ฆฌ์์ ์ด๋ ค์ด ์ , ๋ฐฐ์ด ์ ์ ๊ณต์ ํ๊ณ ์๋ก ๋์์ด ๋๊ธฐ ์ํด ์ปค๋ฎค๋ํฐ๋ฅผ ์ด์์ค์ ๋๋ค. ๐ B2B ๋์์ด๋๋ค์ ๋ชจ์ ๋ ธ์ ๋งํฌ: https://www.b2b-designers.space
2022๋ 5์ 10์ผ ์ค์ 7:22
๐ [์ฑ์ฅ์ ์ํ ๋ฐ์ผ๋ฆฌ ์ํฐํด] '๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง' ์ ๋๋ก ์ฝ๊ธฐ ๐ง ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ์ ์ : ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ๋ถํ์คํ ์ํฉ์์๋ ํจ์จ๋ณด๋ค๋ ์๋๋ฅผ ์ค์ํ์ฌ ์ ๊ณ์์์ 'ํผ์คํธ-์ค์ผ์ผ๋ฌ'๊ฐ ๋๊ณ ์ ํ๋ ์ฌ์ ์ ๊ทผ ๋ฐฉ์์ ์๋ฏธํฉ๋๋ค. ๐ค ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ 3๊ฐ์ง ํน์ง 1๏ธโฃ ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ '๊ณต๊ฒฉ์ด์ ๋ฐฉ์ด'์ ๋ต์ด๋ค. ๊ธ์ํ ์ฑ์ฅ์ ๋ฐ๊ฒฉํ ๋งํ ์๊ฐ๊ณผ ์ฌ์ง๋ฅผ ์์ค๋ค. 2๏ธโฃ ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ '์์ฅ ์ ์ ์๊ฐ ๊ฒฝ์ ์ฐ์๋ฅผ ๊ฐ๋' ์ ์ํ์ ํตํด ์ฑ์ฅํ๋ค. 3๏ธโฃ ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ๊ธฐํ์ ๋์์ ์ํ์ ์๋ฐํ๋ค. ๐ค ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ํ๊ธฐ ์ํ 3๊ฐ์ง ํต์ฌ ๊ธฐ๋ฒ 1๏ธโฃ ๋น์ฆ๋์ค ๋ชจ๋ธ ํ์ : ๋์ ๋ฒ๋ ๋ฐฉ๋ฒ ์์ฒด๋ฅผ ํ์ ํ์ฌ ์ง์ ํ ์ฑ์ฅ์ ๊ฐ๋ฅํ๋๋ก ํ๋ค. โป ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ๋์ ๊ธฐ์ ์ 4๊ฐ์ง ์ฑ์ฅ์ธ์ ์ค ์ผ๋ถ๋ฅผ ๊ฐ์ง๊ณ ์์ด์ผ ํ๋ฉฐ, 2๊ฐ์ง ์ฑ์ฅ ์ ์ฝ ์ธ์๋ฅผ ์ด๊ฒจ๋ด์ผ ํ๋ค. โซ 4๊ฐ์ง ์ฑ์ฅ ์ธ์ โ ์์ฅ ๊ท๋ชจ โก ์ ํต : ๊ธฐ์กด ๋คํธ์ํฌ๋ฅผ ๋ ๋ฒ๋ฆฌ์งํ ์ ์๊ฑฐ๋ ๋ฐ์ด๋ด์ด ์ฉ์ดํด์ผ ํ๋ค. โข ๋งค์ถ ์ด์ด์ต : ๋งค์ถ์์ ์๊ฐ๊ฐ ์ฐจ์งํ๋ ๋น์ฉ์ด ๋ฎ์์๋ก ์ข๋ค. ex. ์ํํธ์จ์ด ๊ธฐ์ โฃ ๋คํธ์ํฌ ํจ๊ณผ : ๋ฐ์ด๋ด๊ณผ ๋ฌ๋ฆฌ ๋คํธ์ํฌ๋ ์ ์ง/๋ฐฉ์ด์ ์ญํ ์ ํ๋ค. โฌ 2๊ฐ์ง ์ฑ์ฅ ์ ์ฝ ์ธ์ โ PMF์ ๋ถ์กฑ โก ํ์ฅ์ ๋ํ ๋์ ๋ถ์กฑ 2๏ธโฃ ์ ๋ต ํ์ : ๋จ์ ๊ณต๊ฒฉ์ ์ฑ์ฅ์ ๋ต์ ๋์ด ๋ถํ์คยท์ํ์ฑ์ ๊ฐ์ํ๋ ์ด๊ณ ์ ์ฑ์ฅ ์ถ๊ตฌ ์ ๋ต์ด๋ค. โ Checklist: ์ง๊ธ ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ํ ์ ์๋๊ฐ? โ ์๋กญ๊ณ ํฐ ๊ธฐํ๊ฐ ์๋๊ฐ โก ํผ์คํธ ์ค์ผ์ผ๋ฌ ์ฐ์๋ฅผ ๋ง๋ค ์ ์๋๊ฐ โข ๊ฐํ๋ฅธ ํ์ต ๊ณก์ ์ ๊ฐ์ง ์ ์๋๊ฐ โฃ ๋น ๋ฅธ ์ฑ์ฅ์ผ๋ก ๊ฒฝ์ ์ํ์ ์ค ์ ์๋๊ฐ โ Checklist: ์ธ์ ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ๋ฉ์ถฐ์ผ ํ๋๊ฐ? โ ์ฑ์ฅ๋ฅ ์ ์ ํ โก ์ ๋ ์ด์ฝ๋ ธ๋ฏน์ค ์ ํ โข ์ง์ ์์ฐ์ฑ ์ ํ โฃ ๊ฒฝ์ ๊ฐ์ ๋น ์ฆ๊ฐ โค ๋ด๋ถ 3๏ธโฃ ๊ฒฝ์ ๊ด๋ฆฌ ํ์ : ์์ง์์ ๊ทน๋ ๊ธด์ฅ, ์ธ์ฌ ๋ถ๋ถ์ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ฌ์ง๊ฐ ๋์ ์ผ๋ฐ์ ์ธ ๊ฒฝ์๊ณผ ํ์ฐํ ๋ค๋ฅธ ์ ๊ทผ๋ฒ์ด ํ์ํ๋ค. ๐ข ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ๋์ํ๊ธฐ ์ํ 8๊ฐ์ง ์ ํ โ ์กฐ์ง์ ๊ท๋ชจ ํ์ฅ์ ๋ฐ๋ฅธ ์ธ์ ๊ด๋ฆฌ์ ๋ณํ โก ์ ๋๋ด๋ฆฌ์คํธ์์ ์คํ์ ๋ฆฌ์คํธ๋ก โข ์ค๋ฌด์์์ ๊ด๋ฆฌ์/๊ฒฝ์์๋ก โฃ ์ผ๋์ผ > ์ผ๋๋ค ์ปค๋ฎค๋์ผ์ด์ ๋ฐฉ์์ผ๋ก โค ์๊ฐ์์ ๋ฐ์ดํฐ๋ก โฅ ํ๊ฐ์ง์ ์ง์ค์์ ๋์๋ค๋ฐ์ ์ธ ๋์์ผ๋ก โฆ ํด์ ์์ ํด๊ตฐ์ผ๋ก์ ํ์ธ ์ ํ โง ์ค๋ฆฝ์์์ ๋ฆฌ๋๋ก ๐ด ๋ธ๋ฆฌ์ธ ์ค์ผ์ผ๋ง์ ๋์ํ๊ธฐ ์ํ 9๊ฐ์ง ๋ฐ์ง๊ด์ ์ธ ๊ท์น โ ํผ๋์ ์์ฉํ๋ผ โก ๊ฐ์ฅ ์ ํฉํ๊ธฐ๋ณด๋ค ๋ฐ๋ก ์ง๊ธ ํ์ํ ์ฌ๋์ ์์ ํ๋ผ โข ์๋ชป๋ ๊ด๋ฆฌ๋ ๋๋ก ์ฉ์ธํ๋ผ โฃ ๋ถ๋๋ฌ์ด ์์ค์์ ์ ํ์ ๋ก ์นญํด๋ผ โค ๋ถ๊ธธ์ด ํ์ค๋ฅด๊ฒ ๋ด๋ฒ๋ ค ๋๋ค โฅ ๊ท๋ชจ๊ฐ ๋์ค์ง ์๋ ์ผ์ ํด๋ผ โฆ ๊ณ ๊ฐ์ ๋ฌด์ํ๋ผ โง ๋๋ฌด ๋ง๋ค ์ถ์ ์ ๋์ ์๊ธ์ ๋ชจ์๋ผ โจ ๋ฌธํ๋ฅผ ์งํ์์ผ๋ผ -- ์์ฝ : ์ด๊ทผํ --- ๐ B2B ๋์์ด๋๋ค์ ๋ชจ์ ์๊ฐ B2B ํ๋ก๋ํธ๋ฅผ ๋ง๋ค๊ณ ์๋ B2B ๋์์ด๋๋ค์ B2C ๋์์ด๋๋ณด๋ค ๋ ์ด๋ ค์ด ๋ฌธ์ ๋ฅผ ํ๊ณ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ ๋ฐ ๋นํด ์๋ฃ, ์ง์, ํผ๋๋ฐฑ์ ์ฐพ๋๋ฐ๋ ์ด๋ ค์์ ๊ฒช๊ณ ์์ต๋๋ค. ๋ ๋ง์ B2B ํ๋ก๋ํธ ๋์์ด๋๋ค์ด ํ์๋ฆฌ์์ ์ด๋ ค์ด ์ , ๋ฐฐ์ด ์ ์ ๊ณต์ ํ๊ณ ์๋ก ๋์์ด ๋๊ธฐ ์ํด ์ปค๋ฎค๋ํฐ๋ฅผ ์ด์์ค์ ๋๋ค. ๐ B2B ๋์์ด๋๋ค์ ๋ชจ์ ๋ ธ์ ๋งํฌ: https://www.b2b-designers.space
ํ์ง์์๊ฒ ์ ๊ณ ์ฃผ์ ์์์ ๋ฐ์๋ณด์ธ์.
ํ์ง์๋ค์ '์ง์ง ์ธ์ฌ์ดํธ'๊ฐ ๋ด๊ธด ์ ๊ณ ์ฃผ์ ์์์ ๋ฐ์๋ณด์ธ์.
์ปค๋ฆฌ์ด๋ฆฌ | ์ผ์๋ฌ๋ค์ ์ปค๋ฆฌ์ด SNS