폴더블 디자인: 자세, 창 크기 및 동작
폴더블 휴대폰용 앱을 디자인하는 방법: 접힌 상태와 펼쳐진 레이아웃, 테이블 위와 책의 자세, 창 크기 클래스, 연속성 및 접힌 부분 근처의 동작.
핵심 포인트
기기 모델이 아닌 사용 가능한 창 크기로 폴더블 레이아웃을 디자인합니다. Android의 창 크기 클래스는 600dp 미만의 너비를 컴팩트로, 600~840dp를 중간으로, 840~1200dp를 확장으로 처리합니다. 접힌 상태, 열린 상태, 반쯤 열린(탁상형) 자세를 지원하고, 장치를 접거나 펼칠 때 사용자의 위치를 유지하며, 주요 콘텐츠와 터치 대상을 접힌 부분에서 멀리 유지합니다.
자세
Android의 개발자 문서에서는 접힌 상태, 편평하게 열린 상태, 가로 방향으로 편평하게 열린 상태, 반쯤 열린 상태(탁상용) 등 여러 가지 상태의 폴더블을 설명합니다. 접힌 부분은 화면을 하나의 화면의 유연한 영역으로 또는 두 디스플레이 사이의 힌지로 두 부분으로 나누고 디스플레이의 일부를 가릴 수 있습니다.
창 크기 클래스에 따른 디자인
특정 장치를 대상으로 하는 대신 Android는 사용 가능한 공간을 창 크기 클래스로 그룹화합니다. 컴팩트한 너비(600dp 미만)는 세로 방향의 거의 모든 휴대폰을 덮습니다. 중간 너비(600~840dp)는 세로 모드에서 대부분의 태블릿을 덮고 세로 모드에서는 펼쳐진 대형 내부 디스플레이를 많이 포함합니다. 확장된 너비(840~1200dp)는 대부분의 태블릿과 가로로 펼쳐진 대형 디스플레이를 포함합니다. 대형 및 초대형 수업에는 더 큰 태블릿과 데스크탑이 포함됩니다.
접힌 부분을 사용하는 레이아웃
일반적인 패턴:
- 접힌 경우: 일반적인 휴대폰 레이아웃입니다.
- 평면 열기: 목록 세부정보 또는 두 개의 창으로 구성된 레이아웃(각 창이 접힌 부분의 한쪽에 있음).
- 테이블탑: 위쪽에는 비디오와 같은 콘텐츠, 아래쪽에는 컨트롤이 있습니다.
- 접힌 부분에 버튼, 텍스트 라인 또는 면을 배치하지 마십시오.
연속성
누군가 작업 중에 기기를 펼칠 때 앱은 동일한 스크롤 위치, 동일한 초안, 동일한 재생을 계속해야 합니다. 접고 펼치기를 다시 시작이 아닌 레이아웃 변경으로 처리하고 사람들이 콘텐츠가 이동한 위치를 따라갈 수 있도록 전환에 애니메이션을 적용하세요.
제스처 및 도달 범위
더 큰 펼쳐진 화면은 엄지손가락의 도달 범위를 변경합니다. 손이 닿는 가장자리 근처에 빈번하게 제어할 수 있는 컨트롤을 배치하고 시스템 제스처와 충돌하는 가장자리 스와이프를 피하세요. 물리학 기반 모션도 여기에 도움이 됩니다. 스프링으로 미끄러지고 고정되는 창은 자세 간 변화가 부자연스럽기보다는 자연스러운 느낌을 줍니다.
기억할 핵심 원칙
- 기기 모델이 아닌 창 크기 클래스로 디자인
- 컴팩트 < 600dp, 중간 600~840dp, 확장 840~1200dp
- 접힌 상태, 열린 자세, 테이블 위 자세 지원
- 콘텐츠와 컨트롤을 접을 수 없는 곳에 보관하세요
- 상태를 유지하고 자세 변화를 애니메이션화합니다.
자주 묻는 질문
출처
- Learn about foldables — Android 개발자
- Use window size classes — Android 개발자