애플의 휴먼 인터페이스 가이드라인의 기본사항.
열심히 읽고 잘 익혀봅시다.

---

접근성

누구나 제품이나 서비스를 이용하는데 불편함 없이 이용할 수 있는 정도

접근성은 단순히 장애인, 정보약자 계층 등을 위한 것 뿐만 아니라 어느사람이든 어떤 상황에 발생할 수 있는 불편함을 고려한 설계이기도 하다. 사람들은 떄때로 다양한 시기에 상호작용에 불편함을 겪을 수 있다.

접근성을 고려한 설계

모범사례

1. 애플의 손쉬운 사용을 염두하고, 간결성과 인식용이성을 우선시하여 디자인
   • 손쉬운 사용 : 개인이 원하는 방향으로 인터페이스와 소통하는 기능
     (VoiceOver, 동작 줄이기, 더 큰 텍스트 등)
   • 간결성 : 복잡한 작업을 친숙하고 일관적이게 상호작용하도록 함
   • 인식 용이성 : 시각, 청각, 촉각 중 하나를 사용하지 않아도 인식에 문제가 없도록 함
2. 개인화 지원
   • 다양한 상황과 모든 기기, 개인적인 커스텀에서도 경험을 즐기도록 함
   • 다양한 기기 지원 + 표준구성요소를 함께 지원
   • (애플의 표준 구성요소)https://developer.apple.com/kr/design/human-interface-guidelines/components
3. 손쉬운 사용을 통하여 기능을 테스트

상호작용

보조 기술로 기기와 상호작용 할 때 지원방향

보조기술

1. VoiceOver

   • 대상: 시각을 이용하기 어려운 사용자
   • 설명: 화면의 텍스트, 버튼, 이미지 등을 읽어주는 스크린 리더 기능

2. AssistiveTouch

   • 대상: 손이나 팔 등 신체의 일부를 사용하기 어려운 사용자
   • 설명: 화면 제스처를 대신할 수 있는 가상 버튼이나 메뉴를 제공하여, 물리적인 터치나 제스처를 사용하지 않고도 기기를 제어

3. 포인터 제어 (Pointer Control)

   • 대상: 손이나 손가락으로 포인터를 제어하기 어려운 사용자
   • 설명: 손목, 머리, 또는 다른 신체 부위를 사용하여 포인터를 제어할 수 있게 해주는 기능

4. 스위치 제어 (Switch Control)

   • 대상: 손이나 팔의 움직임이 제한적인 사용자
   • 설명: 다양한 스위치나 버튼을 사용해 화면을 탐색하고 상호작용할 수 있는 기능으로, 신체의 다른 부위나 외부 장치를 이용해 기기를 제어

5. Dwell Control

   • 대상: 눈이나 머리 움직임을 이용해 상호작용이 필요한 사용자
   • 설명: 사용자가 화면을 일정 시간 동안 응시하면, 해당 항목을 선택하고 실행하는 방식으로, 눈이나 머리의 움직임만으로 화면을 제어

제스처

1. 플랫폼의 기본 제스처를 지우지 않도록
2. 쉬운 제스처를 사용
3. 제스처의 대체방식을 추가로 제공
4. 가능하면 두 가지 이상의 물리적 상호작용으로 접근방식을 제안
5. 사용자 설정 제스처의 경우, 앱과 상호작용할 수 있는 대체 방식을 제공하는 보조 기술을 지원
6. 접근성 API를 통해, 드래그 앤 드롭을 식별하고 상호작용 할 수 있게 안내

버튼 및 제어기

1. 터치스크린 기기 최소 44*44px
2. visionOs 60px이상 간격
3. 버튼에 대한 설명과 특징을 지정
4. 일관된 스타일 계층으로 중요성 나타내기
5. 시스템 제공 스위치의 구성요소를 그대로 사용
6. 색상 외에도 시각적 지표를 추가하는 것을 고려하기

사용자 입력

1. 키보드외 음성입력 지원
2. Siri와 단축어를 지원하여 음성만으로도 중요한 작업을 수행하도록 지원
3. 일반 텍스트 선택을 막지않기.

햅틱

촉각 또는 촉감을 통한 피드백, 예시로 진동이나 압력변화

1. 시스템 정의 햅틱을 지원
   사용자가 혼란을 느끼지 않도록 일관된 햅틱을 사용

VoiceOver

시각적 콘텐츠에 대한 청각적 설명

콘텐츠 설명

1. 의미가 있는 모든 이미지 설명제공
2. 인포그래픽에 설명제공
3. 이미지가 장식용인 경우 보조기술에서 가리기
4. 각 페이지에 제목 지정, 섹션에도 적절한 머릿말 제공
5. 모든 사람이 비디오 및 오디오 콘텐츠를 즐기도록 정보제공

탐색

