🎨 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. 링크에 밑쀄과 같은 색상 외에 μ‹œκ°μ  ν‘œμ‹œμžλ₯Ό μ£ΌλŠ” 것을 κ³ λ €ν•˜λΌ.