Nagi가 Chrome에 공간별 탭 패널을 더한다

Nagi는 Chrome의 새 탭 페이지와 사이드 패널에서 탭을 공간별로 정리하고, 명령 표시줄과 두 가지 브라우저 테마를 제공하는 확장 프로그램이다. 웹페이지 안에서 실행되지 않으며 콘텐츠 스크립트와 호스트 권한을 사용하지 않는다. 설정과 데이터는 기기의 로컬 저장소에 보관된다.

Nagi의 화면은 귀리색 종이, 원자 오렌지색, 사양표를 닮은 고정폭 글꼴 라벨, 부채꼴 광선 위의 낮은 해를 시각적 요소로 삼는다. 새 탭 페이지에서 이 변경 사항을 유지할지 Google로 돌아갈지 묻는 첫 안내가 나타난다.

설치와 탭 정리

Chrome 웹 스토어에서 Nagi 확장 프로그램과 테마를 각각 설치할 수 있다.

• Nagi 설치
• Oat 테마 설치
• Sumi 테마 설치

소스에서 설치하려면 다음 명령을 실행한다.

npm install
npm run build

그런 다음 chrome://extensions를 열고 Developer mode를 켠다. Load unpacked를 클릭한 뒤 dist/ 폴더를 선택한다. 브라우저 프레임에도 테마를 적용하려면 테마를 별도로 불러와야 한다. 코드를 수정한 뒤에는 npm run build를 실행하고, chrome://extensions의 Nagi 카드에서 새로고침 화살표를 누른다. npm run assets로 테마를 변경했다면 같은 방식으로 해당 테마 폴더를 다시 불러온다. 자세한 내용은 소스 설치 안내를 참고할 수 있다.

Nagi로 탭 목록을 관리하려면 Chrome의 자체 탭을 제거할 수 없으므로 탭을 얇은 아이콘 레일로 접고 공간 패널을 사용하는 구성이 가장 가깝다. chrome://settings/appearance에서 Side panel position을 Left로, Tab position을 Vertical로 설정하고 Auto expand tabs on hover를 끈다. Chrome의 세로 탭을 접은 뒤 탭 레일을 오른쪽 클릭해 Collapse Tabs를 선택한다. Option+S를 누르면 창에서 Nagi 패널을 열거나 닫을 수 있으며, 패널 가장자리를 끌어 폭을 조절한다.

패널에서 /를 누르면 탭 제목, 주소 또는 공간 이름으로 탭을 찾을 수 있다. ↑와 ↓로 항목을 고르고, Enter로 해당 탭으로 이동하며, Esc로 검색을 지운다.

패널과 명령 표시줄

Option+K는 명령 표시줄을, Option+S는 Spaces 패널을 연다. Option+Shift+C는 현재 탭의 링크를 복사한다. Nagi를 툴바에 고정하면 복사 완료 표시(✓)를 볼 수 있다. 다음 공간과 이전 공간 단축키는 기본 지정되어 있지 않으며 chrome://extensions/shortcuts에서 설정할 수 있다.

명령 표시줄에서 Enter를 누르면 새 탭을 연다. 현재 탭이 비어 있으면 그 탭에서 열고, ⌘Enter를 누르면 현재 탭을 새 주소로 바꾼다.

탭을 오른쪽 클릭하면 현재 탭 아래에 새 탭을 만들거나, 새로고침·복제·고정·음소거·즐겨찾기·링크 복사·보관을 할 수 있다. 다른 공간이나 새 공간, Loose로 이동하거나 현재 탭·나머지 탭·아래쪽 탭을 닫는 기능도 있다. 공간의 제목이나 칩을 오른쪽 클릭하면 이름과 색상을 바꾸고, 그 공간에 탭을 만들거나 해당 공간에 집중해 나머지를 접을 수 있다. 공간을 접거나 보관하고, 그룹을 해제하거나 닫는 기능도 제공한다.

탭을 다른 탭 위나 아래에 끌어 놓으면 그 위치에 배치된다. 공간 제목에 놓으면 해당 공간에 추가하고, Pinned에 놓으면 고정하며, Loose에 놓으면 공간에서 꺼낸다. Esc를 누르면 끌기를 취소한다. 목록 맨 위에서 새 탭을 만들면 현재 탭 옆에 열리고, 현재 탭이 속한 공간 안에 배치된다.

