Android는 다양한 기기, 폼, 화면 크기를 지원하므로 특정 픽셀 완벽한 잠금에 맞게 디자인하는 것은 비효율적일 뿐만 아니라 사용자 환경에도 부정적인 영향을 미칠 수 있습니다. 대신 적응형으로 디자인, 빌드, 생각하세요. 최근에는 적응형 레이아웃을 빌드하는 데 도움이 되는 몇 가지 익숙한 디자인 개념을 제공하는 새로운 API가 도입되었습니다.
Pawparazzi는 이러한 개념을 보여주는 샘플 앱입니다. 이 앱은 그리드 및 Flexbox와 같은 적응형 API를 사용하여 적응형 디자인을 강조하도록 설계 및 빌드되었습니다.
적응형으로 생각하는 것은 중단점을 사용하여 디자인하는 것뿐만 아니라 콘텐츠를 유연한 컨테이너에서 생각하는 것입니다.
모든 것이 그리드입니다.
콘텐츠를 구성하는 기반을 마련하면 좋은 디자인 관행에 도움이 되고 콘텐츠가 어떻게 적응해야 하는지 결정하는 데 도움이 될 수 있습니다. Android에는 모든 콘텐츠를 마이크로 수준에서 정렬할 수 있는 기본 8dp 기준선 그리드가 있습니다.
Pawparazzi는 균일한 모듈식 그리드 또는 단방향 열 그리드 대신 계층적 레이아웃 그리드를 사용합니다. 즉, 이를 구성하는 열과 행은 콘텐츠 계층 구조에 따라 결정됩니다.
그리드 유형을 결정하는 것은 콘텐츠에 따라 달라야 합니다. 앱 콘텐츠로 시작하고 콘텐츠가 함께 그룹화되는 방식을 생각해 보세요. 이렇게 하면 전반적인 레이아웃 구조를 결정하는 데 도움이 됩니다. 창에서 생각하는 방법에 관한 자세한 내용은 그리드 및 단위 콘텐츠 구조, 데스크톱 시작하기를 참고하세요.
Pawparazzi의 기본 목표는 펫 개요, 펫 세부정보, 순위가 매겨진 펫으로 시작하여 다양한 방식으로 팀의 펫을 보는 것이었습니다. 즉, 펫 갤러리가 기본 콘텐츠 창과 그리드의 더 많은 부분을 차지하고 그 뒤에 탐색 및 필터 요소가 옵니다. 공간이 더 많으면 갤러리가 더 많은 행과 더 많은 펫으로 확장되고 펫 세부정보를 동시에 표시할 수 있습니다. 이 적응형 원칙은 더 큰 레이아웃에서 더 많은 콘텐츠를 표시하는 것입니다.
앱의 기본 목표와 콘텐츠를 살펴보면 레이아웃 그리드가 적응해야 하는 시점과 방법(창 클래스 크기, 힌지 배치, 기기 방향)을 결정하는 데 도움이 되었습니다.
레이아웃 그리드에서 하위 그리드는 더 유연한 콘텐츠 구조를 빌드하는 데 도움이 됩니다. 갤러리 자체는 그리드입니다. 컴팩트 크기의 경우 2개의 그리드가 사용됩니다.
그리드는 양방향 레이아웃 개념이므로 콘텐츠가 가로 및 세로 방향으로 모두 흐를 수 있습니다.
이를 사용하여 더 흥미로운 레이아웃을 만들거나 그리드를 사용하여 최고 순위의 펫을 전달하는 이번 주의 펫과 같은 더 명확한 시각적 계층 구조를 만들 수 있습니다. 그리드는 2x4일 수 있지만 상위 스폿은 2개의 열과 행에 걸쳐 있습니다.
이 모든 작업은 그리드 API를 사용하여 수행됩니다.
구성요소 유연하게 사용
그리드는 매크로 및 마이크로 콘텐츠 구조를 다루지만 Flexbox는 콘텐츠에 응답해야 하는 구성요소에 도움이 됩니다. 이는 가로 또는 세로만 지정되는 단방향 콘텐츠에 사용됩니다. 예를 들어 필터 칩은 라벨에 응답할 수 있으며 필터 영역은 필터 수에 따라 확장될 수 있습니다. 더 큰 화면에서 표시를 사용하여 한 번에 더 많은 필터를 표시합니다.
미묘한 쿼리
레이아웃 그리드를 디자인하고 그리드와 Flexbox를 사용하면 여러 화면에서 적응형 레이아웃을 허용하고 폴더블과 같은 고유한 폼을 수용할 수 있습니다. 하지만 다양한 사용자 컨텍스트는 어떻게 해야 할까요? Android 사용자는 디스플레이에 연결하거나 마우스를 연결할 수 있습니다. MediaQuery를 사용하면 모든 컨텍스트의 사용자를 수용하기 위해 미묘한 디자인 결정을 내릴 수 있습니다.
Pawparazzi에서는 더 작은 타겟 영역과 더 밀도 높은 콘텐츠로 정확한 포인터 입력을 활용하는 것을 의미했습니다.
Android AdaptiveUI 샘플
대형 화면 기기를 위한 최적화된 디자인을 살펴보세요. 미디어, 창작, 게임 등 인기 있는 앱 카테고리의 UI/UX 템플릿을 찾아보세요.
