UI 애니메이션(HTML)

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

Windows 제공 애니메이션의 집합인 애니메이션 라이브러리를 사용하면 Windows 8 모양과 느낌을 Windows 스토어 앱에 통합할 수 있습니다. 이 항목에서는 애니메이션 및 애니메이션 라이브러리에서 다루는 일반적인 시나리오의 예를 간략하게 소개합니다.

애니메이션 라이브러리의 애니메이션을 사용할 경우 다음과 같은 이점이 있습니다.

  • 동작이 Windows 스토어 앱 애니메이션 원칙에 할당됩니다.
  • UI 상태를 빠르고 유연하게 전환하여 사용자에게 혼동을 주지 않고 정보를 알려 줍니다.
  • 앱 내에서 사용자 전환을 표시하기 위한 보다 명확한 시각적 효과를 제공합니다.

예를 들면 사용자가 목록에 항목을 추가할 경우 새 항목을 목록에 즉시 표시하는 대신 새 항목 위치에 애니메이션 효과를 주고, 목록의 기존 항목이 이동할 새 위치에 애니메이션 효과를 주어 추가된 항목을 위한 공간을 확보합니다. 이렇게 하면 즉각적인 변환과는 다른 방식으로 사용자에게 해당 동작을 분명히 나타낼 수 있습니다.

ListView 컨트롤, FlipView 컨트롤, Flyout 컨트롤, AppBar 컨트롤 등, Windows 8에 도입된 컨트롤은 모두 애니메이션 라이브러리의 애니메이션을 사용합니다. 앱에서 이러한 컨트롤을 사용하면 직접 프로그래밍하지 않고도 Windows 스토어 앱 애니메이션의 모양과 느낌을 얻을 수 있습니다.

애니메이션 라이브러리는 가능한 모든 시나리오에 대한 애니메이션을 제공하지는 않습니다. 그리고 브랜드를 반영하는 사용자 지정 애니메이션을 만들어야 하는 경우가 있습니다. 애니메이션 라이브러리에 속하지 않은 애니메이션을 사용할 위치를 신중하게 선택해야 합니다. 특별 브랜드 시점이거나 시나리오에 적합한 애니메이션이 애니메이션 라이브러리에 없는 등의 명확한 이유가 있을 때만 사용하세요.

이 항목에서 다루는 API를 사용하는 예제 코드는 HTML 애니메이션 라이브러리 샘플을 참조하세요.

라이브러리에서 사용 가능한 애니메이션

애니메이션 라이브러리에는 다음 애니메이션이 제공됩니다. 애니메이션의 주 사용 시나리오 및 실행하는 함수를 알아보거나 예제를 보려면 애니메이션의 이름을 클릭합니다.

  • 페이지 전환: 보기의 안이나 밖으로 페이지의 콘텐츠에 애니메이션 효과를 줍니다.
  • 콘텐츠 전환: 보기의 안이나 밖으로 하나의 콘텐츠 또는 콘텐츠 집합에 애니메이션 효과를 줍합니다.
  • 페이드 인/페이드 아웃: 임시 요소 또는 컨트롤을 표시합니다.
  • 크로스페이드: 콘텐츠 영역을 새로 고칩니다.
  • 포인터 위로/아래로: 타일 탭 또는 클릭에 대한 시각적 피드백을 제공합니다.
  • 확장/축소: 추가 인라인 정보를 표시합니다.
  • 위치 변경: 요소를 새 위치로 이동합니다.
  • 팝업 표시/숨기기: 보기의 맨 위에 컨텍스트 UI를 표시합니다.
  • 가장자리 UI 표시/숨기기: 가장자리 기반 UI를 보기의 안이나 밖으로 밉니다.
  • 패널 표시/숨기기: 가장자리 기반의 큰 UI를 보기의 안이나 밖으로 밉니다.
  • 목록에 추가/목록에서 삭제: 목록에 항목을 추가하거나 목록에서 삭제합니다.
  • 검색 목록에 추가/검색 목록에서 삭제: 검색 결과를 필터링할 때 목록에 항목을 추가하거나 목록에서 삭제합니다.
  • Peek: 타일의 콘텐츠를 업데이트합니다.
  • 배지 업데이트: 숫자 배지를 업데이트합니다.
  • 끌기 시작/종료 또는 사이 끌기: 끌어서 놓기 작업 중 시각적 피드백을 제공합니다.
  • 살짝 밀기 힌트: 타일이 살짝 밀기 조작을 지원한다는 힌트를 줍니다.
  • 살짝 밀기 선택/선택 취소: 타일을 살짝 밀기가 선택된 상태로 전환합니다.