설정, 자동 보관과 테마

설정은 Spaces 패널의 슬라이더 버튼, chrome://extensions의 Details 다음 Extension options, 또는 명령 표시줄에 settings를 입력해 열 수 있다. 새 탭 페이지는 Nagi 페이지를 쓰거나 Chrome 자체 페이지로 돌릴 수 있다. Spaces 패널을 끄면 Chrome 사이드 패널에서 제거되고 Option+S도 작동하지 않는다. 툴바 아이콘이 명령 표시줄과 Spaces 패널 중 무엇을 여는지 선택할 수 있으며, 화면 모양은 시스템 설정을 따르는 Auto, Oat, Sumi 중에서 고른다. 새 탭 인사말에 표시할 이름을 지정하거나 빈칸으로 두어 인사말을 표시하지 않을 수도 있다.

유휴 탭 자동 보관은 기본적으로 꺼져 있다. 설정에서 12시간, 24시간 또는 7일을 선택해 켤 수 있다. 기능을 켜면 15분마다 지정한 시간 동안 보지 않은 탭을 닫아 보관함에 넣는다. 고정된 탭, 재생 중인 탭, 활성 탭은 보관하지 않는다.

Oat은 밝은 테마, Sumi는 어두운 테마다. 두 테마는 Chrome 프레임, 탭 레일, 툴바, 주소 표시줄의 색을 Nagi에 맞추고 은은한 종이 결을 더한다. 창이 백그라운드에 있어도 테마가 유지된다. 확장 프로그램과 별도로 제공되므로 테마만 따로 사용할 수 있다. Oat 또는 Sumi를 설치하면 된다.

소스에서 테마를 불러오려면 chrome://extensions에서 Developer mode를 켜고 Load unpacked를 누른 뒤 themes/oat 또는 themes/sumi를 선택한다. Chrome에서는 한 번에 하나의 테마만 사용할 수 있어 다른 테마를 불러오면 기존 테마가 바뀐다. 기본 테마로 돌아가려면 chrome://settings/appearance에서 Reset to default를 선택한다. 자세한 안내는 테마 설명에 있다.

권한과 데이터

Nagi는 tabs와 tabGroups 권한으로 탭을 나열하고 전환·그룹화·닫는다. 이때 읽는 정보는 제목과 URL뿐이며 페이지 내용은 읽지 않는다. bookmarks, history, topSites는 명령 표시줄 검색과 자주 방문한 사이트 대체 표시 기능에 쓰인다. favicon은 Chrome 자체 캐시의 사이트 아이콘을 보여주고, search는 기본 검색 엔진으로 검색어를 보낸다. sidePanel, storage, alarms는 각각 패널, 로컬 설정, 자동 보관 타이머에 사용한다. offscreen과 clipboardWrite는 현재 페이지가 없는 단축키로 링크를 복사할 때 필요하다.

모든 데이터는 기기의 chrome.storage.local에 저장되며 외부로 전송되지 않는다고 Nagi는 설명한다. 개인정보 처리방침에서 관련 내용을 확인할 수 있다.

개발 명령은 다음과 같다.

• npm run dev는 확장 프로그램 API를 모의하는 src/dev/mock-chrome.ts를 사용해 localhost:5173/newtab/, /sidepanel/, /command/, /options/에서 화면을 제공한다.
• npm run build는 타입을 검사하고 확장 프로그램을 dist/에 빌드한다.
• npm run verify는 Playwright 캐시의 Chrome for Testing에 dist/를 불러온다. 실제 탭과 공간을 준비하고 실제 API를 사용해 패널 메뉴, 끌어놓기, 명령 표시줄을 작동시킨 뒤 .verify/에 스크린샷을 쓴다.
• npm run assets는 툴바 아이콘과 두 테마를 다시 생성한다.
• npm run package는 빌드 후 Chrome 웹 스토어에 올릴 세 개의 파일을 release/에 만든다. 스토어 설명문과 이미지는 store/에 있다.

Nagi는 MIT 라이선스로 제공된다.