모바일 앱 아이콘 디자인: 벡터 워크플로우 필수 사항

앱 아이콘은 전체 제품에서 가장 열심히 일하는 에셋입니다. 붐비는 홈 화면의 60x60 포인트 썸네일에서 앱을 판매하고, 스토어 검색 결과의 가혹한 압축을 견디며, 사용자가 스크롤하기 전에 무엇을 하는지 전달하는 데 약 0.3초가 있습니다. 잘못하면 다운로드를 잃습니다. 제대로 하려면 벡터에서 시작하세요.

벡터 소스 파일이 필수인 이유

아직 Photoshop에서 512x512로 앱 아이콘을 디자인하고 있다면, 모래 위에 짓고 있는 것입니다. iOS와 Android 사이에서 하나의 디자인으로 20개 이상의 별도 PNG 파일이 필요합니다. 가장 작은 것은 16x16(favicon), 가장 큰 것은 1024x1024(App Store) — 64배 크기 차이입니다.

래스터 아트워크는 스케일링 시 열화됩니다. 벡터 아트워크는 그렇지 않습니다. 벡터 소스 파일 — VectoSolve의 SVG 또는 Illustrator의 AI/EPS — 은 다음을 제공합니다:

• 무한한 확장성 어떤 해상도에서도 품질 손실 없음
• 한 번 편집으로 전파: 색상을 한 번 변경하고 모든 것을 다시 내보내기
• 수학적 정밀도: 곡선은 매끄럽게, 모서리는 선명하게 유지
• 미래 대비: 플랫폼이 새 필수 크기를 추가해도 이미 준비 완료

"

앱 아이콘은 사용자가 제품에 대해 갖는 첫 번째이자 가장 빈번한 인상입니다. 벡터 기반을 가질 자격이 있습니다.

iOS vs Android 아이콘 요구사항

두 플랫폼은 완전히 다른 아이콘 철학을 가지고 있습니다. 둘 다를 위해 디자인한다는 것은 두 시스템을 깊이 이해하는 것을 의미합니다.

디자인 그리드와 키라인 셰이프

Apple과 Google 모두 아이콘 그리드를 공개합니다. 이것은 제안이 아닙니다 — 잘 디자인된 아이콘이 홈 화면에서 나란히 "맞게" 느껴지는 이유입니다.

Apple의 키라인 셰이프 (1024x1024 내): 지름 860px 원, 672px 사각형, 592x840 세로 직사각형, 840x592 가로 직사각형. 아이콘의 주요 형태는 이 중 하나에 맞춰야 합니다.

Google의 Material 그리드 (108x108 dp 캔버스, 72x72 dp 활성 영역): 52dp 원, 44dp 사각형, 36x52dp 세로 직사각형, 52x36dp 가로 직사각형.

적응형 아이콘 시스템 (Android)

Android의 적응형 아이콘 시스템은 디자이너를 놀라게 합니다. 하나의 평면 이미지 대신 두 개의 별도 레이어를 제공합니다:

전경 레이어 (108x108 dp): 로고나 심볼을 포함합니다. 안전 영역은 중앙 66x66 dp뿐입니다 — 그 외부는 기기의 마스크에 따라 클리핑될 수 있습니다.

배경 레이어 (108x108 dp): 단색, 그라데이션 또는 패턴. 마스킹 후 항상 완전히 보이며 불투명해야 합니다.

108x108 dp 전체 캔버스
┌──────────────────────┐
│   ┌──────────────┐   │
│   │  안전 영역   │   │
│   │   66x66 dp   │   │
│   └──────────────┘   │
└──────────────────────┘
       ↓ 마스크 적용
    ◯ 또는 ▢ 또는 ⬡ 등

런처가 마스크 모양을 선택합니다. 아이콘은 어떤 마스크에서든 올바르게 보여야 합니다 — 원, 둥근 사각형, squircle 또는 커스텀 OEM 모양. 적응형 아이콘은 패럴랙스 모션도 지원합니다: 기울이거나 길게 누르면 전경이 배경에 대해 이동하므로, 간격이 노출되지 않도록 충분한 블리드를 확보하세요.