1. 모든 요소를 탐색하도록 하기
2. 요소의 그룹과 정렬 또는 연결을 지정하여 경험을 향상
3. 레이아웃이 변경되면 VoiceOver도 변경
4. 버튼 또는 제어기가 다른 웹,앱을 여는 경우 예측 가능하도록 표시
5. 중요한 인터페이스 요소에 대체텍스트 제공
6. 필요할 경우, VoiceOver 로터 지원
   • VoiceOver로터 : 제스쳐 기반 컨트롤 도구, 스와이프나 스크롤로 읽기방식 전환시킴
7. 키보드만으로 모든 구성요소를 탐색하고 상호작용하도록 지원

텍스트 표시

'타이포그래피'에서 더 자세히 다룰 예정
[애플 타이포그래피]https://developer.apple.com/kr/design/human-interface-guidelines/typography
[애플 디자인리소스] https://developer.apple.com/design/resources/#ios-apps
애플 디자인 리소스에서 각 플랫폼에 대한 다이나믹타입 크기표를 다운받을 수 있음

텍스트 스타일	iOS / iPadOS (기본)	macOS
표준 크기 (Default)	17pt	13pt
헤드라인 (Headline)	28pt	24pt
서브헤드라인 (Subheadline)	22pt	20pt
본문 (Body)	17pt	13pt
캡션 (Caption)	12pt	12pt
리스트 항목 (List)	17pt	13pt
타이틀 (Title)	34pt	28pt
기본 텍스트 크기 (Body)	17pt (기본)	13pt (기본)
더 큰 텍스트 (Larger Text)	사용자가 크기 조정 가능	사용자가 크기 조정 가능

---

개인적으로 궁금한 부분
다이나믹 타입과 더 손쉬운 사용 글자크기

📌다이나믹 타입(Dynamic Type)
접근성 향상을 위해 사용자가 조정할 수 있는 텍스트 크기의 종류

📌더 큰 손쉬운 사용 글자 크기 (Larger Accessibility Sizes)
다이나믹 타입을 넘어서는 텍스트 크기의 타입, 시력 약자가 주로 사용

---

고려사항

1. 각 플랫폼에서 다이나믹타입을 사용하고 앱의 레이아웃 점검
2. 서체 크기가 증가할 때 텍스트 잘림 최소화해야 함
   • 열리고 닫는 형태가 아닌 경우 필요한 만큼 스크롤 하도록 지원
3. 큰 서체 사용 시 열의 수를 줄이고 가독성을 향상시키도록 지원
   • 서체 증가 시 한 열에서 제공하는 레이아웃을 변경
4. 서체 크기 증가 시, 중요 아이콘의 크기도 증가
5. 서체가 크더라도 정보계층은 일관되게 주요정보는 상단에 위치
6. 볼드 텍스트를 킨 경우 보기 좋도록

텍스트 표시의 주의사항

1. 앱에서 얇은 글씨
2. 꼭 필요하지 않은 경우, 폰트 변경.
3. 텍스트 양쪽정렬
4. 긴 구절 이텔릭체
5. 전체대문자
6. 읽기 어려운 폰트

색상 및 효과

1. 색상만으로 주요한 정보전달은 피하기, 꼭 텍스트레이블과 글리프 추가하기
2. 가급적 시스템 색상 사용
3. 색상조합으로 상태 또는 값 구분은 피하기
4. 색 반전을 고려하기
5. 굵기와 크기에 따른 색상 대비비율을 고려하기

텍스트 크기	텍스트 굵기	최소 대비 비율
최대 17포인트	모두	4.5:1
18포인트 이상	모두	3:1
모두	볼드체	3:1

6. 투명도를 줄일 때 흐림효과 추가

동작

1. 애니메이션에 의존하지 않고 앱을 사용하도록 하기
2. 동작줄이기가 켜져있을 때, 제한 된 애니메이션을 재생하도록 구상
   • 바운스 효과 줄이기
   • 레이어의 깊이를 애니메이션으로 표현하지 않기
   • 흐림효과를 애니메이션으로 표현하지 않기
   • 움직임을 없애도록 슬라이드를 페이드로 대치
3. 비디오 및 기타 움직임은 재생버튼으로 재생
4. 움직이거나 깜빡이는 요소를 표시할 때 '뇌전증'을 일으킬 수 있음

---

여러가지 정리하면서 보니까 기존에 만들었던 웹사이트의 허점이 들어난다.
기억나는 것들을 간략하게 적어보면
1. 제스쳐의 대체방식 제공이 미흡
2. 텍스트 선택을 강제로 막음(보이스 리더 사용을 막아버림..)
3. 버튼의 크기와 형태에 대한 명확한 시스템이 없음
4. 텍스트 스타일에 대한 지정이 없음
5. 애니메이션의 남용
꼭.. 신경써서 사이트를 수정하도록 하자