Xamarin에서 tvOS 아이콘 및 이미지 작업

아티클
03/16/2017

매혹적인 아이콘과 이미지를 만드는 것은 Apple TV 앱에 대한 몰입형 사용자 환경을 개발하는 데 중요한 부분입니다. 이 가이드에서는 Xamarin.tvOS 앱에 필요한 그래픽 자산을 만들고 포함하는 데 필요한 단계를 설명합니다.

이미지 시작 - 시작 이미지는 앱이 처음 시작될 때 표시되고 시작이 완료되면 앱의 첫 번째 화면으로 바뀝니다.
계층화된 이미지 - Apple TV와 관련된 Apple의 새로운 계층화된 이미지는 시차 효과와 함께 작동하여 선택한 항목에 대한 3D 효과를 만듭니다. 여러 가지 방법으로 계층화된 이미지를 만들 수 있습니다.
앱 아이콘 - 아이콘은 Apple TV 홈 화면뿐만 아니라 앱 스토어에 필요합니다. 계층화된 이미지로 제공해야 합니다.
위쪽 선반 이미지 - 앱이 홈 화면의 맨 위 행에 배치되는 경우 앱의 기능을 강조 표시하려면 위쪽 선반 이미지가 필요합니다. 필요에 따라 동적 상단 선반 콘텐츠를 제공하여 앱의 콘텐츠를 강조 표시할 수 있습니다.
게임 센터 이미지 - 앱이 게임이고 게임 센터를 사용하는 경우 몇 가지 추가 이미지가 필요합니다.
Xamarin.tvOS 프로젝트 이미지 설정 - Xamarin.tvOS 앱의 시작 이미지 및 앱 아이콘을 설정하는 데 필요한 단계를 설명합니다.

Important

Apple TV의 모든 이미지는 1배 해상도이며@1x 이 크기의 이미지만 사용해야 합니다. 더 큰 고해상도 그래픽을 포함하면 더 많은 메모리와 스토리지를 다운로드하고 사용하는 데 시간이 걸릴 뿐만 아니라 런타임에 동적으로 크기를 조정해야 하며 그리기 성능에 부정적인 영향을 줍니다.

이미지 시작

시작 이미지는 Xamarin.tvOS 앱이 Apple TV에서 처음 시작될 때 표시되는 첫 번째 이미지이며, 따라서 모든 tvOS 앱은 시작 이미지를 제공해야 합니다.

시작 이미지가 빠르게 나타나고 앱이 빠르고 응답성이 있다는 인상을 줍니다. Apple TV는 시작 이미지를 곧 앱의 첫 번째 화면으로 대체합니다.

이미지 시작은 광고나 꾸밈 표현을 위한 기회가 아니며 앱이 빠르게 시작되고 사용할 준비가 되었다는 인상을 주기 위해서만 존재합니다.

이미지 크기 시작	주의
1920x1080px	계층화되지 않은 .png 파일만

Apple은 앱의 시작 이미지를 디자인하기 위해 다음과 같은 제안을 합니다.

첫 번째 화면 과 거의 동일 - 시작 화면이 앱의 첫 번째 화면에 최대한 가까워야 합니다. 다른 그래픽이나 요소를 포함하면 첫 번째 화면이 나타날 때 성가신 "플래시"가 발생할 수 있습니다.
텍스트 사용 방지 - 시작 이미지가 정적이므로 표시되기 전에 지역화되지 않습니다.
다운 플레이 시작 - Apple TV 사용자가 앱을 자주 전환하기 때문에 앱 시작 프로세스에 주의를 끌면 안 됩니다.
광고 또는 브랜딩 없음 - 앱의 첫 번째 화면의 정적 부분이 아닌 경우 시작 이미지를 정보 화면으로 사용하거나 브랜딩을 포함해서는 안 됩니다. 광고는 엄격히 금지됩니다.

시작 이미지 설정

tvOS 프로젝트에 대한 시작 이미지를 설정하려면 다음을 수행합니다.

