UI 레이아웃(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
Windows 런타임 앱의 레이아웃과 이러한 앱이 기존 앱과 어떻게 다른지에 대해 알아봅니다. Windows 런타임 앱에서 사용할 수 있는 다양한 화면(예: 앱 창, 플라이아웃, 대화 상자, 앱 바 등)이 있습니다. 사용하기 쉬운 앱과 부담스러운 앱은 적재적소에서 올바른 화면을 선택할 수 있는지 여부에 따라 결정될 수 있습니다.
앱 페이지 또는 캔버스
앱 페이지(캔버스라고도 함)는 사용자 UI의 기본이 됩니다. 캔버스에는 모든 콘텐츠와 컨트롤이 포함됩니다. 가능한 경우 UI 요소를 이 기본 화면에 통합해야 합니다. 예를 들어 팝업을 사용하여 오류를 표시하는 대신 기본 제공 애니메이션을 사용하여 오류 메시지를 창에 매끄럽게 표시하거나 숨기거나 이동할 수 있습니다. UI를 인라인으로 제공하면 사용자가 앱과 컨텍스트에 집중할 수 있습니다.
.png "앱 페이지(또는 캔버스)")
사용자 시나리오를 지원하기 위해 필요한 만큼 앱 페이지를 만들 수 있습니다. 사용자 시나리오를 지원하는 앱 페이지 레이아웃에 대해 자세히 알아보려면 Windows 스토어 앱 계획 및 탐색 디자인을 참조하세요.
Windows: UI 크기 조정
사용자는 다른 앱을 사용하기 위해 앱의 크기를 조정하거나 개발자 앱을 사용하기 위해 다른 앱의 크기를 조정할 수 있습니다. 사용자가 앱 크기를 조정할 때 콘텐츠가 동적으로 이동하여 환경을 최적화하도록 앱을 디자인할 수 있습니다.
.png "전체 화면") |
전체 화면 앱이 전체 화면을 채웁니다. |
|
크기 조정됨 전체 화면의 일부에 맞게 앱 크기가 조정됩니다. 다른 앱은 나머지 화면 영역을 채울 수 있습니다. |
.png "크기 조정된 좁은 앱")
.png "크기 조정된 와이드 앱")
자세한 내용은 레이아웃 및 크기 조정에 대한 UX 지침을 참조하세요.
터치 키보드 및 필기 패널
터치 키보드(및 Windows의 필기 패널)는 텍스트 입력을 위한 보조 명령 UI를 제공합니다. 이 패널은 사용자가 편집 가능한 입력 필드를 터치하거나 Windows에서 바탕 화면의 작업 표시줄에 있는 키보드 아이콘을 클릭할 때 표시됩니다. 입력 필드 밖으로 포커스가 이동하면 패널이 닫힙니다.
터치 키보드를 사용하면 하드웨어 키보드나 기타 주변 키보드 장치가 없는 폼 팩터인 태블릿과 휴대폰에서 텍스트를 입력하고 편집할 수 있습니다. Windows의 필기 패널을 사용하면 펜을 사용하는 폼 팩터에서 텍스트를 입력하고 편집할 수 있습니다.
위에서 설명한 보기 상태와 마찬가지로, 터치 키보드 또는 필기 패널이 표시될 때 콘텐츠가 동적으로 이동하여 사용자 환경을 최적화하도록 앱을 디자인할 수 있습니다.
이러한 텍스트 입력 모드를 지원하는 방법에 대한 자세한 내용은 터치 키보드 및 필기 패널에 대한 지침을 참조하세요.
앱 바
앱 페이지 외부에 있는 앱 바는 앱의 기본 명령 인터페이스입니다. 앱 바를 사용하여 탐색, 명령 및 도구를 사용자에게 제공할 수 있습니다. Windows Phone에서는 메뉴가 기본적으로 숨겨져 있으며, 줄임표를 탭하면 표시됩니다. Windows에서는 전체 앱 바가 기본적으로 숨겨져 있으며, 사용자가 화면의 위쪽 또는 아래쪽 가장자리를 살짝 밀면 표시됩니다. 앱 바는 앱 콘텐츠를 가리며, 표시할 때와 동일한 방식으로 또는 앱을 조작하여 사용자가 해제할 수 있습니다.
.png "화면 아래쪽 가장자리의 앱 바")
명령을 디자인하는 방법에 대한 자세한 내용은 명령 디자인을 참조하고, 사용자 환경 지침은 앱 바에 대한 지침을 참조하세요.
Windows: 참 메뉴
참 메뉴는 모든 앱에서 일관된 특정 단추 집합(검색, 공유, 장치, 설정 및 시작)입니다. 이러한 단추는 사용자가 거의 모든 앱에서 수행하는 핵심 시나리오입니다.
- 검색 사용자는 시스템의 어느 곳에서나 앱의 콘텐츠 또는 웹 콘텐츠를 검색할 수 있습니다.
- 공유 사용자 앱의 콘텐츠를 다른 사용자나 서비스와 공유할 수 있습니다.
- 장치 장치에 연결하고 콘텐츠, 스트림 미디어 및 인쇄를 보낼 수 있습니다.
- 설정 사용자 앱을 기본 설정에 맞게 구성하고 사용자 도움말에 액세스할 수 있습니다.
- 시작 시작 화면으로 바로 이동할 수 있습니다.
.png "참 메뉴가 있는 앱")
검색, 공유, 앱 설정, 앱 도움말에 대한 자세한 내용은 다음 지침을 참조하세요.
상황에 맞는 메뉴
상황에 맞는 메뉴(팝업 메뉴라고도 함)에는 사용자가 앱에서 텍스트나 UI 요소에 대해 수행할 수 있는 작업이 표시됩니다. 각 상황에 맞는 메뉴에서 잘라내기, 복사, 연결 프로그램 등 최대 5개 명령을 사용할 수 있습니다. 이 제한은 상황에 맞는 메뉴를 단순하고 읽기 쉬우며 명령이 실행되는 텍스트 또는 개체에 적합하도록 유지합니다.
.png "상황에 맞는 메뉴")
상황에 맞는 메뉴를 앱의 기본 명령 인터페이스로 사용하지 마세요. 앱 바가 이 용도로 사용됩니다. 자세한 내용은 상황에 맞는 메뉴에 대한 지침을 참조하세요.
메시지 대화 상자
메시지 대화 상자는 명시적 사용자 조작이 필요한 대화 상자입니다. 앱 창이 흐리게 표시되며 계속하려면 사용자 응답이 필요합니다. 사용자를 중지하고 응답을 요구하려는 경우에만 메시지 대화 상자를 사용합니다.
.png "메시지 대화 상자")
위의 Windows 예에서는 앱 창이 흐리게 표시되고 사용자가 두 단추 중 하나를 탭하여 대화 상자를 해제해야 합니다. 즉, 대화 상자의 메시지는 무시할 수 없습니다.
자세한 내용은 메시지 대화 상자에 대한 지침을 참조하세요.
플라이아웃
플라이아웃에는 사용자가 현재 수행 중인 작업과 관련된 UI가 표시됩니다. 이 UI는 해제 가능한 일시적 UI입니다. 예를 들어 플라이아웃을 통해 사용자에게 작업을 확인하도록 요청하거나, 앱 바에 있는 단추의 드롭다운 메뉴를 표시하거나, 항목에 대한 자세한 정보를 표시할 수 있습니다. 플라이아웃은 사용자 탭 또는 클릭에 대한 응답으로만 표시해야 하고 사용자가 외부 영역을 탭할 때 항상 플라이아웃을 해제해야 한다는 점에서 메시지 대화 상자와는 다릅니다. 메시지 대화 상자는 사용자를 중단하고 일종의 조작을 요구해야 하는 경우에만 표시해야 합니다.
.png "플라이아웃")
위의 Windows 예에서는 앱이 활성 상태로 유지되며 사용자가 단추를 탭하거나 플라이아웃 외부 영역을 탭하여 해제할 수 있습니다. 즉, 플라이아웃의 메시지는 무시할 수 있습니다. 자세한 내용은 플라이아웃에 대한 지침을 참조하세요.
알림(또는 배너)
알림(Windows Phone에서는 배너라고 함)은 앱이 백그라운드에 있을 때 사용자에게 표시하는 알림입니다. 알림은 사용자가 실시간으로 알고 싶지만 누락되어도 상관없는 정보를 업데이트할 때 유용합니다. 알림을 탭하면 사용자 앱으로 전환되며 자세한 정보를 확인할 수 있습니다.
알림 메시지가 다른 작업을 중단시키고 성가시게 할 수 있으므로 사용자에게 알림을 제공할 시기에 대해 생각해 보세요. 자세한 내용은 알림 메시지에 대한 지침을 참조하세요.
타일
.png "시작 화면의 타일") |
타일은 시작 화면에 표시됩니다. Windows에서는 바탕 화면 및 이전 시작 메뉴에 표시되던 응용 프로그램 바로 가기를 대체합니다. 앱 타일을 탭하여 앱을 시작합니다. 자세한 내용은 타일에 대한 지침을 참조하세요. |
오류
세 개의 기본 화면을 통해 앱에서 발생한 오류를 사용자에게 전달할 수 있습니다. 오류에 적합한 화면은 오류 콘텐츠와 결과에 따라 앱 개발자가 선택합니다.
| 표시할 내용: | 사용할 화면: |
|---|---|
앱의 한 요소에 특정한 사소한 오류. 앱은 문제를 해결할 수 없지만 사용자는 해결할 수 있습니다. 사용자 조작: 오류를 해결하지 않고 앱, 시스템 구성 요소 및 다른 앱을 계속 조작할 수 있습니다. 예: 텍스트 입력 상자에 잘못된 문자열을 입력한 다음 다시 입력합니다. |
캔버스의 인라인 텍스트
|
전체 앱에 적용되는 사소한 오류입니다. 앱은 문제를 해결할 수 없지만 사용자는 해결할 수 있습니다. 사용자 조작: 오류를 해결하지 않고 앱, 시스템 구성 요소 및 다른 앱을 계속 조작할 수 있습니다. 예: 현재 메일을 동기화할 수 없습니다. |
페이지 위쪽에 텍스트
|
전체 앱에 적용되는 중요하지만 심각하지 않은 오류이며 앱에서 해결 방법을 제안할 수 있습니다. 사용자 조작: 프롬프트에 응답하거나 오류를 해제하지 않고 앱, 시스템 구성 요소 및 다른 앱을 계속 조작할 수 있습니다. |
오류 및 경고 표시줄
|
전체 앱에 적용되고 앱 사용을 차단하는 심각한 오류입니다. 사용자 조작: 앱을 계속 조작하려면 오류를 해제해야 합니다. 시스템 구성 요소와 다른 앱은 계속 사용할 수 있습니다. |
메시지 대화 상자
|
플라이아웃, Toast 또는 사용자 지정 UI 표면을 사용하여 오류를 표시하지 마세요.
오류: 인라인 텍스트
일반적으로 인라인 오류는 화면의 첫 번째 선택 항목입니다. 인라인 텍스트 오류는 사용자의 현재 작업 컨텍스트나 현재 앱 페이지 자체에서 메시지를 제공합니다. 인라인 오류는 메시지 해제를 위해 사용자의 별도 조치가 필요하지 않습니다. 메시지는 더 이상 해당되지 않을 경우 자동으로 해제됩니다.
| 권장 사항 | 관련 있는 컨트롤 또는 요소에 메시지를 정렬합니다. |
| 충분한 공백이 있는 공간에 메시지를 배치하여 눈에 잘 띄게 합니다. |
다음 Windows 예에서는 특정 텍스트 입력 상자에 연결된 인라인 오류 메시지를 보여 줍니다.
.png "특정 텍스트 상자와 관련된 인라인 오류 메시지")
| 금지 사항 | 메시지에 조치 또는 명령을 포함하세요. |
다음 Windows 예에서는 오류 및 경고 바를 선택하는 것이 더 좋습니다.
.png "오류 또는 경고 바를 사용하는 것이 더 나은 조치")
오류: 오류 또는 경고 바
오류 또는 경고 바를 사용하여 사용자에게 중요한 오류와 경고를 알리고 조치를 취하도록 권유할 수 있습니다. 오류 메시지는 문제가 발생한 사실을 알리고 문제가 발생한 이유를 설명하고 문제를 해결할 수 있는 방법을 제시합니다. 경고 메시지는 향후에 문제를 발생할 수 있는 조건을 경고합니다.
| 권장 사항 | 바를 화면 위쪽에 배치하여 문제점을 알리고 조치를 취하도록 권유합니다. |
| 앱의 팔레트에 있는 한 가지 색으로 바를 표시합니다. | |
| 모든 오류 및 경고 바에 대해 동일한 색과 레이아웃을 사용하세요. |
.png "오류 바")
| 금지 사항 | 인식된 심각도를 기반으로 다른 색이나 문자(예: 방패 또는 느낌표)로 바를 표시합니다. |
| 'X' 문자 또는 닫기 단추를 사용하여 바를 닫습니다. | |
| 오류 및 경고 바는 정보 제공의 목적으로만 사용하세요. |
아래 Windows 예의 메시지는 정보만 제공하며 별도의 조치가 필요하지 않습니다. 이 경우 화면 위쪽의 인라인 메시지를 사용해야 합니다.
.png "오류 또는 경고 바의 잘못된 사용")
오류: 메시지 대화 상자
사용자의 앱 조작을 차단하는 모달 메시지가 필요한 경우에만 메시지 대화 상자를 사용합니다.
| 권장 사항 | 메시지 대화 상자는 앱을 계속 사용하려면 사용자의 조치가 필요한 경우에 사용하세요. |
다음 Windows 예에서는 활성 계정이 없는 경우 앱을 사용할 수 없으므로 오류 메시지 대화 상자의 적절한 사용 예입니다.
.png "오류 메시지 대화 상자의 적절한 사용")
| 금지 사항 | 메시지를 무시해도 되는 경우 대화 상자를 사용하세요. |
다음 예에서는 오류를 해결하지 않을 경우 사용자를 차단해야 하는 관련 내용이 아무것도 없습니다. 이 경우 오류 또는 경고 바를 선택하는 것이 더 좋습니다.
.png "오류 메시지 대화 상자의 잘못된 사용")