페이지 전환

페이지 전환은 보기의 안이나 밖으로 페이지의 콘텐츠에 애니메이션 효과를 줍니다. 여기에는 시작 화면 후 앱의 첫 페이지를 표시하는 것과 앱의 페이지 간 전환이 모두 포함됩니다.

다음 동영상은 콘텐츠 페이지를 화면에 나타나게 하는 애니메이션을 보여 줍니다.

다음 동영상은 두 콘텐츠 페이지 간에 전환되는 애니메이션을 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 페이지 전환 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

콘텐츠 전환

콘텐츠 전환 애니메이션은 하나의 콘텐츠 또는 콘텐츠 집합을 현재 보기의 안이나 밖으로 이동하는 데 사용합니다. 페이지의 요소만 변환하는 콘텐츠 전환과 전체 페이지를 변환하는 페이지 전환을 혼동하지 마세요. 예를 들어 콘텐츠 전환 애니메이션은 처음 페이지가 로드되었을 때 표시할 준비가 되지 않은 콘텐츠를 표시하거나, 페이지에서 한 섹션의 콘텐츠를 변경하는 데 사용됩니다.

다음 동영상에서는 기존 콘텐츠를 제거하고 새 콘텐츠를 보기로 가져오는 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 콘텐츠 전환 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

페이드 인/페이드 아웃

페이드 인/페이드 아웃 애니메이션은 임시 UI 또는 컨트롤을 표시하거나 숨기는 데 사용합니다. 하나의 예는 사용자 조작으로 새 컨트롤이 표시될 수 있는 앱 바에 있습니다. 또 다른 예는 일정 시간 동안 사용자 입력이 감지되지 않을 경우 흐려지는 이동 표시기 또는 임시 스크롤 막대입니다. 또한 콘텐츠가 동적으로 로드되어 앱이 자리 표시자 항목에서 최종 항목으로 전환할 때도 페이드 인 애니메이션을 사용해야 합니다.

다음 동영상은 보기의 콘텐츠를 페이드 인/아웃하는 애니메이션을 보여 줍니다. 스크롤 막대가 화면 아래쪽에서 페이드 인/아웃됩니다.

UX 및 사용 지침에 대한 자세한 내용은 페이드 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

크로스페이드

크로스페이드 애니메이션은 항목의 상태가 변할 때, 예를 들면 앱이 현재 보기의 콘텐츠를 새로 고칠 때 전환을 부드럽게 하기 위해 사용합니다.

다음 동영상은 크로스페이드 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 페이드 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

JavaScript이 애니메이션을 실행하려면 다음 API를 사용합니다.

포인터 위로/아래로

포인터 위로/아래로 애니메이션은 성공한 타일 탭 또는 클릭에 대한 사용자 피드백을 제공하는 데 사용합니다. 예를 들어 사용자가 타일의 아래쪽을 클릭하거나 탭하면 포인터 아래로 애니메이션이 재생됩니다. 사용자가 클릭 또는 탭을 해제하면 포인터 위로 애니메이션이 재생됩니다.

다음 동영상은 포인터 아래로 및 포인터 위로 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 포인터 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

확장/축소

확장 애니메이션은 추가 인라인 정보를 표시하기 위해 보기의 콘텐츠에 공간을 추가하는 데 사용합니다. 예를 들면, 오류 메시지의 모양에 따라 보기의 다른 콘텐츠를 이동하여 공간을 만들어야 할 수 있습니다. 축소 애니메이션은 특정 항목에 대해 표시되는 세부 정보를 줄이기 위해 이 추가 콘텐츠를 숨깁니다. 축소 애니메이션은 주로 사용자 동작에 의해 트리거됩니다.