솔루션 탐색기 두 번 클릭하여 Assets.xcassets 편집용으로 엽니다.
자산 편집기에서 자산을 클릭합니다.LaunchImages
1x Apple TV 항목을 클릭하고 시작 이미지를 선택하거나 파일 시스템에서 새 이미지를 선택적으로 끌어옵니다.
변경 내용을 저장합니다.

계층화된 이미지

Apple TV를 새롭게 접하는 계층화된 이미지는 시차 효과와 함께 작동하여 사용자가 소파에 있는 사용자를 실내 화면의 콘텐츠에 정신적으로 연결하는 데 도움이 되는 3D 효과를 생성합니다.

계층화된 이미지는 전체 이미지를 형성하기 위해 결합된 2~5개의 개별 레이어를 포함합니다. 배경 계층을 제외하고 각 레이어는 투명도와 함께 Z 순서를 사용하여 깊이의 환상을 만듭니다. 사용자가 계층화된 이미지와 상호 작용하면 Z 순서가 높은 계층의 크기가 조정되고 겹쳐서 이 효과를 만듭니다.

Important

계층화된 이미지는 앱의 아이콘에 필요하며 다른 포커스 가능한 항목 (예: 상단 선반 이미지)의 경우 선택 사항입니다. 그러나 Apple은 앱에 초점을 맞출 수 있는 모든 이미지에 계층화된 이미지를 사용할 것을 제안합니다.

Apple은 계층화된 이미지를 디자인하기 위해 다음과 같은 제안을 합니다.

배경 계층을 불투명 하게 만들기 - 배경 계층(계층 1) 은 불투명해야 합니다 . 그렇지 않으면 Apple TV에서 계층화된 이미지를 사용하려고 할 때 오류가 발생합니다. 다른 모든 레이어는 3D 효과를 향상시키기 위해 여러 수준의 투명도를 포함할 수 있습니다.
전경, 중간 및 배경 요소 격리 - 눈에 띄는 요소(예: 게임 캐릭터)를 포그라운드에 배치하고 보조 요소 또는 그림자에 중간을 사용합니다. 마지막으로, 중립 배경을 포함하여 상위 계층에 대한 스테이지를 제공합니다.
텍스트를 포그라운드 에 유지 - 텍스트를 상위 수준으로 가리지 않으려면 일반적으로 맨 위 계층에 있어야 합니다.
단순 계층화 사용 - 시차 효과는 미묘하게 설계되었으므로 레이어를 최소한으로 유지하여 비현실적인 효과를 방지합니다.
금고 영역 포함 - 시차 효과 중에 상위 계층을 잘라낼 수 있으므로 각 레이어에 금고 영역 테두리를 빌드해야 합니다. 콘텐츠가 레이어 가장자리를 너무 가깝게 만들면 잘려질 수 있습니다. 상위 계층은 하위 계층보다 더 많은 크기 조정 및 자르기 환경을 경험하게 됩니다. 아래의 크기 조정 이미지 계층 섹션을 참조하세요.
미리 보기 자주 - 원하는 3D 효과가 발생하고 개별 레이어의 콘텐츠가 잘리지 않도록 계층화된 이미지를 자주 미리 볼 수 있어야 합니다. 실제 Apple TV 하드웨어에서 계층화된 이미지를 미리 보기하여 예상대로 렌더링되도록 해야 합니다.

가능하면 항상 기본 제공 UIKit 컨트롤을 사용하여 계층화된 이미지를 표시해야 합니다. 이 컨트롤은 포커스에 오면 시차 효과를 자동으로 얻게 됩니다.

이미지 계층 크기 조정

계층화된 이미지를 구성하는 각 레이어에 금고 영역 테두리를 포함해야 합니다. 시차 효과 중에 개별 레이어의 크기를 조정하고 잘릴 수 있으므로 레이어의 가장자리에 너무 가까울 경우 레이어의 내용을 잘라낼 수 있습니다.