내보내기 워크플로우: 벡터에서 모든 크기로

1. 마스터 벡터 디자인

벡터 에디터에서 1024x1024로 아이콘을 만드세요. 깨끗하고 닫힌 패스를 사용하세요. 작은 크기에서 실패하는 효과(복잡한 그라데이션, 최종 렌더에서 2px 미만 스트로크)를 피하세요.

2. 플랫폼 변형 만들기

• iOS: 단일 플랫 컴포지션, 투명도 없음, sRGB
• Android: foreground.svg와 background.svg로 분리
• Web/PWA: favicon에 투명도 필요할 수 있음; 마스크 가능한 아이콘 변형 고려

3. 배치 내보내기

# iOS sizes
for size in 40 58 60 76 80 87 120 152 167 180 1024; do
  rsvg-convert -w $size -h $size icon.svg > "ios/icon_${size}.png"
done

# Android density buckets
for pair in "mdpi:48" "hdpi:72" "xhdpi:96" "xxhdpi:144" "xxxhdpi:192"; do
  density="${pair%%:*}"; size="${pair##*:}"
  rsvg-convert -w $size -h $size icon.svg > "android/${density}/ic_launcher.png"
done

4. 각 내보내기 검증

각 파일에서 곡선의 앨리어싱 아티팩트, 작은 크기에서의 디테일 손실, 색상 정확도, 올바른 크기를 확인하세요. 스토어는 잘못된 크기를 무자비하게 거부합니다.

접근성 고려사항

아이콘 접근성은 대부분의 디자이너가 간과하지만 수백만 사용자에게 영향을 미칩니다.

색각 이상: 남성의 약 8%와 여성의 0.5%가 영향을 받습니다. 전경과 배경 사이에 최소 3:1 휘도 대비를 확보하세요. 빨강/초록 구별에 의존하지 마세요. 디자인을 그레이스케일로 채도를 낮춰 테스트하세요.

작은 크기에서의 인지 부하: 하나의 명확한 초점 요소를 사용하세요. 48px 이하에서 노이즈가 되는 세부 사항을 피하세요. 실루엣을 특징적으로 만드세요 — 저시력 사용자는 형태 인식에 의존합니다.

플랫폼 기능: iOS의 고대비 모드는 배경 틴트를 변경할 수 있습니다. Android의 고대비는 적응형 아이콘에 윤곽선을 적용할 수 있습니다 — 강제 윤곽선에서 아이콘이 작동하는지 확인하세요.

전체 워크플로우

1. 리서치: 카테고리 내 경쟁사 아이콘 스크린샷 캡처. 무엇이 돋보이는지 찾기.
2. 스케치: 메타포, 레터폼, 추상적 형태를 탐구하는 20개 이상의 러프 컨셉 그리기.
3. 벡터화: 최고의 스케치를 벡터 에디터로 가져오거나 VectoSolve를 사용하여 손으로 그린 스케치를 깨끗한 SVG 경로로 변환.
4. 그리드에서 조정: Apple/Google 키라인 셰이프에 맞추기. 적극적으로 단순화.
5. 각 크기에서 테스트: 16px, 48px, 60px, 120px, 512px, 1024px에서 미리보기.
6. 내보내기: 벡터 소스에서 모든 필요 크기를 배치 내보내기.
7. 검증: 실제 기기, 라이트 및 다크 모드, 스토어 검색 목업에서 테스트.
8. 반복: 벡터 소스를 수정하고 다시 내보내기. 래스터 내보내기를 직접 편집하지 마세요.

앱 아이콘은 주목을 위해 수백만 개의 다른 아이콘과 경쟁합니다. 벡터 워크플로우만이 제공할 수 있는 정밀도를 받을 자격이 있습니다. VectoSolve로 벡터 기반을 확립하고, SVG 에디터에서 조정하고, 모든 크기의 모든 픽셀이 정확히 배치한 곳에 있다는 확신을 가지고 내보내세요.