컨트롤 및 패턴에 대한 지침

이 섹션에서는 UWP(유니버설 Windows 플랫폼) 앱 컨트롤 및 패턴을 쉽게 액세스하고 빠르게 참조할 수 있는 단일 위치로 통합하기 위한 디자인 지침을 제공합니다.

  • 컨트롤은 Microsoft에서 개발자를 위해 만든 UI 요소 입니다. 이러한 컨트롤은 바로 사용하거나 앱 스타일에 맞게 모양을 맞춤화할 수 있습니다.

    Microsoft 컨트롤을 사용하면 일반적인 조작을 만들 때 시간을 절약할 수 있습니다. Microsoft 컨트롤은 모든 유형의 입력과 바로 잘 작동합니다. 개발자와 협력할 때 공용 언어를 사용하기 위해 디자인에서 이러한 컨트롤을 참조할 수 있습니다. 컨트롤에 대한 개발자 정보는 컨트롤 목록(XAML) 또는 컨트롤 목록(HTML)을 참조하세요.

  • 패턴은 특정 유형의 기능을 제공하기 위해 하나 이상의 컨트롤을 사용하는 레시피입니다.
참고   이 섹션의 모든 컨트롤은 Microsoft PowerPoint 및 Adobe Illustrator용 템플릿에 포함되어 있습니다. 템플릿을 가져오려면 다운로드를 참조하세요.

이 섹션의 내용

항목설명

활성 캔버스

사진 뷰어/편집기, 문서 뷰어, 지도, 그리기 또는 자유 스크롤 보기를 사용하는 기타 앱과 같은 단일 보기 앱 또는 모달 환경에 대한 콘텐츠 영역 및 명령 영역이 있는 패턴입니다.

자동 제안 상자

사용자가 입력할 때 제안을 제공하는 텍스트 입력 상자입니다.

뒤로 단추

뒤로 단추는 단추 형태로 뒤로 탐색을 제공합니다.

단추

단추(명령 단추라고도 함)를 사용하면 즉각적인 작업을 트리거할 수 있습니다.

달력 날짜 선택

단일 날짜 또는 날짜 범위를 보고 설정할 수 있습니다.

달력 보기

날짜 또는 날짜 범위를 볼 수 있습니다.

확인란

앱에 확인란을 추가하려면 다음 지침을 따르세요.

명령 모음

앱 바를 사용하면 필요할 때 명령에 손쉽게 액세스할 수 있습니다. 또한 사진 선택이나 그리기 모드와 같이 사용자의 상황에 맞는 명령이나 옵션을 표시하는 데 사용할 수 있습니다. 앱의 섹션 또는 페이지 간 탐색에도 사용할 수 있습니다.

상황에 맞는 메뉴

상황에 맞는 메뉴에는 현재 컨텍스트에서 사용자가 사용할 수 있는 명령 및 옵션 목록이 표시됩니다.

날짜 선택기

날짜 선택은 사용자가 터치, 마우스 또는 키보드 입력을 사용하여 지역화된 날짜를 선택할 수 있는 표준화된 방법을 제공합니다.

대화 상자 컨트롤

대화 상자는 사용자에게 행동을 제시하는 모달 UI 오버레이입니다.

드롭다운 목록

드롭다운 목록을 통해 사용자는 함께 사용할 수 없는 값 목록에서 선택할 수 있습니다.

필터링 및 정렬

필터링 및 정렬 명령은 사용자가 콘텐츠 표시 방법을 선택하도록 합니다.

대칭 이동 보기

앨범의 사진이나 제품 세부 정보 페이지의 품목과 같이 한 번에 하나씩 컬렉션의 이미지를 표시합니다.

플라이아웃

플라이아웃은 사용자가 현재 수행하고 있는 작업과 관련된 UI를 일시적으로 표시하는 데 사용되는 경량 팝업입니다.

허브

허브 컨트롤은 계층적 탐색 패턴을 사용하여 관계형 정보 아키텍처가 있는 앱을 지원합니다.

하이퍼링크

Windows 스토어 앱에 링크를 추가하기 위한 지침.

