빠른 시작: 진행률 컨트롤 추가(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

진행률 컨트롤은 앱이 이미지 다운로드, 파일 로드 또는 데이터 처리 등의 작업을 수행 중임을 나타내는 방법을 제공합니다. 다음은 다양한 진행률 컨트롤 스타일과 이러한 스타일을 JavaScript를 사용하는 Windows 런타임 앱에 추가하는 방법입니다.

사전 요구 사항

JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 앱 만들기에 대한 자세한 내용은 JavaScript를 사용하여 첫 Windows 런타임 앱 빌드를 참조하세요. 첫 번째 컨트롤 만들기 및 이벤트 처리기 추가와 관련된 도움말은 빠른 시작: 컨트롤 및 이벤트 처리기 추가를 참조하세요.

Progress 컨트롤 스타일

완료해야 할 작업의 양을 알고 있을 때, 모를 때, 또는 작업이 모달 형식인지 여부에 따라 사용자에게 표시되는 세 가지 progress 컨트롤 스타일(확정된 진행률 표시줄 스타일, 확정되지 않은 진행률 표시줄 스타일 및 확정되지 않은 진행률 링 스타일)이 있습니다.

확정된 진행률 표시줄: 앱에서 작업이 진행된 정도를 표시합니다. 작업이 진행됨에 따라 진행률 표시줄을 다 채울 때까지 채움색이 왼쪽에서 오른쪽으로 확장됩니다.
확정되지 않은 진행률 표시줄: 작업이 계속되는 동안 사용자가 UI와 상호 작용할 수 있음을 나타냅니다. 애니메이션에서는 점들이 왼쪽에 나타나고 트랙 끝지점에 도달할 때까지 트랙을 따라 오른쪽으로 이동하다가 끝지점에 도달하면 사라집니다.
확정되지 않은 진행률 링 (Windows만 해당): 앱에서 작업을 완료할 때까지 사용자 활동이 차단됨을 나타냅니다. 즉, 활동이 모달 형식입니다. 애니메이션에서는 몇 개의 점들이 원 안에서 시계 방향으로 이동합니다.

확정된 진행률 표시줄 추가

확정된 진행률 표시줄에는 앱 진행 상황 정도가 표시됩니다. 작업이 진행되면 표시줄이 채워집니다. 남은 작업의 양을 시간, 바이트, 파일 또는 기타 측정 단위로 추정할 수 있는 경우에는 확정된 진행률 표시줄을 사용합니다. 확정된 진행률 표시줄을 사용하는 경우에 대한 자세한 내용은 진행률 컨트롤에 대한 지침 및 검사 목록을 참조하세요.

진행률 표시줄은 진행률을 설정하고 결정하는 세 가지 속성을 제공합니다.

속성	설명
max	완료 상태를 나타내는 값을 지정하는 숫자입니다. 기본값은 1.0입니다.
value	현재 진행 상태를 지정하는 숫자입니다. 파일 다운로드 진행 상태를 보고 있는 경우 이 값은 다운로드한 바이트 수일 수 있습니다. max를 다운로드할 총 바이트 수로 설정할 수 있습니다.
position	(읽기 전용) 현재 진행률 표시기로 value를 max로 나눈 값입니다.

확정된 진행률 표시줄을 만들려면

확정된 진행률 표시줄을 만들려면 progress 요소를 만들고 해당 value 속성을 설정합니다. 기본 완료 값 1.0을 사용하지 않으려면 max 속성을 설정하여 이 값을 변경할 수 있습니다. 다음 예제에서는 확정된 진행률 표시줄을 만들고 value를 30으로, max를 100으로 설정합니다. 결과적으로 생성된 진행률 표시줄은 30% 완료된 진행 상태를 보여줍니다.

<progress id="determinateProgressBar" value="30" max="100"></progress>

확정된 진행률 표시줄의 값을 업데이트하려면

앞의 예제에서는 태그 안에서 진행률 표시줄의 값을 지정하는 방법을 보여 주었습니다. 실제 앱에서는 JavaScript를 사용하여 일부 진행률 표시줄에 대해 진행률 표시줄의 값을 업데이트합니다. 예를 들어 진행률 표시줄이 다운로드한 파일 수를 나타내는 경우 또 하나의 파일이 다운로드될 때마다 값을 업데이트합니다.

이 예제에서는 진행률 표시줄의 값을 업데이트합니다.

var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;

확정되지 않은 진행률 표시줄 추가

끝내야 할 작업이 얼마나 남아있는지 예측할 수 없고 해당 작업이 사용자 조작을 차단하지 않는 경우에는 확정되지 않은 진행률 표시줄을 사용합니다. 확정되지 않은 진행률 표시줄은 진행되는 동안 조금씩 채워지는 막대를 표시하는 대신에, 점들이 왼쪽에서 오른쪽으로 이동하는 애니메이션을 표시합니다. 확정되지 않은 진행률 표시줄을 사용하는 경우에 대한 자세한 내용은 진행률 컨트롤에 대한 지침 및 검사 목록을 참조하세요.

확정되지 않은 진행률 표시줄을 만들려면

확정되지 않은 진행률 표시줄을 만들려면 value 또는 max를 지정하지 않고 progress 요소를 만듭니다.

<!-- Create an indeterminate progress bar -->
<progress></progress>

확정되지 않은 진행률 링 추가(Windows만 해당)

작업을 완료할 때까지 남은 작업의 양을 추정할 수 없고 작업이 사용자 조작을 방해하는 경우에는 확정되지 않은 진행률 표시원을 사용합니다. 확정되지 않은 진행률 표시원은 원 안에서 일련의 점들이 이동하는 애니메이션을 표시합니다. 확정되지 않은 진행률 표시원을 사용하는 경우에 대한 자세한 내용은 진행률 컨트롤에 대한 지침 및 검사 목록을 참조하세요.

확정되지 않은 진행률 표시원을 만들려면

확정되지 않은 진행률 표시원을 만들려면 value 또는 max를 지정하지 않고 progress 요소를 만든 후 관련 클래스를 win-ring으로 설정합니다.

<progress class="win-ring"></progress>

win-ring 클래스는 JavaScript용 Windows 라이브러리에서 제공하는 스타일 중 하나입니다.

다음 예제에서는 텍스트도 표시하는 확정되지 않은 진행률 링을 만드는 방법을 보여줍니다.

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

이전 예제에 포함된 CSS 스타일은 다음과 같습니다.

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

요약 및 다음 단계

다양한 유형의 progress 컨트롤을 만드는 방법을 살펴보았습니다.

다음 진행률 컨트롤의 스타일을 지정하는 방법 항목에서는 CSS 및 WinJS 클래스를 사용하여 progress 컨트롤의 스타일을 지정하는 방법에 대해 자세히 알아봅니다.

그런 다음 progress컨트롤을 사용하는 경우와 사용 방법에 대해 자세히 설명하는 진행률 컨트롤에 대한 지침 및 검사 목록을 확인합니다.