앱 설정에 대한 지침

앱 설정은 전용 설정 페이지를 통해 액세스되는 Windows 앱의 사용자 지정 가능한 부분입니다. 예를 들어 사용자는 뉴스 리더 앱을 사용하여 표시할 뉴스 소스를 지정하거나 화면에 표시할 칼럼 수를 지정할 수 있는 한편, 날씨 앱의 설정을 사용하여 섭씨 및 화씨 중에서 기본 측정 단위를 선택할 수 있습니다. 이 문서에서는 WinUI 앱에서 앱 설정을 만들고 표시하기 위한 권장 사항 및 모범 사례를 제공합니다.

설정 페이지를 제공해야 하는 경우

다음은 앱 설정 페이지에 속하는 앱 옵션의 예입니다.

• 날씨 앱에서 온도의 기본 단위로 섭씨 또는 화씨 중에서 선택하거나, 메일 앱에서 계정 설정 변경, 알림 설정 또는 접근성 옵션과 같이 앱의 동작에 영향을 미치며, 재조정을 자주 하지 않아도 되는 구성 옵션입니다.
• 음악, 음향 효과 또는 색 테마와 같이 사용자의 기본 설정에 따라 달라지는 옵션입니다.
• 개인 정보 보호 정책, 도움말, 앱 버전 또는 저작권 정보와 같이 자주 액세스되지 않는 앱 정보입니다.

일반적인 앱 워크플로의 일부인 명령(예: 아트 앱의 브러시 크기 변경)은 설정 페이지에 있으면 안 됩니다. 명령 배치에 대한 자세한 내용은 명령 디자인 기본을 참조하세요.

일반 권장 사항

• 설정 페이지를 심플하게 유지하고 이진(켜기/끄기) 컨트롤을 사용합니다. 이진 설정에 가장 적합한 컨트롤은 통상 토글 스위치 입니다.
• 사용자가 최대 5개까지의 상호 배타적인 관련 옵션 세트에서 항목을 하나 선택할 수 있도록 하려면 라디오 버튼을 사용합니다.
• 앱의 설정 페이지에서 모든 앱 설정에 대한 진입점을 만듭니다.
• 설정을 심플하게 유지합니다. 스마트 기본값을 정의하고 설정 수를 최소한으로 유지합니다.
• 사용자가 설정을 변경하면 앱이 변경 내용을 즉시 반영해야 합니다.
• 일반적인 앱 워크플로의 일부인 명령은 포함하지 마세요.

진입점

사용자가 앱 설정 페이지에 액세스하는 방법은 앱의 레이아웃을 기반으로 해야 합니다.

탐색 창

NavigationView 레이아웃의 경우 앱 설정은 탐색 선택 목록의 마지막 항목이어야 하며 아래쪽에 고정되어야 합니다. NavigationView는 이 목적을 위해 기본 제공 설정 항목을 제공합니다. 탐색 창 아래쪽에 설정 항목을 자동으로 표시하도록 trueIsSettingsVisible 속성을 설정합니다.

명령 모음

명령 모음 또는 도구 모음을 사용하는 경우, “자세히” 오버플로 메뉴에서 설정 진입점 마지막 항목 중 하나로 배치합니다. 설정 진입점이 눈에 잘 띄어야 하는 앱의 경우에는 오버플로 내부가 아니라 명령 모음에 직접 진입점을 배치합니다.

레이아웃

앱 설정 페이지가 전체 화면을 열고 전체 창을 채워야 합니다. 최대 너비(약 1,000~1100px)가 제한된 스크롤 가능한 레이아웃을 사용하면 넓은 디스플레이에서 콘텐츠를 계속 읽을 수 있습니다. BodyStrong 텍스트 스타일을 사용하여 섹션 머리글 아래에 관련 설정을 그룹화합니다.

Windows Community Toolkit의 SettingsCard 및 SettingsExpander 컨트롤을 사용하여 설정 페이지를 빌드합니다. 이러한 컨트롤은 머리글, 설명, 아이콘 및 카드의 오른쪽에 정렬된 작업 컨트롤을 사용하여 일관되고 접근성이 뛰어난 레이아웃을 제공합니다.

전체 구현 예제는 WinUI 갤러리 설정 페이지 및 Windows Community Toolkit SettingsControls 샘플 참조하세요.

설정카드

개별 설정에 SettingsCard 를 사용합니다. 각 카드에는 헤더, 선택적 설명, 선택적 HeaderIcon 및 카드 콘텐츠로 배치된 작업 컨트롤(예: ToggleSwitch, ComboBox또는 Button)이 있습니다. IsClickEnabled 속성을 true로 설정하면 전체 카드가 클릭할 수 있게 되어 탐색 스타일 항목에 유용합니다.

