앱 설정에 대한 지침

아티클
03/25/2024

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

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

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

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

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

일반 권장 사항

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

진입점

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

탐색 창

탐색 창 레이아웃의 경우, 앱 설정은 탐색 선택 목록의 마지막 항목이어야 하며 아래쪽에 고정되어야 합니다.

명령 모음

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

app settings entry point for command bar

허브

허브 레이아웃을 사용하고 있으면 앱 설정 진입점을 명령 모음의 “자세히” 오버플로 메뉴 내부에 배치해야 합니다.

탭/피벗

탭 또는 피벗 레이아웃의 경우, 앱 설정 진입점을 탐색 내의 상위 항목으로 배치하지 않는 것이 좋습니다. 대신 앱 설정 진입점을 명령 모음의 “자세히” 오버플로 메뉴 내부에 배치해야 합니다.

목록-세부 정보

앱 설정 진입점을 목록-세부 창 내에 깊이 포함하는 대신 목록 창의 최상위에 마지막 고정 항목으로 설정합니다.

Layout

앱 설정 창은 전체 화면으로 열리고 전체 창을 채웁니다. 앱 설정 메뉴에 최대 4개까지 최상위 그룹이 있는 경우, 해당 그룹은 하나의 열 아래에서 계단식으로 내려가야 합니다.

layout for app settings page on desktop

“컬러 모드” 설정

앱에서 사용자가 앱의 색 모드를 선택하도록 허용하는 경우, “앱 모드 선택” 헤더와 함께 라디오 단추 또는 콤보 상자를 사용하여 이러한 옵션을 표시합니다. 포함할 수 있는 옵션

밝게
어둡게
Windows 기본값

또한 사용자가 현재 기본 앱 모드에 액세스하여 수정할 수 있도록 Windows 설정 앱의 색 페이지에 하이퍼링크를 추가하는 것이 좋습니다. 하이퍼링크 텍스트에 “Windows 색 설정”이라는 문자열을 사용하고, URI에는 ms-settings:colors를 사용하십시오.

정보 섹션과 피드백 단추

앱에 전용 페이지나 고유의 섹션으로 “이 앱에 대한 정보” 섹션을 배치하는 것이 좋습니다. “피드백 보내기” 단추가 필요하면 “이 앱에 대한 정보” 페이지의 맨 아래쪽으로 배치합니다.

권장되는 페이지 콘텐츠

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

하나의 설정 레이블에서 유사하거나 관련된 설정을 그룹화합니다.
총 설정 수를 최대 4개 혹은 5개로 유지합니다.
앱 컨텍스트에 관계없이 동일한 설정을 표시합니다. 일부 설정이 특정 컨텍스트에서 관련이 없는 경우 앱 설정 플라이아웃에서 해당 설정을 비활성화합니다.
설정에 설명이 포함된 한 단어짜리 레이블을 사용합니다. 예를 들어 계정 관련 설정에 대해 "계정 설정" 대신 "계정"으로 설정 이름을 지정합니다. 설정에 대한 옵션을 하나만 원하고 설정이 설명 레이블에 스스로를 부여하지 않는 경우, "옵션" 또는 "기본값"을 사용합니다.
설정이 플라이아웃 대신 웹에 직접 연결되는 경우 "도움말(온라인)" 또는 "웹 포럼"처럼 하이퍼링크로 스타일이 이 지정된 시각적 단서를 사용하여 사용자에게 알려주세요. 단일 설정을 통해 웹으로 연결되는 여러 링크를 플라이아웃으로 그룹화해 보세요. 예를 들어, "정보" 설정에서 사용 약관, 개인 정보 취급 방침 및 앱 지원으로 연결되는 링크가 있는 플라이아웃을 열 수 있습니다.
훨씬 일반적인 설정에 각각 고유한 항목이 있도록 사용 빈도가 적은 설정을 단일 항목으로 결합합니다. "정보" 설정에 정보만 포함된 콘텐츠 또는 링크를 배치합니다.
"사용 권한" 창에서 기능을 복제하지 마세요. Windows는 기본적으로 이 창을 제공하며 수정할 수 없습니다.
설정 플라이아웃에 설정 콘텐츠 추가
필요한 경우 스크롤할 수 있는 단일 열에 상하 방향으로 콘텐츠를 표시합니다. 화면 높이의 최대 2배로 스크롤을 제한합니다.
앱 설정을 위해 사용하는 컨트롤을 다음과 같습니다.
- 토클 스위치: 사용자가 값을 설정하거나 해제할 수 있습니다.
- 라디오 버튼: 함께 사용할 수 없는 관련 옵션 최대 5개 중에서 항목 하나를 사용자가 선택할 수 있습니다.
- 텍스트 입력 상자: 사용자가 텍스트를 입력할 수 있습니다. 이메일 또는 암호와 같이 사용자가 받는 텍스트 유형에 해당하는 텍스트 입력란의 형식을 사용합니다.
- 하이퍼링크: 앱 내의 다른 페이지나 외부 웹사이트로 사용자가 이동합니다. 사용자가 하이퍼링크를 클릭하면 설정 플라이아웃이 해제됩니다.
- 버튼: 현재 설정의 플라이아웃이 해제되지 않고 사용자가 즉각적인 작업을 시작할 수 있습니다.
컨트롤 중 하나를 비활성화한 경우 설명 메시지를 추가합니다. 이 메시지를 비활성화된 컨트롤 위에 놓습니다.
설정 플라이아웃과 헤더에 애니메이션 효과를 준 후, 단일 블록으로 묶은 콘텐츠와 헤더에 애니메이션 효과를 줍니다. 왼쪽 오프셋이 100px인 enterPage 또는 EntranceThemeTransition 애니메이션을 사용하여 콘텐츠에 애니메이션 효과를 줍니다.
필요한 경우 섹션 머리글, 단락 및 레이블을 사용하여 콘텐츠를 구성하고 명확하게 합니다.
설정을 반복해야 하는 경우 추가 수준의 UI 또는 확장/축소 모델을 사용하지만 두 개의 수준보다 더 깊게 계층 구조를 만들지 않도록 합니다. 예를 들어 도시별 설정을 제공하는 날씨 앱은 도시를 나열하며, 사용자가 도시를 탭하여 새 플라이아웃을 열거나 확장하여 설정 옵션을 표시할 수 있습니다.
컨트롤 또는 웹 콘텐츠를 로드하는 데 시간이 걸리는 경우 확정되지 않은 진행률 컨트롤을 사용하여 정보를 로드하고 있음을 사용자에게 표시합니다. 자세한 내용은 진행률 컨트롤에 대한 지침을 참조하세요.
탐색에 버튼을 사용하거나 변경 내용을 커밋하지 마세요. 하이퍼링크를 사용하여 다른 페이지로 이동하고, 버튼을 사용하여 변경 내용을 커밋하는 대신 사용자가 설정 플라이아웃을 해제할 때 앱 설정에서 변경 내용을 자동으로 저장하게 합니다.