Xamarin에서 tvOS 아이콘 및 이미지 작업Working with tvOS Icons and Images in Xamarin

Captivating 아이콘과 이미지를 만드는 것은 Apple TV 앱에 대 한 몰입 형 사용자 환경을 개발 하는 데 중요 한 부분입니다.Creating captivating icons and imagery are a critical part of developing an immersive user experience for your Apple TV apps. 이 가이드는 tvOS 앱에 필요한 그래픽 자산을 만들고 포함 하는 데 필요한 단계를 다룹니다.This guide will cover the steps required to create and include the necessary graphic assets for your Xamarin.tvOS apps:

  • 시작 이미지 -앱이 처음 시작 될 때 시작 이미지가 표시 되 고, 시작이 완료 되 면 앱의 첫 번째 화면으로 교체 됩니다.Launch Image - A launch image displays when your app is first started, and is replaced by the app's first screen once launch has completed.
  • 계층화 된 이미지 -apple TV와 관련 된, apple의 새 계층화 된 이미지는 시차 효과와 함께 작동 하 여 선택한 항목에 대 한 3d 효과를 만듭니다.Layered Images - Specific to the Apple TV, Apple's new Layered Images work with the Parallax Effect to create a 3D effect for selected items. 여러 가지 방법으로 계층화 된 이미지를 만들수 있습니다.There are several ways to Create Layered Images.
  • 앱 아이콘 -Apple TV 홈 화면은 있지만 앱 스토어에는 아이콘이 필요 합니다.App Icon - Icons are required for not only the Apple TV Home screen but for the App Store. 이러한 이미지는 계층화 된 이미지로 제공 되어야 합니다.They must be provided as a Layered Image.
  • 상위 선반 이미지 -앱이 홈 화면의 맨 위 행에 배치 되는 경우 앱의 기능을 강조 표시 하는 데 인기 이미지가 필요 합니다.Top Shelf Image - If your app is placed on the Top Row of the Home screen, it will need a Top Shelf Image to highlight your app's features. 필요에 따라 동적 최고 선반 콘텐츠 를 제공 하 여 앱의 콘텐츠를 강조 표시할 수 있습니다.Optionally, you can provide Dynamic Top Shelf Content to highlight the content in your app.
  • 이미지 Game Center -앱이 게임 이며 Game Center를 사용 하는 경우 몇 가지 추가 이미지가 필요 합니다.Game Center Images - If your app is a game and uses Game Center, several additional images will be required.
  • TvOS 프로젝트 이미지 설정 -tvOS 앱에 대 한 시작 이미지 및 앱 아이콘을 설정 하는 데 필요한 단계를 설명 합니다.Setting Xamarin.tvOS Project Images - Covers the steps required to set the Launch Image and App Icon for your Xamarin.tvOS app.

중요

Apple TV의 모든 이미지는 1x 해상도 (@1x) 이며이 크기의 이미지만 사용 해야 합니다.All images on the Apple TV are at the 1x resolution (@1x) and you should only use images of this size. 더 크고 해상도가 높은 그래픽을 포함 하면 메모리와 저장소를 다운로드 하 여 사용 하는 데 시간이 소요 될 뿐만 아니라 런타임에 동적으로 재조정 하 고 그리기 성능에 부정적인 영향을 미칠 수 있습니다.Including larger, higher-resolution graphics not only take time to download and use more memory and storage, but they have to be dynamically rescaled at runtime and will negatively affect drawing performance.

시작 이미지Launch Image

시작 이미지는 tvOS 앱이 Apple TV에서 처음 시작 될 때 가장 먼저 표시 되는 것 이므로 모든 tvOS 앱에서 시작 이미지를 제공 해야 합니다.The Launch Image is the first thing that is displayed when your Xamarin.tvOS app is initially started on the Apple TV, and as such, every tvOS app must supply a Launch Image.

시작 이미지가 빠르게 나타나고 앱이 빠르며 응답성이 뛰어난 느낌을 제공 합니다.The Launch Image appears quickly and gives the impression that your app is fast and responsive. Apple TV는 시작 이미지를 즉시 앱의 첫 번째 화면으로 바꿉니다.The Apple TV will replace the Launch Image with the first screen of your app shortly there after.

시작 이미지는 광고 또는 미술 식의 기회가 아니므로 앱이 신속 하 게 시작 되 고 사용할 준비가 되었다는 느낌을 제공 하기 위해 존재 합니다.Launch Images are not an opportunity for ads or artistic expression, they exist only to give the impression that your app launches quickly and is ready to use.

시작 이미지 크기Launch Image Size 노트Notes
1920x1080px1920x1080px 계층화 되지 않은 .png 파일만Non-layered .png files only

