파비콘과 Electron/Tauri: 데스크톱 웹 앱 브랜딩하기

웹 앱을 만들었고 이제 데스크톱 애플리케이션으로 패키징하고 싶습니다. Electron이나 Tauri를 실행하고 빌드 명령을 실행하면... 그 일반적인 기본 아이콘이 나타납니다. 원했던 전문적인 모습은 아닙니다.

문제는 데스크톱 앱 아이콘이 웹 파비콘과 완전히 다르게 작동한다는 것입니다. public 폴더에 있는 32x32 PNG 파일로는 부족합니다. 데스크톱 앱은 대부분의 웹 개발자가 생각하지 않는 여러 형식, 특정 크기, 플랫폼별 파일이 필요합니다.

파비콘만으로는 충분하지 않은 이유

웹 앱이 브라우저에서 실행될 때 파비콘은 탭에 표시됩니다. 간단합니다. 하지만 같은 앱을 Electron이나 Tauri로 래핑하면 갑자기 다음을 위한 아이콘이 필요합니다:

애플리케이션 창 제목 표시줄
독(macOS) 또는 작업 표시줄(Windows)
설치 프로그램 및 설정 마법사
"프로그램 추가/제거" 목록
파일 연결
Spotlight 검색 및 Finder 미리보기

이러한 각 컨텍스트는 다른 크기와 때로는 완전히 다른 형식을 기대합니다. 그래서 단일 파비콘 파일은 데스크톱 앱을 미완성처럼 보이게 합니다.

실제로 필요한 세 가지 형식

Windows용 ICO

Windows는 실제로 여러 크기를 하나의 파일에 담는 컨테이너인 ICO 형식을 사용합니다. ico 파일에는 16, 24, 32, 48, 64, 256 픽셀 레이어가 포함되어야 합니다. 256px 레이어는 Windows가 고DPI 디스플레이와 큰 아이콘 보기에 사용하므로 특히 중요합니다.

흔한 실수는 32px 레이어만 있는 ico를 생성하는 것입니다. 이것은 작업 표시줄에는 작동하지만, 시작 메뉴와 파일 탐색기에서 앱이 흐릿하게 보입니다.

macOS용 ICNS

Apple의 ICNS 형식은 ICO와 개념이 비슷합니다 - 여러 크기를 함께 묶습니다. 하지만 크기 요구사항이 더 엄격합니다. Retina 디스플레이를 위해 1x와 2x 버전 모두에서 16x16, 32x32, 128x128, 256x256, 512x512가 필요합니다.

macOS의 iconutil 명령은 특별히 구조화된 PNG 폴더를 icns 파일로 변환할 수 있지만, 솔직히 자동화된 도구가 더 쉽습니다.

Linux용 PNG

Linux 데스크톱 환경은 더 유연합니다. 대부분은 표준 크기(128, 256, 512)의 PNG 파일 세트를 허용합니다. 일부 electron-builder 및 Tauri 구성은 단일 고해상도 PNG를 가리키고 시스템이 스케일링을 처리하도록 합니다.

Electron 구성

대부분의 Electron 프로젝트가 사용하는 electron-builder를 사용하는 경우, 아이콘 구성은 package.json 또는 electron-builder.yml에 들어갑니다:

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

electron-builder는 buildResources 디렉토리(기본값 build)에서 아이콘 파일을 찾습니다. icon.icns, icon.ico 및 PNG 파일 세트를 거기에 놓으면 됩니다.

Electron Forge의 경우 프로세스는 비슷하지만 다른 구성 형식을 사용합니다. forge.config.js 파일이 각 플랫폼의 아이콘 경로를 처리합니다.

Tauri 구성

Tauri는 약간 다른 접근 방식을 취합니다. tauri icon 명령은 단일 소스 이미지에서 필요한 모든 형식을 생성합니다:

npm run tauri icon ./app-icon.png

이것은 모든 플랫폼에 적절하게 포맷된 파일이 있는 전체 아이콘 폴더를 생성합니다. 출력은 기본적으로 src-tauri/icons/로 이동합니다.

tauri.conf.json은 bundle 섹션에서 이 아이콘을 참조합니다:

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri 2.0은 이 구성을 단순화했습니다 - bundle 키는 이제 tauri 아래에 중첩되지 않고 최상위 레벨에 있습니다.

웹 파비콘은 여전히 중요합니다

사람들을 헷갈리게 하는 것이 있습니다: 데스크톱 아이콘을 설정한 후에도 웹 파비콘은 여전히 앱 내부에서 사용됩니다. Electron이나 Tauri 앱이 웹 콘텐츠를 로드할 때, 웹뷰는 여전히 브라우저처럼 favicon.ico를 요청합니다.

이것은 둘 다 필요하다는 의미입니다:

OS 레벨 UI를 위한 데스크톱 애플리케이션 아이콘 (icns, ico, png)
내부 웹뷰 콘텐츠를 위한 웹 파비콘

웹 파비콘을 건너뛰면 일부 내부 브라우저 크롬이나 개발자 도구에서 깨진 아이콘이 표시될 수 있습니다. 사소한 문제지만 쉽게 해결할 수 있습니다.

단일 소스에서 아이콘 생성하기

아무도 15개 이상의 아이콘 변형을 수동으로 만들고 싶어하지 않습니다. 실제로 작동하는 도구들입니다:

Electron용:

electron-icon-builder - 1024x1024 PNG를 주면 필요한 모든 것을 출력
electron-icon-maker - 유사한 기능, npm 패키지

Tauri용:

내장 tauri icon 명령 - 이미 Tauri CLI를 사용하고 있다면 가장 쉬운 옵션

범용:

Real Favicon Generator - 웹 기반, 웹 파비콘과 데스크톱 아이콘 모두 처리
IconVectors - 단일 SVG를 ICO, ICNS, PNG 세트로 변환

핵심은 최소 1024x1024 픽셀의 소스 이미지로 시작하는 것입니다. SVG는 완벽하게 확장되므로 더 좋습니다.

디자인 고려사항

데스크톱 아이콘은 웹 파비콘과 다른 컨텍스트에서 존재합니다. 몇 가지 염두에 둘 점:

단순함이 축소됩니다. 512px 아이콘은 멋지게 보일 수 있지만 16px에서 어떻게 렌더링되는지 확인하세요. 복잡한 디테일은 흐릿한 얼룩이 됩니다.

실제 배경에서 테스트하세요. macOS 독 아이콘은 반투명 배경 위에 있습니다. Windows 작업 표시줄 아이콘은 밝거나 어두운 테마에 있을 수 있습니다. 두 시나리오 모두에서 아이콘이 충분한 대비를 가지도록 하세요.

플랫폼 관습을 존중하세요. macOS 아이콘은 종종 미묘한 그림자와 둥근 모서리가 있습니다. Windows 아이콘은 더 평평한 경향이 있습니다. 정확히 따를 필요는 없지만, 인식하면 앱이 네이티브하게 느껴지는 데 도움이 됩니다.

마스크 가능한 변형을 고려하세요. 일부 컨텍스트(특히 모바일도 하는 경우 Android)는 아이콘을 원이나 둥근 사각형으로 자릅니다. 안전 영역을 염두에 두고 디자인하세요.

일반적인 문제와 해결책

재빌드 후 아이콘이 업데이트되지 않나요? Electron과 Tauri 모두 개발 중에 아이콘을 적극적으로 캐시합니다. 빌드 출력 디렉토리를 완전히 지우고 재빌드해 보세요.

Windows에서 흐릿한 아이콘? ico 파일에 256px 레이어가 없습니다. 필요한 모든 크기를 포함하는 도구로 재생성하세요.

macOS에서 일반 아이콘이 표시되나요? icns 파일이 잘못되었거나 잘못된 위치에 있을 수 있습니다. iconutil -c icns YourIcon.iconset -o icon.icns를 실행하여 처음부터 재생성하세요.

Linux에서 독에 아이콘이 표시되지 않나요? 일부 데스크톱 환경은 .desktop 파일을 통해 아이콘을 등록해야 합니다. electron-builder 또는 Tauri 구성에서 Linux 관련 설정을 확인하세요.

모든 것을 합치기

크로스 플랫폼 데스크톱 앱의 적절히 구성된 아이콘 설정은 다음과 같습니다:

build/
├── icon.icns          # macOS 애플리케이션 아이콘
├── icon.ico           # Windows 애플리케이션 아이콘
├── icon.png           # Linux용 512px
├── 256x256.png        # 추가 Linux 크기
└── 128x128.png

그리고 웹뷰 콘텐츠를 위한 일반 웹 파비콘은 public 또는 static 디렉토리에 있습니다.

추가 노력은 보상받습니다. 세련된 아이콘은 사용자에게 앱이 완성되고 전문적이라는 신호를 보냅니다 - 단순히 셸에 래핑된 웹 페이지가 아닙니다. 이것은 사람들이 가장 먼저 보는 것 중 하나이며, 첫인상이 중요합니다.

참고 자료

Electron Forge 아이콘 가이드 - Electron 앱에 아이콘을 만들고 추가하는 공식 문서
electron-builder 아이콘 - electron-builder 아이콘 설정을 위한 구성 참조
Tauri 앱 아이콘 - 아이콘 생성 및 구성을 위한 Tauri 2.0 문서
Apple 아이콘 이미지 형식 - ICNS 형식 사양에 대한 Wikipedia 참조
앱 아이콘 정의하기 - MDN - PWA용 앱 아이콘 요구사항에 대한 Mozilla 가이드