설정 확장기

설정에 요청 시 표시해야 하는 하위 옵션이 있는 경우 SettingsExpander 를 사용합니다. 확장기는 머리글 행의 기본 작업 제어와 컬렉션 내의 추가 SettingsCard 항목 Items을 보여줍니다. 이렇게 하면 고급 옵션을 표시하면서 페이지를 간결하게 유지합니다. 확장기를 한 수준보다 더 깊게 중첩하지 않도록 합니다.

앱 테마 설정

앱에서 사용자가 앱의 색 모드를 선택할 수 있도록 허용하는 경우 내부의 SettingsCard 사용하여 이러한 옵션을 표시합니다. 옵션은 다음과 같아야 합니다.

• 빛
• 어두운
• 시스템 설정 사용

사용자가 현재 기본 앱 모드에 액세스하고 수정할 수 있는 Windows 설정의 색 페이지에 하이퍼링크를 추가할 수도 있습니다. 하이퍼링크 텍스트에는 "Windows 색 설정" 문자열을 사용하고 URI에는 ms-settings:colors 사용합니다.

섹션 정보

정보 섹션을 설정 페이지의 맨 아래에 SettingsExpander을(를) 사용하여 배치하는 것이 좋습니다. 축소된 머리글 행에는 앱 이름, 아이콘 및 버전 번호가 표시됩니다. 확장된 영역에는 다음이 포함될 수 있습니다.

• 앱의 리포지토리 또는 웹 사이트에 대한 링크입니다.
• 파일 버그 또는 요청 기능에 대한 링크입니다.
• HyperlinkButton 컨트롤로서의 종속성 및 참조 목록입니다.
• 저작권 고지, 사용 약관 및 개인정보처리방침 링크와 같은 법적 정보입니다.

권장되는 페이지 콘텐츠

앱 설정 페이지에 포함할 항목 목록이 생기면 다음 지침을 고려합니다.

• 하나의 섹션 머리글 아래에 유사하거나 관련된 설정을 그룹화합니다.

• 총 설정 수를 최대 4개 혹은 5개로 유지합니다.

• 앱 컨텍스트에 관계없이 동일한 설정을 표시합니다. 특정 컨텍스트에서 관련이 없는 경우, SettingsCard를 IsEnabledfalse로 설정하여 비활성화합니다.

• 설정 헤더에 설명이 포함된 한 단어 레이블을 사용합니다. 예를 들어 계정 관련 설정에 대해 "계정 설정" 대신 "계정"으로 설정 이름을 지정합니다.

• 설정이 웹에 직접 연결되는 경우 클릭 가능한 SettingsCardIsClickEnabled="True" 항목과 적절한 작업 아이콘을 사용하여 외부 탐색을 나타냅니다.

• 자주 사용되지 않는 설정을 SettingsExpander에 결합하여 공통 설정 각각이 고유한 SettingsCard을 가질 수 있도록 합니다. "정보" 섹션에 정보만 포함된 콘텐츠 또는 링크를 배치합니다.

• 필요한 경우 스크롤할 수 있는 단일 열에 상하 방향으로 콘텐츠를 표시합니다.

• 앱 설정을 위해 사용하는 컨트롤을 다음과 같습니다.

  • 토클 스위치: 사용자가 값을 설정하거나 해제할 수 있습니다.
  • 라디오 버튼: 함께 사용할 수 없는 관련 옵션 최대 5개 중에서 항목 하나를 사용자가 선택할 수 있습니다.
  • 콤보 상자: 사용자가 압축 드롭다운의 옵션 집합 중에서 선택할 수 있도록 합니다.
  • 텍스트 입력 상자: 사용자가 텍스트를 입력할 수 있도록 합니다. 이메일 또는 암호와 같이 사용자가 받는 텍스트 유형에 해당하는 텍스트 입력란의 형식을 사용합니다.
  • 하이퍼링크: 앱 내의 다른 페이지나 외부 웹사이트로 사용자가 이동합니다.
  • 단추: 사용자가 즉각적인 작업을 시작할 수 있도록 합니다.

• 컨트롤 중 하나를 비활성화한 경우 설명 메시지를 추가합니다. SettingsCard의 Description 속성을 사용하여 설정이 사용 불가능한 이유를 설명합니다.

• 사용자가 설정을 변경하면 앱이 변경 내용을 즉시 반영해야 합니다. 확인 단추가 필요하지 않습니다.

관련된 문서

• SettingsCard 및 SettingsExpander(Windows Community Toolkit)
• 명령 디자인 기본 사항
• 진행률 컨트롤에 대한 지침
• 앱 데이터 저장 및 검색