Apple은 앱의 시작 이미지를 설계할 때 다음과 같은 제안을 합니다.Apple makes the following suggestions for designing your app's Launch Image:

  • 첫 번째 화면과 거의 동일 합니다. 시작 화면은 가능한 한 앱의 첫 화면 가까이에 있어야 합니다.Nearly Identical to the First Screen - Your Launch Screen should be as close to your app's first screen as possible. 다른 그래픽 또는 요소를 포함 하면 첫 번째 화면이 나타날 때 "flash"가 발생 하지 않을 수 있습니다.Including different graphics or element can result in an annoying "flash" when the first screen appears.
  • 텍스트 시작 이미지를 사용 하지 않는 것이 정적 이므로 표시 되기 전에 지역화 되지 않습니다.Avoid Using Text - Launch Images are static and as such, will not be localized before being displayed.
  • 다운 플레이 시작 -Apple TV 사용자는 자주 앱을 전환 하므로 앱 시작 프로세스에 주의를 기울여야 합니다.Downplay Launch - Because Apple TV users frequently switch apps, you shouldn't draw attention to the app launch process.
  • 광고 또는 브랜딩 없음 -시작 이미지를 정보 화면으로 사용 하거나 응용 프로그램의 첫 번째 화면에서 정적 부분이 아니면 브랜딩을 포함 하지 않아야 합니다.No Ads or Branding - Your Launch Image should not be used as an About screen or include any branding unless it is static part of your app's first screen. 광고는 엄격히 금지 됩니다.Ads are strictly prohibited.

시작 이미지 설정Setting the Launch Image

TvOS 프로젝트에 대 한 시작 이미지를 설정 하려면 다음을 수행 하십시오.To set the Launch Image for your tvOS project, please do the following:

  1. 솔루션 탐색기에서 Assets.xcassets를 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Explorer, double-click Assets.xcassets to open it for editing:

  2. 자산 편집기에서 LaunchImages 자산을 클릭 합니다.In the Asset Editor, click on the LaunchImages asset:

  3. 1X APPLE TV 항목을 클릭 하 고 시작 이미지를 선택 하거나 필요에 따라 파일 시스템에서 새 이미지를 끌어 놓습니다.Click on the 1x Apple TV entry and select the Launch Image or optionally drag a new image in from the file system:

  4. 변경 내용을 저장합니다.Save your changes.

계층화 된 이미지Layered Images

Apple TV를 처음 사용 하는 경우 계층화 된 이미지는 시차 효과와 함께 작동 하 여 사용자가 소파에 걸친 화면에 있는 콘텐츠에 연결 된 상태를 유지 하는 데 도움이 되는 3D 효과를 생성 합니다.New to the Apple TV, Layered Images work with the Parallax Effect to produce a 3D effect that helps to keep the user on the couch mentally connected to the content on the screen across the room.

계층화 된 이미지에는 완전 한 이미지를 형성 하기 위해 결합 된 별도의 두 계층 (5)이 포함 됩니다.Layered Images contain from two (2) to five (5) separate layers that are combined to form a complete image. 배경 계층을 제외 하 고 각 계층은 투명도와 함께 Z 순서를 사용 하 여 깊이의 효과를 만듭니다.With the exception of the background layer, each layer uses its Z-order along with transparency to create an illusion of depth. 사용자가 계층화 된 이미지와 상호 작용 하는 경우 더 높은 Z 순서 계층이 확장 되 고 겹쳐진 효과를 만듭니다.When the user interacts with a Layered Image, higher Z-ordered layers are scaled and overlapped to create this effect.

중요

계층화 된 이미지는 앱 아이콘에 필요 하며, 포커스를 받을 수 있는 기타 항목 (예: 최상위 선반 이미지)의 경우 선택 사항입니다.Layered Images are required for your app's icons and are optional for other Focusable Items (such as the Top Shelf Image). 그러나 Apple은 앱에서 포커스를 받을 수 있는 모든 이미지에 대해 계층화 된 이미지를 사용 하도록 제안 합니다.However, Apple suggests using Layered Images for any image that can get focus in your app.

