정식 버전이 확장한 임베드와 탐색 UI
구글은 9월 22일 Chrome 154가 정식 배포 중이라고 알리며, 주요 화면 기능으로 콘텐츠 크기에 반응하는 iframe과 scroll-marker-group의 모드를 소개했다. iframe은 외부 댓글이나 높이가 변하는 위젯을 담을 때 내부 스크롤과 부모 페이지의 크기를 맞추는 문제를 다룬다. 스크롤 표시 모드는 콘텐츠를 옮겨 보는 UI에서 초점 순서와 접근성 의미를 정하는 기능이다. 둘 다 브라우저의 기본 처리 범위를 넓히지만 하나는 임베드 크기, 다른 하나는 탐색 동작에 관한 변경이다. 따라서 새 버전이라는 이유만으로 같은 설정이나 같은 테스트 항목으로 묶기는 어렵다.
부모의 CSS와 자식 문서의 동의
반응형 iframe은 부모 문서가 iframe에 frame-sizing: content-height를 적용하고, 임베디드 문서가 head 안의 responsive-embedded-sizing 메타 요소로 사용을 허용하는 방식이다. 부모가 높이만 바꾸면 임의의 외부 문서가 모두 맞춰지는 구조는 아니다. 공식 구현 안내는 메타 요소를 문서 로드 뒤 동적으로 추가할 수 없으며, 허용 오리진을 특정 사이트로 제한할 수 있다고 설명한다. 콘텐츠가 처음 표시된 뒤 댓글이나 패널이 늘어났을 때는 자식 문서에서 window.requestResize()를 호출해 크기 재계산을 요청한다. 브라우저가 모든 레이아웃 변화를 계속 감시해 자동 갱신한다는 방식과는 다르다.
같은 표시를 링크 또는 탭으로 다루기
scroll-marker-group은 콘텐츠 앞이나 뒤에 생성할 표시 그룹에 links 또는 tabs 모드를 지정할 수 있게 됐다. CSS Overflow 편집 초안은 links를 기본 탐색 목록으로, tabs를 탭 목록으로 정의한다. 초안에서 links 모드의 표시는 각각 Tab 키로 이동할 대상이며, tabs는 활성 표시만 Tab 이동 대상이 되고 그룹 안에서는 방향키로 전환한다. 역할도 navigation·link와 tablist·tab으로 달라진다. 이 문서는 확정 권고안이 아닌 개발 중 초안이다. Chrome 154의 지원 소식과 초안의 모델을 함께 읽으면 차이를 이해할 수 있지만, 실제 서비스의 키보드와 보조기술 동작은 사용하는 브라우저에서 확인해야 한다.
크기를 맡겨도 콘텐츠 변화 시점은 설계해야
ARCH.B는 iframe의 새 방식이 부모와 자식 사이에서 높이를 측정해 전달하던 코드를 줄일 여지를 만든다고 본다. 다만 위젯 제작자가 문서의 동의와 재계산 요청을 제공해야 하므로, 삽입하는 사이트 혼자서 모든 외부 위젯을 개선할 수 있는 것은 아니다. 댓글을 여러 개 추가한 뒤 한 번에 크기를 요청하는 흐름과, 펼침 상태가 바뀐 직후 요청하는 흐름은 제품의 업데이트 지점에 맞춰 정할 수 있다. 공식 문서는 임베드가 늦게 로드되며 부모 콘텐츠를 밀어내면 레이아웃 이동과 Core Web Vitals에 영향을 줄 수 있다고 경고한다. 내부 스크롤을 없애는 편의와 초기 화면의 안정성을 함께 살펴야 하며, 높이가 저절로 맞는다는 이유만으로 성능 개선을 확정할 수는 없다.
목차와 탭의 사용자 기대를 반영하기
links와 tabs의 선택은 표시를 어느 모양으로 꾸미는지보다 콘텐츠를 어떻게 이동해 읽게 할지에 가깝다. 본문 목차처럼 여러 부분을 연속해서 읽는 화면과 하나의 패널을 선택해 사용하는 화면은 키보드 사용자의 기대가 다를 수 있다. 팀은 마우스로 표시를 누르는 모습뿐 아니라 Tab 이동, 방향키 전환, 선택된 콘텐츠로의 진입을 살펴볼 필요가 있다. iframe에서도 frame-sizing과 requestResize의 지원 여부를 각각 확인하고, 지원되지 않는 환경에 기존 크기 처리 경로를 유지할 수 있다. 이번 Chrome 발표만으로 Firefox나 Safari의 동일한 버전별 지원을 단정할 수 없으므로, 브라우저가 맡아 주는 범위와 애플리케이션이 남겨야 할 동작을 기능별로 나눠 적용하는 편이 타당하다.
출처
Chrome for Developers의 원출처와 본문에 표시한 참고자료를 바탕으로 한국어로 재구성했습니다. ‘ARCH.B 분석’은 자료를 읽고 덧붙인 편집 해석입니다.
New in Chrome 154 (새 창)