계층화된 이미지 만들기

tvOS는 다음 형식의 계층화된 이미지에서 작동합니다.

CAR 파일 - Apple에서 만든 독점 자산 카탈로그 형식입니다. CAR 파일을 직접 만들지 않고, 컴파일 시간에 모든 LSR 파일에서 만들어지고 앱 번들에 포함됩니다.
LSR 이미지 - Apple에서 만든 독점 이미지 형식입니다. 시차 내보내기 Adobe 사진hop 플러그 인 또는 시차 미리 보기를 사용하여 LSR 형식으로 계층화된 이미지를 만들고 미리 봅니다.
Assets.xcassets - 컴파일 시간에 CAR 또는 LSR 형식의 계층화된 이미지로 컴파일될 자산 카탈로그에 포함된 2개에서 5개(5개) 표준 .png 형식의 이미지까지입니다.
LCR 파일 - Apple에서 만든 독점 파일 형식입니다. LCR 파일은 콘텐츠 서버 중 하나에서 다운로드한 추가 콘텐츠로 사용됩니다. LCR 파일은 앱 번들에 포함되어서는 안 됩니다. LCR 파일은 Xcode에 포함된 명령줄 도구를 사용하여 layerutil LSR 또는 사진hop 파일에서 생성됩니다.

시차 미리 보기

Apple은 미리 보기할 시차 미리 보기를 만들고 앱 아이콘 및 선택적 포커스 가능 항목에 필요한 계층화된 이미지를 만들었습니다. 미리 보기는 완성된 계층화된 이미지를 구성하는 모든 계층을 표시합니다.

계층화된 이미지를 미리 보는 동안 마우스를 사용하여 이미지를 회전하고 시차 효과를 미리 볼 수 있습니다. + (더하기) 및 - (빼기) 단추를 사용하여 레이어를 추가하고 제거합니다.

새 계층화된 이미지를 만들 때 LSR 형식으로 내보내고 앱의 번들에 포함할 수 있습니다.

계층화된 이미지를 만들고 미리 보는 방법에 대한 자세한 내용은 tvOS용 앱 프로그래밍 가이드의 Apple의 시차 아트워크 만들기 섹션을 참조하세요.

앱 아이콘

Xamarin.tvOS 앱에는 Apple TV 홈 화면의 앱 아이콘뿐만 아니라 앱 스토어 아이콘도 필요합니다. 앱 아이콘은 잠재적인 사용자에게 좋은 인상을 주기 위한 첫 번째 변경 사항이며 앱의 목적을 한눈에 전달해야 합니다.

모든 앱은 작은 버전과 큰 버전의 앱 아이콘을 모두 제공해야 합니다. 앱이 설치되면 Apple TV 홈 화면에서 작은 아이콘이 사용됩니다. 큰 버전은 App Store에서 사용됩니다. 큰 앱 아이콘은 작은 아이콘 버전의 모양과 느낌을 모방해야 합니다.

작은 아이콘	해결	해결
실제 크기	400x240px	1280x768px
금고 영역 크기	370x222px
할당되지 않은 크기	300x180px
포커스가 있는 크기	370x222px

Important

앱 아이콘은 계층화된 이미지로 제공되어야 합니다. 자세한 내용은 위의 계층화된 이미지 섹션을 참조하세요.

Apple은 앱 아이콘을 만들기 위한 다음과 같은 제안을 제공합니다.