Apple은 계층화 된 이미지를 설계할 때 다음과 같은 제안을 합니다.Apple makes the following suggestions for designing your Layered Images:

  • 배경 계층을 불투명 하 게 만들기 -배경 계층 (계층 1)이 불투명 해야 합니다 . 그렇지 않으면 Apple TV에서 계층화 된 이미지를 사용 하려고 할 때 오류가 발생 합니다.Make the Background Layer Opaque - Your background layer (layer 1) must be opaque or you'll get an error when you try to use the Layered Image on Apple TV. 다른 모든 계층은 3D 효과를 향상 시키기 위해 여러 수준의 투명도를 포함할 수 있습니다.All other layers can contain multiple levels of transparency to enhance the 3D effect.
  • 전경, 중간 및 배경 요소 격리 -포그라운드에서 중요 한 요소 (예: 게임 문자)를 사용 하 여 보조 요소나 그림자에 대해 중간을 사용 합니다.Isolate Foreground, Middle and Background Elements - Place prominent elements (like game characters) in the foreground, use the middle for secondary elements or shadows. 마지막으로 상위 계층에 대 한 단계를 제공 하기 위해 중립 배경을 포함 합니다.Finally, include a neutral background to provide a stage for your upper layers.
  • 텍스트를 더 높은 수준으로 표시 하지 않으려는 경우에만 전경 텍스트를 유지 합니다. 일반적으로 최상위 계층에 있어야 합니다.Keep Text in the Foreground - Unless you want your text to be obscured by higher levels, generally it should be on the topmost layer.
  • 단순 계층화 사용 -시차 효과는 미묘한 효과를 갖도록 설계 되었으므로 jarring가 비현실적인 효과를 방지 하기 위해 계층을 최소로 유지 합니다.Use Simple Layering - The Parallax Effect was designed to be subtle so keep your layers to a minimal to prevent jarring, unrealistic effects.
  • 안전한 영역 포함 -시차 효과 중에 상위 계층을 자를 수 있으므로 각 계층에 안전 영역 테두리를 만들어야 합니다.Include a Safe Zone - Because upper layers can be cropped during a Parallax Effect, you need to build a Safe Zone border into each layer. 콘텐츠를 너무 가까이 만들면 레이어가 잘릴 수 있습니다.If you get your content too close the layers edge, it can become cropped off. 상위 계층에는 하위 계층 보다 더 많은 크기 조정 및 자르기가 발생 합니다.Upper layers will experience more scaling and cropping than lower layers. 아래의 이미지 계층 크기 조정 섹션을 참조 하세요.See the Sizing Image Layers section below.
  • 미리 보기 자주 계층화 된 이미지는 원하는 3d 효과가 발생 하 고 개별 레이어의 콘텐츠를 잘라내는 것이 없도록 자주 미리 보아야 합니다.Preview Often - Layered Images should be previewed often to ensure that the desired 3D effect occurs and that none of the content on the individual layers is being cropped. 실제 Apple TV 하드웨어에서 계층화 된 이미지를 미리 보고 제대로 렌더링 되는지 확인 해야 합니다.You should preview your Layered Images on real Apple TV hardware to make sure they render as expected.

가능 하면 항상 기본 제공 UIKit 컨트롤을 사용 하 여 계층화 된 이미지를 표시 해야 합니다 .이는 포커스를 받을 때 시차 효과가 자동으로 발생 하기 때문입니다.Whenever possible, you should always use the built-in UIKit controls to display your Layered Images, as they will automatically get the Parallax Effect when they come into focus.

이미지 계층 크기 조정Sizing Image Layers

계층화 된 이미지를 구성 하는 각 계층에 안전 영역 테두리를 포함 해야 합니다.It is important to remember to include a Safe Zone border into each layer that will compose your Layered Image. 개별 레이어는 크기를 조정 하 고 시차 효과를 낼 수 있으므로 계층의 가장자리에 너무 가까운 경우에는 레이어의 콘텐츠를 자를 수 있습니다.Because the individual layers can be scaled and cropped during the Parallax Effect, the content of the layers can be cropped off if it is too close to the layer's edge:

계층화 된 이미지 만들기Creating Layered Images

tvOS는 다음과 같은 형식의 계층화 된 이미지와 함께 작동 합니다.tvOS works with Layered Images in the following formats:

  • CAR 파일 -Apple에서 만든 소유 자산 카탈로그 형식입니다.CAR Files - This is a proprietary Asset Catalog format created by Apple. 직접 자동차 파일을 만들지 않고, 모든 LSR 파일에서 컴파일 시간에 생성 되며, 앱 번들에 포함 됩니다.You do not create CAR files directly, they are created at compile time from any LSR files and included in your app bundle.
  • Lsr 이미지 -Apple에서 만든 소유 이미지 형식입니다.LSR Images - This is a proprietary image format created by Apple. 시차 내보내기 Adobe Photoshop 플러그 인 또는 시차 미리 보기 를 사용 하 여 Lsr 형식으로 계층화 된 이미지를 만들고 미리 볼 수 있습니다.Use the Parallax Exporter Adobe Photoshop Plugin or the Parallax Previewer to create and preview Layered Images in the LSR format.
  • Assets.xcassets -2 (2)에서 5 (5) 표준 .png 형식 이미지는 컴파일 시간에 CAR 또는 Lsr 형식의 계층화 된 이미지로 컴파일될 자산 카탈로그에 포함 됩니다.Assets.xcassets - From two (2) to five (5) standard .png formatted images included in an Asset Catalog that will be compiled into a CAR or LSR formatted Layered Image at compile time.
  • LCR 파일 -Apple에서 만든 독점 파일 형식입니다.LCR Files - This is a proprietary file format created by Apple. LCR 파일은 콘텐츠 서버 중 하나에서 다운로드 된 추가 내용으로 사용 됩니다.LCR files are intended to be used as additional content downloaded from one of your content servers. LCR 파일은 앱 번들에 포함 되어서는 안 됩니다.LCR file should never be included in your app bundle. Xcode에 포함 된 layerutil 명령줄 도구를 사용 하 여 LSR 또는 Photoshop 파일에서 LCR 파일이 생성 됩니다.LCR files are generated from LSR or Photoshop files using the layerutil command line tool included with Xcode.

