저는 파이어폭스(Firefox)를 주 브라우저로 사용합니다. 그리고 앞으로도 계속 사용할 생각입니다. 하지만 새로운 UI 스타일인 '프로톤(Proton)'은 솔직히 쓸모없다고 느낍니다. 프로톤은 몇 달 전 파이어폭스에 적용되었고, 한동안은 설정에서 토글로 비활성화할 수 있었지만 이제는 그런 옵션조차 사라졌습니다.
합리적이고 생산적인 UI 레이아웃을 되찾기 위해 저는 CSS 파일 수정을 통해 파이어폭스를 직접 변경하는 방법을 택했습니다. 이 과정은 제가 작성한 '프로톤 비활성화 가이드'에 자세히 설명되어 있습니다. 탭의 가시성을 높이고, 컨테이너 탭에 색상을 입히고, URL 바를 정리하는 등 여러 가지 작업을 진행했습니다. 그동안 잘 작동하고 있었는데, 최근 출시된 버전 97에서 컨테이너 탭이 다소 어긋나는 현상을 발견했습니다. 기존 CSS 규칙이 예전만큼 제대로 작동하지 않게 된 것입니다. 이 글에서는 수정된 인터페이스를 다시 멋지게 복원하기 위한 간단한 수정 사항 몇 가지를 소개합니다. 이미 안티-프로톤 트윅을 사용 중이라면 분명 유용할 것입니다.
문제 자세히 살펴보기
파이어폭스 97에서는 두 가지 문제가 발생합니다. 첫째, 활성화된 컨테이너 탭의 상단 테두리 하이라이트가 일부 가려져 활성 탭을 구분하기 어렵습니다. 또한 탭 배경색 영역이 탭 바 위로 살짝 돌출됩니다. 둘째, 비활성 탭의 경우 배경 영역이 상당히 돌출되어 전체적으로 조악해 보입니다.
물론 이것은 제가 스스로 초래한 문제임을 잘 알고 있습니다. 파이어폭스의 문제점을 해결하려다 생긴 부작용이니까요. 하지만 괜찮습니다. 명확한 색상 대비와 탭의 쉬운 구분이 가능한 정상적인 UI를 얻기 위해 감수할 만한 대가이기 때문입니다. 프로톤에 대한 불평은 더 이상 하지 않겠습니다.
해결 방법
현재 제가 사용 중인 컨테이너 탭 CSS는 다음과 같습니다:
.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;
border-top: 3px solid red !important;
opacity: 0.8 !important;
}
수정된 코드는 다음과 같습니다:
.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;
}
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid red !important;
padding-top: 3px !important;
}
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
border-top: 1px solid rgba(130, 130, 130, 0.5) !important;
padding-top: 3px !important;
}
먼저 코드를 여러 블록으로 나눴습니다. 활성 탭과 비활성 탭에 서로 다른 상단 테두리 처리가 필요하기 때문입니다. 활성 탭의 보기 싫은 패딩을 없애려면 3px 패딩을 추가하기만 하면 됩니다.
비활성 탭은 다음 선택자로 식별합니다:
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
비활성 탭의 경우 상단 테두리를 일반 탭과 완전히 동일하게 변경하고(이전 두 가이드 참조), 패딩 선언도 함께 추가해야 합니다. 이렇게 하면 탭 배경이 '짧아져' 탭 바 위로 돌출되지 않으며, 테두리도 다른 모든 탭과 일치해 깔끔하고 통일된 외관을 얻을 수 있습니다.
이것으로 끝입니다!
결론
이런 트윅에는 일관성 문제와 유지 관리 비용이 따른다는 점을 잘 알고 있습니다. 파이어폭스 UI의 모든 작은 변화를 일일이 대응할 수는 없으므로 가끔 사소한 오류가 생길 수 있습니다. 하지만 그런 문제들은 규모가 작고 빠르게 수정할 수 있는 반면, 항상 최적화되지 않은 외관의 브라우저를 사용하는 것은 차마 용납할 수 없습니다. 즐거운 상황은 아니지만, 그럼에도 불구하고 파이어폭스는 여전히 최고의 브라우저입니다. 실용적인 이유든 철학적인 이유든, 여러분도 사용해볼 가치가 충분한 브라우저입니다.
어쨌든, 여러분이 너드라면(솔직히 아니라면 이 글을 읽고 있지 않았을 겁니다) 물건들이 깔끔하고, 명료하고, 가독성 있고, 인체공학적이며 효율적이기를 원할 것이고, 아마 버전 91 이상에서 파이어폭스 UI 모양을 변경했을 것입니다. 혹시 제 트윅 중 일부를 사용 중일 수도 있습니다. 그렇다면 파이어폭스 97에서 작은 문제를 겪을 때를 대비해 새로운 폴리싱 팁을 준비했습니다. 도움이 되기를 바랍니다. 건강하게 지내시고 곧 다시 만나요.
감사합니다.