TL;DR

  • ie-page-transitions가 View Transition API를 활용해 인터넷 익스플로러의 23가지 Interpage Transitions 효과를 현대 브라우저에서 재현하는 CSS·자바스크립트 라이브러리임.
  • 인터넷 익스플로러에서 쓰던 <meta http-equiv="Page-Enter"> 및 <meta http-equiv="Page-Exit"> 태그 형식을 그대로 사용함.
  • 스크립트가 revealTrans(Duration=…,Transition=…) 선언을 파싱해 활성 유형이 지정된 선택적 뷰 전환으로 변환하고, CSS가 전환 애니메이션을 처리함.
  • 단일 페이지 애플리케이션(SPA)과 다중 페이지 애플리케이션(MPA)용 도구를 제공하며, 브라우저별 지원 버전이 다름.
  • 전용 사이트에서 23가지 효과를 미리 보고 SPA·MPA 데모와 문서를 확인할 수 있음.

추억과 프로젝트 이력

  • 2024년 말, 인터넷 익스플로러의 독점 기능인 Interpage Transitions를 현대 웹에서 재현하는 연말 사이드 프로젝트 ie-page-transitions 개발을 시작함.
  • 인터넷 익스플로러 4.0~8.0은 문서의 <head>에 간단한 <meta> 태그를 넣어 방문자가 페이지에 들어오거나 나갈 때 브라우저 화면 전체에 전환 효과를 적용할 수 있었음.
  • 효과에는 Box in, Circle out, Vertical blinds, Checkerboard, Random dissolve 등이 포함됐으며, 예를 들어 Transition=7은 Wipe left 효과를 지정함.
  • 2024년 말에 현대 CSS와 View Transition API의 기본 기능을 활용해 기존 전환 효과를 재현할 수 있다고 판단하고, 2024년 12월 Bluesky에서 초기 프로토타입을 공개했으며 이후 몇 차례 콘퍼런스 발표에서도 선보임.
  • 프로젝트가 완성되지 않아 한동안 공개 글로 다루지 못했으며, 당시 23가지 효과 중 일부만 구현된 상태로 Checkerboard 격자, 픽셀 디졸브, 무작위 막대 효과 등이 남아 있었음.
  • 이후 Gemini의 도움으로 나머지 효과를 구현하고 인터랙티브 데모 사이트를 다듬어 전체 프로젝트를 마무리함.

기존 방식의 복원

  • 새 설정 형식을 만들지 않고 인터넷 익스플로러가 사용하던 <meta http-equiv="Page-Enter">와 <meta http-equiv="Page-Exit"> 태그를 그대로 읽음.
  • 작은 스크립트가 메타 태그의 revealTrans(Duration=…,Transition=…) 선언을 파싱해 선택적 뷰 전환(Selective View Transitions)과 활성 유형(Active Types)으로 변환함. 예시 유형은 page-enter-effect-7임.
  • 함께 제공되는 스타일시트는 :active-view-transition-type() 의사 클래스를 사용해 ::view-transition-old(root) 및 ::view-transition-new(root) 의사 요소를 애니메이션함.
  • 효과 구현에는 현대 CSS의 clip-path 도형, 여러 레이어로 구성된 mask-image 그라디언트, 등록된 사용자 지정 속성(@property)을 활용함.

MPA와 SPA에서 사용하기

  • 다중 페이지 애플리케이션(MPA), 즉 일반 웹사이트에서는 문서 간 뷰 전환(Cross-Document View Transitions)을 활성화하고 스타일시트와 렌더링 차단 모듈 스크립트를 불러온 뒤 기존 IE 메타 태그를 추가함.
  • 스타일시트 URL은 https://unpkg.com/ie-page-transitions/ie-page-transitions.css임.
  • MPA용 스크립트 URL은 https://unpkg.com/ie-page-transitions/ie-page-transitions.mpa.js이며, 예시에서 type="module"과 blocking="render"를 지정함.
  • 예시에서는 페이지 진입과 이탈 모두에 Duration=0.5 및 Transition=23을 설정함.
  • 단일 페이지 애플리케이션(SPA)용 도우미도 포함하며, 효과의 기하 형태를 조정할 수 있는 CSS 사용자 지정 속성도 제공함.
  • --page-transitions-blinds-bands
  • --page-transitions-checkerboard-columns
  • --page-transitions-random-dissolve-size

브라우저 지원

  • 내부적으로 View Transition Types를 사용하므로 SPA 버전은 Chrome 125 이상, Safari 18.2 이상, Firefox 147 이상에서 지원됨.
  • MPA 버전은 문서 간 뷰 전환 지원이 필요하므로 Chrome 126 이상과 Safari 18.2 이상에서 지원됨.
  • 인터넷 익스플로러가 도입한 메타 태그를 재사용하므로 현대 브라우저뿐 아니라 Internet Explorer 5.5~8.0에서도 효과가 지원됨.
  • 해당 IE 버전에서는 브라우저의 기본 DirectX RevealTrans 필터가 자동으로 작동하고, 현대 브라우저에서는 ie-page-transitions가 효과를 처리함.

데모와 프로젝트 링크

  • 전용 사이트 page-transitions.style에서 23가지 효과를 미리 보고 전체 문서를 확인할 수 있으며, 내장 브라우저 화면에서 SPA와 MPA 데모를 실행할 수 있음.
  • 프로젝트 관련 항목으로 page-transitions.style 웹사이트 및 라이브 데모, GitHub의 ie-page-transitions, NPM의 ie-page-transitions가 제시됨.