다음 동영상은 확장 및 축소 애니메이션을 보여 줍니다.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

위치 변경

위치 변경 애니메이션은 요소를 새 위치로 이동하는 데 사용합니다. 예를 들어 파노라마 보기에서 헤더를 이동할 때 위치 변경 애니메이션이 활용됩니다.

다음 동영상은 위치 변경 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 위치 변경 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

JavaScript이 애니메이션을 실행하려면 다음 API를 사용합니다.

팝업 UI 표시/숨기기

팝업 UI 표시/숨기기 애니메이션은 현재 보기의 맨 위에 컨텍스트 UI를 표시하거나 숨기는 데 사용합니다. 예를 들어 팝업 UI에는 요소의 항목에 대한 보다 자세한 정보가 표시될 수 있습니다. 사용자 지정 상황에 맞는 메뉴나 플라이아웃을 표시할 때 팝업 UI 표시/숨기기 애니메이션을 사용합니다.

다음 동영상은 팝업 UI를 표시하거나 숨기는 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 팝업 UI 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

가장자리 UI 표시/숨기기

가장자리 UI 표시/숨기기 애니메이션은 가장자리 기반의 작은 UI를 보기의 안이나 밖으로 미는 데 사용합니다. 예를 들어 화면의 아래쪽에 사용자 지정 앱 바를 표시하거나 화면의 맨 위에 오류 및 경고에 대한 UI 화면을 표시할 때 이러한 애니메이션을 사용합니다.

다음 동영상은 가장자리 기반 UI를 표시하거나 숨기는 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 가장자리 기반 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

패널 표시/숨기기

패널 표시/숨기기 애니메이션은 사용자 지정 키보드 같은 가장자리 기반의 큰 창 또는 작업 창 등, 창을 표시하거나 숨기는 데 사용합니다. 가장자리를 진입점 및 종료점으로 사용하는 작은 UI 요소와 함께 사용되는 가장자리 UI 표시/숨기기 애니메이션과 이 애니메이션을 혼동하지 마세요.

다음 동영상은 패널을 표시하거나 숨기는 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 가장자리 기반 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

목록에 추가/목록에서 삭제

목록에 추가/목록에서 삭제 애니메이션은 기존 1차원 또는 2차원 목록에 항목을 추가하거나 목록에서 항목을 삭제하는 데 사용합니다. 목록에 추가 애니메이션은 먼저 목록에서 기존 항목의 위치를 변경하여 새 항목을 위한 공간을 확보한 다음 새 항목을 추가합니다. 목록에서 삭제 애니메이션은 목록에서 항목을 제거하고, 제거된 항목으로 인해 빈 자리가 생기므로 필요한 경우 기존 항목의 위치를 변경합니다.

다음 동영상은 목록에 항목을 추가하거나 목록에서 항목을 제거하는 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 목록 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

검색 목록에 추가/검색 목록에서 삭제

검색 목록에 추가/검색 목록에서 삭제 애니메이션은 검색 중 목록의 항목이 빠르게 변경되는 경우 사용합니다. 검색 목록 애니메이션은 표준 목록 애니메이션보다 빠릅니다. 예를 들어 사용자가 검색어를 입력하고 목록이 실시간으로 결과를 필터링하면 필터링으로 제외되는 항목은 검색 목록에서 삭제 애니메이션을 사용해야 합니다. 반대로 사용자가 문자열을 검색한 다음 백스페이스 키로 문자를 제거할 수 있습니다. 이 경우 항목이 검색 결과 목록에 다시 추가되므로 검색 목록에 추가 애니메이션을 사용하여 이렇게 해야 합니다.

다음 동영상은 검색 목록에 항목을 추가하거나 목록에서 항목을 제거하는 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 목록 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

Peek

타일 높이가 낮아 사진과 텍스트를 모두 동시에 표시할 수 없어 타일이 그림과 텍스트를 교대로 표시하는 경우 타일을 업데이트하는 데 Peek 애니메이션을 사용합니다. 또한 이 애니메이션은 타일에서 여러 사진을 순환할 때도 사용합니다.

