오늘은 다소 생소하지만 유용한 팁을 하나 소개하려고 합니다. 약 1년 전, Firefox Quantum이 등장하면서 브라우저의 작동 방식에 근본적인 변화가 여러 가지 생겼는데, 그중 가장 큰 변화는 WebExtensions으로의 전환이었습니다. 이 조치로 인해 강력하고 편리했던 수많은 확장 기능들이 더 이상 작동하지 않게 되었고, 탭 관리 애드온들도 상당수 사용할 수 없게 되었습니다. 대신 파이어폭스는 자체적인 탭 고정(pinning) 기능을 통합하여 제공하게 되었죠.
기능 자체는 잘 작동합니다. 하지만 한 가지 아쉬운 점이 있습니다.
고정된 탭은 일반 탭 바에서 분리되어 왼쪽 영역에 배치되는데, 마치 데스크톱의 빠른 실행(quick launch) 아이콘 영역과 비슷한 형태를 띱니다. 여기까지는 좋습니다. 문제는 고정 탭의 폭이 상당히 좁다는 것입니다. 이 때문에 빠르게 클릭해서 열기가 쉽지 않고, 마우스 커서를 정확한 위치에 놓아야 해서 작업 속도가 느려질 수 있습니다. 그런데 고정 탭의 너비를 변경하는 간단한 설정 옵션은 따로 제공되지 않습니다. 그래서 이 가이드를 준비했습니다.
userChrome.css로 UI를 직접 수정하는 원리
사실 저는 예전에 리눅스 Plasma 데스크톱의 HD 스케일링 문제를 다루면서 처음으로 UI 커스터마이징을 접했습니다. 당시에는 데스크톱 환경의 기본 설정만으로는 해결할 수 없거나, 해결이 가능해도 결과물이 만족스럽지 못해서 여러 가지 수동 오버라이드(override)를 적용해 UI 크기를 늘렸습니다. 이번에도 비슷한 접근 방식으로 고정 탭을 더 보기 좋게 만들어 보겠습니다.
파이어폭스의 UI 오버라이드는 프로필 디렉터리 안의 userChrome.css 파일을 통해 적용됩니다. 이 파일에는 웹 페이지와 마찬가지로 CSS 선언문이 들어가며, 브라우저 외관을 결정합니다. 글꼴, 색상, 테두리, 여백, 패딩 등 사실상 모든 요소를 변경할 수 있죠. 물론 CSS 문법에 대한 기본적인 이해와 함께, 파이어폭스 인터페이스에서 사용하는 클래스명을 어느 정도 알고 있어야 합니다.
userChrome.css 파일 위치
Windows에서의 일반적인 경로는 다음과 같습니다:
C:\Users\(사용자 이름)\AppData\Roaming\Mozilla\Firefox\Profiles\
(프로필 이름)\chrome\userChrome.css
Linux에서의 일반적인 경로는 다음과 같습니다:
~/.mozilla/firefox/(프로필 이름)/chrome/userChrome.css
참고: chrome 폴더나 userChrome.css 파일이 없다면 직접 생성하면 됩니다. 또한 최신 버전의 파이어폭스에서 userChrome.css를 적용하려면 주소창에 about:config를 입력한 뒤 toolkit.legacyUserProfileCustomizations.stylesheets 값을 true로 설정해야 한다는 점도 잊지 마세요.
고정 탭을 더 넓게 만드는 CSS 코드
고정 탭의 너비를 조절하려면 파일에 다음 코드를 추가합니다:
/* Tabs */
.tabbrowser-tab[pinned] {
padding-left: 20px;
padding-right: 20px;
}
위 코드는 고정 탭 아이콘의 좌우에 각각 20픽셀씩 패딩을 추가하여, 탭을 더 넓고 클릭하기 쉽게 만들어 줍니다. 좌우 패딩을 동일하게 적용하기 때문에 아이콘이 정중앙에 배치되며 좌우 대칭 형태를 유지한다는 점이 핵심입니다.
물론 단순히 탭의 width 값만 늘릴 수도 있습니다. 하지만 그렇게 하면 아이콘이 왼쪽에 치우치고 오른쪽에 불필요한 빈 공간이 많아져 보기 좋지 않습니다. 꼼꼼한 성향의 사용자라면 이런 비대칭을 견디기 힘들 텐데요. 좌우에 균일한 패딩을 주는 방식이 훨씬 깔끔하고 우아한 해결책입니다.
설정을 저장한 뒤 파이어폭스를 재시작하면 변경 사항이 즉시 반영됩니다. 이것으로 끝입니다!
마무리하며
이제 고정 탭의 접근성 문제가 해결되었습니다. Firefox Quantum은 일반 사용자에게 커스터마이징 진입 장벽이 높아졌지만, 여전히 상당한 수준의 사용자화 기능을 유지하고 있습니다. WebExtensions 전환 과정에서 많은 것이 사라졌지만, 유연하고 모듈화된 브라우저가 경쟁사보다 나은 장점을 잃고 정적이고 밋밋한 껍데기로 변하는 것은 안타까운 일입니다. 이런 숨겨진 커스터마이징 기능이 계속 남아 있기를 바랍니다.
파이어폭스의 고정 탭 기능을 사용 중이라면, 이제 더 나은 접근성 옵션까지 갖추게 된 셈입니다. 탭을 넓히면 탭 바와의 시각적 일관성도 좋아지고, 빠른 마우스 동작으로도 정확하게 클릭할 수 있습니다. 게다가 userChrome.css 오버라이드를 활용하면 세로 간격이나 패딩 조절 등 브라우저 UI 레이아웃을 더욱 다양하게 개선할 수 있습니다.
이 작은 가이드가 도움이 되길 바랍니다. 감사합니다.