๐Ÿ—’ [์„ฑ์žฅ์„ ์œ„ํ•œ ๋ฐ์ผ๋ฆฌ ์•„ํ‹ฐํด] ๐Ÿง ์ ‘๊ทผ์„ฑ์€ ๋””์ž์ด๋„ˆ์˜ ์ฑ…์ž„์ด๋‹ค ์‹œ๋ ฅ๊ณผ ์ฒญ๋ ฅ์— ์ง€์žฅ์ด ์—†๊ณ  ์‰ฝ๊ฒŒ ์ฝ๊ณ  ์“ธ ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋žŒ์ด ์ธ๊ตฌ์˜ ์•ฝ 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

Accessibility is our responsibility

Medium

Accessibility is our responsibility

๋‹ค์Œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

๋˜๋Š”

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

2022๋…„ 5์›” 10์ผ ์˜ค์ „ 7:22

๋Œ“๊ธ€ 0




    ๋น„์Šทํ•œ ๊ฒŒ์‹œ๋ฌผ

    ์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

    1

    ๋‹ฌ๋ ˆ Apollo GraphQL Software Engineer

    ๐Ÿ‡ฐ๐Ÿ‡ท ํ•œ๊ตญ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋А๋ผ๋Š” ๊ณผ๋„ํ•œ ํ•™์Šต ์••๋ฐ• ๐Ÿ˜ฃ

    2

    ์žฅํ™์„ ์ŠคํŽ˜์ด์Šค์˜ค๋””ํ‹ฐ ๋ถ€๋Œ€ํ‘œ/CPO

    < ์„ธ์ƒ์€ ๋Š˜ 2:6:2๋กœ ๋Œ์•„๊ฐ„๋‹ค >

    2

    ๋ ˆ๋“œ๋ฒ„์Šค๋ฐฑ๋งจ ๋ฆฌ์„œ์ฒ˜ ์•ค ๋ผ์ดํ„ฐ

    โŸช์šฐ๋ฆฐ ์ •๋ง ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•˜๊ณ  ์žˆ์„๊นŒ?โŸซ

    4

    ๊ณจ๋นˆํ•ด์ปค Chief Maker

    ๋ฆฌํŒฉํ† ๋ง์€ ๋‚  ์žก๊ณ  ํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ, ์‚ผ์‹œ์„ธ๋ผ ๋ฐฅ ๋จน๋“ฏ์ด, ๋ฐฅ ๋จน๊ธฐ

    5

    ์กฐ์šฉ๊ตฌ Senior Front-end Engineer

    https://oliveyoung.tech/2025-04-25/w

    ์ถ”์ฒœ ํ”„๋กœํ•„