지난 몇 년간, 특히 최근에는 그 전보다 더 자주, Firefox의 외관과 동작 방식을 내 컴퓨터에 맞게 변경해야 하는 상황에 직면했습니다. 한때 합리적이었던 기본 설정들이 거의 자의적으로 바뀌면서, 작업 흐름에 기능적·미학적 비효율이 생겨났기 때문입니다. Australis와 Proton 디자인이 바로 그 좋은 예입니다.
최근 저는 Firefox 91 이후 버전에서 회색 위에 회색이 겹치는 지루한 인터페이스를 되돌리는 방법을 설명하는 두 편의 상세한 가이드를 발행했습니다. 두 글 모두 제가 쌓아온 Firefox UI에 대한 지식에 의존했는데, 많은 분들에게는 그 설명이 너무 어렵게 느껴질 수 있다는 것을 깨달았습니다. 그래서 Firefox UI를 커스터마이징하는 일반적인 방법을 다루는 가이드를 만들기로 했습니다. 이 글을 따라 하면 여러분도 같은 작업을 어렵지 않게 수행할 수 있을 것입니다.
기본 원리
Firefox UI는 어떤 면에서 웹 페이지와 매우 유사합니다. CSS(Cascading Style Sheets)라는 웹 기반 언어로 작성된 일련의 스타일 규칙으로 정의되어 있는데, 이는 일반 웹사이트와 다르지 않습니다. 예를 들어 dedoimedo.com 같은 사이트에서 여러분이 보는 것은 텍스트지만, 페이지의 폭, 글꼴 색상, 문단 간격 등은 모두 CSS 파일로 지정됩니다. Firefox도 똑같은 방식으로 스타일링됩니다.
여러분은 자신만의 규칙을 만들어 이러한 기본 규칙을 재정의(오버라이드)할 수 있습니다. 이를 위해 Firefox 프로필 폴더에 새 파일을 추가하고, 그 안에서 Firefox UI의 기존 시각 요소에 영향을 주는 새로운 CSS 규칙을 작성하면 됩니다. 순서는 다음과 같습니다.
- Firefox를 열고 주소창에 about:support를 입력합니다.
- 열린 페이지의 표에서 "프로필 폴더(Profile Folder)" 항목을 찾아 폴더 열기(Open Folder) 버튼을 클릭합니다. 그러면 사용 중인 운영체제의 파일 탐색기가 실행되며 Firefox 프로필 위치로 이동합니다. 참고로 Firefox 프로필은 사용자마다 고유하므로, 여러 계정을 사용한다면 각 사용자별로 따로 수정해야 합니다.
- 프로필 폴더 위치를 파악했다면 반드시 백업부터 하세요! 폴더 전체와 내용물을 통째로 수동으로 복사해 두면 됩니다. 이렇게 해 두면 문제가 생겼을 때 언제든 초기 상태로 되돌릴 수 있습니다. 중요한 변경 전에는 반드시 이 과정을 거치세요.
- Firefox 프로필 폴더 안에 chrome(소문자)이라는 이름의 폴더가 없다면 새로 생성합니다.
- 그 폴더 안으로 들어가 userChrome.css(대소문자 구분에 주의)라는 이름의 파일을 만듭니다.
- 이 파일을 텍스트 에디터로 엽니다.
처음에는 이 파일이 비어 있습니다. 이제 여기에 CSS 지시문을 추가하여 Firefox의 다양한 요소의 모양(및 동작)을 덮어쓰게 됩니다. 저는 이런 작업을 여러 번 해왔으므로, 작업 흐름의 기준점이 필요하다면 아래 가이드들을 참고하세요.
- Plasma HD 배율 조정 & Firefox
- Firefox 고정 탭(pinned tabs)
- Firefox & 주소창 동작
추가 준비 작업
변경 사항이 실제로 적용되도록 하려면 몇 가지 설정이 더 필요합니다.
- 주소창에 about:config를 입력하고, 경고 화면이 나타나면 이를 수락하여 진행합니다.
- about:config 페이지의 검색 상자에서 legacy를 검색합니다. 다음 환경설정 항목이 표시될 것입니다.
toolkit.legacyUserProfileCustomizations.stylesheets
이 항목을 더블클릭하여 값을 false에서 true로 전환합니다. 이렇게 해야 Firefox가 사용자의 커스텀 수정 사항을 읽어 브라우저에 적용합니다. 이 설정을 켜지 않으면 아무리 CSS를 수정해도 UI에는 변화가 없습니다.
- 현재 비어 있는 userChrome.css 파일의 맨 위에 다음 줄을 추가합니다.
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
이 선언은 레거시 요소와 속성을 사용할 수 있게 해줍니다.
- 마지막으로, CSS의 기본적인 작동 방식에 대한 이해가 반드시 필요합니다. 클래스, 식별자(identifier), CSS 계층 구조와 규칙의 우선순위 같은 개념 말입니다. 이 부분에는 마법 같은 지름길이 없다는 점을 미리 알려드립니다.
Firefox UI 레이아웃 이해하기
이제 작업에 필요한 핵심 재료는 모두 갖췄습니다. 다음은 UI 구조를 익힐 차례입니다. 제 튜토리얼(위에 링크됨)에서는 .tab-background, #searchbar, #navigator-toolbox 같은 선택자를 사용했습니다. 그렇다면 이것들이 무엇인지, 그리고 그 정보를 어디서 찾는지 궁금할 것입니다.
솔직히 답은 그리 간단하지 않습니다.
첫째, 참조 문서가 필요합니다. 둘째, Firefox에 내장된 Browser Toolbox를 활용하면 요소를 직접 선택하고 식별할 수 있습니다. 물론 이 작업은 다소 번거롭습니다. 먼저 브라우저 메뉴 > 도구 더보기 > 웹 개발자 도구를 클릭합니다. 그다음 열린 패널에서 맨 오른쪽의 점 세 개 아이콘(추가 메뉴)을 눌러 설정(Settings)으로 들어가거나 F1 키를 누릅니다. 여기서 오른쪽 열의 마지막 두 옵션, 즉 브라우저 크롬 디버깅 활성화(Enable browser chrome...)와 원격 디버깅 활성화(Enable remote debugging)를 선택해야 합니다. 그리 직관적이지는 않죠. 같은 UI에서 햄버거 메뉴와 점 세 개 메뉴를 서로 다른 용도로 쓰는 것에 대해서는 굳이 불평하지 않겠습니다.
또 하나의 방법은, 제가 핵심 UI 요소만 골라 빠르게 압축 강의를 해주는 것입니다. 그래서 Proton 관련 가이드에서 제가 수정했던 요소들을 표시해 둔 주석 달린 스크린샷을 준비했습니다.
다음은 (훌륭한) 일곱 가지 중요한 요소입니다.
- #navigator-toolbox - 페이지 탐색 영역과 탭 바를 포함하는 프레임입니다.
- #nav-bar - navigator-toolbox의 하단 절반(아래쪽 섹션)만 해당합니다.
- .tabbrowser-tab[selected="true"] - 활성 탭 요소입니다. 상태(state)가 selected, true임에 주목하세요.
- .tabbrowser-tab:not([selected="true"]) - 비활성 탭입니다.
- .tabbrowser-tab[usercontextid] - 컨테이너 탭입니다(컨테이너 애드온을 사용하는 경우). 참고로 3~5번 항목에서는 .tab-background라는 클래스도 함께 알아두어야 합니다. 이것은 탭의 배경 영역을 지정하는 요소로, 곧 위의 tab-browser-tab* 선언과 결합해서 사용하게 됩니다.
- #urlbar - 주소창입니다. 앞서 소개한 탭 배경 요소와 유사한 역할을 하는 #urlbar-background 식별자도 있다는 점에 유의하세요. 이 역시 곧 실제 예제에서 다루겠습니다.
- #searchbar - 검색 상자입니다(사용하는 경우).
물론 실제로는 이보다 조금 더 복잡하지만, 이제 우리가 어디로 가고 있는지 감을 잡으셨을 겁니다. 가장 좋은 방법은 몇 가지 실제 예제를 통해 보여드리는 것이니, 바로 시작해 보겠습니다.
기본 예제 몇 가지
아래 코드를 userChrome.css에 추가하면 다음과 같은 효과가 있습니다.
- 활성 탭의 큰 사각형 배경 영역에 테두리를 설정합니다.
- 위쪽 테두리는 3px, 왼쪽과 오른쪽은 1px 두께입니다.
- 각 테두리는 서로 다른 색상을 가집니다.
- 측면 테두리는 30% 투명도를 적용합니다.
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
border-top: 3px solid #0a84ff !important;
}
아래 코드를 userChrome.css에 추가하면 다음과 같은 효과가 있습니다.
- 비활성 탭의 경우, 탭 배경(탭의 큰 사각형 캔버스)을 다음과 같이 설정합니다. sRGB 색 공간을 사용해 현재 색상(시스템 강조색)과 투명 레이어를 혼합하고, 시스템 강조색의 불투명도를 5%로 지정합니다. 즉, 탭이 거의 투명해져 브라우저의 기본 색상과 자연스럽게 어우러집니다.
- 30% 불투명도의 아주 얇은 1px(검정) 테두리를 생성합니다. !important 절은 같은 요소에 적용되는 다른 어떤 규칙보다 여러분의 규칙이 우선한다는 의미입니다.
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
border: 1px solid rgba(0, 0, 0, 0.3) !important;
}
아래 코드를 userChrome.css에 추가하면 다음과 같은 효과가 있습니다.
- 왼쪽에 2px 마진을 추가해 탭을 살짝 안쪽으로 밀어냅니다. 다시 말해 탭과 브라우저 창 가장자리 사이에 아주 작은 여유 공간을 만들어 줍니다.
#navigator-toolbox {
margin-left: 2px !important;
}
그리고 더 많은 것들이...
아래 코드를 userChrome.css에 추가하면 다음과 같은 효과가 있습니다.
- 주소창(urlbar)의 배경을 순수한 흰색으로 설정하고, 앞서 지정한 활성 탭의 강조색과 어울리는 30% 불투명도의 얇은 테두리를 추가합니다. 여기서는 여러분의 미적 감각을 마음껏 발휘할 수 있습니다.
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
물론 할 수 있는 것은 이보다 훨씬 많습니다! 하지만 이 예제들만으로도 시작하기에 충분하리라 믿습니다.
결론
인정하건대 꽤 복잡한 과정이었습니다. Firefox UI를 더 간단히 편집할 수 있는 방법이 있었으면 좋겠지만, 안타깝게도 기본 모양이 마음에 들지 않고 기본 제공되는 커스터마이징 이상으로 변경하고 싶다면 CSS 지식, CSS 파일, 그리고 여러 규칙이 필요합니다. 이 가이드는 브라우저 인터페이스의 모든 세부 사항까지는 들어가지 않으면서, 그 목표를 달성하는 방법을 안내해 드렸습니다.
이것이 쉬운 작업이 아니라는 점을 잘 알고 있습니다. CSS는 사용법을 아는 사람에게는 "쉬워" 보이지만, 간편하고 인체공학적인 해결책을 찾는 일반 사용자에게는 당연히 거부감을 일으키기도 합니다. 하지만 저는 약간의 시간을 투자해 이 언어를 익히는 것이 올바른 길이라고 믿습니다. 그래야 어딘가의 자의적인 결정에 의존하지 않고, UI에 필요한 조정을 스스로 할 수 있는 자유를 얻기 때문입니다. Mozilla가 더 나은 선택을 해 주었으면 하는 바람이 있지만, 그래도 이런 난잡함이 쌓였음에도 Firefox는 여전히 최고의 브라우저입니다. 인터페이스를 바꿀 수 있고, 데스크톱과 모바일에서 사용해야 할 유일한 브라우저이기도 합니다. 인터넷을 겨우겨우 쓸 만하게 유지해 주는 존재이며, Firefox 없는 미래는 여러분이 원하지 않을 것입니다. 그러니 CSS를 잡고, 짜증나는 요소들을 없애고, Firefox를 계속 사용하세요. 여기까지입니다.
감사합니다.