이번에 파이어폭스 4.0 정식 버전이 출시되면서 인터페이스에서 많은 변화가 있었는데요. 새롭게 바뀐 부분이 모두 마음에 들면 다행이지만 그렇지 않은 분들도 다수일 거라 생각합니다. 이런 분들을 위해 새 파이어폭스의 UI 개선에 참고할만한 팁과 확장기능 정보들을 모아봤습니다. 

탭 도구모음을 주소표시줄 아래로 이동

설정 – ‘탭 항상 위로’의 체크를 풀어주면 탭 도구모음이 예전처럼 주소표시줄 아래로 이동합니다.

새로 고침 버튼 이동 & 검색창 제거

주소표시줄 안쪽에 자리잡은 새로 고침 버튼의 위치가 마음에 안 든다면 설정 – ‘도구 모음 배치’를 클릭하고 주소표시줄 오른쪽에 있는 새로 고침 버튼과 정지 버튼을 원하는 위치로 이동합니다. 마찬가지로 크롬처럼 검색창이 안 보이는 걸 선호한다면 검색창을 ‘도구 모음 설정’ 창으로 드래그해서 제거해 버리면 되겠죠.
참고로 검색창을 제거했을 경우 주소표시줄에서의 효율적인 검색을 위해 Omnibar 확장기능을 추천합니다. 크롬과 마찬가지로 검색엔진 키워드를 이용해 주소표시줄에서 간편하게 검색할 수 있으며 복수 검색엔진의 조합도 가능합니다.)

Firefox 메뉴 버튼 이동하기 :: Movable Firefox Button 확장기능

개인적으로 파이어폭스 4.0 버전으로 넘어오면서 가장 마음에 안 드는 UI 요소가 왼쪽 상단에 자리잡은 오렌지색 Firefox 메뉴 버튼의 디자인과 위치인데요. Movable Firefox Button 확장기능을 사용하면 Firefox 메뉴 버튼을 이동 가능한 버튼 중의 하나로 만들어 툴바 어느 곳에나 고정할 수 있습니다. 구글 크롬도 오래 사용해서 그런지 크롬의 렌치 아이콘처럼 주소창 오른쪽 영역으로 보내는 게 더 자연스러워 보이네요.

이밖에 Firefox 4 UI Fixer 확장기능을 이용하면 Firefox 메뉴 버튼 이동 외에 상태표시줄 아이콘과 메뉴 도구모음 이동이 가능하고 윈도우 타이틀바 보이기 기능과 탭 우클릭 메뉴에 새 탭 만들기 항목을 넣어줍니다.

Firefox 메뉴 버튼 편집하기 :: Personal Menu 확장기능

메뉴 관련 최고의 확장기능으로 손꼽히는 Personal Menu입니다. 일반 메뉴 편집 외에 구성(about:config)과 재시작 메뉴를 추가할 수 있고 디자인과 기능 모두 만점인 북마크와 히스토리 버튼을 제공합니다.

탭에 읽지 않은 메시지 개수 실시간 표시 (지메일,페이스북 등) :: Tab Badge

 

Tab Badge 확장기능은 제목에 숫자가 표시되는 웹페이지를 실시간으로 반영해 탭에 표시해줍니다. 지메일, 구글리더, 페이스북, 트위터 등 읽지 않은 메시지 숫자를 알려주는 웹사이트를 고정적으로 이용할 때 매우 유용합니다. 블랙리스트 기능을 제공해 알림이 필요 없는 경우 웹사이트 도메인을 제외할 수 있습니다. 다만 Tab Mix Plus나 Tab Utilities 같은 탭 관련 확장기능과 호환되지 않는 점이 아쉽습니다.

탭 그룹(파노라마) 기능 강화 :: TabGroup Menu

TabGroup Menu는 파이어폭스 4.0의 신규 기능인 탭 그룹의 부족한 부분을 보완해주는 멋진 확장기능입니다.

메뉴 도구 모음에 TabGroups 메뉴 넣기
탭 그룹 버튼에 드롭다운 메뉴 표시
우클릭 그룹 이름 바꾸기
드래그로 그룹간 탭 이동
우클릭으로 여러 탭을 마크한 후 드래그로 이동 
미들클릭으로 탭 닫기

파이어폭스 UI 구석구석 커스터마이즈 :: Stratiform 확장기능

Stratiform은 파이어폭스의 버튼, 주소표시줄, 탭 등의 모양과 색상을 유저 스스로 커스터마이징 할 수 있도록 도와주는 확장기능입니다. 아직 파이어폭스 4.0 버전에 맞춰 업데이트 된 테마가 거의 없는 관계로 기본 테마를 유지하면서 꽤나 유용하게 사용할 수 있습니다.

상태표시줄에 웹페이지 로딩, 다운로드 등 표시 :: Status-4-Evar 확장기능