시차 미리 보기The Parallax Previewer

Apple은 시차 미리 보기를 만들어 앱 아이콘 및 선택적 포커스 가능한 항목에 필요한 계층화 된 이미지를 미리 보고 만들었습니다.Apple created the Parallax Previewer to preview and created Layered Images required for App Icons and optional Focusable Items. 미리 보기에는 완료 된 계층화 이미지를 형성 하는 모든 계층이 표시 됩니다.The previewer shows every layer that forms the completed Layered Image:

계층화 된 이미지를 미리 보는 동안 마우스를 사용 하 여 이미지를 회전 하 고 시차 효과를 미리 볼 수 있습니다.While previewing a Layered Image, you can use the mouse to rotate the image and preview the Parallax Effect. + (더하기) 및 - (빼기) 단추를 사용 하 여 레이어를 추가 하 고 제거 합니다.Use the + (plus) and - (minus) buttons to add and remove layers.

새 계층화 된 이미지를 만들 때 LSR 형식으로 내보내고 앱의 번들에 포함할 수 있습니다.When creating a new Layered Image, it can be exported in the LSR format and included in your app's bundle.

계층화 된 이미지 만들기 및 미리 보기에 대 한 자세한 내용은 앱 프로그래밍 가이드 tvOS의 Apple 시차 아트 워크 만들기 섹션을 참조 하세요.For more information on creating and previewing Layered Images, please see Apple's Creating Parallax Artwork section of the App Programming Guide for tvOS.

앱 아이콘App Icons

TvOS 앱에는 Apple TV 홈 화면의 앱 아이콘 뿐만 아니라 앱 스토어에 대 한 아이콘도 필요 합니다.Your Xamarin.tvOS app will require not only an App Icon for the Apple TV Home screen, but also an icon for the App Store. 앱 아이콘은 잠재적 사용자에 게 멋진 느낌을 주는 첫 번째 변경 사항이 며, 앱의 용도를 한눈에 파악할 수 있습니다.The App Icon is the your first change to make a great impression on your potential user and should communicate your app's purpose at a glance.

모든 앱은 앱 아이콘의 작은 버전과 많은 버전을 모두 제공 해야 합니다.Every app must supply both a small and a large version of its App Icon. 앱이 설치 되 면 Apple TV 홈 화면에서 작은 아이콘이 사용 됩니다.The small icon will be used on the Apple TV Home screen when the app is installed. 앱 스토어에서 많은 버전이 사용 됩니다.The large version is used by the App Store. 크게 된 앱 아이콘은 작은 아이콘 버전의 모양과 느낌을 모방 해야 합니다.The large App Icon should mimic the look and feel of the small icon version.

작은 아이콘Small Icon 크게 아이콘Large Icon
실제 크기Actual Size 400x240px400x240px SizeSize 1280x768px1280x768px
안전한 영역 크기Safe Zone Size 370x222px370x222px
포커스가 없는 크기Unfocused Size 300x180px300x180px
포커스가 있는 크기Focused Size 370x222px370x222px

중요

앱 아이콘은 계층화 된 이미지로제공 되어야 합니다.Your App Icons must be provided as Layered Images. 자세한 내용은 위의 계층화 된 이미지 섹션을 참조 하세요.Please see the Layered Image section above for more details.

