모바일 앱 아이콘 SVG 베스트 프랙티스: iOS 및 Android 가이드

앱 아이콘은 사용자와의 첫 번째 접점입니다. iOS든 Android든 SVG 아이콘을 만들고 최적화하는 방법을 이해하는 것은 모든 기기에서 전문적인 외관을 구현하는 데 필수적입니다.

앱 아이콘에 SVG를 사용하는 이유

SVG 파일은 앱 아이콘의 소스 포맷으로 이상적입니다. 래스터 이미지와 달리 SVG는 작은 20×20 아이콘부터 대형 마케팅 디스플레이까지 품질 손실 없이 확대/축소됩니다. 하나의 SVG 소스 파일을 관리하고 필요한 모든 포맷을 생성하세요.

주요 장점

• 해상도 독립적 — 모든 크기에 대응하는 하나의 소스 파일
• 작은 파일 크기 — 보통 1~5KB (PNG는 50~200KB)
• 편집 가능 — 색상과 형태를 즉시 변경
• 미래 대비 — 어떤 해상도에도 대응 가능

iOS 아이콘 사양

Apple은 다양한 컨텍스트에 맞는 특정 아이콘을 요구합니다. 필요한 크기는 다음과 같습니다:

iOS 디자인 가이드라인

• 정사각형 캔버스 사용 (둥근 모서리 없음 — iOS가 자동으로 마스크 적용)
• 투명도 피하기 (iOS는 앱 아이콘에서 투명도를 지원하지 않음)
• 중요한 요소를 안전 영역 내에 배치 (~중앙 영역의 80%)
• 밝은 배경과 어두운 배경 모두에서 테스트

{
  "images": [
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "icon-60@2x.png",
      "scale": "2x"
    },
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "icon-60@3x.png",
      "scale": "3x"
    },
    {
      "size": "1024x1024",
      "idiom": "ios-marketing",
      "filename": "icon-1024.png",
      "scale": "1x"
    }
  ]
}

Android 아이콘 사양

Android는 전경과 배경을 위한 별도 레이어가 있는 적응형 아이콘을 사용하여 맞춤형 경험을 제공합니다.

Android 적응형 아이콘

Android 8.0(API 26)부터 적응형 아이콘은 2레이어 시스템을 사용하여 시스템이 다양한 마스크(원, 스쿼클, 둥근 사각형)를 적용할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

Android용 VectorDrawable

Android는 Android 리소스에 최적화된 SVG와 유사한 포맷인 VectorDrawable 파일을 네이티브로 지원합니다:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
</vector>

아이콘을 위한 SVG 최적화

SVG를 앱 리소스로 변환하기 전에 파일 크기를 줄이고 렌더링 성능을 향상시키기 위해 최적화하세요:

// 앱 아이콘용 SVGO 설정
module.exports = {
  plugins: [
    'removeDoctype',
    'removeComments',
    'removeMetadata',
    {
      name: 'removeViewBox',
      active: false // 확장성을 위해 viewBox 유지
    },
    'cleanupIds',
    'mergePaths',
    'convertShapeToPath',
    {
      name: 'convertPathData',
      params: { precision: 2 }
    }
  ]
};

최적화 결과

SVG에서 앱 리소스로 변환

VectoSolve를 사용하면 SVG를 iOS 및 Android에 필요한 정확한 크기로 변환할 수 있습니다. SVG를 업로드하고 타겟 크기를 선택한 후 픽셀 퍼펙트한 리소스를 다운로드하세요.

권장 워크플로우

1. 디자인 — 벡터 에디터에서 SVG로 아이콘 제작
2. 최적화 — SVGO 또는 VectoSolve로 SVG 정리
3. 테스트 — 최소 크기(20×20)와 최대 크기(1024×1024)에서 확인
4. 내보내기 — 필요한 모든 변형 생성
5. 검증 — 실제 기기에서 테스트

흔한 실수

• 과도한 디테일 — 작은 아이콘은 세밀한 디테일이 사라집니다. 48px 이하에서는 단순화
• 아이콘 내 텍스트 — 작은 크기에서 읽을 수 없습니다. 도형과 심볼을 사용하세요
• 래스터 효과 — 그림자와 블러는 확대/축소에 부적합. 솔리드한 도형 사용
• 다크 모드 무시 — 밝은 배경과 어두운 배경 모두에서 아이콘이 보이는지 확인
• 안전 영역 — Android에서 핵심 요소를 72dp 안전 영역 안에 배치

테스트 및 검증

앱을 제출하기 전에 다음 환경에서 아이콘을 확인하세요:

• 다양한 기기 (소형 폰, 태블릿, 데스크톱)
• 라이트 모드와 다크 모드
• 다양한 Android 마스크 (원, 스쿼클, 둥근 사각형)
• 알림 배지 있는 경우와 없는 경우
• 앱 스토어에서 경쟁 아이콘 옆에 표시했을 때

<ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@mipmap/ic_launcher"
    android:contentDescription="App Icon"
    tools:srcCompat="@mipmap/ic_launcher" />

결론

SVG에서 앱 아이콘을 만드는 것은 iOS와 Android가 요구하는 다양한 해상도를 지원하는 가장 효율적인 워크플로우입니다. 마스터 파일을 SVG로 보관하고, 내보내기 전에 최적화하며, 항상 실제 기기에서 테스트하세요.

SVG 아이콘을 변환할 준비가 되셨나요? VectoSolve로 앱에 필요한 모든 리소스를 자동 생성해 보세요.