앱에는 텍스트와 색상만 포함될 수 있지만 로고나 삽화와 같은 시각적 요소를 더 추가하는 것이 좋습니다. Android에는 그래픽 효과를 만들거나 모션을 추가하기 위해 다양한 라이브러리와 함께 앱에 그래픽을 추가하기 위한 특정 권장사항이 있습니다.
Android 애셋은 화면에 그려지는 리소스 유형인 드로어블이라고 합니다. 여기에는 비트맵, 도형, 벡터가 포함되지만 이에 국한되지 않습니다.
이미지와 그래픽을 만들 때 다음 사항에 유의하세요.
- 애셋에 변경할 수 없는 텍스트는 포함하지 마세요.
- 가능하면 벡터 형식을 먼저 사용합니다.
- 해결 방법 버킷에 애셋을 제공합니다.
- 배경 이미지와 텍스트 사이에 충분한 스크림을 제공합니다.
- Android는 그라데이션, 채색, 블러와 같은 다양한 이미지 효과를 얻을 수 있지만 일부는 성능 비용이 더 많이 듭니다.
- 애니메이션 벡터 드로어블은 작은 UI 애니메이션에 확장 가능한 형식을 제공합니다.
Android용 애셋을 내보내는 방법
- 애셋 이름의 형식을 소문자로 지정합니다.
- 단순 애셋을 SVG로 내보낼 수 있도록 설정합니다.
- 사진과 같은 복잡한 이미지를 WebP, PNG, JPG로 내보내도록 설정하세요.
- 다음 표에 표시된 대로 올바른 해상도 배율을 설정합니다.
| 화면 크기 | 배율 |
|---|---|
mdpi |
1배 |
hdpi |
1.5배 |
xhdpi |
2배 |
xxhdpi |
3배 |
xxxhdpi |
4배 |
원하는 경우 Android 스튜디오를 사용하여 SVG를 벡터 드로어블 (VD)으로 변환할 수 있습니다. 다음 이미지와 같이 핸드오프 해상도에 맞는 디렉터리로 애셋을 정리합니다. 예를 들어 폴더 이름에 화면 크기를 포함하세요.
저작물 유형
Android는 다음과 같은 애셋 유형을 지원합니다.
벡터
벡터 그래픽은 무손실 형식이므로 크기를 조정할 때 시각적 정보가 손실되지 않습니다. 벡터는 이미지를 만들기 위해 채워지는 수학적 점으로 구성됩니다.
벡터 형식
Android는 SVG 및 벡터 드로어블과 같은 벡터 이미지 형식을 지원합니다.
벡터 드로어블은 SVG와 비슷해 보이지만 XML 기반입니다. 또한 그라데이션과 같은
다양한 속성도 지원합니다. 지원되는 항목에 관한 자세한 내용은 VectorDrawable를 참고하세요. Vector Asset Studio를 통해 SVG를 벡터 드로어블로 변환할 수 있습니다.
사용 사례
아이콘은 크기가 작기 때문에 벡터 형식을 사용하여 만드는 것이 가장 좋습니다. 애니메이션 벡터 드로어블을 사용하여 아이콘에 모션을 추가할 수 있습니다.
- 삽화는 사용자를 안내하거나 개념을 설명하거나 아이디어를 표현하는 데 도움이 되는 그래픽입니다. 일반적으로 브랜드 스타일을 표현합니다.
- 히어로 삽화는 나머지 콘텐츠 중에서 강조되며 전체적인 디자인과 분위기를 설정하고 기본 정보를 설명하는 데 사용됩니다.
- Spot 삽화는 더 작고, 일반적으로 인라인이며 주변 콘텐츠를 지원합니다.
래스터
손실(lossy) 그래픽, 즉 압축 또는 배율 조정을 통해 조작하면 디테일이 손실되는 그래픽은 이미지를 구성하는 픽셀로 구성됩니다. 래스터 그래픽은 일반적으로 사진이나 복잡한 그라데이션과 같은 자세한 이미지에 사용됩니다. 이미지 크기가 조정될 때 세부정보가 손실되므로 이러한 이미지를 여러 해상도로 내보냅니다.
래스터 형식
Android는 PNG, GIF, JPG, WebP와 같은 래스터 이미지 형식을 지원합니다.
사용 사례
사용 사례에는 다양한 질감으로 인해 다양한 색상 팔레트와 그라데이션이 나타나는 이미지 또는 베지어 포인트 집합이 지나치게 복잡한 이미지가 포함됩니다. 사용 사례에는 제품 사진, 위치 세부정보 등 매우 상세한 사진 애셋도 포함될 수 있습니다.
크기 조정
확장 소재를 만들 때는 다음 사항을 고려하세요.
해결 버킷
앱은 화면 밀도 범위 또는 버킷에 따라 비트맵 그래픽을 제공해야 합니다. 운영체제는 이러한 버킷을 사용하여 해당 기기에 올바른 그래픽을 자동으로 표시합니다. 각 버킷의 애셋을 제공하여 모든 기기에 고화질 그래픽이 표시되도록 합니다.
패딩
아이콘 및 유사한 소형 애셋에는 애셋에 충분한 터치 영역 공간을 제공하고 일관된 크기를 보장하기 위해 내장 (내장) 패딩이 포함되어야 합니다.
파일 이름
Android 애셋은 소문자이며 해상도 접미사가 없습니다.
파일 및 프로젝트를 체계적으로 유지하려면 일관된 이름 지정 규칙과 구조를 유지하세요. 예를 들어 'ic_...' 접두사를 사용해 아이콘의 이름을 지정하면 프로젝트의 모든 아이콘을 정리하고 개발 중에 아이콘을 빠르게 식별할 수 있습니다.
기타 앱 확장 소재
앱 아이콘
런처 아이콘은 홈 화면에 있습니다. 시스템 UI에서 흑백 알림, 상태 표시줄, 위젯을 비롯한 흑백 아이콘을 찾습니다.
적응형 아이콘의 경우 벡터 드로어블로 앱 아이콘의 형식을 지정하고 기존 아이콘의 경우 PNG의 형식을 지정합니다. 앱 아이콘 만들기 및 미리보기에 관한 자세한 내용은 앱 아이콘 디자인 및 미리보기를 참고하세요.
스플래시 화면
Android 12부터 앱이 열리는 동안 앱 아이콘이 표시되는 애니메이션 스플래시 화면을 표시할 수 있습니다.
배치
화면에서 이미지의 크기 조정 및 위치가 어떻게 달라지는지 확인하세요. 맞춤, 자르기, 채우기 높이, FillWidth, FillBounds, Inside, None을 사용하여 이미지의 크기를 설정할 수 있습니다.
이미지를 도형으로 잘라 추가 효과를 만들 수도 있습니다.
반응형 자르기
이미지를 반응형으로 표시하려면 다양한 중단점 범위에서 이미지가 잘리는 방식을 정의합니다. 여러 중단점 범위에서 자르기는 다음을 수행할 수 있습니다.
- 하나의 고정 비율을 유지하세요.
- 다양한 비율에 맞게 조정하세요.
- 고정된 이미지 높이를 유지합니다.
하나의 비율 유지
이미지 크기 조정은 중단점 범위에서 하나의 고정 비율을 유지할 수 있습니다.
다양한 비율에 맞게 조정
이미지 비율은 다양한 중단점 범위에 맞게 조정될 수 있습니다. 예를 들어 그림 9에서는 중단점 간에 이미지 비율이 1:1에서 16:9로 변경됩니다.
고정된 이미지 높이
이미지 크기 조정은 중단점 범위 내에서, 그리고 여러 중단점 범위 내에서 고정된 높이와 유동적인 너비를 유지할 수 있습니다. 이미지는 고정된 높이를 유지하는 반면 중단점 사이의 너비는 유동적입니다.
효과
Android에는 다양한 이미지 효과가 내장되어 있습니다. 일반적인 효과는 다음과 같습니다.
그라디언트
Compose에서 브러시를 사용하여 화면에 무언가를 그립니다. 여러 브러시를 사용하여 다양한 색상이나 그라데이션으로 도형을 그릴 수 있습니다. 기본 제공되는 그래디언트 브러시를 사용하여 다양한 그라데이션 효과를 적용할 수 있습니다. 이러한 브러시를 사용하면 그라데이션을 만들 색상 목록을 지정할 수 있습니다.
중지가 발생하는 부분의 색상 및 백분율 목록을 제공하는 한 그라데이션 브러시는 색상 중지와 타일 지정을 추가하여 고급 그라데이션을 사용할 수 있습니다. 컨테이너나 도형을 사용하여 그라데이션, 단색 채우기 또는 이미지를 자릅니다.
흐리게 처리
Modifier.blur() 메서드를 사용하고 흐림 비율을 제공하여 이미지에 블러 효과를 적용합니다. 블러는 성능에 영향을 줄 수 있고 Android 12 이상을 실행하는 기기에서만 사용할 수 있으므로 주의해서 사용하세요. 자세한 내용은 이미지 컴포저블 흐리게 처리를 참고하세요.
혼합 모드
Android는 디자인 소프트웨어에서 볼 수 있는 결합 또는 곱셈과 같은 유사한 불리언 연산 및 혼합 모드를 통해 이미지를 수정할 수 있습니다. 자세한 내용은 BlendMode를 참고하세요.
색조
혼합 모드 및 채우기를 사용하여 애셋에 색조를 조정합니다. 이렇게 하면 단일 애셋을 보유하면서 다양한 색상을 적용하여 생성되는 애셋의 양을 줄일 수 있습니다.
움직임
그래픽을 프로그래매틱 방식으로 애니메이션 처리하여 모션 파일을 업로드하는 대신 모션 그래픽을 만들 수 있습니다. 이렇게 하면 유연성을 높이고 애셋 리소스를 줄일 수 있습니다.
애니메이션 벡터 드로어블을 사용하면 작은 UI 애니메이션을 만들 수 있습니다. 아니면 Compose에서 키프레임을 사용한 애니메이션 적용에 관해 자세히 알아보세요. 이미지 효과에 관한 자세한 내용은 이미지 맞춤설정을 참고하세요.