3줄 요약 💡
- 기기(폰/패드)에 따른 디자인 분기는 반드시 필요한 경우가 아니면 참아주세요.
- 가로/세로모드에 따른 디자인 분기 대신 Device Size Class(Compact / Regular)에 따른 분기를 적용해주세요.
- Safe Layout Guide, Readable Content Guide의 개념을 이해하고 적극 활용해주세요.
쓰는 이유
-
아이패드 디자인 대응 중 필요성을 느꼈습니다.
-
명확한 용어를 기반으로 소통되지 않으니 서로 원하는 바를 전달하는데 드는 비용이 높습니다. 디자이너께서 디자인을 했을 때 표준 스펙에 고려되지 않은 디자인이라면 개발이 불가하거나 / 개발이 오래 걸리거나 / 예외 사항을 체크하기 위해 질문하고 고려하는 스펙이 늘어나게 됩니다.
-
앞으로 가로모드, 멀티태스킹, 슬라이드오버 등의 애플 앱을 앱답게 쓸 수 있는 기능을 많이 지원하고 싶어하기에 레거시를 더이상 쌓으면 안 됩니다.
멀티태스킹에 대한 설명
아이패드의 멀티태스킹과 슬라이드오버 동시 사용.
-
애플이 선정하는 ‘애플 디자인 어워드, 혹은 애플의 ‘올해의 앱’에 선정되는게 꿈인데, 그러려면 표준을 지켜야 함
글의 목적
- 디좌이너와 개발좌의 커뮤니케이션 비용 감소시키고 싶습니다.
왜 애플의 표준 방식으로 UI를 그려야 하는가
- 표준을 따르지 않는다면, 새로운 모델이나 새로운 해상도의 디바이스가 나올때마다 UI가 깨지지는 않았을까 걱정하며 테스트 해야합니다.
- 표준을 따르면 애플에서 어떤 신박한 기능을 내더라도 이를 빠르게 적용할 수 있고 걱정이 없습니다.
- 예: 아이폰과 패드에서의 위아래 창분할(현재 없는 기능)이 나올 때도 여유있게 대응 가능함
- 콴다 앱이 다크모드나 가로모드를 지원하지는 못하지만 그 이유는 그것들이 고려되지 않은 화면이 매우 많아서인거지, 앞으로 그런 레거시를 없애나갈 것이 클라이언트 개발자의 목표인데 레거시를 늘리는건 바람직하지 않습니다.
핵심 개념
레이아웃 가이드
애플은 다음과 같은 레이아웃 가이드를 제공합니다.
Margins Safe Area
안전하게 보이며, 안전하게 탭 할 수 있는 영역
Safe Area를 벗어나는 UI는 가려지거나 탭하지 못할 수 있다.
탭해야 하는 버튼, 유저에게 정보를 표시하는 텍스트 등은 Safe Area에 있어야 합니다.
-
예시 이미지
Readable Content Guide
애플이 권장하는 ‘유저가 글을 읽기 좋은 영역’에 대한 가이드
Readable Guide를 벗어난다고 가려지거나 탭하지 못하는건 아니지만 읽기 불편함
-
예시 이미지
Size Classes (매우 중요 ⭐️)
- 애플은 화면 너비나 높이에 따라 Compact(좁은) / Regular(넓은) class를 구분했습니다.
다음과 같은 조합을 가질 수 있습니다.
-
Regular width, regular height
-
Compact width, compact height
-
Regular width, compact height
-
Compact width, regular height
-
(첨부) 기기별 화면 조합표
Do / Don’t
이렇게 해주세요
- [Compact / Regular] 사이즈 클래스로 구분해서 규칙을 정해주세요.
하지 말아주세요
- [폰 / 패드], [가로모드 / 세로모드] 로 디자인 분기는 참아주세요.
- 디자인이 아닌 비즈니스 로직상 폰과 패드가 다르게 보여야 할 때만 분기하는 것이 좋습니다.
- 기기에 따른 디자인 분기 하지 말아주세요.
- 위와 같습니다.
끝으로
디자이너와 개발자 모두 저비용 고효율의 프로세스를 진행할 수 있도록 해보아요.
자료 출처
Human Interface Guidelines - Adaptivity and Layout
개발자는 어떻게 할 것인가?
레이아웃 가이드 잘 지키기
배경 등 잘려도 되는 UI는 상관없지만 탭되어야 한다거나 유저가 읽는 컨텐츠가 주가 된다면 Safe Area나 Readable Content Guide를 잘 지켜주세요.
이렇게 개발하지 말아주세요
// Phone / Pad 등 기기에 따른 디자인 분기를 하지 말아주세요
if UIDevice.current.userInterfaceIdiom == .pad {
$0.width.equalTo(343)
} else {
$0.trailing.equalToSuperview().inset(20)
}