단일 포커스 지점 제공 – 아이콘의 가운데에 직접 배치된 단일 포커스 포인트를 사용하여 아이콘을 디자인합니다.
단순 배경 사용 – 아이콘 배경을 단순하게 유지하여 위쪽 레이어가 눈에 띄게 합니다. 간단한 색이나 미묘한 그라데이션을 사용하는 것이 좋습니다.
텍스트 양 제한 – 사용자가 앱의 이름을 선택하면 아이콘 아래에 표시되므로 아이콘 디자인에 꼭 필요한 경우에만 텍스트를 포함해야 합니다.
스크린샷 사용 안 함 – 스크린샷은 아이콘에 비해 너무 복잡하며 사용자가 앱의 용도를 한눈에 볼 수 없습니다.
아이콘 사각형 유지 – tvOS는 아이콘의 모서리를 미묘하게 반올림하는 마스크를 자동으로 적용합니다. 이 반올림을 직접 포함하지 마십시오.
레이어 구분 - 텍스트는 맨 위 계층, 중간의 보조 항목 및 위쪽 레이어가 빛을 발할 수 있는 중립 배경에 있어야 합니다.
그라데이션 및 그림자를 신중하게 사용 – 그라데이션과 그림자가 시차 효과와 충돌할 수 있으므로 신중하게 사용해야 합니다. 간단한 위에서 아래로, 밝은 어두운 그라데이션 스타일이 가장 적합합니다. 그림자는 일반적으로 날카롭고 단단한 색조로 가장 잘 작동합니다.
계층 투명도 변경 – 앱 아이콘의 상위 수준에서 다양한 수준의 투명도를 사용하여 3D 효과를 높입니다. 배경 계층은 불투명해야 합니다. 그렇지 않으면 오류가 발생합니다.

앱 아이콘 설정

tvOS 프로젝트에 필요한 앱 아이콘을 설정하려면 다음을 수행합니다.

솔루션 탐색기 두 번 클릭하여 Assets.xcassets 편집용으로 엽니다.
자산 편집기에서 자산을 확장합니다.App Icon & Top Shelf Image
다음으로 자산을 확장합니다.App Icon - Small
그런 다음 자산을 Back 확장하고 항목을 클릭합니다 Contents .
1x Apple TV 항목을 클릭하고 이미지 파일을 선택합니다.
및 Middle 자산에 Front 대해 위의 단계를 반복합니다.
그런 다음 동일한 단계를 반복하여 자산을 정의합니다 App Icon - Large .
변경 내용을 저장합니다.

상단 선반 이미지

사용자가 Apple TV 홈 화면의 맨 위 행에 Xamarin.tvOS 앱을 배치한 경우 사용자가 앱을 선택할 때 큰 상단 선반 이미지가 표시됩니다. 이 이미지는 앱의 기능을 강조 표시하거나 콘텐츠에 대한 직접 링크를 제공해야 합니다.

상단 선반 이미지는 단일 정적 .png 또는 .lsr 파일(계층화된 이미지 만들기 참조)으로 제공되거나 런타임에 포커스 가능한 항목의 단일 행으로 동적으로 만들 수 있습니다(아래 동적 상단 선반 콘텐츠 참조).

상단 선반 이미지 크기	주의
1920x720px	정적 .png 또는 계층화된 .lsr 파일

Apple은 상위 선반 이미지를 만들기 위한 다음과 같은 제안을 제공합니다.

리치 정적 이미지 사용 – 앱이 동적 콘텐츠를 제공하지 않는 경우 위쪽 선반 이미지는 포커스가 없습니다. 이 이미지를 사용하여 앱 또는 브랜드의 기능을 강조 표시합니다.
앱 콘텐츠 에 대한 링크 – 동적 최상위 선반 레이아웃은 사용자가 앱에서 가장 중요하게 여기는 콘텐츠에 대한 빠른 링크를 제공합니다. 이 영역을 사용하여 앱을 시작하고 지정된 콘텐츠로 바로 이동할 수 있는 빠른 링크를 제공합니다.
최신 콘텐츠 소개 – 리치 탑 선반 콘텐츠는 사용자를 앱에 끌어들이고 더 많이 사용하려고 할 수 있습니다. 이 영역을 사용하여 가장 높은 등급 또는 최신 콘텐츠를 선보일 수 있습니다.
개인 설정된 콘텐츠 – 사용자가 가장 자주 사용하거나 즐겨 찾는 앱을 홈 화면의 맨 위 행에 배치합니다. 상단 선반을 사용하여 가장 관심 있는 콘텐츠를 표시합니다.
광고 허용 안 됨 – 광고는 상단 선반에 표시할 수 없도록 엄격히 금지됩니다. 구매할 수 있는 최신 콘텐츠를 표시할 수 있지만 가격 책정 정보는 표시되지 않아야 합니다.

