게시일: 2026년 3월 27일
Chrome 147에서는 Element.startViewTransition()를 호출하여 DOM의 하위 트리에서 뷰 전환을 시작할 수 있는 기능인 요소 범위 뷰 전환이 도입되었습니다.
이 기능을 사용하면 여러 뷰 전환을 동시에 실행하고, 진행 중인 뷰 전환을 중첩하고, position: fixed 콘텐츠의 레이어 문제를 해결할 수 있습니다. 이 모든 작업은 페이지의 나머지 부분을 대화형으로 유지하면서 이루어집니다.
어떻게 달라졌을까요?
Chrome 140에서 개발자 테스트를 위한 기능이 준비되었다고 발표한 이후로 Google은 커뮤니티 및 CSS 워킹 그룹과 협력하여 세부정보, 특히 기본 동작과 관련된 세부정보를 마무리했습니다.
- 범위 루트는 기본적으로 자체 참여합니다.
- 범위 뷰 전환은 중첩된 뷰 전환 그룹을 사용하여 중첩된 가상 요소를 자동으로 포함합니다.
- 범위 뷰 전환의
::view-transition-group-children()가상 요소는 범위 루트가 오버플로를 클리핑하는 경우 콘텐츠를 자동으로 클리핑합니다. - 요소 범위 뷰 전환은 전환 중에 범위 루트에
contain: layout및view-transition-scope: all을 자동으로 적용합니다.
이러한 업데이트 후에는 Chrome 안정화 버전 147부터 요소 범위 뷰 전환을 사용할 수 있습니다.
데모
목록 섞기
이 데모를 사용하면 각 목록의 항목을 섞을 수 있습니다. 가운데 있는 버튼을 선택하여 목록의 위치를 바꿀 수도 있습니다.
실시간 데모
데모 녹화
요소 범위 뷰 전환이 사용되므로 두 목록 모두 셔플 뷰 전환을 동시에 실행할 수 있습니다. 목록 항목이 아직 재구성되는 동안 목록의 위치를 바꾸는 외부 뷰 전환을 시작할 수도 있습니다.
파타고니아 여행
'파타고니아 여행' 데모는 요소 범위 뷰 전환을 보여줍니다. 이 데모는 'Web UX, re-imagined' 캠페인 동영상을 기반으로 빌드되었습니다.
드롭다운 을 사용하여 그리드 항목을 필터링합니다. 각 그리드 항목의 추가 버튼을 사용하여 사이드바 에 표시되는 선택한 항목 목록에 추가합니다.
실시간 데모
전체 데모를 보려면 별도의 탭에서 "파타고니아 여행"을 엽니다.
데모 녹화
이 데모는 세 곳에서 요소 범위 뷰 전환을 사용합니다.
- 항목을 필터링할 때의 그리드
- 선택한 항목 목록에 추가할 때의 그리드 항목
- 선택한 항목 목록을 표시하는 사이드바
가이드 읽기
요소 범위 뷰 전환에 관한 모든 내용을 알아보려면 가이드를 읽어보세요. 요소 범위 뷰 전환을 구현하는 방법을 보여주고, 추가 세부정보를 설명하며, 더 많은 데모를 포함합니다.