๐ŸŽจ UX UI

[Apple - Human Interface Guidelines] 1. Accessibility

์˜ค๋ธŒ ๐Ÿง™‍โ™‚๏ธ 2023. 9. 8. 01:31

Apple์˜ ์ ‘๊ทผ์„ฑ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ž์‹ ์—๊ฒŒ ๋งž๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ธฐ๊ธฐ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ฐœ์ธํ™”ํ•˜๊ฒŒ ํ•œ๋‹ค.

 

์•ฑ ๋˜๋Š” ๊ฒŒ์ž„์— ์ ‘๊ทผ์„ฑ ๊ฐœ์ธํ™”๋ฅผ ์ง€์›ํ•˜๋„๋ก ๋””์ž์ธ๋˜์–ด ์žˆ๋‹ค. -->

๋Šฅ๋ ฅ ๋˜๋Š” ๊ธฐ๊ธฐ ์‚ฌ์šฉ ๋ฐฉ์‹๊ณผ ๊ด€๊ณ„์—†์ด ๋ชจ๋“  ์‚ฌ๋žŒ์ด ํ›Œ๋ฅญํ•œ ๊ฒฝํ—˜์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š”๋‹ค.

 

์•ฝ ์ผ๊ณฑ ๋ช… ์ค‘ ํ•œ ๋ช…์€ ๋Šฅ๋ ฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ์žฅ์• ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋‚™์ƒ์œผ๋กœ ์ธํ•œ ์†๋ชฉ ์†์ƒ์ด๋‚˜ ๊ณผ๋„ํ•œ ์‚ฌ์šฉ์œผ๋กœ ์ธํ•œ ๋ชฉ์†Œ๋ฆฌ ์ƒ์‹ค๊ณผ ๊ฐ™์€ ์ƒํ™ฉ ์žฅ์• ๋Š” ๊ฑฐ์˜ ๋ชจ๋“  ์‚ฌ๋žŒ์ด ๊ธฐ๊ธฐ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ๋ฐฉ์‹์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

 

์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ๋””์ž์ธํ•˜๋ผ. ์ ‘๊ทผ์„ฑ์€ ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋Šฅ๋ ฅ์ด๋‚˜ ์ƒํ™ฉ๊ณผ ๊ด€๊ณ„์—†์ด ๋ชจ๋“  ์‚ฌ๋žŒ์—๊ฒŒ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์•ฑ์„ ๋””์ž์ธํ•˜๋Š” ๊ฒƒ์€ ๋‹จ์ˆœํ•จ๊ณผ ์ธ์ง€ ๊ฐ€๋Šฅ์„ฑ์„ ์šฐ์„ ์‹œํ•˜๊ณ  ๋ชจ๋“  ๋””์ž์ธ ๊ฒฐ์ •์„ ๊ฒ€ํ† ํ•˜์—ฌ ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋“ค์ด๋‚˜ ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ๊ธฐ๊ธฐ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ๋ฐฐ์ œํ•˜์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

1. ๊ฐ„๊ฒฐํ•จ - ๋ณต์žกํ•œ ์ž‘์—…์„ ๊ฐ„๋‹จํ•˜๊ณ  ๋ช…๋ฃŒํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์ต์ˆ™ํ•˜๊ณ  ์ผ๊ด€๋œ ์ƒํ˜ธ ์ž‘์šฉ์„ ์ง€์›ํ•˜๋ผ.

2. ์ธ์ง€๊ฐ€๋Šฅ์„ฑ - ๋ชจ๋“  ์ฝ˜ํ…์ธ ๊ฐ€ ์‹œ๊ฐ, ์ฒญ๊ฐ ๋˜๋Š” ์ด‰๊ฐ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ ์ธ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ผ. 

3. ๊ฐœ์ธํ™” - ์ด๋ฏธ ํ™˜๊ฒฝ ๋ณ€ํ™”์— ์ ์‘ํ•˜๋„๋ก ๊ฒฝํ—˜์„ ๋””์ž์ธํ•˜๊ณ  ์žˆ์œผ๋ฏ€๋กœ ๊ธฐ๊ธฐ ๋ฐฉํ–ฅ, ๋””์Šคํ”Œ๋ ˆ์ด ํฌ๊ธฐ, ํ•ด์ƒ๋„, ์ƒ‰ ์ƒ‰์ƒ ๋ฐ ๋ถ„ํ•  ๋ทฐ์™€ ๊ฐ™์€ ํ™˜๊ฒฝ ๋ณ€ํ™”์— ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•ด ์„ค๊ณ„ํ•˜๋ผ. 

4. ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด ์•ฑ์ด๋‚˜ ๊ฒŒ์ž„์„ ๊ฐ์‚ฌํ•˜๊ณ  ํ…Œ์ŠคํŠธํ•˜๋ผ. - ์•ฑ์ด๋‚˜ ๊ฒŒ์ž„์˜ ๊ฐ ์ค‘์š”ํ•œ ์‚ฌ์šฉ์ž ํ๋ฆ„์— ๋Œ€ํ•ด VoiceOver, Reduce Motion ๋˜๋Š” Large Text Size์™€ ๊ฐ™์€ ์ ‘๊ทผ์„ฑ ๊ธฐ๋Šฅ์„ ์ผœ๊ณ  ํ๋ฆ„์˜ ๋ชจ๋“  ์ž‘์—…์„ ์–ด๋ ค์›€์—†์ด ์™„๋ฃŒํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๋ผ.

 

์ œ์Šค์ฒ˜

1. ํ”Œ๋žซํผ ์ œ์Šค์ฒ˜๋ฅผ ๋ฌด์‹œํ•˜์ง€ ๋งˆ๋ผ.

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

3. ์ œ์Šค์ฒ˜ ๊ธฐ๋ฐ˜ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๋Œ€์ฒด ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋ผ. ํŠน์ • ์ œ์Šค์ฒ˜๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์˜ต์…˜์„ ํฌํ•จํ•˜๋ผ. 

4. ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ, ํ•œ ๊ฐ€์ง€ ์ด์ƒ์˜ ๋ฌผ๋ฆฌ์  ์ƒํ˜ธ ์ž‘์šฉ์„ ํ†ตํ•ด ์•ฑ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ผ. 

5. ์‚ฌ์šฉ์ž ์ง€์ • ์ œ์Šค์ฒ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž๊ฐ€ ์•ฑ๊ณผ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋Š” ๋ณด์กฐ ๊ธฐ์ˆ ์„ ์ง€์›ํ•˜๋ผ. 6. iOS ๋˜๋Š” iPadOS ์•ฑ์—์„œ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ผ. 

 

๋ฒ„ํŠผ & ์ปจํŠธ๋กค 

1. ๋ชจ๋“  ์ปจํŠธ๋กค๊ณผ ๋Œ€ํ™”ํ˜• ์š”์†Œ๊ฐ€ ์ถฉ๋ถ„ํžˆ ํฐ ํฌ๊ธฐ์—ฌ์•ผ ํ•œ๋‹ค. ํ„ฐ์น˜์Šคํฌ๋ฆฐ ์žฅ์น˜์—์„œ๋Š” ๋Œ€์ƒ์ด ์ตœ์†Œ 44x44 pt ์—ฌ์•ผ ํ•œ๋‹ค. ๋น„์ „OS์—์„œ๋Š” ์ค‘์‹ฌ์ด ์ตœ์†Œ 60 pt ๋–จ์–ด์ ธ ์žˆ๋„๋ก ์ปจํŠธ๋กค์„ ๋ฐฐ์น˜ํ•ด์•ผํ•œ๋‹ค.

2. ์‚ฌ์šฉ์ž ์ง€์ • ์š”์†Œ์˜ ์ ‘๊ทผ์„ฑ์„ ํŠน์„ฑํ™”ํ•ด์•ผ ํ•œ๋‹ค.

3. ์ผ๊ด€๋œ ์Šคํƒ€์ผ์˜ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ์ถ”์˜ ์ƒ๋Œ€์  ์ค‘์š”์„ฑ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. 

4. ์‹œ์Šคํ…œ์—์„œ ์ œ๊ณตํ•˜๋Š” ์Šค์œ„์น˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์„ ํ˜ธํ•˜์ž. 

with on/off labels (@apple)

5. ๋งํฌ์— ๋ฐ‘์ค„๊ณผ ๊ฐ™์€ ์ƒ‰์ƒ ์™ธ์— ์‹œ๊ฐ์  ํ‘œ์‹œ์ž๋ฅผ ์ฃผ๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜๋ผ.