새 탭 분할 뷰 API로 멀티태스킹 확장 프로그램 개선

Anh Mac

올해 2026년 2월에 출시된 Chrome 145에서는 사용자가 동일한 창 내에서 탭을 나란히 보고 관리할 수 있는 네이티브 분할 화면이 도입되어 별도의 OS 창을 관리하기 위해 서드 파티 도구를 사용할 필요가 없어졌습니다. 사용자는 브라우저 컨트롤을 통해 분할 뷰에서 탭을 수동으로 추가하고 삭제할 수 있지만, 개발자는 Chrome 확장 프로그램에서 이러한 새로운 탭 레이아웃을 프로그래매틱 방식으로 제어할 수 없었습니다.

Chrome 155부터 사용할 수 있는 새로운 Split View API를 소개합니다. Mozilla 및 WebExtensions Community Group의 다른 브라우저 공급업체와 긴밀하게 협력하여 개발된 이 새로운 API를 사용하면 확장 프로그램이 내장된 분할 뷰를 감지, 생성, 관리할 수 있습니다.

데모

작동 방식

이전에는 나란히 표시되는 환경을 빌드하는 확장 프로그램이 여러 네이티브 창의 크기를 조절하거나, <iframe> 요소에 페이지를 삽입하거나, 측면 패널을 사용하는 등 취약한 해결 방법에 의존했습니다. 이제 새로운 분할 보기 API가 Chrome의 탭 API와 직접 통합되어 새로운 탭 레이아웃 관리 기능을 제공합니다.

매니페스트 권한

분할 뷰 API는 browser.tabs 네임스페이스의 일부이며 사용에 권한이 필요하지 않습니다.

분할 뷰 식별

모든 Tab 객체에는 splitViewId 속성이 포함됩니다. 탭이 분할 뷰의 일부인 경우 페어링된 탭과 고유 식별자를 공유합니다. 그렇지 않으면 splitViewId이 -1로 기본 설정됩니다.

// Querying all split views in the current windows
const tabs = await browser.tabs.query({ currentWindow: true });
const splitViews = tabs.map(tab => tab.splitViewId).filter(splitViewId => splitViewId !== -1);

일반 제약 조건

두 탭이 분할 뷰에 참여하려면 다음 요구사항을 충족해야 합니다.

1. 탭은 서로 인접해야 합니다 (또는 인접하게 만들어야 함).
2. 탭이 이미 분할 뷰에 있으면 안 됩니다.
3. 탭의 pinned, windowId, groupId 상태가 동일해야 합니다.

반대로 두 탭이 분할되지 않으면 서로에 대한 상대적 위치와 함께 동일한 pinned, windowId, groupId 상태가 유지됩니다.

분할 뷰 만들기

확장 프로그램이 새 분할 뷰를 만들 수 있는 방법에는 두 가지가 있습니다.

1. browser.tabs.create의 새 splitWithTabId 매개변수를 사용하여 기존 탭과 분할되는 새 탭을 만듭니다.
2. 새 browser.tabs.createSplit 메서드를 사용하여 기존 탭 두 개를 페어링합니다.

예

splitWithTabId를 사용하여 새 탭을 만들어 기존 탭과 분할할 수 있습니다.

await browser.tabs.create({splitWithTabId: existingTab.id});

기본적으로 새 탭은 기존 탭의 오른쪽에 생성됩니다.

기존 탭의 왼쪽에 새 탭을 만들려면 해당 탭의 색인으로 색인을 설정합니다.

  await browser.tabs.create({splitWithTabId: existingTab.id, index: existingTab.index});

기존 탭 두 개를 페어링하여 새 분할 뷰를 만들 수도 있습니다.

  await browser.tabs.createSplit([existingTab1.id, existingTab2.id]);

분할 뷰 분할 해제

분할 뷰를 두 개의 독립적인 탭으로 분리하기 위해 확장 프로그램은 새로운 browser.tabs.unsplit 메서드를 사용할 수 있습니다.

const splitViewId = browser.tabs.createSplit([tab1.id, tab2.id]);
// Unsplitting the split view into two independent tabs
await browser.tabs.unsplit(splitViewId);

자세히 알아보기

이 새로운 기능이 확장 프로그램의 생산적인 워크플로를 강화하는 데 도움이 되기를 바랍니다. 분할 뷰 기능으로 확장 프로그램을 빌드하려면 Tabs API 문서를 참고하세요. Split View API에 관해 궁금한 점이 있거나 도움이 필요한 경우 Chromium 확장 프로그램 Google 그룹을 참고하세요.

즐겁게 분할하세요!