위쪽 선반 이미지 설정

tvOS 프로젝트에 필요한 최상위 선반 이미지를 설정하려면 다음을 수행합니다.

솔루션 탐색기 두 번 클릭하여 Assets.xcassets 편집용으로 엽니다.
자산 편집기에서 자산을 확장합니다.App Icon & Top Shelf Image
자산을 클릭합니다.Top Shelf Image
1x Apple TV 항목을 클릭하고 이미지 파일을 선택합니다.
변경 내용을 저장합니다.

동적 상단 선반 콘텐츠

상단 선반은 정적 상단 선반 이미지를 표시하는 대신 포커스 가능한 항목의 동적 행 또는 동적 스크롤 배너 집합을 포함할 수 있습니다. 이러한 동적 스타일을 모두 사용하면 앱에서 제공하는 콘텐츠를 강조 표시하거나 가장 많이 사용되는 기능으로 이동할 수 있습니다.

섹션화된 콘텐츠 행

이 동적 Top Shelf 콘텐츠 형식은 스크롤의 단일 행을 표시하며, 포커스 가능한 항목은 필요에 따라 섹션으로 나뉩니다. 일반적으로 새 앱 콘텐츠, 즐겨찾기 또는 최근에 본 앱 콘텐츠를 강조 표시하는 데 사용됩니다.

콘텐츠는 선택한 콘텐츠의 현재 부분 아래에 레이블이 표시되는 콘텐츠의 가로 스크롤 목록으로 표시됩니다(현재 포커스가 있음). 사용자가 지정된 콘텐츠를 선택하면 앱이 시작되고 해당 콘텐츠로 직접 가져와야 합니다.

다음 콘텐츠 크기가 필요합니다.

크기	포스터(2:3)	정사각형(1:1)	HDTV(16:9)
실제 크기	404x608px	608x608px	908x512px
금고 영역 크기	380x570px	570x570px	852x479px
할당되지 않은 크기	333x500px	500x500px	782x440px
포커스가 있는 크기	380x570px	570x570px	852x479px

Apple은 섹션화된 콘텐츠 행에 대해 다음과 같은 제안을 제공합니다.

행 완료 – 화면의 전체 너비에 걸쳐 충분한 콘텐츠를 제공해야 합니다.
혼합 이미지 크기 조정 – 섹션화된 콘텐츠 행은 위에 제공된 목록에서 이미지 크기를 혼합하도록 설계되었습니다. 그러나 이미지 크기를 혼합하는 경우 콘텐츠 표시를 정규화하기 위해 추가 크기 조정이 적용됩니다.

스크롤 인셋 배너

필요에 따라 Xamarin.tvOS 앱은 화면을 거의 채우는 배너의 자동 스크롤 및 반복 컬렉션으로 상단 선반에 콘텐츠를 표시할 수 있습니다. 이 스타일은 일반적으로 새로운 TV 쇼와 같은 풍부하고 새로운 콘텐츠를 전시하는 데 사용됩니다.

사용자는 자동 스크롤 외에도 Siri 원격을 사용하여 배너를 제어하고 어느 방향으로든 스크롤할 수 있습니다. 배너가 포커스에 있을 때 Siri 원격에서 작고 원형 제스처를 설정하면 해당 배너에 대한 시차 효과가 활성화됩니다.

배너 이미지(매우 넓은)

크기	해결
실제 크기	1940x624px
금고 영역 크기	1740x620px
할당되지 않은 크기	1740x560px
포커스가 있는 크기	1740x620px

스크롤 인셋 배너는 정적 .png 또는 계층화된 .lsr 파일로 제공할 수 있습니다.