다음 동영상은 Peek 애니메이션을 보여 줍니다.

JavaScript이 애니메이션을 실행하려면 다음 API를 사용합니다.

배지 업데이트

배지 업데이트는 숫자를 표시하는 배지를 업데이트하는 데 사용합니다. 예를 들면, 읽지 않은 메일 수를 보여 주는 메일 앱은 배지 업데이트 애니메이션을 사용하여 이 값을 업데이트할 수 있습니다.

다음 동영상은 배지를 업데이트하는 애니메이션을 보여 줍니다.

JavaScript이 애니메이션을 실행하려면 다음 API를 사용합니다.

끌기 시작/종료 및 들어가기와 나가기 사이 끌기

끌기 애니메이션은 사용자가 항목을 끌거나 놓을 때 시각적 피드백을 제공하는 데 사용합니다. 끌기 시작 애니메이션은 사용자가 항목을 끌기 시작할 때 사용합니다. 끌기 종료 애니메이션은 사용자가 항목을 놓을 때 사용합니다.

옵션으로, 들어가기와 나가기 사이 끌기 애니메이션을 사용하면 사용자에게 놓은 항목 주위로 목록을 다시 정렬할 수 있음을 보여줄 수 있습니다. 이는 항목을 현재 위치에 놓을 경우 목록의 어느 곳에 배치될지 사용자가 아는 데 도움이 됩니다. 들어가기와 나가기 사이 끌기 애니메이션은 끌고 있는 항목을 목록의 다른 두 항목 사이에 놓을 수 있고 해당 두 항목이 사라지게 됨을 시각적 피드백으로 제공합니다.

다음 동영상은 끌어서 놓기 작업과 관련된 애니메이션을 보여 줍니다.

UX 및 사용 지침에 대한 자세한 내용은 끌어서 놓기 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

살짝 밀기 힌트

살짝 밀기 힌트는 타일이 살짝 밀기 조작을 지원함을 표시하는 데 사용합니다. 사용자는 아래쪽으로 살짝 밀어 타일을 선택할 수 있습니다. 사용자가 타일을 살짝 밀 수 있다는 것을 모르는 상태로 타일에 대해 길게 누르기 제스처를 취할 경우 살짝 밀기 힌트 애니메이션이 재생되어 사용자가 살짝 밀기를 통해 타일을 조작해야 한다는 것을 알려 줍니다.

다음 동영상은 살짝 밀기 애니메이션을 보여 줍니다.

JavaScript이 애니메이션을 실행하려면 다음 API를 사용합니다.

살짝 밀기 선택/선택 취소

살짝 밀기 선택 애니메이션은 살짝 밀기 조작을 사용하여 항목을 선택했을 때 타일이 선택된 상태로 전환되었음을 나타내고, 타일을 유휴 위치로 되돌려 놓는 데 사용합니다. 살짝 밀기 선택 취소 애니메이션은 살짝 밀기를 사용하여 선택한 타일을 선택 취소할 때 사용합니다.

다음 동영상은 살짝 밀기 선택 및 선택 취소 애니메이션을 보여 줍니다.

이 애니메이션을 JavaScript 코드에서 실행하려면 다음 API를 사용합니다.

사용자 지정 컨트롤에 애니메이션 사용

다음 표에는 이러한 시스템 컨트롤의 사용자 지정 버전을 만들 때 사용해야 하는 애니메이션에 대한 권장 사항이 요약되어 있습니다.

UI 유형 권장 애니메이션
대화 상자 fadeInfadeOut
플라이아웃 showPopuphidePopup
도구 설명 fadeInfadeOut
상황에 맞는 메뉴 showPopuphidePopup
명령 모음 showEdgeUIhideEdgeUI
작업 창 또는 가장자리 기반 패널 showPanelhidePanel
모든 UI 컨테이너의 콘텐츠 enterContentexitContent
컨트롤 대상 또는 다른 어떤 애니메이션도 적용되지 않는 경우 fadeInfadeOut

 

관련 항목

HTML 애니메이션 라이브러리 샘플

HTML ListView 필수 항목 샘플

WinJS.UI.Animation 네임스페이스