Apple은 앱 아이콘을 만들기 위한 다음과 같은 제안 사항을 제공 합니다.Apple provides the following suggestions for creating your App Icons:

  • 단일 포커스 지점 제공 – 아이콘 가운데에 직접 배치 된 단일 포커스 지점을 사용 하 여 아이콘을 디자인 합니다.Provide a Single Focus Point – Design your icon with a single focus point placed directly in the center of the icon.
  • 간단한 배경 사용 – 위쪽 계층이 보이도록 아이콘 배경을 단순하게 유지 합니다. 단순 색 또는 미묘한 그라데이션을 사용 하는 것이 좋습니다.Use a Simple Background – Keep your icon background simple so that the upper layers stand out. Consider using a simple color or subtle gradient.
  • 텍스트 크기 제한 – 사용자가 선택할 때 앱 이름이 아이콘 아래에 표시 되므로 아이콘 디자인에 필수적인 경우에만 텍스트를 포함 해야 합니다.Limit the Amount of Text – Since the app's name will appear below the icon when it is selected by the user, you should only include text when it is essential to the design of the icon.
  • 스크린샷 사용 안 함 -스크린 샷는 아이콘에 대해 너무 복잡 하며 사용자가 응용 프로그램의 용도를 한눈에 볼 수 없습니다.Don't use Screenshots – Screenshots are too complex for an icon and don't allow the user to see the purpose of your app at a glance.
  • 아이콘을 사각형으로 유지 – tvOS는 아이콘의 모퉁이를 약간 둥글게 하는 마스크를 자동으로 적용 합니다.Keep Icons Square – tvOS automatically applies a mask that subtly rounds the corners of your icons. 이 반올림은 포함 하지 마세요.Don't include this rounding yourself.
  • 계층을 신중 하 게 구분 합니다. 텍스트는 위쪽 계층에, 가운데에는 보조 항목, 상위 계층은 빛을 표시할 수 있도록 하는 중립 배경으로 되어 있어야 합니다.Separate Your Layers Carefully – Text should be on the upper most layer, secondary items in the middle and a neutral background that allows your upper layers to shine.
  • 그라데이션 및 그림자를 신중 하 게 사용 – 그라데이션과 그림자는 시차 효과와 충돌 하 여 신중 하 게 사용 해야 합니다.Use Gradients and Shadows Carefully – Gradients and shadows can clash with the Parallax Effect so they should be used carefully. 간단한 위쪽에서 아래쪽, 밝은-짙은 그라데이션 스타일은 가장 적합 합니다.Simple top-to-bottom, light-to-dark gradient styles work best. 그림자는 일반적으로 선명한 선명한 선명한 색조로 가장 잘 작동 합니다.Shadows normally work best as sharp, hard-edged tints.
  • 레이어 투명도 변경 – 응용 프로그램 아이콘의 상위 수준에서 다양 한 수준의 투명도를 사용 하 여 3d 효과를 늘립니다.Vary Layer Transparency – Use varying levels of transparency on the upper levels of your App Icon to increase the 3D effect. 배경 계층은 불투명 해야 하며 그렇지 않으면 오류가 발생 합니다.The background layer must be opaque or it will result in an error.

앱 아이콘 설정Setting the App Icons

TvOS 프로젝트에 필요한 앱 아이콘을 설정 하려면 다음을 수행 하세요.To set the App Icons required for your tvOS project, please do the following:

  1. 솔루션 탐색기에서 Assets.xcassets를 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Explorer, double-click Assets.xcassets to open it for editing:

  2. 자산 편집기에서 App Icon & Top Shelf Image 자산을 확장 합니다.In the Asset Editor, expand the App Icon & Top Shelf Image asset:

  3. 다음으로 App Icon - Small 자산을 확장 합니다.Next, Expand the App Icon - Small asset:

  4. 그런 다음 Back 자산을 확장 하 고 Contents 항목을 클릭 합니다.Then expand the Back asset and click on the Contents entry:

  5. 1X APPLE TV 항목 을 클릭 하 고 이미지 파일을 선택 합니다.Click on the 1x Apple TV entry and select an image file.

  6. FrontMiddle 자산에 대해 위의 단계를 반복 합니다.Repeat the above steps for the Front and Middle assets.

  7. 그런 다음 동일한 단계를 반복 하 여 App Icon - Large 자산을 정의 합니다.Then repeat the same steps to define the App Icon - Large asset.

  8. 변경 내용을 저장합니다.Save your changes.

상위 선반 이미지Top Shelf Image

사용자가 Apple TV 홈 화면의 맨 위 행에 tvOS 앱을 배치 하는 경우 사용자가 앱을 선택 하면 최상위 선반 이미지가 표시 됩니다.If the user has placed your Xamarin.tvOS app on the Top Row on the Apple TV Home screen, a large Top Shelf Image will be displayed when your app is selected by the user. 이 이미지는 앱의 기능을 강조 표시 하거나 콘텐츠에 대 한 직접 링크를 제공 해야 합니다.This image should highlight the features of your app or provide direct links to its content.

최상위 선반 이미지는 단일 정적 .png 또는 .lsr 파일로 제공 하거나 ( 계층화 된 이미지 만들기참조) 런타임에 포커스를 받을 수 있는 항목의 단일 행으로 동적으로 만들 수 있습니다 (아래의 동적 상위 선반 내용 참조).The Top Shelf Image can either be provided as a single static .png or .lsr file (see Creating Layered Images) or it can be dynamically created at runtime as a single row of Focusable Items (see Dynamic Top Shelf Content below).

상위 선반 이미지 크기Top Shelf Image Size 노트Notes
1920x720px1920x720px 정적 .png 또는 계층화 된 .lsr 파일Static .png or layered .lsr file