Apple은 스크롤 인셋 배너에 대해 다음과 같은 제안을 제공합니다.

콘텐츠 양 - 스크롤이 자연스럽게 느껴지도록 최소 3개의 배너를 제공해야 합니다. 8개 이하의 배너를 포함하거나 최종 사용자의 탐색을 어렵게 만들어야 합니다.
콘텐츠 텍스트 - 배너에 텍스트가 필요한 경우 배너 이미지에 포함해야 합니다. 계층화된 이미지를 사용하는 경우 텍스트가 맨 위 계층에 있어야 합니다.

앱에 상위 선반 확장을 추가하여 동적 상단 선반 콘텐츠를 제공하는 방법에 대한 자세한 내용은 Apple의 TVServices 프레임워크 참조 를 참조하세요.

게임 센터 이미지

Xamarin.tvOS 앱이 게임이고 게임 센터 지원을 포함하는 경우 몇 가지 이미지 자산이 추가로 필요합니다.

도전 과제 아이콘 - 자동으로 원으로 자르는 각 도전 과제에 불투명 이미지가 필요합니다. 도전 과제는 포커스가 없는 항목입니다.
대시보드 아트워크 - 게임 센터 내에서 앱 대시보드의 맨 위에 표시되는 선택적 이미지를 제공할 수 있습니다. 이러한 이미지는 포커스를 맞출 수 없습니다.
순위표 아트워크 - 앱이 지원하는 각 순위표에 대해 1~3(3) 16:9 가로 세로 비율 이미지를 제공해야 합니다. 정적 .png 또는 계층화된 .lsr 파일일 수 있습니다. 순위표 아트워크는 포커스가 있습니다.

크기	도전 과제 아이콘	대시보드 아트워크	순위표 아트워크
표시되는 크기	200x200px	923x150px	해당 없음
실제 크기	320x320px	해당 없음	659x371px
금고 영역 크기	해당 없음	해당 없음	618x348px
할당되지 않은 크기	해당 없음	해당 없음	548x309px
포커스가 있는 크기	해당 없음	해당 없음	618x348px

게임 센터 작업에 대한 자세한 내용은 Apple의 게임 센터 프로그래밍 가이드를 참조하세요.

이미지 작업

tvOS 9는 iOS 9의 하위 집합이므로 Xamarin.iOS 앱에 이미지를 포함하고 표시하는 데 사용되는 동일한 기술은 Xamarin.tvOS 앱에서도 작동합니다. 자세한 내용은 이미지 표시 설명서를 참조하세요.

Xamarin.tvOS 프로젝트 이미지 설정

위에서 설명한 대로 모든 tvOS 앱에는 시작 이미지 및 앱 아이콘이 필요합니다. 이 섹션에서는 자산 카탈로그에 설정된 후 Xamarin.tvOS 앱 프로젝트에 대한 시작 이미지 및 앱 아이콘을 선택하는 방법에 대해 설명합니다.

다음을 수행하십시오:

솔루션 탐색기 편집할 수 있도록 두 번 클릭하여 Info.plist 엽니다.
Info.Plist 편집기에서 앱 아이콘에 대한 자산 카탈로그(위에서 앱 아이콘 설정 섹션에서 구성됨)를 선택합니다.
다음으로, 시작 이미지에 대한 자산 카탈로그(이미지 시작 설정 섹션에서 위에서 구성됨)를 선택합니다.
변경 내용을 저장합니다.

요약

이 문서에서는 Xamarin.tvOS 앱에 사용되는 모든 이미지 유형 및 크기를 설명했습니다. 먼저 시작 이미지, 계층화된 이미지, 앱 아이콘, 상단 선반 이미지 및 게임 센터 이미지를 다루었습니다. 그런 다음 Xamarin.tvOS 앱에서 이미지 작업을 다루었습니다.

다음을 통해 공유

Xamarin에서 tvOS 아이콘 및 이미지 작업