설정
최신 버전의 파이어폭스를 다운로드하여 설치하세요. DOM Inspector도 함께 설치합니다.
테마 압축 풀기
이미 기존에 파이어폭스에서 사용할 수 있도록 만들어진 어떤 테마를 살펴보더라도, 파이어폭스의 기본 테마인 Winstripe와의 일관성을 발견할 수 있다. 이 테마는 파이어폭스의 설치 디렉토리에 존재하는 <tt>classic.jar</tt> 파일 안에 들어 있다. .jar 파일은 zip과 확장자만 다르지 그 압축 구조는 같기 때문에 일반적인 zip 압축 프로그램을 사용하여 풀어볼 수 있다. 만약에 압축 프로그램에서 .jar를 지원하지 않는다면 <tt>classic.zip</tt>과 같이 파일 이름을 바꾸고 압축을 해제할 수 있다.
Classic.jar 의 위치 찾기
Linux: /usr/lib/MozillaFirefox/chrome/classic.jar
Windows: \Program Files\Mozilla Firefox\chrome\classic.jar
Mac OS X:
- applications 폴더를 엽니다.
- Control 버튼과 함께 파이어폭스 아이콘을 클릭합니다. 그리고 패키지 보기(Show Package)를 선택합니다.
- contents/MacOS/Chrome/classic.jar 로 들어갑니다.
<tt>classic.jar</tt>를 다른 쉽게 접근할 수 있는 폴더로 이동합니다. <tt>Classic</tt>를 추천합니다. 그리고 그 폴더에서 압축을 풀어 놓습니다.
classic.jar의 내부를 들여다봅시다
<tt>classic.jar</tt>의 압축을 풀어보면 <tt>skin</tt> 디렉토리와, <tt>preview.png</tt>, 그리고 <tt>icon.png</tt> 파일이 들어 있습니다.
- <tt>skin</tt>
- 이 디렉토리 안에는 스킨을 이용하는 모든 훌륭한 재료들을 포함하는 <tt>classic</tt> 디렉토리가 있습니다.
- <tt>classic</tt>
- <tt>classic</tt> 디렉토리는 다음과 같은 디렉토리들을 포함합니다.
- <tt>browser</tt>
- <tt>browser</tt> 디렉토리에는 툴바 아이콘들이 들어 있습니다. 북마크 관리자나 설정창에 사용되는 아이콘도 여기에 들어 있습니다.
- <tt>global</tt>
- <tt>global</tt> 디렉토리는 테마에서 특별히 중요한 부분으로, 브라우저의 외관을 설정하는 중요한 CSS 파일을 담고 있습니다.
- <tt>mozapps</tt>
- <tt>mozapps</tt> 디렉토리에는 브라우저와 확장 관리자, 업데이트 마법사를 위한 스타일 및 아이콘이 들어 있습니다.
- <tt>help</tt>
- 이 디렉토리에는 헬프 윈도우에 필요한 테마 파일들이 들어 있습니다.
- <tt>communicator</tt>
- 이 디렉토리의 내용은 사용되지 않으며 추후 삭제될 것입니다.
새로운 테마 설치하기
아무래도 라이브 에디트를 설정하는 것에 부분부분 어려운 점이 있다보니, 일단은 직접 파이어폭스 테마를 만들며 변화하는 모습을 지켜보기 전에 기존의 테마를 설치할 수 있는 상태로 리패키징하는 법을 먼저 배우는 것이 좋겠습니다. 이 부분에서 우리는 작업에 필요한 테마를 "My_Theme"라고 부를 것이지만, 다른 이름으로 불러도 자유입니다.
필요한 파일 복사하기
먼저 첫번째 과정은 필요한 모든 파일을 올바른 디렉토리 구조로 옮겨넣는 것입니다. <tt>My_Theme</tt>라는 이름의 디렉토리를 하나 만드세요. 이 디렉토리로 들어가 <tt>browser</tt>, <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt>, 그리고 <tt>mozapps</tt>와 같은 이름의 디렉토리들을 만듭니다. <tt>classic.jar</tt> 파일을 열어 보았을 때와 같은 구조이지요, 여기에다가 <tt>icon.png</tt> 파일과 <tt>preview.png</tt> 파일을 만들어 넣습니다.
설치 파일 만들기
Contents.rdf
contents.rdf 파일을 <tt>\My_Theme</tt> 디렉토리에 집어넣고 텍스트 에디터를 사용하여 열어보겠습니다. 이 파일은 스킨에 대해 기술해 놓은 작은 XML 데이터베이스로 이루어져 있습니다.
이 파일에는 "My_Theme"의 구성 요소들을 찾아볼 수 있고, 이 내용을 새로 만드는 테마에 맞추어 이름을 바꿀 수도 있습니다.
패키지 섹션은 당신이 변경하는 브라우저의 컴포넌트를 목록으로 나타냅니다. 챗질라에서도 이 스킨을 사용한다면 우리는 챗질라에 맞추기 위해 몇 줄을 추가하거나 바꾸어야 할 것입니다. 그러나 지금의 목록은 우리가 변경한 모든 것을 반영하고 있으므로, 이 섹션에서 이전 것을 사용하였던 부분에 대해서면 여기서 파란 색으로 표시된 부분에 이름과 버전에 맞게 변경해주면 됩니다.
<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/> <RDF:li resource="urn:mozilla:skin:My_Theme:editor"/> <RDF:li resource="urn:mozilla:skin:My_Theme:global"/> <RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/> <RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>
파일을 저장하고 에디터를 종료합니다.
install.rdf
install.rdf를 복사하여 My_Theme 디렉토리 안에 집어넣습니다. 그리고 이 파일을 텍스트 에디터로 열어봅니다. 이 파일은 스킨에 대해 기술해 놓은 작은 XML 데이터베이스 파일입니다.
<Description about="urn:mozilla:install-manifest">
<em:id>{Themes_UUID}</em:id>
<em:version>Themes_Version</em:version>
첫 섹션은 당신의 테마를 위하여 UUID를 확립하고 버전을 부여하는 부분을 포함합니다. 이런 내용을 입력하고 스크롤을 내려봅니다. 또한 당신은 타겟 어플리케이션, 여기서는 파이어폭스가 되겠지요. 이 스킨을 사용할 수 있는 파이어폭스의 버전 범위를 명기해야 합니다. 다음과 같이 말이지요.
<em:targetApplication>
<Description>
<!-- Firefox's UUID -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>Min_FF_Version</em:minVersion>
<em:maxVersion>Max_FF_Version</em:maxVersion>
</Description>
</em:targetApplication>
위와 같은 문제들을 해결하였다면 버전으로 인하여 테마가 깨지거나 엉망이 되는 문제는 피할 수 있을 것입니다.
CSS 파일
이들 디렉토리에 들어있는 CSS 파일은 브라우저의 어느 부분에 그림을 넣고, 버튼이나 컨트롤의 테두리나 두께 등을 정의하여 어떻게 보일지를 지정하는 데 사용됩니다. 그러면 예를 들어서 표준 버튼을 한번 바꾸어 봅시다.
<tt>global</tt> 디렉토리로 들어가 <tt>button.css</tt> 파일을 텍스트 에디터로 열어봅시다. 스크롤바를 내려 button { 으로 시작되는 섹션을 찾아봅시다. 이 섹션은 기본 상태, 그러니까 마우스를 위로 올리거나 선택하지 않았고, 그렇다고 사용중지 상태도 아닌 일반적인 버튼의 모양을 정의하는 섹션입니다.
background-color: 부분에 DarkBlue를 입력하고, color: 부분에 White 라고 입력한 뒤 파일을 저장합시다. 다른 몇 가지 테스트를 더 해볼 수도 있을 것입니다.
JAR 파일로 리패키징하기
이제 다음과 같은 디렉토리 구조를 JAR 파일로 리패키징하는 일만 남았습니다. 좋아하는 압축 프로그램을 사용하여 다음 구조를 zip으로 압축합시다:
/browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /preview.png
이 상태로 그냥 묶는 것이 아니라, 이 구조가 들어있는 부모 디렉토리인 <tt>My_Theme</tt>째 묶어야 설치할 때 에러 메시지를 보지 않을 수 있을 것입니다.
웹에서 바로 설치할 수 있도록 만들려면
일단 JAR 파일을 웹에 올리고, 클릭하면 바로 설치할 수 있도록 만들기 위해 자바스크립트 하나를 살펴보겠습니다.
<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, "myskin.jar", "My Skin Theme")'>누르면 스킨이 설치됩니다</a>
하드 디스크에 JAR 형태로 존재하는 스킨 파일을 설치하려면 웹 인스톨러 를 사용하여 해당 파일을 업로드하고 바로 실치할 수 있습니다. 혹은 모질라에서 테마 윈도우를 띄우고 .jar 파일을 끌어당겨 놓을 수도 있습니다.