Windows 8.1 앱: 다른 화면 해상도에 대해 이미지 최적화

  • 아티클

 

Windows 및 Windows Phone에 적용

앱(예: 로고 및 시작 화면 이미지)을 식별하는 각 이미지의 다양한 버전을 추가할 수 있습니다. 그런 다음 테스트하여 화면 해상도가 다른 다양한 장치에서 제대로 표시되는지 확인할 수 있습니다. 각 이미지의 다양한 버전을 추가하면 사용자의 화면 크기에 맞게 그래픽이 확장되거나 축소되는 정도를 줄일 수 있습니다.

항목 내용

  • 이미지 파일 이름 지정 및 구성

  • 프로젝트에 이미지 파일 추가

  • 매니페스트에서 이미지 파일 식별

  • 다양한 크기 및 해상도에서 앱 미리 보기

이미지 파일 이름 지정 및 구성

나타내는 자산의 유형에 따라 파일의 이름을 지정합니다(예: Square7070.png). 동일한 폴더에 여러 파일을 저장하려는 경우 파일 이름에 scale 한정자를 포함합니다. 예를 들어 파일 중 하나에 Square7070Logo.scale-100.png와 같은 이름을 지정할 수 있습니다.

배율에 따라 폴더에 파일을 구성하려는 경우 파일 이름 대신 폴더 이름에 scale 한정자를 포함합니다. 예를 들어 Square7070Logo.png 및 Square150150Logo.png를 Assets\Scale-100 하위 폴더에 저장할 수 있습니다.

프로젝트에 이미지 파일 추가

솔루션을 열고 앱 프로젝트의 자산 폴더에 이미지 파일을 추가합니다.

공유 앱 프로젝트를 사용하여 둘 이상의 폼 팩터(예: Windows 및 Windows Phone)에 대한 앱을 빌드하려면 솔루션에서 공유 프로젝트의 자산 폴더에 이미지 파일을 추가하는 것이 좋습니다. 단, 해당 이미지가 두 폼 팩터에 모두 적합한 경우에만 해당됩니다.

매니페스트에서 이미지 파일 식별

  1. 솔루션 탐색기에서 App 매니페스트 디자이너(Package.appxmanifest)를 열고 시각적 자산 탭을 선택합니다.

  2. 시각적 자산 목록에서 모든 이미지 자산을 선택하여 이미지에 대한 설정을 표시합니다.

  3. 기본 로고에 짧은 이름을 표시하려면 짧은 이름 텍스트 상자에서 지정합니다.

    참고

    Windows Phone 앱의 경우 짧은 이름 및 기본 크기 값이 무시됩니다.

  4. 로고(예: 150x150 정사각형 로고)의 텍스트 상자에서 기본 로고를 지정합니다.

    150x150 정사각형 로고에 대한 기본값은 Assets\Logo.png입니다.

  5. 페이지의 크기가 조정된 자산 영역에서 배율 상자 옆에 있는 찾아보기() 단추를 선택하고 자산 폴더로 이동하여 해당 배율에 적합한 이미지를 지정한 다음 열기 단추를 선택합니다.

    참고

    크기가 축소된 이미지의 자세히 보기를 표시하려면 상자에서 이미지를 선택합니다. 미리 보기 창이 열리고 각 이미지 파일이 사용되는 위치가 나열됩니다.

    이미지가 상자에 나타나고 파일이 복사됩니다. 복사된 파일은 스토어 앱의 리소스 명명 규칙인 Name.scale-nnn.ext에 따라 이름이 지정됩니다. 여기서 nn은 배율입니다. 예를 들어 파일의 이름이 Logo.scale-100.png로 지정될 수 있습니다.

다양한 크기 및 해상도에서 앱 미리 보기

Windows에만 적용

시뮬레이터를 사용하여 Windows 스토어에 맞게 디자인한 앱을 미리 볼 수 있습니다. 자세한 내용은 시뮬레이터에서 Windows 스토어 앱 실행을 참조하세요.

시뮬레이터를 사용하여 Windows Phone 스토어에 맞게 디자인한 앱을 미리 볼 수 있습니다. 디버거 표준 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 에뮬레이터를 선택합니다. 앱을 미리 보려는 해상도와 일치하는 에뮬레이터를 선택합니다.

중요

스토어에 앱을 게시하기 전에 항상 실제 장치에서 앱을 테스트합니다.

참고 항목

빠른 시작: 파일 또는 이미지 리소스 사용(C#/VB/C++ 및 XAML을 사용하는 Windows 런타임 앱)
빠른 시작: 파일 또는 이미지 리소스 사용(JavaScript 및 HTML을 사용하는 Windows 런타임 앱)
한정자를 사용하여 리소스 이름을 지정하는 방법(C#/VB/C++ 및 XAML을 사용하는 Windows 런타임 앱)
한정자를 사용하여 리소스 이름을 지정하는 방법(JavaScript 및 HTML을 사용하는 Windows 런타임 앱)
앱 이미지 선택
픽셀 밀도에 맞게 크기 조정에 대한 지침
타일 및 알림 이미지 크기(Windows 런타임 앱)
타일 및 배지에 대한 지침
축소판 그림에 대한 지침
타일 및 템플릿 카탈로그(Windows 런타임 앱)