Apple은 최고 선반 이미지를 만들기 위해 다음과 같은 제안 사항을 제공 합니다.Apple provides the following suggestions for creating your Top Shelf Images:

  • Rich Static 이미지 사용 – 앱이 동적 콘텐츠를 제공 하지 않는 경우에는 최상위 선반 이미지가 포커스를 받을 수 없습니다.Use Rich Static Imagery – If your app does not provide a dynamic content, its Top Shelf Image will be non-focusable. 이 이미지를 사용 하 여 앱 또는 브랜드의 기능을 강조 표시 합니다.Use this image to highlight the features of the app or your brand.
  • 앱 콘텐츠에 대 한 링크 – 동적 최고 선반 레이아웃은 사용자가 앱에서 가장 중요 한 콘텐츠를 찾는 빠른 링크를 제공 합니다.Link to App Content – Dynamic Top Shelf Layouts provide a quick link to the content that your user finds most important in your app. 이 영역을 사용 하 여 앱을 시작 하 고 즉시 지정 된 콘텐츠로 이동 하는 빠른 링크를 제공 합니다.Use this area to provide a quick link to start your app and immediately jump into the given content.
  • 최신 콘텐츠 소개 – 풍부한 인기 있는 콘텐츠를 통해 사용자를 앱에 그려 더 사용할 수 있습니다.Showcase the Latest Content – Rich Top Shelf content can draw a user into your app and make them want to use it more. 이를 영역으로 사용 하 여 가장 높은 등급 또는 최신 콘텐츠를 소개 합니다.Use this as an area to showcase the highest rated or newest content.
  • 개인 설정 된 콘텐츠 – 사용자가 가장 자주 사용 하거나 즐겨 사용 하는 앱을 홈 화면의 맨 위 행에 저장 합니다.Personalized Content – Users place their most frequently used or favorite apps in the Top Row of the Home screen. 가장 관심 있는 콘텐츠를 표시 하려면 최상위 선반을 사용 합니다.Use the Top Shelf to display the content they would be most interested in.
  • 광고 허용 안 됨 – 광고는 맨 위 선반에 표시 되지 않도록 엄격히 금지 됩니다.Ads Not Allowed – Ads are strictly prohibited from being displayed in the Top Shelf. 최신 구입 가능 콘텐츠를 표시할 수 있지만 가격 정보는 표시 되지 않습니다.You may show the latest purchasable content, but no pricing information should be displayed.

최고 선반 이미지 설정Setting the Top Shelf Image

TvOS 프로젝트에 필요한 최상위 선반 이미지를 설정 하려면 다음을 수행 하십시오.To set the Top Shelf Image required for your tvOS project, please do the following:

  1. 솔루션 탐색기에서 Assets.xcassets를 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Explorer, double-click Assets.xcassets to open it for editing:

  2. 자산 편집기에서 App Icon & Top Shelf Image 자산을 확장 합니다.In the Asset Editor, expand the App Icon & Top Shelf Image asset:

  3. Top Shelf Image 자산을 클릭 합니다.Click on the Top Shelf Image asset:

  4. 1X APPLE TV 항목 을 클릭 하 고 이미지 파일을 선택 합니다.Click on the 1x Apple TV entry and select an image file.

  5. 변경 내용을 저장합니다.Save your changes.

동적 최고 선반 콘텐츠Dynamic Top Shelf Content

정적 최상위 선반 이미지를 표시 하는 대신 맨 위 선반에는 포커스를 받을 수 있는 항목 의 동적 행 이나 스크롤 배너의 동적 집합이 포함 될 수 있습니다.Instead of displaying a static Top Shelf Image, the Top Shelf can contain a dynamic row of Focusable Items or a dynamic set of scrolling banners. 이러한 동적 스타일을 사용 하면 앱에서 제공 하는 콘텐츠를 강조 표시 하거나 가장 많이 사용 하는 기능으로 바로 이동할 수 있습니다.Both of these dynamic style allow you to highlight the content provided by your app or jump into its most used features.

단면화 콘텐츠 행Sectioned Content Row

이 동적 상위 선반 콘텐츠 유형은 스크롤 된 단일 행을 제공 합니다. 포커스 가능 항목은 선택적으로 섹션으로 세분화 됩니다.This dynamic Top Shelf content type presents a single row of scrolling, Focusable Items optionally broken down into sections. 일반적으로 새로 만들기, 즐겨찾기 또는 최근 본 앱 콘텐츠를 강조 표시 하는 데 사용 됩니다.It's typically used to highlight new, favorite or recently viewed app content.

