To make sure your artwork looks great on all devices you support, learn how the system displays content on the screen and how to deliver art at the appropriate scale factors.
지원하는 모든 장치에서 아트웍이 멋지게 보이도록 하기위해 시스템이 화면에 콘텐츠를 표시하는 방법과 적절한 배율로 작업물을 사람들에게 보여주는 방법을 알아봅시다.
Different devices can display images at different resolutions. For example, a 2D device displays images according to the resolution of its screen.
다양한 디바이스는 서로 다른 해상도로 이미지를 표시할 수 있습니다. 예를 들어, 2D 디바이스는 화면의 해상도에 따라 이미지를 표시합니다.
A point is an abstract unit of measurement that helps visual content remain consistent regardless of how it’s displayed. In 2D platforms, a point maps to a number of pixels that can vary according to the resolution of the display; in visionOS, a point is an angular value that allows visual content to scale according to its distance from the viewer.
포인트(Point)는 시각적 콘텐츠가 표시되는 방식에 관계없이 일관성을 유지하는 데 도움이 되는 추상적인 측정 단위입니다. 2D 플랫폼에서는 포인트가 디스플레이의 해상도에 따라 다를 수 있는 픽셀 수에 매핑됩니다. visionOS에서는 포인트가 뷰어로부터의 거리에 따라 시각적 콘텐츠를 확대/축소할 수 있게 하는 각도 값입니다.
To identify the resolution of an image you create, you specify a scale factor. You can visualize scale factor by considering the density of pixels per point in 2D displays of various resolutions. For example, a scale factor of 1 (also called @1x) describes a 1:1 pixel density, where one pixel is equal to one point. High-resolution 2D displays have higher pixel densities, such as 2:1 or 3:1. A 2:1 density (called @2x) has a scale factor of 2, and a 3:1 density (called @3x) has a scale factor of 3. Because of higher pixel densities, high-resolution displays demand images with more pixels.
이미지의 해상도를 식별하기 위해 생성하는 이미지에는 스케일 팩터(scale factor)를 지정합니다. 스케일 팩터는 2D 디스플레이의 해상도에 따른 각 포인트당 픽셀의 밀도를 고려하여 시각화할 수 있습니다. 예를 들어, 스케일 팩터 1 (또는 @1x로 불림)는 1:1 픽셀 밀도를 나타내며, 여기서 한 픽셀이 한 포인트와 동일합니다. 고해상도 2D 디스플레이는 2:1 또는 3:1과 같이 더 높은 픽셀 밀도를 가지며, 2:1 밀도(또는 @2x)는 스케일 팩터 2를, 3:1 밀도(또는 @3x)는 스케일 팩터 3을 갖습니다. 높은 픽셀 밀도로 인해 고해상도 디스플레이는 더 많은 픽셀을 갖는 이미지를 요구합니다.
1x (10x10 px)
2x (20x20 px)
3x (30x30 px)
역자 첨언
As you create different types of images, consider the following recommendations.
다양한 유형의 이미지를 생성할 때 다음 권장 사항을 고려하세요.
역자 첨언
Supply high-resolution images for all artwork in your app, for every device you support. As you add each image to your project’s asset catalog, identify its scale factor by appending “@1x,” “@2x,” or “@3x” to its filename. Use the following values for guidance; for additional scale factors, see Layout.
지원하는 모든 디바이스에 대해 앱 내 모든 아트워크에 고해상도 이미지를 제공하세요. 각 이미지를 프로젝트의 에셋 카탈로그에 추가할 때 파일 이름 뒤에 " @1x", "@2x", 또는 "@3x"를 추가하여 해당 스케일 팩터를 식별하세요. 지침을 위해 다음 값을 사용하세요. 추가 스케일 팩터에 대한 자세한 내용은 레이아웃을 참조하세요.
In general, design images at the lowest resolution and scale them up to create high-resolution assets. When you use resizable vectorized shapes, you might want to position control points at whole values so that they’re cleanly aligned at 1x. This positioning allows the points to remain cleanly aligned to the raster grid at higher resolutions, because 2x and 3x are multiples of 1x. In contrast, there are times when you don’t want to keep a shape perfectly aligned to the raster grid; for example, aligning a circle to the grid can make it appear flattened at the top and bottom.
일반적으로 가장 낮은 해상도에서 이미지를 디자인하고, 확대하여 고해상도 에셋을 만듭니다. 크기를 조정할 수 있는 벡터값을 사용하는 경우 제어점을 전체 값에 배치하여 1x에서 깔끔하게 정렬되도록 할 수 있습니다. 2x와 3x는 1x의 배수이기 때문에 이 위치 지정을 통해 포인트는 더 높은 해상도에서 래스터 그리드에 깔끔하게 정렬된 상태를 유지할 수 있습니다. (래스터화 : 벡터의 스케일 팩터가 이미지화 된 것)
→ 1x이 잘되면, 2, 3도 잘된다.
Include a color profile with each image.Color profiles help ensure that your app’s colors appear as intended on different displays. For guidance, see Color management.
Always test images on a range of actual devices. An image that looks great at design time may appear pixelated, stretched, or compressed when viewed on various devices.
다양한 실제 장치에서 이미지를 테스트하세요. 실제 잘 만들져 보이는 이미지가 다른 장치에서 볼 때 픽셀화되거나 늘어나거나 깨져서 나타날 수 있습니다.
No additional considerations for iOS, iPadOS, or macOS.
iOS, iPadOS, macOS에 대한 추가 고려 사항 없음
Layered images are at the heart of the Apple TV user experience. The system combines layered images, transparency, scaling, and motion to produce a sense of realism and vigor that evokes a personal connection as people interact with onscreen content.
레이어드 이미지는 Apple TV 사용자 경험의 핵심입니다. 계층화된 이미지, 투명도, 크기 조정 및 모션을 결합하여 현실감과 활력을 생성합니다.
Parallax is a subtle visual effect the system uses to convey depth and dynamism when an element is in focus. As an element comes into focus, the system elevates it to the foreground, gently swaying it while applying illumination that makes the element’s surface appear to shine. After a period of inactivity, out-of-focus content dims and the focused element expands.
Layered images are required to support the parallax effect.
시차는 어떤 대상에 초점이 맞춰져 있을 때, 깊이와 역동성을 전달하는 데 사용하는 미묘한 시각 효과입니다. 대상에 초점이 맞춰지면 시스템이 대상을 전경으로 올려 부드럽게 흔들면서 요소의 표면이 빛나는 것처럼 보이게 하는 조명을 적용합니다. 일정 시간 동안 활동이 없으면 초점이 맞지 않는 콘텐츠가 흐려지고 초점이 맞춰진 요소가 확장됩니다. 이 시차 효과를 위해 레이어 밑의 설명에 나오는 이미지가 필요합니다.
역자 첨언
A layered image consists of two to five distinct layers that come together to form a single image. The separation between layers, along with use of transparency, creates a feeling of depth. As someone interacts with an image, layers closer to the surface elevate and scale, overlapping lower layers farther back and producing a 3D effect.
레이어 이미지는 2~5개의 서로 다른 레이어가 모여 단일 이미지를 형성하는 것으로 구성됩니다. 투명도를 사용하여 레이어를 분리하여 깊이감을 줍니다. 사람들이 이미지와 상호 작용할 때 표면에 더 가까운 레이어가 앞으로 나오고 아래쪽 레이어가 더 뒤에 있는 것처럼 보이는 3D 효과를 생성합니다.
역자 첨언
Use standard interface elements to display layered images. If you use standard views and system-provided focus APIs — such as FocusState — layered images automatically get the parallax treatment when people bring them into focus.
tvOS 앱 아이콘은 레이어 이미지를 사용해야 합니다. FocusState와 같은 표준 보기 및 시스템에서 제공하는 Focus API를 사용하는 경우 계층화된 이미지는 사용자가 Focus로 가져올 때 자동으로 시차 처리됩니다.
Identify logical foreground, middle, and background elements. In foreground layers, display prominent elements like a character in a game, or text on an album cover or movie poster. Middle layers are perfect for secondary content and effects like shadows. Background layers are opaque backdrops that showcase the foreground and middle layers without upstaging them.
전경, 중간, 배경 요소를 논리적으로 선택합니다. 전경 레이어에서 게임의 캐릭터와 같은 눈에 띄는 요소를 표시하거나 앨범 표지 또는 영화 포스터의 텍스트를 표시합니다. 중간 레이어는 2차 콘텐츠 및 그림자와 같은 효과에 적합합니다. 배경 레이어는 전경과 중간 레이어에 집중도를 빼앗지 않고 보여주는 불투명한 배경입니다.
Generally, keep text in the foreground. Unless you want to obscure text, bring it to the foreground layer for clarity.
일반적으로 텍스트를 전경에 두세요. 텍스트를 가리지 않으려면 명확성을 위해 전경 레이어로 가져옵니다.
Keep the background layer opaque. Using varying levels of opacity to let content shine through higher layers is fine, but your background layer must be opaque — you’ll get an error if it’s not. An opaque background layer ensures your artwork looks great with parallax, drop shadows, and system backgrounds.
배경 레이어를 불투명하게 유지합니다. 다양한 수준의 불투명도를 사용한는 것은 괜찮지만, 배경 레이어는 불투명해야 합니다. 그렇지 않으면 오류가 발생합니다. 불투명한 배경 레이어는 아트웍이 시차, 그림자 및 시스템 배경으로 멋지게 보이도록 합니다.
Keep layering simple and subtle. Parallax is designed to be almost unnoticeable. Excessive 3D effects can appear unrealistic and jarring. Keep depth simple to bring your content to life and add delight.
레이어링을 단순하고 미묘하게 유지하세요. 시차는 거의 눈에 띄지 않도록 설계되었습니다. 과도한 3D 효과는 비현실적이고 거슬리게 보일 수 있습니다. 콘텐츠에 생명을 불어넣고 즐거움을 더하려면 깊이를 단순하게 유지하세요.
Leave a safe zone around your content. During focus and parallax, content around the edges of some layers may be cropped or difficult to see clearly as the image scales and moves. To ensure that your primary content is always visible, don’t put it too close to the edges. Be aware that the safe zone can vary, depending on the image size, layer depth, and motion, and that foreground layers are cropped more than background layers.
콘텐츠 주변에 안전 영역을 두세요. 초점 및 시차가 생성되는 시간 동안 일부 레이어의 가장자리 주변 콘텐츠가 잘리거나 이미지 크기 조정 및 이동으로 인해 명확하게 보기 어려울 수 있습니다. 주요 콘텐츠가 항상 보이도록 하려면 가장자리에 너무 가까이 두지 마세요. 이미지 크기, 레이어 깊이 및 움직임에 따라 안전 영역이 다를 수 있으며 전경 레이어가 배경 레이어보다 더 많이 잘립니다.
Always preview layered images. To ensure your layered images look great on Apple TV, preview them throughout your design process using Xcode, the Parallax Previewer app for macOS, or the Parallax Exporter plug-in for Adobe Photoshop. Pay special attention as scaling and clipping occur, and readjust your images as needed to keep important content safe. After your layered images are final, preview them on an actual TV for the most accurate representation of what people will see. To download Parallax Previewer and Parallax Exporter, see Resources.
항상 레이어 이미지를 미리보기 합니다. Apple TV에서 레이어된 이미지가 잘 보이도록 하려면 Xcode, macOS용 Parallax Previewer 앱 또는 Adobe Photoshop용 Parallax Exporter 플러그인을 사용하여 디자인 프로세스 전반에 걸쳐 이미지를 미리보기합니다. 크기 조정 및 클리핑이 발생할 때 특별한 주의를 기울이고 필요한 경우 이미지를 다시 조정하여 중요한 콘텐츠를 안전하게 유지하세요. 레이어링된 이미지가 최종 완성되면 실제 TV에서 미리보기하여 사람들이 보게 될 이미지를 확인하세요. Parallax Previewer 및 Parallax Exporter를 다운로드하려면 Resource를 참고하세요.
Use both the unfocused and focused states to determine the appropriate size for a layered image. During the parallax effect, the system may crop background layers slightly, so keep essential content within a safe zone and include some additional space to make sure your content looks good.
초점이 맞지 않은 상태와 초점이 맞춰진 상태를 모두 고려하여 계층화된 이미지에 적합한 크기를 결정합니다. 시차 효과가 나타날 시간 동안 시스템은 배경 레이어를 약간 자를 수 있으므로 필수 콘텐츠를 안전 영역 내에 유지하고 콘텐츠가 보기 좋게 보이도록 추가 공간을 포함합니다.
The following formulas can help you calculate sizing for a layered image based on the size of the image when it’s not in focus.
다음 공식은 초점이 맞지 않을 때 이미지의 크기를 기반으로 계층화된 이미지의 크기를 계산하는 데 도움이 될 수 있습니다.
You can embed layered images in your app or retrieve them from a content server at runtime. To create layered images for inclusion within your app, use one of the following tools:
계층화된 이미지를 앱에 포함하거나 런타임에 콘텐츠 서버에서 검색할 수 있습니다. 앱에 포함할 계층화된 이미지를 만들려면 다음 도구 중 하나를 사용합니다:
• Parallax Previewer app for macOS. Parallax Previewer can import PNG files to serve as individual layers, layered images (.lsr) created with the Parallax Exporter plug-in, and layered Photoshop images (.psd). Parallax Previewer can export LSR files that you can import directly into an Xcode project.
•
MacOS용 Paralax Previewer 앱입니다. Parallax Previewer는 개별 레이어로 사용할 PNG 파일, Parallax Exporter 플러그인으로 만든 레이어 이미지(.lsr) 및 레이어 Photoshop 이미지(.psd)를 가져올 수 있습니다. Parallax Previewer는 Xcode 프로젝트로 직접 가져올 수 있는 LSR 파일을 내보낼 수 있습니다.
역자 첨언
• Parallax Exporter Adobe Photoshop plug-in. Use this plug-in to test your layered images in Photoshop and export them as LSR files that you can import directly into an Xcode project.
•
Paralax Exporter Adobe Photoshop 플러그인. 이 플러그인을 사용하여 Photoshop에서 계층화된 이미지를 테스트하고 Xcode 프로젝트로 직접 가져올 수 있는 LSR 파일로 내보낼 수 있습니다.
• Xcode. Drag standard PNG files into your app’s asset catalog to serve as individual layers of an image stack in Xcode. Image stacks can be exported as LSR files. Xcode can also import LSR files.
•
Xcode. 표준 PNG 파일을 앱의 에셋 카탈로그로 드래그하여 Xcode에서 이미지 스택의 개별 레이어 역할을 합니다. 이미지 스택은 LSR 파일로 내보낼 수 있습니다. Xcode는 LSR 파일도 가져올 수 있습니다.
역자 첨언
If your app retrieves layered images from a content server at runtime, you must provide those images in runtime layered image (.lcr) format. You don’t create runtime layered images directly; you generate them from LSR files or Photoshop files using the layerutil command-line tool that Xcode provides. Runtime layered images are intended to be downloaded — don’t embed them within your app.
앱이 런타임에 콘텐츠 서버에서 계층화된 이미지를 검색하는 경우 해당 이미지를 런타임 계층화된 이미지( .lcr) 형식으로 제공해야 합니다. 런타임 계층 이미지를 직접 만들지 않습니다. layerutilXcode가 제공하는 명령줄 도구를 사용하여 LSR 파일 또는 Photoshop 파일에서 생성 합니다. 런타임 계층 이미지는 다운로드를 위한 것이므로 앱에 포함하지 마세요.
역자 첨언
In visionOS, the area an image occupies typically varies when the system dynamically scales it according to the distance and angle at which people view it. This means that an image doesn’t line up 1:1 with screen pixels as it can in other platforms.
visionOS에서는 시스템이 거리 및 시각에 따라 이미지를 동적으로 확대/축소할 때 이미지가 차지하는 영역이 일반적으로 변합니다. 이는 다른 플랫폼에서처럼 이미지가 화면 픽셀과 1:1로 일치하지 않는다는 것을 의미합니다.
Prefer vector-based art. Avoid bitmap content because it might not look good when the system scales it up. If you use Core Animation layers, see Drawing sharp layer-based content in visionOS for developer guidance.
벡터 기반 아트를 선호하세요. 시스템이 이미지를 확대할 때 비트맵 콘텐츠는 좋지 않게 보일 수 있으므로 피하세요. Core Animation 레이어를 사용하는 경우, 개발자 가이드를 위해 Drawing sharp layer-based content in visionOS를 참조하세요.
If you need to use rasterized images, balance quality with performance as you choose a resolution. Although a @2x image looks fine at common viewing distances, its fixed resolution means that the system doesn’t dynamically scale it and it might not look sharp from close up. To help a rasterized image look sharp when people view it from a wide range of distances, you can use a higher resolution, but each increase in resolution results in a larger file size and may impact your app’s runtime performance, especially for resolutions over @6x. If you use images that have resolutions higher than @2x, be sure to also apply high-quality image filtering to help balance quality and performance (for developer guidance, see filters).
만약 래스터 이미지를 사용해야 한다면 해상도를 선택할 때 품질과 성능을 균형 있게 고려하세요. @2x 이미지는 일반적인 시청 거리에서 괜찮아 보이지만, 고정된 해상도 때문에 시스템이 동적으로 확대하지 않아 근거리에서는 선명해 보이지 않을 수 있습니다. 래스터 이미지가 다양한 거리에서 볼 때 선명하게 보이도록 돕기 위해 더 높은 해상도를 사용할 수 있지만, 해상도를 높이면 파일 크기가 커지며 특히 @6x 이상의 해상도에 대해 앱의 런타임 성능에 영향을 줄 수 있습니다. @2x보다 높은 해상도의 이미지를 사용하는 경우 품질과 성능을 균형 있게 유지하기 위해 고품질 이미지 필터링을 적용하는 것이 좋습니다(개발자 가이드는 filters 참조하세요).
In general, avoid transparency to keep image files small. If you always composite an image on the same solid background color, it’s more efficient to include the background in the image. However, transparency is necessary in complication images, menu icons, and other interface icons that serve as template images, because the system uses it to determine where to apply color.
일반적으로 이미지 파일을 작게 유지하려면 투명도를 피하세요. 항상 동일한 단색 배경색으로 이미지를 합성하는 경우, 이미지에 배경을 포함하는 것이 더 효율적입니다.(용량적으로) 그러나 템플릿 이미지 역할을 하는 컴플리케이션 이미지, 메뉴 아이콘 및 기타 인터페이스 아이콘에서는 투명도가 시스템에서 사용하여 색상을 적용할 위치를 결정하기 때문에 투명도가 필요합니다.
Use autoscaling PDFs to let you provide a single asset for all screen sizes. Design your image for the 40mm and 42mm screens at 2x. When you load the PDF, WatchKit automatically scales the image based on the device’s screen size, using the values shown below:
PDF 자동 스케일링을 사용하면 모든 화면 크기에 대해 단일 에셋을 제공할 수 있습니다. 40mm 및 42mm 화면용 이미지를 2배율(2x)로 디자인하십시오. PDF를 로드할 때 WatchKit은 아래 표시된 값을 사용하여 장치의 화면 크기에 따라 이미지 크기를 자동으로 조정합니다.
Resources
Images — SwiftUI
작성 날짜 | 작성자 | 수정사항 |
2023/05/09 | 시즈 | 초기 번역 |
2023/12/22 | 시즈 | 배포 |