일관된 레이아웃은 사용자에게 모든 기기에서 같은 경험을 하도록 도와줍니다.
적응성
모든 앱과 기기는 시스템 컨텍스트가 변경 될 경우 조정이 필요함
SwiftUI 또는 자동 레이아웃을 사용하면 동적으로 조정되는 것을 확인할 수 있음
일반적인 기기 및 시스템 변형의 종류
화면크기, 해상도, 색상 공간
기기방향
다이나믹 아일랜드 및 카메라 제어기와 같은 시스템 기능
iPad의 외장 디스플레이 지원, 디스플레이 확대/축소 및 멀티태스킹 모드
다이나믹 타입 텍스트 크기변경
왼쪽/오른쪽으로 레이아웃 방향 변경
날짜/시간/숫자/형식/서체변경 등 지역기반 다국어
- 안정영역, 여백 안내선을 활용하여 레아이웃 디자인
- 텍스트 크기 변경에 대비
- 가장 큰 레이아웃과 작은 레이아웃을 먼저 테스트하고 현지화 작업도 하기
- 필요한 경우, 아트워크의 크기도 조정
시각적 계층
- 상단에서 하단으로, 중요도에 따라서 배치
- 중요한 정보에 충분한 공간을 주기
- 정보를 시각적으로 그룹화하고 필요한 경우 영역을 분리
- 정렬과 들여쓰기를 통해서 정보계층 구조화
- 추가할 항목의 경우 시각적 힌트 제공
- 구성요소끼리 너무 가까운 경우 구분이 어려움
안내선 및 안전영역
레이아웃 안내선은 화면에서 콘텐츠 배치, 정렬, 간격을 조정하도록 하는 직사각형 영역을 정의함
안전영역
탐색막대, 탭막대, 도구막대 등 기타 도구에 가려지지 않는 영역
각 플랫폼에서 주요기능을 고려해서 안전영역을 설정해야함
플랫폼 고려사항
IOS,IPadOS
- 가로세로 지원하기
- 시각적 콘텐츠를 확장하여 화면을 채우기(아트워크 , 스크롤 등)
- IOS게임에서 풀 블리드 인터페이스를 사용하기
- 전각버튼 삽입(오른쪽 아래 안전영역 하단)
- 가로방향의 경우 양쪽에 화면제어기 배치
- 하단에 상호작용제어기랑 겹치지 않게 하기
- 값을 추가하거나 경험을 향상시킬 경우에만 상태막대 가리기
- 다양한 상태막대에 대응(ex.키보드 나올 경우 안전영역이 좁아짐)
macOS
- 윈도우 하단에 제어기나 중요정보 배치하지 않기
- 상단 가장자리에 카메라 하우징에 콘텐츠 피하기
watchOS
- 화면의 한 가장자리에서 다른 가장자리로 확장하도록 디자인
베젤이 패딩역할을 함 - 인터페이스에 4개 이상의 제어기를 나란히 배치하지 않기
2개정도가 좋음 - 동작에 반응하도록 회전을 지원
frontend developer