파이어폭스(Firefox) 75에는 사용자들이 의아해한 변화가 하나 생겼습니다. 주소 표시줄을 클릭하면 마치 화면이 확대되는 것처럼 커지면서, 주변 UI는 물론 그곳에 고정해 둔 바로가기 아이콘까지 가려지는 것입니다. 모바일 환경에서는 자연스러울 수 있지만, 데스크톱에서는 상당히 어색하게 느껴집니다. 이전 글에서 소개했던 것처럼 당분간은 about:config 설정 몇 가지를 통해 이 동작을 원래대로 되돌릴 수 있었습니다.
그런데 파이어폭스 77(나이트리 빌드)부터는 해당 설정 옵션 자체가 사라져 버렸습니다. 이제는 다른 방법이 필요합니다. 이 글에서는 기존의 주소 표시줄 모양과 사용감을 그대로 되찾는 방법을 소개합니다. 이렇게 하면 향후 업데이트에도 흔들리지 않고 익숙한 인터페이스를 유지할 수 있습니다.
없애고 싶은 확대되는 주소 표시줄 모습입니다.
어떤 작업을 진행하나요?
사용자 지정 CSS 스타일을 만들어 파이어폭스 UI를 이전 모습으로 되돌립니다. 사실 파이어폭스 UI는 일반 웹 페이지처럼 CSS로 자유롭게 꾸밀 수 있습니다. 방법은 파이어폭스 프로필 폴더의 userChrome.css 파일에 CSS 코드를 추가하는 것입니다.
물론 제가 처음 발견한 방법은 아닙니다. 이미 모질라(Mozilla) 지원 포럼에서 이 문제에 대한 해결책이 공유된 바 있습니다. 다만 해당 게시글의 코드는 일부 조정이 필요했고, 누구나 쉽게 따라 할 수 있도록 절차를 더 명확하게 정리했습니다.
userChrome.css 활성화하기
먼저 파이어폭스가 사용자가 만든 CSS 변경 사항을 인식하도록 설정해야 합니다.
- 파이어폭스 68 이하 버전: 별도의 작업이 필요하지 않습니다.
- 파이어폭스 69 이상 버전: about:config에 접속한 뒤 아래 설정을 찾아 false에서 true로 변경합니다.
toolkit.legacyUserProfileCustomizations.stylesheets
다음으로 파이어폭스 프로필 폴더로 이동합니다. Windows에서는 일반적으로 다음 경로입니다:
C:\Users\사용자이름\AppData\Roaming\Mozilla\Firefox\프로필명
Linux에서는 일반적으로 다음과 같습니다:
/home/사용자/.mozilla/firefox/프로필명
구체적인 예시가 필요하다면 Plasma & HD 스케일링 관련 글이나 파이어폭스 고정 탭 가이드를 참고하세요.
- 이 폴더 안에 chrome이라는 이름의 폴더를 생성합니다(소문자).
- chrome 폴더 안에 userChrome.css라는 이름의 빈 텍스트 파일을 만듭니다(대소문자 구분에 유의).
주소 표시줄 스타일 추가하기
다음 단계는 userChrome.css 파일에 내용을 추가하는 것입니다. 아래 코드를 복사해서 붙여넣으세요. 이 코드는 앞서 언급한 지원 스레드에서 가져온 것입니다. 이 코드만으로는 결과가 완벽하지 않을 수 있지만, 단계별로 전체 과정을 보여 드리기 위해 먼저 기본 코드를 적용해 보겠습니다.
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 한 번만 선언하면 됩니다 */
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;
width: 100% !important;
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
height: var(--urlbar-height) !important;
width: 100% !important;
padding-block: unset !important;
padding-inline: unset !important;
transition: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
animation: none !important;
}
파일을 저장한 후 파이어폭스를 재시작합니다.
결과 확인: 살짝 아쉬운 부분
직접 테스트해 보면 위 코드만으로는 완벽한 레이아웃이 나오지 않습니다. 보시는 것처럼 주소 표시줄이 너무 높게 위치해 세로 중앙 정렬이 맞지 않고, 위아래 여백도 어긋나 있습니다.
CSS 두 번째 수정
이제 추가한 CSS의 기본값을 살짝 조정해야 합니다. 구체적으로는 urlbar 높이(--urlbar-height)와 툴바 높이(--urlbar-toolbar-height) 값을 수정합니다. 상단 여백은 이 두 값의 차이를 2로 나눈 값으로 계산되며, 원한다면 top 값을 직접 지정할 수도 있습니다.
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 30px !important;
몇 차례 시행착오 끝에 제 환경에서는 툴바 높이를 38px로 설정했을 때 가장 잘 맞았습니다:
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
--urlbar-height: 28px !important;
--urlbar-toolbar-height: 38px !important;
마찬가지로 상단 여백도 기본 계산식 대신 원하는 값으로 바꿀 수 있습니다:
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
예를 들어 다음과 같이 지정할 수 있습니다:
top: 5px !important;
여기서 !important 속성은 매우 중요합니다. 이것이 있어야 파이어폭스가 자체 기본값 대신 사용자 지정 값을 우선 적용하기 때문입니다.
최종 결과: 원래대로 돌아왔습니다
이제 상식적이고 합리적인 인터페이스가 돌아왔습니다:
마치며
이로써 작업이 완료되었습니다. 최근 몇 년간 평범한 브라우저 동작을 되찾기 위해 사용자 지정 CSS에 점점 더 의존하게 되었습니다. 이는 우려되는 추세이지만, 어쩌면 피할 수 없는 흐름일지도 모릅니다. 실질적인 기능 개선 없이 '변화' 자체를 목적으로 삼는 UI 변경이 잦아지고 있고, 검증된 기존 방식을 새롭다는 이유만으로 바꾸는 경우가 많기 때문입니다.
이 글이 도움이 되기를 바랍니다. 파이어폭스 75에서 바로 적용할 수도 있고, 77 버전이 정식 출시된 후 적용할 수도 있습니다. 그때까지는 about:config 설정으로 대응하면 됩니다. 이런 불편함에도 불구하고, 적어도 숙련된 사용자에게는 익숙하고 생산적인 레이아웃을 되찾을 방법이 남아 있다는 것이 다행입니다. 앞으로 어떻게 될지는 알 수 없지만, 파이어폭스가 다른 브라우저처럼 되지 않기를 바랄 뿐입니다. 이 정도면 미션 완료입니다. 도움이 되셨다면 공유와 피드백 부탁드립니다.
감사합니다.