파이어폭스 브라우저 커스텀 테마 제작하기

Creating a Custom Theme for Firefox Developer Edition

일반 웹 검색은 주로 사파리를 사용하지만, 개발할 때는  Firefox Developer Edition 브라우저를 선호합니다. 이 브라우저는 직관적인 개발자 도구 UI와 UX를 제공하며, 브라우저 내부 설정을 자유롭게 커스터마이징할 수 있기 때문입니다. 최근에는 블로그 컬러에 맞춘 나만의 브라우저 테마를 간편하게 제작할 수 있다는 점을 알게 되어 직접 도전해 보았습니다.

아래는 제가 제작한 🌊 Ocean Waves 파이어폭스 테마를 적용한 모습입니다.

이 글에서는 Firefox Color를 활용해 브라우저 테마를 제작하고 Firefox Add-ons Marketplace에 등록하여 브라우저를 더욱 개인화하는 과정을 다룹니다.

Access Firefox Color

먼저 Firefox Color 웹사이트에 접속합니다. 이 도구는 브라우저 내에서 바로 실행되며 별도의 설치 과정이 필요하지 않습니다.

Firefox Color의 주요 기능은 다음과 같습니다:

• Preset Themes: 기본 제공 테마를 선택하고 이를 기반으로 수정할 수 있습니다.
• Custom Colors: 브라우저의 텍스트, 배경, 버튼 색상을 직접 변경할 수 있습니다.
• Advanced Colors: 탭 경계선, 활성 메뉴 버튼 등 더 세부적인 UI 요소의 색상을 조정할 수 있습니다.
• Custom Backgrounds: 배경 이미지를 추가하거나 투명도를 조정할 수 있습니다.
• Saved Themes: 저장된 테마를 불러오거나 공유할 수 있습니다.

Custom Colors와 Advanced Colors 탭을 사용해 브라우저의 주요 디자인 요소를 조정할 수 있습니다. 예를 들어, 블로그의 주 색상과 어울리도록 툴바 배경과 텍스트 색상을 설정하고 강조 색상을 조화롭게 맞추면 일관성 있는 디자인을 완성할 수 있습니다.

Submit to Firefox Add-ons Marketplace

제작한 테마를 파일로 다운로드하여 개인적으로 사용할 수도 있지만, Firefox Add-ons Marketplace에 등록하면 다른 확장 프로그램처럼 관리하고 버전을 추적할 수 있으며, 다른 사용자와 공유할 수도 있습니다.

다음은 테마를 Marketplace에 등록하는 과정입니다:

1. Export Theme: Firefox Color에서 제작한 테마를 "Export" 버튼을 클릭해 .xpi 파일 형식으로 다운로드합니다.
2. Sign In to Developer Hub: Firefox Developer Hub에 접속해 계정으로 로그인합니다. 계정이 없다면 새로 생성해야 합니다.
3. Submit a New Add-on: 로그인 후 "Submit a New Theme" 버튼을 클릭하고, 다운로드한 .xpi 파일을 업로드합니다.
4. Add Theme Details: 테마 이름, 간단한 설명, 카테고리를 입력하고 테마 스크린샷을 업로드합니다. 이 스크린샷은 테마를 미리 보기 원하는 사용자들에게 매우 유용합니다.
5. Review and Publish: 업로드한 테마는 Firefox 검토 팀의 확인 과정을 거칩니다. 검토가 완료되면 Marketplace에 테마가 공개됩니다.

저는 테마를 제출한 후 약 하루 만에 승인을 받았고, 이제 다른 사용자들도 제 테마를 설치해 사용할 수 있습니다. 제출 상태는 Firefox Developer Hub에서 확인 가능합니다.

Release a New Version

테마를 업데이트하거나 새로운 버전을 출시하려면 기존 .xpi 파일과 비교해 변경 사항을 반영하고, 올바른 파일 구조와 버전 번호를 유지해야 합니다. 특히, Firefox Add-ons Marketplace는 동일한 버전 번호의 파일을 다시 업로드하는 것을 허용하지 않으므로 항상 새 버전 번호를 지정해야 합니다.

Firefox Color에서 테마를 수정한 후, .zip 파일 형식으로 내보내고 manifest.json 파일의 버전 번호를 업데이트해야 합니다. manifest.json 파일은 테마의 메타데이터를 포함하며, 여기에서 version 값을 기존보다 높은 값으로 변경해야 합니다.

{
    "manifest_version": 2,
-   "version": "1.0",
+   "version": "1.1",
    "name": "🌊 Ocean Waves",
    "theme" : {...}
}

• 기존 "version": "1.0" → 변경 후 "version": "1.1"
• Firefox는 Semantic Versioning 규칙을 따릅니다. 다음과 같이 버전을 증가시킬 수 있습니다:
  • 버그 수정: 1.0 → 1.0.1
  • 새로운 기능 추가: 1.0 → 1.1
  • 주요 변경 사항: 1.0 → 2.0

버전 번호는 기존 버전보다 높아야 하며, 새로운 버전으로 갱신하지 않으면 업로드 과정에서 "Duplicate Version" 오류가 발생할 수 있습니다.

압축 전에 파일이 다음과 같은 구조를 유지하고 있는지 확인하세요:

$ tree theme
theme
├── images
│   └── 0.png
└── manifest.json

• manifest.json 파일은 항상 최상위 경로에 있어야 합니다.
• 이미지나 기타 리소스 파일은 적절히 분류된 디렉터리에 배치합니다.

.xpi 파일은 .zip 형식으로 압축되며, 압축 과정에서 숨김 파일을 제외해야 합니다. 특히, macOS 환경에서는 __MACOSX와 같은 숨김 파일이 포함되는 경우 검토 과정에서 경고가 발생합니다. 따라서 다음과 같은 명령어를 실행하여 macOS 숨김파일을 제외하여 압축합니다.

$ zip -r theme_v1_1.xpi * -x "__MACOSX/*" ".*"

• zip -r: 디렉터리를 재귀적으로 압축.
• theme_v1_1.xpi: 생성할 파일 이름.
• *: 디렉터리 내 모든 파일 포함.
• -x "__MACOSX/*" ".*": 숨김 파일(__MACOSX, .*)을 제외.

압축한 .xpi 파일에는 반드시 manifest.json이 최상위 경로에 포함되어야 하며, 테마 리소스 디렉터리가 유지되어야 합니다.

새로운 버전의 .xpi 파일이 준비되었으면, Firefox Developer Hub에 로그인하고, 기존 테마의 Manage Version 섹션으로 이동합니다.

1. Upload a New Version 버튼을 클릭합니다.
2. 준비한 .xpi 파일을 업로드합니다.
3. 변경된 사항을 확인한 후 제출합니다.

새로운 버전도 처음과 마찬가지로 Firefox 검토 팀의 확인 과정을 거칩니다. 제출 후 검토 상태는 Developer Hub에서 확인할 수 있으며, 승인되면 기존 사용자들에게 새로운 버전이 자동으로 배포됩니다.

Customize Your Browser

Firefox Color를 사용해 손쉽게 브라우저 테마를 제작하고, 실제로 적용해 만족스럽게 사용 중입니다. 매일 마주하는 브라우저에 나만의 스타일을 더한 모습을 보는 것만으로도 큰 즐거움을 느낄 수 있었습니다. 😄

---

🔗 Firefox Color 공식 사이트
🔗 Firefox Developer Hub