Firefox 91이 정식 출시되었습니다. 이것이 의미하는 바는 무엇일까요? 바로 더 이상 about:config 설정을 통해 Proton 인터페이스를 비활성화할 수 없게 되었다는 것입니다. 왜 이것이 문제일까요? 많은 사용자에게 Proton UI는 생산성과 가독성을 해치는 디자인이기 때문입니다. Mozilla는 한동안 Firefox UI를 또다시 변경하겠다고 발표했고, 그 결과물이 바로 'Proton'이라 불리는 새로운 인터페이스입니다.
Proton의 모습은 결코 만족스럽지 않았습니다. Firefox 89에서 Proton이 공식 적용되었을 때만 해도 설정을 간단히 토글하여 끄고, 기존처럼 편안하고 효율적인 브라우징을 즐길 수 있었습니다. 하지만 이제는 그 길이 막혔습니다. 다행히도 CSS 커스터마이징을 통해 Proton의 불필요한 요소들을 최소화하거나 제거하고, 합리적인 브라우징 환경으로 되돌아갈 수 있습니다. 지금부터 그 방법을 하나씩 살펴보겠습니다.
문제의 본질
이미 여러 차례 언급된 주제지만, 조금 더 짚고 넘어갈 필요가 있습니다. 회색 위에 회색을 얹은 무의미한 디자인을 보세요. 탭이 어디서 시작되고 어디서 끝나는지 알 수 없습니다. 과연 저것이 탭일까요? 80~90년대 사람들이 두꺼운 서류 폴더에 색색의 탭을 붙여 페이지를 구분하던 것을 기억하시나요? 이제 그와 반대로 '보이지 않는 탭'을 상상해 보세요. 이것이 과연 사용자 경험에 도움이 될까요?
준비물
시도해 볼 수 있는 방법은 여러 가지가 있습니다. 하지만 천천히 시작해 봅시다. 먼저 오늘 작업의 성격을 이해할 필요가 있습니다. 내장 설정 변경이 더 이상 불가능하기 때문에, 우리는 더 깊은 곳까지 들어가야 합니다. 웹페이지를 편집하듯 사용자 정의 CSS 규칙으로 Firefox의 외관을 바꿀 수 있는데, 실제로 대부분의 최신 브라우저는 스스로를 웹페이지처럼 스타일링합니다. Plasma & HD 튜토리얼, 고정 탭(pinned tabs) 가이드, 주소창을 합리적으로 만드는 튜토리얼에서 이미 이 방법을 소개한 바 있으며, 그것이 오늘 작업의 기본이 됩니다.
먼저 사용자 정의 CSS 재정의 옵션을 활성화해야 합니다. 새 탭을 열고 about:config에 접속한 뒤, 다음 환경설정을 검색하세요:
toolkit.legacyUserProfileCustomizations.stylesheets
이 값을 true로 변경합니다. 그다음 Firefox 프로필 폴더로 이동합니다. Windows에서는 일반적으로 다음 위치입니다:
C:\Users\"사용자 이름"\AppData\Roaming\Mozilla\Firefox\"프로필"
Linux에서는 일반적으로 다음과 같습니다:
/home/"사용자"/.mozilla/firefox/"프로필"
이 폴더 안에 chrome이라는 이름의 폴더를 생성합니다(이미 존재한다면 생략, 반드시 소문자). 그리고 chrome 폴더 안에 userChrome.css라는 빈 텍스트 파일을 만듭니다(대소문자에 유의하세요). 이 파일에 앞으로 여러 코드를 추가하게 됩니다.
Proton 수정 규칙
이제 Firefox의 동작과 외관을 바꿀 여러 규칙을 추가해야 합니다. 가장 큰 문제는 새로운 탭 동작입니다. 지나치게 큰 탭, 창백한 명암 대비, 활성 탭과 비활성 탭, 배경 탭 막대 사이의 거의 없는 구분이 그 예입니다. 여기서부터가 까다로운 부분인데, 단 하나의 정답 같은 CSS 규칙 세트는 존재하지 않기 때문입니다. 참고할 만한 옵션들은 다음과 같습니다:
- AskVG의 클래식 UI 복원 가이드 – 가장 간단한 가이드이며, 이 글의 기본 토대입니다.
- GitHub의 Proton을 Photon 컴팩트 모드로 되돌리는 프로젝트
- GitHub의 Proton 일부 요소를 수정하는 프로젝트
- GitHub의 클래식 외관 적용 프로젝트(Proton 이외의 요소도 다수 포함)
- Firefox 89 Proton UI 인터랙티브 스타일러 – 다양한 요소를 변경하고 실시간 미리보기를 제공합니다.
AskVG 가이드부터 시작해 보겠습니다. userChrome.css 파일에 다음 코드를 추가하세요:
.titlebar-color {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
.tab-background {
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px !important;
}
이 코드만으로도 꽤 괜찮은 외관을 얻을 수 있습니다. 활성 탭에는 테두리가 생기고, 배경 탭에는 생기지 않으며, 기본 Proton보다 훨씬 나은 명암 대비를 확보할 수 있습니다. 이 정도면 충분했지만, 필자는 몇 가지 추가 수정을 진행했습니다.
배경 탭 테두리 추가
비활성 탭에도 테두리를 적용하고 싶다면 다음 코드를 추가하세요:
.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
border: 1px solid rgba(130, 130, 130, 0.5) !important;
}
이렇게 하면 배경 탭에 50% 투명도의 밝은 회색 1px 실선 테두리가 적용됩니다. 색상과 투명도 값은 자유롭게 변경할 수 있습니다. 참고로 이 규칙은 앞선 AskVG 코드와 매우 유사하므로, 두 규칙을 합쳐 더 간결한 CSS 파일을 만들 수도 있습니다. 하지만 확신이 서지 않는다면 별도의 줄로 추가하는 것이 안전합니다. 규칙은 계층적으로 적용되므로 충돌하지 않습니다.
활성 탭 테두리
마찬가지 방법으로 활성 탭도 다듬을 수 있습니다:
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
}
탭 강조 색상
활성 탭이 눈에 잘 띄도록 강조 색상을 지정해 다른 탭과 확실히 구분할 수 있습니다:
.tabbrowser-tab[selected="true"] .tab-background {
border-top: 3px solid #3daee9 !important;
원한다면 위 정의에 이 줄을 그대로 추가하면 됩니다. 이 예제에서는 데스크톱 색 구성표와 어울리도록 강조 색상을 지정했습니다. 색상 코드 #3daee9는 이 예제에서 Plasma 데스크톱이 사용하는 강조 색상입니다. 시스템 강조 색상을 그대로 사용하려면 제목 표시줄(titlebar) CSS 규칙에 정의된 변수를 활용할 수도 있습니다:
border-top: 3px solid -moz-accent-color-foreground !important;
탭 막대 높이
탭을 더 작게 만들어 예전의 컴팩트 모드와 비슷한 느낌을 내고 싶다면 다음 규칙을 추가하세요:
.toolbar-items, .tabbrowser-tab {
max-height: 38px;
}
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
max-height: 45px;
}
값은 자유롭게 조정할 수 있습니다. 예를 들어 max-height: 28px; 처럼 말이죠. touch 관련 절은 선택 사항이며, 자신에게 맞는 밀도(높이)를 선택하면 됩니다.
컨테이너 탭 색상
Firefox 91에서는 컨테이너 탭마저 밋밋해져 일반 탭과 구별하기 어려워졌습니다. 그래서 약간의 색을 입히기로 했습니다. 선택할 수 있는 방법은 다양하며, 이쯤 되면 필요한 수정을 하는 것이 한결 수월하게 느껴질 것입니다. 필자는 컨테이너 색상과 일치하는 탭 전체 색상에 깔끔한 테두리를 더하는 방식을 선택했습니다:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
border-bottom: var(--identity-tab-color) !important;
opacity: 0.8 !important;
}
각 탭은 var 절로 정의된 고유의 아이덴티티 색상을 사용하고, 하단 테두리도 아이덴티티 색상과 일치시켜 탭이 탭 막대에 자연스럽게 어우러지도록 했습니다. 좌우 테두리는 일반 탭과 동일합니다. 여러 옵션을 시험해 보았는데, 예를 들어 20%와 80% 불투명도를 각각 적용해 비교해 보기도 했습니다:
이제 여러분의 Firefox가 한층 쾌적해 보일 것입니다! 마지막으로 재미있는 예제를 하나 더 소개합니다:
추가 미세 조정
이 외에도 할 수 있는 작업은 무궁무진합니다. 필자는 심지어 주소창의 확대/축소 버튼까지 손봤는데, 패딩이 아주 미세하게 어긋나 있었거든요. 어설픈 픽셀이 남아 있어서야 되겠습니까. 하지만 좋은 분위기 속에서 여기서 마무리하겠습니다.
#urlbar-zoom-button {
padding-top: 0px !important;
}
마무리
여기까지입니다. 오늘은 Firefox 91에 도입된 일부 무의미한 '모던' UI 변경 사항을 되돌리는 방법을 알아보았습니다. Firefox가 CSS 재정의를 지원하는 한 희망은 남아 있습니다. 소프트웨어와 씨름하는 일은 결코 즐겁지 않지만, 적어도 비합리적인 요소들을 걷어내고 생산성과 효율을 지킬 선택지는 남아 있습니다. 위에서 소개한 CSS 규칙을 활용하면 Firefox 91, 나아가 Firefox 91 ESR도 당분간 충분히 쓸 만하고 깔끔한 모습을 유지할 수 있습니다.
그럼 1~2년 뒤에는 어떻게 될까요? 아무도 모릅니다. Mozilla 팀이 쏟아붓는 무수한 변화에도 불구하고, 필자는 여전히 Firefox를 기본 브라우저로 사용해야 한다고 믿습니다. 하지만 이 입장을 얼마나 더 유지할 수 있을지는 확신할 수 없습니다. 언젠가 Firefox가 경쟁 브라우저들 못지않은 시각적 불편함과 비실용성에 도달할지도 모릅니다. 그때 어떻게 해야 할지 모르겠습니다. Chromium 기반 브라우저만이 선택지라면 인터넷을 쓰고 싶지 않으니까요. 웹을 떠나는 것이 해답일 수도 있겠죠. 다행히 오늘은 그 어려운 선택을 할 필요가 없습니다. CSS 조정 완료. 합리성 1, 유행 타는 디자인 0. 끝.
즐거운 브라우징 되세요.