- Firefox 기반의 TypeScript 설정 파일을 통해 브라우저 자체를 프로그래밍 가능한 도구로 만드는 새로운 접근 방식
- 웹 확장 프로그램이 갖는 보안 제약 없이 브라우저 UI 커스터마이징, 외부 프로세스 호출 등 무제한적인 기능 구현 가능
- Vim 스타일의 모드 시스템과 키 매핑을 제공하여 마우스 없이 완전한 키보드 중심 브라우징 지원
- 힌트 모드, 탭 퍼지 파인더, REPL 등 개발자 친화적 기능들을 기본 제공하며 6개월간 실사용 검증 완료
- macOS와 Linux에서 알파 버전 다운로드 가능하며, 기존 Firefox 확장 프로그램 및 워크플로우와 완전 호환
Glide 개발 배경
- 개발자는 Firefox에서 Tridactyl 확장 프로그램을 사용하던 중 웹 확장 프로그램의 근본적인 보안 제약 문제를 경험
- addons.mozilla.org 같은 특정 사이트에서는 확장 프로그램이 완전히 비활성화되어 모든 키 매핑이 작동하지 않음
- 커스텀 홈페이지에서도 Tridactyl이 작동하지 않는 문제 발생
- 이러한 제약은 악의적인 확장 프로그램으로부터 사용자를 보호하기 위한 브라우저의 필수적인 보안 모델이지만, 동시에 확장성을 크게 제한
- 브라우저 UI 자체 커스터마이징부터 외부 도구 호출까지 제한 없이 가능한 진정한 맞춤형 브라우저의 필요성을 인식하고 Glide 개발 시작
Glide의 핵심 차별점
-
TypeScript 설정 파일 기반의 완전한 제어권 제공
- 웹 확장 프로그램에서 절대 지원할 수 없는 API와 기능들을 사용 가능
- 최종 사용자가 직접 설정 파일을 작성하므로 보안 제약을 둘 필요가 없는 근본적으로 다른 보안 모델
- 설정 파일에서 가능한 작업들
- 커스텀 키 매핑 정의
-
웹 확장 프로그램 API 접근
- 임의의 외부 프로세스 실행
-
매크로 정의 등
-
Firefox 기반으로 구축되어 기존 Firefox 확장 프로그램과 워크플로우가 그대로 작동
실용적인 설정 예시
GitHub 저장소 자동 클론 및 편집기 실행
glide.keymaps.set("normal", "gC", async () => {
// extract the owner and repo from a url like 'https://github.com/glide-browser/glide'
const [owner, repo] = glide.ctx.url.pathname.split("/").slice(1, 3);
if (!owner || !repo) throw new Error("current URL is not a github repo");
// * clone the current github repo to ~/github.com/$owner/$repo
// * start kitty with neovim open at the cloned repo
const repo_path = glide.path.join(glide.path.home_dir, "github.com", owner, repo);
await glide.process.execute("gh", ["repo", "clone", glide.ctx.url, repo_path]);
await glide.process.execute("kitty", ["-d", repo_path, "nvim"], { cwd: repo_path });
}, { description: "open the GitHub repo in the focused tab in Neovim" });
- GitHub 저장소 페이지에서
gC 키를 누르면 자동으로 다음 작업 수행
- 현재 URL에서 소유자와 저장소 이름 추출
-
~/github.com/$owner/$repo 경로로 저장소 클론
- kitty 터미널에서 neovim을 열어 클론된 저장소로 이동
- 작업마다 몇 초씩 절약되며, 설정 추가에는 단 몇 분만 소요
캘린더 탭으로 빠른 전환
glide.keymaps.set("normal", "gc", async () => {
const tab = await glide.tabs.get_first({ url: "https://calendar.google.com/*"; });
assert(tab && tab.id);
await browser.tabs.update(tab.id, { active: true });
}, { description: "[g]o to [c]alendar.google.com" });
-
gc 키로 Google 캘린더 탭으로 즉시 전환 가능
모드 시스템
- Vim의 모드 개념을 차용하여 모든 키 매핑이 특정 모드에 연결
- 브라우저와의 상호작용에 따라 자동으로 모드 전환
-
normal 모드: 기본 모드
-
insert 모드: <input> 요소 클릭 시 자동 전환되어 키 매핑이 텍스트 입력을 방해하지 않음
-
ignore 모드: Shift+Escape로 전환, 웹사이트가 키 매핑과 충돌할 때 사용
키보드 기반 내비게이션
힌트 모드
-
f 키를 눌러 힌트 모드 진입
- 클릭 가능한 모든 요소(링크, 버튼 등) 위에 텍스트 레이블 오버레이 표시
- 레이블을 입력하면 해당 요소에 포커스 및 클릭 실행
- 마우스 없이 완전한 웹 페이지 조작 가능
개인적으로 선호하는 기능들
-
gI: 페이지에서 가장 큰 가시적 입력 요소에 자동으로 포커스, 마법처럼 느껴지는 기능
-
<space><space>: 탭 퍼지 파인더 실행으로 잃어버린 탭을 쉽게 찾기
-
<c-i>와 <c-o>: 이전 탭 내비게이션에 필수적
-
:repl: 설정 변경사항을 빠르게 테스트
- 힌트 모드: 마우스에 손을 뻗고 싶지 않을 때 유용
- which-key 스타일 UI: 다양한 키 매핑을 상기시켜주는 인터페이스
현재 상태 및 사용 가능성
- 약 6개월간 일상적으로 사용 중
- 여전히 초기 알파 단계이지만 macOS와 Linux에서 다운로드 가능
-
:tutor 명령으로 튜토리얼 확인 권장 (아직 완성되지는 않음)
- Linux 사용자는 아직 패키지 저장소에 등록되지 않아 수동으로 압축 해제 및 설정 필요
-
쿡북과 개발자의 dotfiles에서 더 많은 예제 확인 가능
- 알파 버전이므로 아직 모든 API가 구현되지는 않았지만, 완전한 제어권 제공이 주요 목표