Image Size and Resolution
이미지 크기와 해상도
The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.
iOS 시스템은 포인트를 계산하여 픽셀을 화면 위에 배치하고 콘텐츠를 보여줍니다. 기본적인 해상도의 화면은 1:1 픽셀의 밀도를 가지고 있습니다. 한 픽셀이 곧 1포인트인 셈입니다. 반면 고해상도의 화면은 더 빽빽한 밀도를 가지고, 스케일 팩터(눈금 계수)가 2.0이나 3.0까지 올라가죠. 그 결과, 고해상도 화면은 더 많은 픽셀을 가진 이미지를 요구하게 됩니다.
For example, suppose you have a standard resolution (@1x) image that's 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.
예를 들어, 기본 해상도의 100*100px의 이미지가 있다고 해봅시다. 2배 해상도 버전에선 이 이미지가 200*200px이 될 것이고, 3배 해상도 버전에선 300*300px 이미지가 될 것입니다.
*고정값-> 포인트, 가변값-> 픽셀로 생각하자!
Supply high-resolution images for all artwork in your app, for all devices your app supports. Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor.
앱의 모든 아트워크는 고해상도 이미지로 지원하세요. 앱을 지원하는 모든 기기에서 충실히 사용할 수 있도록요. 특정 스케일 팩터(눈금 계수)에 맞춰 이미지의 픽셀 수를 곱하여 기기에 대응할 수 있습니다.
| Device | Scale Factor |
| 12.9" iPad Pro | @2x |
| 11" iPad Pro | @2x |
| 10.5" iPad Pro | @2x |
| 9.7" iPad | @2x |
| 7.9" iPad mini 4 | @2x |
| iPhone XS Max | @3x |
| iPhone XS | @3x |
| iPhone XR | @2x |
| iPhone X | @3x |
| iPhone 8 Plus | @3x |
| iPhone 8 | @2x |
| iPhone 7 Plus | @3x |
| iPhone 7 | @2x |
| iPhone 6s Plus | @3x |
| iPhone 6s | @2x |
| iPhone SE | @2x |
Designing High-Resolution Artwork
고해상도 이미지 디자인하기
Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.
8X8 픽셀 그리드를 사용하세요. 그리드를 사용하면 선을 깔끔하게 유지하며 콘텐츠는 모든 사이즈에서 산뜻하게 유지될 것입니다. 또한 리터치나 선명하게 효과를 쓸 일도 줄어들고요. 이미지의 가장자리를 그리드에 맞춰 크기를 줄였을 때도 소수점 단위의 픽셀이나 뿌연 부분이 생기지 않도록 하세요.
Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it's lossless, compression artifacts don't blur important details or alter colors. It's a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.
적절한 확장자로 이미지를 만드세요. 일반적인 경우 비트맵, 래스터된 이미지 파일을 만들 땐 인터레이스되지 않은 png 파일을 사용합니다. PNG는 투명한 영역을 지원하며 손실도가 낮아 이미지를 압축하고 중요한 디테일을 뭉개거나 색을 바꾸지도 않습니다. 그림자, 텍스처, 하이라이트 효과를 사용하는 복잡한 이미지에는 좋은 선택입니다. 사진을 위해선 JPEG를 사용하세요. 압축 알고리즘은 무손실 포맷보다 작은 사이즈로 만들어주고, 사진보다 더 식별하기 어렵습니다. 실사같은 앱 아이콘의 경우엔 PNG로 만드는게 가장 좋습니다. 고해상도의 크기로 보여줘야하는 글리프와 플랫한 벡터 아트웍에는 PDF를 사용하세요.
Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.
24비트 풀컬러가 필요하지 않은 PNG 그래픽엔 8비트의 컬러 팔레트를 사용하세요. 8비트 컬러팔레트를 사용하면 이미지 퀄리티를 낮출 필요 없이 파일 사이즈의 크기를 줄여줍니다. 그러나 이 팔레트는 사진엔 적합하지 않습니다.
Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.
크기와 품질의 균형을 잘 맞추어 JPEG파일을 최적화하세요. 대부분의 JPEG 파일은 압축 후 결과물에서 알아채기 쉬운 품질저하가 잘 일어나진 않습니다. 심지어 압축을 조금만 하면 용량을 아낄 수도 있죠. 이 압축 설정을 바탕으로 (낮은) 파일크기와 좋은 품질 사이의 최적의 값을 찾을 수 있도록 하세요.
Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
이미지와 아이콘에 대체 텍스트 라벨을 써두세요. 이 라벨이 화면 위에서 보이진 않지만, 보이스오버 기능을 사용해 청각적으로 화면에 무엇이 있는지 설명할 수 있습니다. 시각 장애를 가진 사용자들이 탐색하기 훨씬 쉽겠죠.
'Human Interface Guidelines' 카테고리의 다른 글
| 애플 휴먼 인터페이스 가이드라인(34) Icons and Images -3 System Icons (0) | 2021.02.10 |
|---|---|
| 애플 휴먼 인터페이스 가이드라인(33) Icons and Images -2 App Icon (0) | 2021.02.08 |
| 애플 휴먼 인터페이스 가이드라인(31) Visual Design -10 Video (0) | 2021.02.04 |
| 애플 휴먼 인터페이스 가이드라인(30) Visual Design -9 Typography (0) | 2021.02.04 |
| 애플 휴먼 인터페이스 가이드라인(29) Visual Design -8 Terminology (0) | 2021.02.04 |