콘텐츠는 현재 선택 된 콘텐츠 (현재 포커스가 있음) 아래에 레이블이 표시 된 단일 가로 스크롤 콘텐츠 목록으로 표시 됩니다.Content is presented as a single, horizontal scrolling list of content with a label appearing under the current piece of content selected (that currently has focus). 사용자가 지정 된 콘텐츠를 선택 하면 앱이 시작 되 고 해당 콘텐츠로 직접 가져와야 합니다.If the user selects a given piece of content, your app will be launched and they should be taken directly into that content.

필요한 콘텐츠 크기는 다음과 같습니다.The following content sizes will be required:

포스터 (2:3)Poster (2:3) 제곱 (1:1)Square (1:1) HDTV (16:9)HDTV (16:9)
실제 크기Actual Size 404x608px404x608px 608x608px608x608px 908x512px908x512px
안전한 영역 크기Safe Zone Size 380x570px380x570px 570x570px570x570px 852x479px852x479px
포커스가 없는 크기Unfocused Size 333x500px333x500px 500x500px500x500px 782x440px782x440px
포커스가 있는 크기Focused Size 380x570px380x570px 570x570px570x570px 852x479px852x479px

Apple은 단면화 된 콘텐츠 행에 대해 다음과 같은 제안 사항을 제공 합니다.Apple provides the following suggestions for the Sectioned Content Row:

  • 행 완료 – 화면의 전체 너비를 확장할 수 있는 충분 한 콘텐츠를 제공 해야 합니다.Complete the Row – You should provide enough content to span the full width of the screen.
  • 혼합 이미지 크기 조정 – 단면화 된 콘텐츠 행은 위에 제공 된 목록의 이미지 크기를 혼합 하 여 저장 하도록 디자인 되었습니다.Scaling Mixed Images – The Sectioned Content Row was designed to hold a mix of image sizes (from the list provided above). 그러나 이미지 크기를 혼합 하는 경우 콘텐츠 표시를 정규화 하기 위해 추가 크기가 적용 됩니다.If you do mix image sizes however, be aware that additional scaling will be applied to normalize the content display.

스크롤 삽입 배너Scrolling Inset Banners

필요에 따라 tvOS 앱은 화면을 거의 채우는 배너의 자동 스크롤 및 반복 컬렉션으로 최상위 선반에 콘텐츠를 제공할 수 있습니다.Optionally, your Xamarin.tvOS app can present its content in the Top Shelf as an automatically scrolling and looping collection of banners that nearly fill the screen. 이 스타일은 일반적으로 새로운 TV 쇼와 같은 풍부한 새 콘텐츠를 소개 하는 데 사용 됩니다.This style is typically used to showcase rich, new content like new TV shows.

자동 스크롤 외에도 사용자가 배너를 제어 하 고 Siri 원격을 사용 하 여 어느 방향으로 든 스크롤할 수 있습니다.In addition to the automatic scrolling, the user can take control of the banners and scroll in either direction using the Siri Remote. 배너가 포커스가 있을 때 Siri 원격에서 작은 원형 제스처를 만들면 해당 배너에 대 한 시차 효과가 활성화 됩니다.Making a small, circular gesture on the Siri Remote when a banner is in focus will activate the Parallax Effect for that banner.

배너 이미지 (추가 너비)Banner Image (Extra Wide)

실제 크기Actual Size 1940x624px1940x624px
안전한 영역 크기Safe Zone Size 1740x620px1740x620px
포커스가 없는 크기Unfocused Size 1740x560px1740x560px
포커스가 있는 크기Focused Size 1740x620px1740x620px

스크롤 삽입 배너는 정적 .png 또는 계층화 된 .lsr 파일로 제공 될 수 있습니다.Scrolling Inset Banners can either be provided as a static .png or layered .lsr file.

Apple은 스크롤 삽입 배너에 대해 다음과 같은 제안 사항을 제공 합니다.Apple provides the following suggestions for the Scrolling Inset Banners:

  • 내용 금액 -자연스럽 게 스크롤할 수 있도록 최소 3 개의 배너를 제공 해야 합니다.Content Amount - You should provide a minimum of three (3) banners for the scrolling to feel natural. 8 개 이하의 배너를 포함 하거나 최종 사용자를 위해 탐색을 수행 해야 합니다.You should include no more than eight (8) banners or it make navigation hard for the end user.
  • 콘텐츠 텍스트 -배너 이미지에 배너를 포함 해야 하는 경우에는 텍스트를 포함 해야 합니다.Content Text - If your banner requires text in should be included in the banner image. 계층화 된 이미지를 사용 하는 경우 텍스트가 최상위 계층에 있어야 합니다.If you are using Layered Images, your text should be in the topmost layer.

동적 최고 선반 콘텐츠를 제공 하기 위해 앱에 최상위 선반 확장을 추가 하는 방법에 대 한 자세한 내용은 Apple의 Tvservices 프레임 워크 참조 를 참조 하세요.Please see Apple's TVServices Framework Reference for more information on adding a Top Shelf Extension to your app to provide dynamic Top Shelf content.