레이블

레이블은 컨트롤 또는 관련 컨트롤 그룹의 이름이나 제목입니다. 제공하는 기능은 없습니다.

목록 상자(또는 선택)

목록 상자(선택이라고도 함)를 통해 사용자는 항목 목록에서 대개 하나의 항목을 선택하지만 경우에 따라 여러 개를 선택할 수도 있습니다. 항목을 모두 표시할 공간이 없는 경우 목록 상자의 항목을 스크롤할 수 있습니다.

목록 보기 및 그리드 보기

JavaScript를 사용하는 Windows 스토어 앱에 ListView 컨트롤을 추가하기 위한 지침

지도

지도 컨트롤은 도로 지도와 항공사진, 방향, 검색 결과 교통량을 표시할 수 있습니다.

마스터/세부

마스터/세부 정보 패턴은 현재 선택한 항목에 대한 마스터 목록과 세부 정보를 표시합니다. 이 패턴은 메일 및 연락처 목록/주소록에 자주 사용됩니다.

미디어 플레이어

오디오 및 동영상을 재생합니다.

메시지 대화 상자

메시지 대화 상자는 항상 모달이며 명시적으로 해제되는 안정적이고 상황에 맞는 화면을 제공하는 오버레이 UI 요소입니다.

탐색 창

화면 공간을 절약하는 동시에 최상위 수준 탐색을 제공합니다.

진행률 컨트롤

진행률 컨트롤은 긴 작업을 진행 중인 사용자에게 피드백을 제공합니다.

라디오 단추

라디오 단추를 사용하면 두 가지 이상의 옵션 중 하나를 선택할 수 있습니다.

등급

평가 컨트롤을 통해 사용자는 평가를 나타내는 아이콘을 클릭하여 평가할 수 있습니다. 평가는 평균 평가, 임시 평가, 사용자 평가 등 세 종류의 평가를 표시할 수 있습니다.

검색

검색은 사용자가 앱에서 콘텐츠를 찾을 수 있는 최상의 방법 중 하나입니다. 이 문서의 지침에서는 검색 환경의 요소, 검색 범위, 구현 및 상황별 검색 예를 설명합니다.

시맨틱 줌

시맨틱 줌 컨트롤을 사용하여 동일한 데이터 집합의 서로 다른 두 가지 시맨틱 보기를 확대/축소할 수 있습니다.

스크롤 막대

이동과 스크롤을 통해 사용자는 화면 경계를 벗어나 확장된 콘텐츠에 액세스할 수 있습니다.

슬라이더

Windows 스토어 앱에 슬라이더를 추가하려면 다음 지침을 따릅니다.

분할 보기

분할 보기 컨트롤에는 확장/축소 가능한 창 및 콘텐츠 영역이 있습니다. 콘텐츠 영역은 항상 표시됩니다. 창은 확장하거나 축소할 수 있으며, 앱 창의 왼쪽 또는 오른쪽에 표시할 수 있습니다. 창에는 다음과 같은 세 가지 모드가 있습니다.

탭 및 피벗

탭 및 피벗을 사용하면 사용자가 자주 액세스하는 콘텐츠 간에 쉽게 이동할 수 있습니다.

시간 선택기

시간 선택은 사용자가 터치, 마우스 또는 키보드 입력을 사용하여 지역화된 시간을 선택할 수 있는 표준화된 방법을 제공합니다.

토글 스위치

토글 스위치는 사용자가 켜거나 끌 수 있는 물리적 스위치와 유사합니다. Windows 스토어 앱에 전환 스위치 컨트롤을 추가하려면 다음 지침을 따르세요.

도구 설명

사용자에게 작업을 수행하도록 요청하기 전에 컨트롤에 대한 추가 정보를 보일 때 도구 설명을 사용합니다.

웹 보기

웹 보기 컨트롤은 Internet Explorer처럼 보이고 동작하는 보기를 앱에 포함합니다. 웹 보기 컨트롤에 하이퍼링크를 표시하고 사용할 수도 있습니다.

 

 

 

표시:
© 2015 Microsoft