[Web] View Transitions API 가 나오면서 화면 전환이 더 쉬워진다

View transitions 라고 하는 속성이 추가되면서 이제 화면 전환을 조금 더 쉽게 가능할 수 있는 방법이 출시되었다고 합니다. 원본 영상은 노마드 코더님의 유투브 영상이고, 여기 영상에서는 더 많은 정보를 제공하고 있으니 자세한 도움이 필요하시면 아래 영상을 확인하시는 것이 좋을 것입니다. 

https://www.youtube.com/watch?v=ObT87Xu_CO0 

 

1. 기본적인 View Transition 사용하기

View transition 을 사용하는 것은 meta 태그내에 name='view-transition' 속성을 추가해주면 됩니다. 

두 개의 html 파일에서 화면 전환이 일어나듯이 보여주기

<meta name="view-transition" content="same-origin" />

위의 태그를 추가해주면 되고, 동작 원리는 다음 페이지의 스크린샷을 본떠 해당 화면을 뿌려주는 방법처럼 적용된다고 합니다.

 

2. 더 구체적으로 사용하기 

이제 기본적인 사용법보다 더 심화되게 애니메이션을 커스터마이징 하는 방법에 대해 알아보고자 합니다. 

::view-transition-old(root)

style 태그 내에 ::view-transition-old(root) 를 넣어주고, 아래에는 -new(root) 를 넣어줍니다.

::view-transition-new(root)

그렇게 되면 최종적으로 애니메이션이 나오면서 천천히 다음 페이지가 표시되는 것을 확인할 수 있습니다.

 

3. 슬라이드 하듯이 화면 전환하기

이 부분은 css에서의 개념이 기본적으로 적용이 되어 있어야 이해하기가 쉽더라고요. 저도 css는 많이 알지 못하지만 영상에서 알려주는 소스코드를 가져와 보았습니다. 

이전 페이지에서 화면 전환 방법

기존 페이지에서 넘어가기 이전에는 화면이 왼쪽으로 넘어가는 듯한 액션을 취해야 합니다. 그래서 @keyframes 미디어 쿼리를 사용하여 왼쪽으로 전환되는 듯한 이벤트를 보여줍니다. toLeft는 미디어 쿼리의 키값이고, ::view-transition-old(root) 내에서 해당 미디어 쿼리를 호출해줍니다. 

새롭게 나오는 페이지에서는 오른족으로부터 밀려들어오는 듯한 화면 전환 기법을 사용해야 하기 때문에 미디어 쿼리인 @keyframes 에서는 fromRight 라는 키값을 주고 ::view-transition-new(root) 속성에서 fromRight 미디어 쿼리를 가져옵니다. 

 

4. 확대되는 듯한 화면 전환 기법 보여주기 

이미지가 확대되는 듯한 화면 전환을 묘사해주는 것은 1에서 소개한 내용에서 style 태그를 추가하여 같은 이름으로 두 개의 화면 전환이 이루어지는 페이지에 img 태그 내 같은 속성을 넣어주는 것입니다. 

 

5. 리액트에서 사용하기 

리액트에서는 아래의 메소드로 사용 가능합니다. 

document.startViewTransition(() => {
    navigate("/dog");
};

 

6. 브라우저 지원 범위 

현재 크롬 브라우저 및 안드로이드 크롬 브라우저에서밖에 지원이 안되지만, 아무래도 점차 확장해나가지 않을까 싶습니다.

 

참고 : https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

View Transitions API - Web APIs | MDN