Game Center 이미지Game Center Images

TvOS 앱이 게임 이며 지원 Game Center 포함 된 경우 몇 가지 추가 이미지 자산이 필요 합니다.If your Xamarin.tvOS app is a game and you've included Game Center support, several more image assets will be required:

  • 성과 아이콘 -원으로 자동 잘려는 각 성과에 불투명 이미지가 필요 합니다.Achievement Icons - An opaque image is required for each achievement that will be automatically cropped into a circle. 업적은 포커스를 받을 수 없는 항목입니다.Achievements are non-focusable items.
  • 대시보드 아트 워크 -Game Center 내에서 앱 대시보드의 맨 위에 표시 되는 선택적 이미지를 제공할 수 있습니다.Dashboard Artwork - An optional image can be provided that will appear at the top of your app's dashboard within Game Center. 이러한 이미지는 포커스를 받을 수 없습니다.These images are non-focusable.
  • 순위표 아트 워크 -앱에서 지 원하는 각 순위표에 대해 1 ~ 3 개의 16:9 가로 세로 비율 이미지를 제공 해야 합니다.Leaderboard Artwork - You must provide between one (1) to three (3) 16:9 aspect ratio images for each leaderboard that your app supports. 이러한 파일은 정적 .png 또는 계층화 된 .lsr 파일 일 수 있습니다.These may be either static .png or layered .lsr files. 순위표 아트 워크는 포커스를 받을 수 있습니다.The Leaderboard artwork is focusable.
성과 아이콘Achievement Icons 대시보드 아트 워크Dashboard Artwork 순위표 아트 워크Leaderboard Artwork
표시 크기Visible Size 200x200px200x200px 923x150px923x150px N/An/a
실제 크기Actual Size 320x320px320x320px N/An/a 659x371px659x371px
안전한 영역 크기Safe Zone Size N/An/a N/An/a 618x348px618x348px
포커스가 없는 크기Unfocused Size N/An/a N/An/a 548x309px548x309px
포커스가 있는 크기Focused Size N/An/a N/An/a 618x348px618x348px

Game Center 작업에 대 한 자세한 내용은 Apple의 Game Center 프로그래밍 가이드를 참조 하세요.For more information about working with Game Center, please see Apple's Game Center Programming Guide.

이미지 작업Working with Images

TvOS 9는 iOS 9의 하위 집합 이므로 Xamarin.ios 앱에 이미지를 포함 하 고 표시 하는 데 사용 되는 것과 동일한 기법은 tvOS 앱 에서도 작동 합니다.Since tvOS 9 is a subset of iOS 9, the same techniques used to include and display images in a Xamarin.iOS app, also work for a Xamarin.tvOS app. 자세한 내용은 이미지 표시 설명서를 참조 하세요.Please see our Displaying an Image documentation for more information.

TvOS 프로젝트 이미지 설정Setting Xamarin.tvOS Project Images

위에서 설명한 것 처럼 모든 tvOS apps에는 시작 이미지앱 아이콘이필요 합니다.As stated above, all tvOS apps require a Launch Image, and App Icon. 이 섹션에서는 자산 카탈로그에 설정 된 후 tvOS 앱 프로젝트에 대 한 시작 이미지 및 앱 아이콘을 선택 하는 방법을 설명 합니다.This section covers selecting the Launch Image and App Icon for your Xamarin.tvOS app project after they have been set in an Asset Catalog.

다음을 수행합니다.Do the following:

  1. 솔루션 탐색기에서 Info.plist를 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Explorer, double-click the Info.plist to open it for editing:

  2. Info.plist 편집기에서 앱 아이콘에 대 한 자산 카탈로그 ( 앱 아이콘 설정 섹션에서 위에 구성 됨)를 선택 합니다.In the Info.Plist Editor, select the Assets Catalog (configured above in the Setting the App Icons section) for the App Icons:

  3. 다음으로 시작 이미지에 대 한 자산 카탈로그 ( 시작 이미지 설정 섹션에서 구성 됨)를 선택 합니다.Next, select the Assets Catalog (configured above in the Setting the Launch Image section) for the Launch Images.

  4. 변경 내용을 저장합니다.Save your changes.

요약Summary

이 문서에서는 tvOS 앱에서 사용 되는 모든 이미지 형식 및 크기를 다루었습니다.This article has covered all of the image types and sizes used in a Xamarin.tvOS app. 먼저 이미지 시작, 계층화 된 이미지, 앱 아이콘, 인기 이미지 및 Game Center 이미지를 살펴보았습니다.First, it covered Launch Images, Layered Images, App Icons, Top Shelf Images and Game Center Images. 그런 다음 tvOS 앱에서 이미지 작업에 대해 설명 했습니다.Then it covered working with images in your Xamarin.tvOS app.