CSS View Transitions의 Types 디스크립터 이해

 

웹 개발을 하다 보면 새로운 기능이나 개념을 마주치는 경우가 종종 있습니다. 그럴 때면 약간 혼란스럽기도 하고 방향성을 찾기 어려운 동시에 다른 사람들도 아직 모르는 신기한 주제를 발견했다는 흥미로움이 생기곤 하죠. 최근 저는 CSS의 @view-transition at-rule과 관련해 그런 경험을 했습니다. 이 기사에서는 View Transitions에서 중요한 역할을 하지만 덜 알려진 'types' 디스크립터에 대해 알아보도록 하겠습니다.

 

Cross-Document View Transitions란?

우선, Cross-Document View Transitions에 대해 간단히 설명하겠습니다. 몇 줄의 CSS로 두 페이지 간의 부드러운 전환을 이끌어낼 수 있는 기능입니다. 과거에는 이런 애니메이션을 구현하기 위해 많은 양의 JavaScript 코드가 필요했지만, 이제 CSS만으로도 가능합니다. 이는 웹 애플리케이션에서 페이지 전환 애니메이션을 간단하게 만들 수 있도록 합니다.

 

@view-transition {
navigation: auto;
}

기존 페이지가 사라지며 새로운 페이지가 등장하는 부드러운 크로스페이드 효과를 기대할 수 있습니다. 'navigation' 디스크립터는 많이 알려져 있으나, 'types' 디스크립터는 상대적으로 덜 주목받고 있습니다.

 

 

Types 디스크립터란?

'types' 디스크립터는 전환 시 활성화할 타입들을 설정하는 기능을 가지고 있습니다. CSS 사양에 따르면 이 디스크립터는 활성 타입의 이름을 공백으로 구분되어 받거나, 유효 타입이 없을 경우 'none'으로 설정될 수 있습니다.

@view-transition {
navigation: auto;
types: bounce; /* 가능하면: bounce fade rotate */
}

 

View Transitions에서의 Active Types

페이지 전환 시 다양한 애니메이션을 적용하고 싶으면 'active' 타입이 중요합니다. 예를 들어, 페이지가 앞으로 이동할 때는 오른쪽으로 슬라이드하고, 뒤로 이동할 때는 왼쪽으로 슬라이드하는 등의 다양한 전환 방식을 정의할 수 있습니다. CSS에서는 이를 :active-view-transition-type()이라는 가상 클래스와 결합하여 특정 조건에서만 실행되도록 합니다.

html:active-view-transition-type(bounce) {
&::view-transition-old(page) { /* 사용자 정의 애니메이션 */ }
}

JavaScript에서의 활용

단순히 CSS만으로는 사용자 이동 경로를 기반으로 전환을 세밀하게 제어할 수 없습니다. JavaScript를 활용하면 더 다양한 사용자 경험을 제공할 수 있습니다. 예를 들어, 페이지 이동 직전 pagereveal 이벤트를 통해 사용자의 시작 및 종료 페이지를 감지하고 이에 따라 적합한 활성 타입을 설정할 수 있습니다.

 

 

이번 주제를 통해 Cross-Document View Transitions의 가능성을 조금 더 확장해보세요. 예제 코드는 GitHub에서 확인할 수 있습니다.

 

이 글을 통해 CSS의 @view-transition과 'types' 디스크립터에 대해 이해하는 데 도움이 되길 바랍니다. 실험과 탐구를 통해 더 창의적이고 사용자 친화적인 웹 애플리케이션을 만들어 보시기 바랍니다!