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