Skip to Content
문서📦 플랫폼과 출력📐 디자인 가이드라인

디자인 가이드라인

모양, 안전 영역, 시각적 무게는 플랫폼마다 다릅니다. 가이드를 따르면 네이티브하고 프로페셔널해 보입니다.

iOS

  • 형태: 슈퍼엘립스(Squircle). Zapicon에서 Squircle을 켭니다.
  • 크기: 20×20 @2x/@3x ~ 1024×1024 @1x.
  • 안전 영역: 주제는 대략 중앙 66% 안에.
  • 배경: 투명은 피하세요. iOS는 아이콘 전체를 채웁니다.
  • 스타일: 단순, 가운데, 가능하면 텍스트 없음.

Android

  • 형태: 적응형 아이콘은 기기가 마스크. 전경은 가장자리에 닿지 않게.
  • 크기: 48×48 mdpi ~ 192×192 xxxhdpi.
  • 안전 영역: 핵심은 지름 약 66% 원 안.
  • 레이어: Zapicon은 전경 PNG를 냅니다. 적응형이면 Android 프로젝트에서 배경 레이어를 합칩니다.
  • 스타일: Material은 굵은 형태와 분명한 실루엣.

macOS

  • 형태: 둥근 사각형. iOS Squircle만큼 극단적이지 않음.
  • 크기: 16×16 @1x/@2x ~ 512×512 @1x/@2x.
  • 스타일: Dock과 Finder는 최대 512 px라 큰 크기에서는 디테일을 더해도 됩니다.
  • ICNS: Zapicon이 자동 생성.

Windows

  • 형태: 정사각형 또는 투명 배경. UWP는 OS가 마스크, Win32는 아님.
  • 크기: ICO 하나에 16×16 ~ 256×256.
  • 스타일: 작업 표시줄·제목 표시줄 16×16에서도 읽혀야 함.
  • ICO: 표준 크기를 모두 넣습니다.

Web

  • Favicon: 16×16, 32×32 또는 SVG. Zapicon은 멀티 사이즈 ICO.
  • Apple touch icon: 홈 화면 북마크용 180×180 PNG.
  • PWA: 192×192와 512×512 PNG. 투명 또는 단색.
  • 스타일: 16×16에서도 favicon이 살아야 함.

Tauri

Tauri를 골라 세트를 내보낸 뒤 프로젝트 아이콘 폴더에 복사.

Flutter

Flutter를 고르면 Android와 iOS를 한 번에. 적응형 배경은 Flutter 프로젝트에서 따로.

Zapicon 가이드

에디터에서 디자인 가이드를 겹칩니다.

  • Apple 아이콘 그리드
  • Android 적응형 그리드
  • Windows Fluent 그리드
  • 황금비 나선
  • 픽셀 그리드

에디터를 떠나지 않고 정렬을 확인할 수 있습니다.

마지막 업데이트