Status-4-Evar는 파이어폭스 3.x 버전 때의 기본적인 상태표시줄 기능에다 다운로드 상황, 현재 4.0 버전과 호환되지 않는 Fission의 주소표시줄 로딩 보여주기 기능을 추가해주는 다목적 확장기능입니다.

상태표시줄 자동 크기 조정 :: Barlesque 확장기능

Barlesque는 파이어폭스의 상태표시줄(부가 기능 모음)을 확장기능 아이콘이 차지하는 만큼만 표시해서 브라우저 컨텐츠 영역을 극대화 하며 아이콘 접근도 편리하게 해주는 확장기능입니다. 왼쪽/오른쪽 위치 지정과 단축키 할당이 가능하며 위에 소개한 Status-4-Evar 확장기능과의 궁합도 좋습니다.

미니멀한 UI 구현 :: MiniUI 확장기능

MiniUI는 컨텐츠 영역을 제외한 거의 모든 UI  구성요소를 감춰주는 확장기능으로 극도의 미니멀리즘을 추구하는 유저들에게 권하는 확장기능입니다. 확장기능을 설치하고 Ctrl 키를 누르면 도구 - MiniUI에서 체크한 UI 요소들이 사라지며 다시 Ctrl 키를 클릭해야 원상태로 돌아옵니다. 심지어 스크롤바까지 감추는 걸 지원하네요.. ;;

더 강화된 글래스 효과 적용하기

부분적으로 적용된 윈도우 7 글래스 효과를 한층 더 강화시켜 주는 userchrome.css 코드입니다. 프로필 폴더에서 텍스트 에디터로 직접 편집하거나 ChromeEdit 같은 확장기능을 이용하세요.

/*make tabs apart from the current one transparent/glass*/

tab:not([selected="true"]){
      background-image:-moz-linear-gradient(
      rgba(255,255,255,0), rgba(255,255,255,0)
      ) !important;
      }

tab:not([selected="true"]):hover{
      background-image:-moz-linear-gradient(
      rgba(255,255,255,0.75), rgba(255,255,255,0.25)
      ) !important;
      }

/*make the new tab button glass/transparent*/

.tabs-newtab-button {
      background-image:-moz-linear-gradient(
      rgba(255,255,255,0), rgba(255,255,255,0)
      ) !important;
      }

.tabs-newtab-button:hover {
      background-image:-moz-linear-gradient(
      rgba(255,255,255,0.75), rgba(255,255,255,0.25)
      ) !important;
      }

북마크 도구모음에 글래스 효과 적용

#PersonalToolbar
{
      background-color:transparent !important;
      text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white !important;
}

상태표시줄(부가 기능 모음)과 하단 영역에 글래스 효과 적용

#browser-bottombox
{
      -moz-appearance: -moz-win-glass !important;
      background-color: transparent !important;
}
#addon-bar
{
      -moz-appearance: -moz-win-glass !important;
      background-color: transparent !important;
}

Firefox 메뉴 버튼 투명하게 만들기

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#appmenu-button{
background:transparent!important;
}

종료 시 세션 저장 메시지 출력하기

파이어폭스 3.x 버전까지는 기본적으로 활성화 되었었는데 4.0 버전으로 넘어오면서 무슨 이유에서인지 꺼져 있더군요. 아래 about:config 필터 값을 바꿔주면 다시 활성화 됩니다.  제대로 작동 안 하면 browser.warnOnQuit 값도 true로 설정되어 있는지 확인해 주시고요.

browser.showQuitWarning : 값 true

폰트 클리어타입 활성화

파이어폭스 4.0 업데이트 이후 폰트 뭉게짐이나 흐릿해지는 현상을 겪는 분들이 많은데요. about:config에서 아래 두 필터 값을 true로 설정하면 클리어타입을 활성화 해 좀 더 가독성 높은 폰트를 볼 수 있습니다.

gfx.font_rendering.cleartype.always_use_for_content : 값 true
gfx.font_rendering.directwrite.enabled : 값 true

참고로 약간 불안정하긴 하지만 Anti-Aliasing Tuner 확장기능을 이용하면 클리어타입 설정 외에 다양한 텍스트 렌더링 모드를 지정해 줄 수 있습니다.

멀티터치 줌 기능 활성화

크롬이나 사파리만큼 매끈하진 않지만 PC나 맥에서 멀티터치로 줌을 조정하는 Pinch-To-Zoom 기능을 활성화 합니다.

browser.gesture.pinch.in : 값 cmd_fullZoomReduce
browser.gesture.pinch.in.shift : 값 cmd_fullZoomReset
browser.gesture.pinch.out : 값 cmd_fullZoomEnlarge
browser.gesture.pinch.out.shift : 값 cmd_fullZoomReset

이상으로 몇 가지 인터페이스 관련 트윅과 확장기능을 소개했는데요. 이제 막 정식버전이 출시된 만큼 앞으로 더 유용한 팁들이 많이 쏟아져 나오겠죠. 불여우의 자유도야 뭐.. 워낙 명불허전이니까요.. ^^;