매일 아침 나는 일어나 거울을 보며 스스로에게 묻습니다. '나는 힙스터인가?' 그리고 대답은 언제나 단호한 '아니오'이기 때문에, 내 인생의 선택들은 미적으로나 기능적으로나 우월하다는 확신을 얻습니다. 그래서 Firefox 78 ESR이 쓸데없는 Proton 인터페이스를 얹은 Firefox 91 ESR로 바뀌는 모습을 봤을 때, 오늘 하루가 고비가 되리라는 걸 알았습니다.
Firefox는 어떤 플랫폼에서든 제 기본 브라우저입니다. 지금까지도 그래 왔고, 앞으로도 계속 그러기를 바랍니다. 하지만 힙스터풍 트렌드에 굴복할 생각은 없습니다. 저도 어린아이가 아니고, 태평양 연안에 살지도 않으니까요. 결국 중요한 것은 명확성, 대비, 깨끗하고 선명한 색상입니다. 지난 전용 튜토리얼에서 Proton의 대부분의 문제를 되돌리는 방법을 이미 소개했는데, 이번에는 몇 가지 팁을 더 드리려 합니다. 함께 따라와 주세요.
컨테이너 탭
이번 업그레이드에서 Windows 버전의 Firefox는 특별히 더 세심한 손질이 필요하다는 사실을 알게 됐습니다. 컨테이너 탭의 강조선(accent line)이 마음에 들지 않았는데, 탭 너비보다 짧게 그려져 어색해 보였기 때문입니다. 그래서 첫 번째 작업은 강조선을 제거하고 탭 전체에 색상을 입히는 것이었습니다.
.tabbrowser-tab[usercontextid] .tab-context-line {
display: none !important;
위 CSS 코드를 userChrome.css에 추가하면(첫 번째 튜토리얼에서 설명한 방식) 컨테이너 탭의 강조선만 제거됩니다. 컨테이너 탭을 더욱 뚜렷하게 구분하기 위해, 저는 컨텍스트 색상을 배경으로 사용하고 강조선 대신 밝은 빨간색 상단 테두리를 적용했습니다:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.6 !important;
}
다시 한번 강조하자면, 강조색을 원하면서도 깔끔하게 쓰고 싶다면 탭 컨텍스트 라인 기능과 상단 테두리 요소를 결합하고, 배경에는 컨테이너 색상을 사용하지 않으면 됩니다. 즉, 위의 두 번째 코드 블록은 다음과 같이 바뀝니다:
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid var(--identity-tab-color) !important;
}
일반 탭
Linux 예제에서 사용했던 테두리 불투명도가 다소 거칠게 느껴져 살짝 조정했습니다:
.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;
}
.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 white !important;
}
탭 행(내비게이션 바)과 주소창 영역 구분선
기본적으로 구분선이 없어서 답답합니다. 직접 추가할 수 있습니다.
#nav-bar {
border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}
탭 행의 왼쪽·위쪽 여백 정렬
탭 행의 왼쪽 여백과 위쪽 여백이 균등하지 않다는 점을 눈치채셨을 수도 있습니다. 해당 요소에 작은 왼쪽 여백을 추가하면 해결됩니다. 탭과 주소창을 감싸고 있는 프레임의 이름은 navigator-toolbox입니다.
#navigator-toolbox {
margin-left: 2px !important;
}
주소창(urlbar) 세부 조정
여기서는 많은 변경이 필요합니다. 먼저 URL의 모든 요소가 정확히 같은 색으로 표시되도록 만들었습니다. 앞서 말했듯 저는 아이가 아니므로, 어떤 도메인에 접속 중인지 파악하려고 세 가지 색이 필요하지 않습니다. about:config를 열고 다음 설정을 false로 전환하세요:
browser.urlbar.formatting.enabled
다음으로 주소창 배경을 흰색으로 만들고 테두리를 추가했습니다. 저대비 같은 비합리적인 디자인은 필요 없습니다.
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
패딩과 마진도 조금 조정해 보기 좋게 만들었습니다. 순전히 미관을 위한 변경입니다:
#urlbar {
padding-top: 2px !important;
margin-top: 2px !important;
margin-bottom: 3px !important;
}
검색 상자
주소창 오른쪽에 있는 검색 상자에도 동일한 방법을 적용할 수 있습니다.
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
추가 색상 활용
제가 사용하는 파란색 강조가 마음에 드신다면, 주소창·검색창·내비게이션 바 테두리에 적용하기 위해 rgba(0, 0, 0, 0.1) 부분을 rgba(10, 132, 255, 0.3) 등으로 바꾸면 됩니다. 불투명도(네 숫자 중 마지막 값)는 원하는 대로 자유롭게 설정할 수 있습니다. 예를 들어 검색창 선언문은 다음과 같습니다:
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
결과물, 스크린샷, 그리고 마음의 평화!
이렇게 해서 깔끔하고 정돈된 모습이 완성됩니다:
강조선 없는 컨테이너 탭, 빨간색 상단 여백 적용.
흰색 배경과 통일된 텍스트 색상을 가진 주소창과 검색 상자.
주소창 위아래에 추가된 여유 패딩.
자리 잡은 내비게이션 바 구분선, 탭 테두리 색상과 일치.
개선된 왼쪽 위 탭 행 정렬, 활성 탭에 강조색(상단 테두리) 적용.
다시 컨테이너 탭, 강조선 대신 컨텍스트 색상의 상단 테두리 적용.
그리고 곳곳에 산뜻한 색상!
마지막으로 다시 한번 상기시켜 드리면, 기본값은 다음과 같습니다:
결론
이제 끝났습니다. OCD 악마들도 다시 편히 잠들 수 있겠군요. 결과물이 완벽하지는 않습니다. 브라우저 인터페이스 전체의 색채와 대비는 (여전히) 잘못 설계되어 있으니까요. 하지만 저는 늘 변경 사항의 수를 최소한으로 유지하고, 서드파티 도구를 절대 사용하지 않는 방향으로 노력해 왔습니다. 이것이 Firefox를 훌륭하게 만들어 주지는 못하지만, 적어도 무난하게 사용할 수 있게는 만들어 줍니다. 정말 슬픈 점은 무엇일까요? 저는 1시간도 채 걸리지 않아서, 개발팀 전원이 외면하는 듯한 인체공학적 문제 10가지 이상을 고쳤다는 사실입니다. 그리고 그 대가로 남은 것은? 회색 위에 회색을 얹는 황당함뿐입니다.
첫 번째 튜토리얼의 내용과 이번 글의 새로운 정보를 합치면, 쓸만한 크로스 플랫폼 Firefox 경험을 위한 충분한 CSS 조정법을 갖추게 됩니다. 이제 깔끔한 탭 구분, 좋은 색상, 흰색 배경의 주소창을 가질 수 있습니다. 여러분의 브라우저 생활이 조금 더 편해졌기를 바랍니다. 안타까운 점은, Firefox는 제가 정말로 사용하고 싶은 유일한 브라우저라서, 언젠가 완전히 쓸모없어지거나 추해지는 날이 오면 어떡하나 하는 걱정이 든다는 것입니다. 하지만 뭐, 그것이 이른바 현대의 삶이겠죠. 그래도 우리는 또 하나의 작은 싸움을 이겨냈습니다. 이성적인 브라우저 사용자 1점, 힙스터풍 트렌드 0점.
그럼 이만.