레이아웃 최적화를 위한 권장사항
Power Platform Well-Architected 경험 최적화 체크리스트 권장 사항에 적용됩니다.
| XO:06 | 화면 크기와 해상도 전반에 걸쳐 사용 가능하고 시각적으로 매력적인 레이아웃을 유지합니다. 적응형 기술을 사용하여 다양한 방식으로 콘텐츠를 동적으로 렌더링합니다. |
|---|
이 가이드에서는 다양한 장치에서 쉽게 탐색하고 유연하게 조정할 수 있는 화면 레이아웃을 디자인하기 위한 권장 사항을 설명합니다. 이 접근 방식을 통해 사용자는 사용 중인 장치에 관계없이 일관되고 최적의 시청 환경을 누릴 수 있습니다.
정의
| 용어 | 정의 |
|---|---|
| 뷰포트 | 콘텐츠가 표시되는 웹 브라우저나 모바일 앱과 같은 디지털 인터페이스의 표시 부분입니다. 뷰포트 범위는 화면 크기 및 해상도를 기반으로 장치 클래스(모바일, 태블릿, 데스크톱)와 연결되는 경우가 많습니다. |
| 중단점 | 적응형 레이아웃 동작을 결정하는 데 사용되는 뷰포트 범위를 정의하는 특정 픽셀 값입니다. |
주요 디자인 전략
반응형 레이아웃은 다양한 창 크기에 걸쳐 유연하고 효율적인 사용자 환경을 제공합니다. 콘텐츠 크기를 조정하고, 요소를 재배열하고, 텍스트와 이미지를 선택적으로 표시하여 적응합니다. 책임 있는 레이아웃은 화면 크기에 관계없이 사용자의 요구 사항을 충족합니다.
일관된 앱 프레임 결정
애플리케이션 프레임은 모든 화면에서 일관되게 사용할 수 있는 컨트롤 세트로 구성됩니다. 이는 헤더, 탐색 및 콘텐츠 영역의 세 가지 주요 하위 구성 요소로 구성됩니다. 간단한 앱은 헤더 구성 요소를 유연하게 사용할 수 있는 반면, 보다 정교한 앱은 측면 탐색을 사용하여 여러 페이지를 활성화하는 경우가 많습니다. 하위 구성 요소는 사용자 지정할 수 있습니다. 예를 들어, 앱 요구 사항에 맞게 측면 탐색의 헤더 또는 그룹 항목에 전역 검색을 통합할 수 있습니다.
앱 프레임의 세 가지 주요 하위 구성 요소는 다음과 같습니다.
헤더는 모든 내부 애플리케이션의 일부가 되도록 설계된 핵심 구성요소입니다. 이는 사용자에게 시스템 전체 기능에 대한 액세스를 제공하고 UI 방향을 지정하는 데 도움을 주며 경험 전반에 걸쳐 일관성을 제공하는 하위 구성 요소로 구성됩니다. 앱 프레임 상단에 표시되며 앱의 모든 페이지에서 지속되어야 합니다. 선택적으로 검색, 설정, 알림, 피드백, 프로필 또는 도움말과 같은 전역 명령을 호스팅할 수 있습니다. 앱 이름은 항상 표시되어야 하며, 홈 또는 방문 페이지에 대한 클릭 가능한 링크 역할도 하는 것이 좋습니다. 헤더는 600픽셀 이하의 뷰포트에서 오버플로 제어로 명령이 이동하면서 반응해야 합니다. 검색 입력 너비도 1023픽셀 이하에서 반응합니다.
탐색은 사용자가 정보를 찾고 작업을 완료할 수 있도록 함께 작동하는 제어 시스템입니다. 이는 사용자가 애플리케이션의 섹션에서 섹션으로 이동하는 데 도움이 됩니다. 계층적으로는 페이지나 섹션에 연결되지 않지만 다른 모든 콘텐츠 위에 존재합니다. 이는 항상 존재하며 접힌 상태(레일 상태라고도 함)로 최소화되어 페이지 콘텐츠를 위한 추가 공간을 확보할 수 있습니다. 더 작은 창 크기에서는 플라이아웃 메뉴로 최소화될 수 있습니다. 가장 일반적인 탐색 형태에는 위쪽 탐색과 측면 탐색이 포함됩니다. 둘 다 동시에 사용하지 마십시오.
콘텐츠 영역에는 화면의 초점이 포함됩니다. 브라우저 창의 크기는 콘텐츠 프레임과 기본 콘텐츠 영역에서 사용 가능한 공간에 영향을 미칩니다. 이 프레임은 중단점과 각 구성 요소의 해당 응답 동작을 기반으로 조정됩니다. 중단점 매트릭스 만들기에서 자세히 알아보세요.
콘텐츠 영역에는 페이지 헤더, 인라인 측면 창 또는 콘텐츠를 오버레이하는 패널과 같은 일관된 요소 배치에 사용할 수 있는 여러 하위 영역이 선택적으로 포함될 수 있습니다.
색 구성표, 타이포그래피 및 레이아웃 구조와 함께 일관된 디자인 언어를 준수하면 사용자가 혼동 없이 다양한 요소를 빠르게 식별하고 상호 작용할 수 있습니다. 앱 프레임 패턴이 모든 내부 비즈니스 애플리케이션에서 일관되게 사용될수록 사용자의 회상 또는 정신 모델은 더욱 강력해집니다. 업계 표준이나 공통 플랫폼 패턴에 맞추면 이러한 효과가 더욱 향상됩니다.
앱 프레임이 결정되면 각 화면의 레이아웃은 앱 프레임의 콘텐츠 영역 내에 위치합니다.
콘텐츠 영역을 신중하게 사용하세요.
사용자는 정보에 쉽게 접근할 수 있고, 텍스트를 쉽게 읽을 수 있으며, 사용성을 방해하기보다는 미학을 향상시키는 원활한 경험을 원합니다. 주요 정보의 초기 가시성을 우선시하고, 열 전체의 가독성을 보장하며, 미적 매력을 위해 디자인 요소를 조화시킵니다.
스크롤할 필요 없이 화면을 열자마자 필수 정보가 즉시 표시되도록 하세요. 화면 상단 근처에 탐색 옵션, 중요한 콘텐츠, 실행 가능한 항목 등 필수 정보를 우선적으로 표시합니다. 충분한 항목을 표시하는 것과 각 항목에 대한 자세한 정보를 제공하는 것 사이에서 균형을 맞추는 것은 끊임없는 과제입니다. 반대로, 초기 보기에서는 가능한 모든 정보를 제공하고 싶은 유혹을 느낄 수 있지만, 너무 많은 정보는 사용자를 압도하고 핵심 요소의 중요성을 희석시킬 위험이 있습니다. 더 자세한 콘텐츠를 엿볼 수 있는 간결한 요약이나 미리 보기를 사용하여 사용자가 더 깊이 탐구하도록 유도하는 것이 좋습니다. 대시보드는 대량의 데이터를 시각화하는 목적에 맞게 최적화되어 있습니다.
여러 열, 섹션 또는 그룹을 통합하여 콘텐츠를 논리적으로 구성하고 공간을 최대화합니다. 열 너비에 세심한 주의를 기울여 과도한 부담 없이 텍스트를 읽을 수 있도록 합니다. 사용자가 지속적으로 가로로 스크롤하도록 하여 상호 작용 흐름을 방해하는 지나치게 좁은 열을 피하세요. 반대로, 열이 너무 넓으면 가독성이 저하되어 사용자가 먼 거리에서 선을 추적해야 할 수 있습니다. 편안하게 읽으면서 사용 가능한 공간을 효율적으로 활용하는 균형을 위해 노력하십시오.
시각적 요소의 크기와 위치를 적절하게 조정하여 시각적으로 즐겁고 균형 잡힌 인터페이스를 만듭니다. 캡션을 해당 시각적 개체 또는 제목에 맞춰 정렬하고, 요소 간의 간격을 일정하게 유지하고, 사용자 요구에 따라 계층 구조를 준수합니다. 불필요한 장식을 다듬고 가장 중요한 요소에 픽셀을 신중하게 할당하세요. 콘텐츠와 탐색 요소, 특히 탐색 집약적인 앱이나 홈페이지에서 우선 순위를 정하고 강조하며, 사용성을 떨어뜨리는 불필요한 장식을 피하세요.
기본 그리드는 요소를 일관되게 정렬하는 데 유용할 수 있습니다. 선택한 그리드 동작은 앱의 모든 화면 콘텐츠 영역에서 일관되어야 하며 카드 또는 측면 창과 같은 구성 요소 수준에서도 적용할 수 있습니다. 웹 애플리케이션에 사용되는 가장 일반적인 유형의 그리드 레이아웃은 열 그리드입니다. 반응형 화면을 구현하려면 유동(또는 스트레치) 그리드 동작을 권장합니다.
확립된 레이아웃 및 그룹화 패턴 사용
사용자 인터페이스 내에서 콘텐츠와 요소를 구성하기 위해 일반적으로 인식되는 구조와 배열을 사용합니다. 이러한 레이아웃과 패턴은 시간이 지남에 따라 개선되고 그 효과가 입증되어 사용자에게 친숙하고 직관적이면서도 적응형 패턴을 쉽게 구현할 수 있습니다. 핵심 시나리오와 요소가 식별되면 최상의 상호 작용을 제공하는 설정된 레이아웃에 각각을 매핑합니다. 작업 완료에 중요한 콘텐츠와 기능의 우선 순위를 지정하세요. 화면에 항상 표시되고 액세스할 수 있는 요소와 숨기거나 다른 메뉴나 작업을 통해 액세스할 수 있는 요소를 결정합니다.
다음 목록은 전체 목록은 아니지만 비즈니스 또는 생산성 애플리케이션에 일반적으로 사용되는 기존 레이아웃을 설명합니다. 모두 기본 콘텐츠 영역 내에 배치할 수 있습니다.
랜딩/홈 화면
랜딩 또는 홈 화면은 사용자에게 앱 제공 또는 기능에 대한 개요를 제공하는 애플리케이션의 진입점 역할을 합니다. 일반적으로 방문자의 관심을 끄는 것을 목표로 하며 처음 작업을 완료하거나 추가 콘텐츠를 탐색하는 등 특정 작업을 수행하도록 권장합니다. 여기에는 히어로 이미지와 깔끔한 탐색 옵션이 포함되는 경우가 많습니다.
사용자를 환영하고, 주요 기능, 탐색 옵션 또는 행동 촉구에 대한 빠른 액세스를 제공하고, 앱 경험의 분위기를 설정하는 데 이상적입니다. 사용자를 효과적으로 안내하기 위해 명확성, 단순성 및 직관적인 탐색을 우선시합니다.
대시보드
대시보드는 사용자에게 관련 데이터 또는 정보에 대한 포괄적인 개요를 제공하는 애플리케이션 내의 중앙 집중식 허브입니다. 사용자 지정 가능한 위젯이나 모듈로 구성되는 경우가 많아 사용자가 특정 메트릭을 모니터링하거나 작업을 수행할 수 있습니다.
대시보드는 복잡한 데이터 세트나 다면적인 기능을 갖춘 애플리케이션에 적합하여 사용자가 진행 상황을 추적하고 추세를 분석하며 정보에 근거한 결정을 한 눈에 내릴 수 있도록 해줍니다. 분석 플랫폼, 프로젝트 관리 도구, 재무 관리 앱에 특히 유용합니다.
양식
양식은 사용자의 데이터 입력을 용이하게 하는 구조화된 레이아웃으로, 일반적으로 텍스트, 숫자, 날짜, 선택 항목 등 다양한 유형의 정보를 입력하기 위한 필드로 구성됩니다. 양식은 사용자 입력을 수집하고, 트랜잭션을 처리하고, 애플리케이션 내 상호 작용을 촉진하는 데 필수적입니다.
등록 흐름, 체크아웃 프로세스, 데이터 입력 작업 및 사용자 입력이나 피드백이 필요한 모든 시나리오에 일반적으로 사용됩니다.
엔터티/프로필 보기
엔터티 또는 프로필 보기는 사용자 프로필, 제품 목록 또는 콘텐츠 항목과 같은 특정 엔터티에 대한 자세한 정보를 제공합니다. 일반적으로 설명 텍스트, 멀티미디어 요소, 관련 작업 또는 상호 작용이 포함됩니다.
이는 애플리케이션 내의 항목에 대한 자세한 정보를 표시하는 데 매우 적합합니다. 이는 사용자에게 심층적인 인사이트를 제공하고, 의사 결정을 촉진하며, 소셜 네트워킹 앱의 사용자 프로필이나 전자 상거래 플랫폼의 제품 목록과 같은 특정 엔터티와의 참여를 지원합니다.
목록 페이지
목록 또는 테이블은 항목 또는 엔터티의 컬렉션을 구조화된 형식으로 표시하며, 종종 선형 또는 그리드 레이아웃으로 표시됩니다. 일반적으로 탐색 또는 필터링을 위한 탐색 컨트롤과 함께 각 항목에 대한 간략한 요약 또는 미리 보기가 포함됩니다.
목록 페이지는 사용자가 효율적으로 스캔, 검색 및 탐색할 수 있도록 많은 콘텐츠 또는 데이터 집합을 이해하기 쉬운 형식으로 표시하는 데 효과적입니다. 특정 행에 대한 작업이 활성화된 경우 프로세스가 명확해야 합니다. 목록 페이지는 일반적으로 콘텐츠 관리 시스템, 디렉토리 목록, 검색 결과 및 뉴스 피드에 사용됩니다.
미니 리뷰(분할 화면)
미니 리뷰 또는 분할 화면은 인터페이스를 두 개의 개별 섹션으로 나누며 왼쪽에는 목록이 표시되고 오른쪽에는 항목 보기가 표시됩니다. 목록에는 일반적으로 항목 모음이 포함되어 있으며 항목 보기에는 목록에서 선택한 항목에 대한 자세한 정보가 제공됩니다.
이 레이아웃은 대량 작업을 수행할 때와 같이 사용자가 항목 목록을 빠르게 탐색하고 각 항목에 대한 세부 정보를 동시에 확인해야 하는 시나리오에서 특히 효과적입니다. 제품 카탈로그, 문서 관리 시스템, 이메일 또는 통신 클라이언트, 작업 관리 도구(예: Azure Dev Ops 쿼리 뷰어)는 일반적으로 이 패턴에 맞는 시나리오입니다.
마법사
마법사는 복잡한 프로세스를 완료하거나 특정 목표를 달성하기 위해 일반적으로 선형 방식으로 일련의 순차적 단계 또는 작업을 통해 사용자를 안내합니다. 여기에는 진행률 표시기, 프롬프트 및 유효성 검사가 포함되는 경우가 많습니다. 마법사는 복잡한 프로세스를 단순화하고, 인지 과부하를 줄이고, 익숙하지 않은 작업이나 워크플로를 통해 사용자를 안내하는 데 유용합니다. 이는 일반적으로 온보딩 흐름, 설정 프로세스, 다단계 양식 및 복잡한 설정이나 트랜잭션 구성과 같은 작업 기반 상호 작용에 사용됩니다.
특정 요구 사항에 맞게 표준 레이아웃을 사용자 지정하고 구축할 수 있습니다. 이 프로세스에는 요소 추가 또는 제거, 요소의 크기 및 위치 조정, 브랜드 아이덴티티나 시각적 디자인 지침에 맞게 스타일 적용 등이 포함될 수 있습니다. 표준 레이아웃의 다양한 구성과 변형을 실험하여 콘텐츠 및 전반적인 사용자 경험에 가장 효과적인 배열을 찾습니다.
모든 장치에 대한 디자인 레이아웃
레이아웃은 정의된 규칙과 의도적인 콘텐츠 구성의 정점입니다. 콘텐츠를 사려 깊은 구조로 가져오는 것이 중요하지만 플랫폼과 화면 크기 전반에 걸쳐 명확한 계층 구조로 모든 콘텐츠가 함께 흐르도록 하려면 확장 논리가 필요합니다. 개별적으로 적응형 디자인과 반응형 디자인이 각각 이러한 문제를 해결할 수 있습니다. 어떤 경우에는 적응형 디자인과 반응형 디자인을 혼합하는 것이 올바른 선택입니다.
반응형 디자인은 콘텐츠가 유동적이고 변화하는 형식 크기에 적응할 수 있는 하나의 레이아웃만 사용합니다. 이 디자인 기술은 미디어 쿼리를 사용하여 특정 장치의 특성을 검사하고 그에 따라 콘텐츠를 렌더링합니다. 반응형 디자인을 사용하면 기능을 한 번만 구축하면 모든 화면 크기에서 효과적으로 작동할 수 있습니다.
적응형 레이아웃은 표시되는 형식에 따라 완전히 변경됩니다. 적응형 디자인에는 여러 개의 고정된 레이아웃 크기가 있으며 사용 가능한 공간에 따라 지정된 레이아웃을 로드하도록 브라우저를 트리거합니다. 적응형 디자인으로 구축된 웹 사이트는 반응형 디자인과 유사하게 미디어 쿼리를 사용하여 중단점을 감지합니다. 또한 장치의 기능에 따라 추가 마크업을 사용합니다. 이 프로세스를 "점진적 향상"이라고 합니다.
위치 변경
페이지 요소의 위치를 변경합니다.
창 크기가 증가함에 따라 구성을 최적화하여 콘텐츠를 정리하고 읽기 쉽고 균형 있게 유지하세요. 예를 들어 모바일 뷰포트에 수직으로 쌓인 요소는 더 큰 뷰포트에서 수평으로 재배치될 수 있습니다. 이러한 변경은 자연스러운 왼쪽에서 오른쪽 읽기 순서를 따르고, 디자인에 균형을 이루고, 페이지의 주요 요소에 대한 시각적 초점을 유지합니다.
크기 조정
페이지 요소의 크기와 여백을 조정합니다.
창 상단에 더 많은 콘텐츠를 표시하여 세로 스크롤의 필요성을 줄여 페이지 요소의 크기를 조정하여 풍부한 사용자 경험을 최적화합니다. 페이지 여백을 조정하여 레이아웃에 공백과 균형을 추가하면 콘텐츠가 숨 쉬고 디자인의 시각적 매력이 향상됩니다. 예를 들어, 히어로 구성 요소는 더 많은 배경 이미지를 표시하기 위해 창의 전체 너비까지 늘어날 수 있습니다. 이미지 아래의 콘텐츠는 확장될 수 있지만 다른 여백을 사용하여 레이아웃에 다양성을 추가하고 시각적 계층 구조를 정의하는 데 도움이 됩니다.
재배치
페이지 요소의 흐름을 최적화합니다.
페이지 요소를 조정하여 창 크기와 방향을 고려하여 내용을 다시 정렬하여 완전히 표시되도록 합니다. 예를 들어, 더 작은 창에 있는 단일 콘텐츠 열을 더 큰 창에서 리플로우하여 두 개의 텍스트 열을 표시할 수 있습니다. 이 기술을 사용하면 더 많은 콘텐츠를 "스크롤 없이 볼 수 있는 부분" 위에 표시할 수 있습니다.
표시/숨기기
창 크기와 방향에 맞게 콘텐츠를 최적화합니다.
창 크기와 방향에 맞게 콘텐츠를 최적화하려면 페이지 요소를 표시하거나 숨깁니다. 이 반응형 기술은 보는 상황에 맞게 정보의 양을 조정합니다. 예를 들어, 작은 화면에 나타나는 카테고리에는 이미지, 제목, 링크와 같은 제한된 메타데이터가 표시될 수 있으므로 사용자가 집중하는 데 도움이 되는 기타 정보가 표시됩니다. 더 큰 화면에서 카테고리는 뷰포트 내에 맞으면서도 가상 사용자, 날짜, 간단한 설명과 같은 추가 메타데이터를 표시할 수 있습니다.
재설계
중요한 정보와 작업에 초점을 유지하기 위해 페이지 요소와 콘텐츠를 포크하거나 축소합니다.
이 접근 방식은 디자인에서 "점진적 공개" 관행을 따르는 것과 유사하지만 창 크기와 방향이 다릅니다. 예를 들어 창을 확장하면 항목 목록이 세부정보 옆에 표시될 수 있습니다. 콘텐츠 간의 시각적 링크를 통해 사용자는 다른 항목을 쉽게 선택할 수 있습니다. 작은 화면에서는 주요 정보를 표시하는 데 중점을 둡니다.
중단점 매트릭스 만들기
중단점 매트릭스는 다양한 화면 크기와 방향에 걸쳐 애플리케이션 디자인의 반응형 또는 적응형 동작을 그래픽으로 묘사하는 역할을 합니다. 일반적으로 다양한 중단점에서 디자인의 응답을 자세히 설명하는 구조화된 그리드 또는 레이아웃을 제공합니다. 각 세그먼트는 고유한 화면 너비에 해당하며 디자인의 구조, 레이아웃 및 기능에 대한 인사이트를 제공합니다. 중단점 매트릭스에는 화면 너비, 뷰포트 방향, 디자인 요소, 레이아웃 구조, 콘텐츠 표시, 탐색, 미디어 및 대화형 구성 요소에 대한 고려 사항이 포함되어 웹 사이트나 앱의 디자인이 다양한 화면 크기와 방향에 어떻게 반응하는지 보여줍니다. 이 접근 방식은 각 화면의 디자인을 마무리하는 데 도움이 될 뿐만 아니라 주요 구성 요소 속성 변경 사항을 명시적으로 추적하고 잘 전달할 때 구현을 더 쉽게 만듭니다.
Power Platform 간편 사용
모델 기반 앱 양식 레이아웃은 Power Apps Studio를 사용하여 구성됩니다. 양식 디자이너를 사용하면 제작자가 그리드 구조에 요소를 추가할 수 있으므로 양식 페이지가 본질적으로 반응할 수 있습니다. 사용자 지정 페이지, 내장된 캔버스 구성 요소 및 Power Apps Component Framework 코드 구성 요소와 같은 내장형 사용자 정의 구성 요소는 구현에 반응형 동작을 통합해야 합니다. 예를 들어 사용자 지정 페이지가 올바르게 작동하려면 순수 캔버스 앱과 동일한 방식으로 반응형 동작을 구현해야 합니다.
캔버스 앱은 반응형 동작을 구현하기 위해 각 구성 요소에 대한 명시적인 구성이 필요하므로 경험을 더 효과적으로 제어할 수 있습니다. 화면 크기는 위치, 동작, 가시성 및 기타 관련 속성을 결정하기 위해 참조할 수 있는 앱 정의에 따라 결정됩니다.