빠른 시작: 파일 또는 이미지 리소스 사용(HTML)

아티클
01/28/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

앱에 이미지 및 기타 파일 리소스를 추가하고 앱에서 해당 파일을 참조할 수 있습니다. 아래 지침에 따라 폴더의 파일 리소스를 명명하여 구성할 경우 고대비 설정 또는 디스플레이 배율 기반 이미지 선택이 Windows 런타임에 기본적으로 지원됩니다.

지침

다른 디스플레이 구성(DPI) 및 대비 설정에 맞게 조정된 이미지 또는 다른 파일 자산을 만듭니다.

여러 가지 권장 크기로 이미지를 만들어 Windows에서 적절한 리소스를 로드할 때 앱 모양이 멋지게 보이도록 합니다. 픽셀 밀도에 맞게 크기 조정에 대한 지침을 참조하세요.
1. 각 이미지 복사본을 여러 개씩 만듭니다.
  1. 일반 96dpi 장치에서 사용되는 원래 크기입니다. 이 파일을 name**.scale-100.**ext(으)로 명명합니다(이 경우 및 모든 후속 지침에서의 경우에서, name은(는) 선택된 리소스 이름에 대한 자리표시자이며 ext은(는) 파일 형식 확장입니다. .scale-100은(는) Windows 런타임 크기 조정 동작을 입력하는 리소스 이름의 세그먼트이며 여기에서 설명하는 규칙을 사용해야 하는 이름의 일부입니다.)
  2. 원래 크기를 140%로 확대한 크기입니다. 예를 들어 100x100픽셀 이미지의 경우 140x140픽셀 이미지 버전도 있어야 합니다. 이 파일을 name**.scale-140.**ext(으)로 명명합니다.
  3. 원래 크기를 180%로 확대한 크기입니다. 예를 들어 100x100픽셀 이미지의 경우 180x180픽셀 이미지 버전도 있어야 합니다. 이 파일을 name**.scale-180.**ext(으)로 명명합니다.
  4. 240%, Windows Phone 앱의 원래 크기입니다. 예를 들어 100x100픽셀 이미지의 경우 240x240픽셀 이미지 버전도 있어야 합니다. 이 파일을 name**.scale-240.**ext(으)로 명명합니다.
  5. 검은색 배경에 흰색 전경을 가진 고대비 이미지의 원래 크기 이 파일을 name**scale-100_contrast-black.**ext(으)로 명명합니다.
  6. 흰색 배경에 검은색 전경을 가진 고대비 이미지의 원래 크기 이 파일을 name**scale-100_contrast-white.**ext(으)로 명명합니다.
  참고 앱 로고 이미지는 앱의 매니페스트 파일에 지정된 리소스를 사용할 수도 있습니다. 앱 로고를 위해 특별히 이미지를 사용하는 경우, 원래 크기의 80%인 복사본을 만들어야 합니다. 예를 들어 100x100px 로고 이미지에는 80x80px 이미지 버전도 있어야 합니다. 이 파일을 name**.scale-80.**ext(으)로 명명합니다. 자세한 내용은 앱 이미지 선택 및 타일 및 알림 시각적 자산을 참조합니다.
2. 앱 구조의 동일한 폴더에 모든 이미지를 배치합니다. 예를 들면 다음과 같습니다.
  1. images/logo.scale-100.png
  2. images/logo.scale-140.png
  3. images/logo.scale-180.png
  4. images/logo.scale-240.png
  5. images/logo.scale-80.png
  6. images/logo.scale-100_contrast-black.png
  7. images/logo.scale-100_contrast-white.png
한정자가 없는 HTML의 이미지를 참조합니다.

이 파일 리소스를 태그에서 참조할 때 name.ext 양식을 사용합니다(배율 또는 대비를 지정하는 세그먼트를 의도적으로 생략하며 Windows 런타임은 적절한 리소스를 검색할 때 이 세그먼트를 내부적으로 추가합니다). 예를 들면 다음과 같습니다.
```
<img src="images/logo.png" />
```
코드에서 한정자 없이 이미지를 참조합니다.

이 파일 리소스를 코드에서 참조할 때 name.ext 양식을 사용합니다(배율 또는 대비를 지정하는 세그먼트를 의도적으로 생략하며 Windows 런타임은 적절한 리소스를 검색할 때 이 세그먼트를 내부적으로 추가합니다). 위의 태그 지침에서 차이점은 해당 태그 파일의 상황 때문에 태그는 루트 외에도 구성표를 유추할 수 있습니다. 하지만 코드는 루트와 구성표를 유추할 수 없습니다. 새로운 Uri을(를) 구성할 때 URI(Uniform Resource Identifier)의 일부인 구성표와 루트는 코드가 필요합니다. 예를 들면 다음과 같습니다.
```
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);
```
로고 파일의 경우 매니페스트에서 한정자 없이 이미지를 참조합니다.
1. Microsoft Visual Studio에서 Package.appxmanifest 파일을 엽니다. 시각적 자산 탭을 엽니다.
2. 매니페스트 참조를 편집하여 리소스 파일을 참조합니다. 이것은 기본적으로 텍스트 편집 필드로 표시되어있습니다. 여기에 리소스 파일 이름을 지정할 때, 한정자 세그먼트를 생략합니다. 예를 들어 값이
```
images\logo.png
```
  일 수 있는 정사각형 150x150 로고의 필드가 있습니다.

파일 리소스 및 전역화

이 항목의 지침은 배율 및 대비 지원이 가능하도록 하는 리소스 한정자에 집중합니다. 파일 이름 내의 한정자를 포함하는 규칙을 사용합니다. 특히, 텍스트 또는 문화적으로 중요한 자료가 포함되어 있는 경우 배율 또는 대비 지원이 아닌 다른 이유로 일부 이미지 또는 다른 파일을 지역화해야 할 수 있습니다. 언어에 상관없이 사용자의 위치에 따라 파일이 달라질 수도 있습니다. 예를 들어 지도의 테두리는 사용자의 위치에 따라 달라질 수 있지만, 레이블은 사용자의 기본 언어를 따라야 합니다. 이렇게 하는 것이 필요한 이유에 대한 자세한 내용은 전역화 및 지역화에 대한 지침을 참조합니다.

언어 및 위치에 따라 다른 리소스가 필요한 경우 언어 및 위치가 런타임에 결정될 수 있고 다른 적절한 리소스가 로드되는 규칙 또한 Windows 런타임에서 지원합니다. 이 규칙에서는 파일 이름이 아니라 폴더 이름을 사용합니다. 여기에 설명된 파일 이름 규칙을 폴더 규칙과 결합하여 배율/대비 및 지역화 문제를 지원하는 리소스를 정의합니다. RTL 관련 리소스에 대한 지원이 있으며, 또한 파일 연결 시스템에서 이미지를 표시하는 것과 같이 특수한 상황에 사용되는 targetsize 규칙이 있습니다. 한정자를 사용하여 리소스 이름을 지정하는 방법을 참조하여 한정 리소스용 폴더 이름 규칙 및 한정 규칙에 대한 자세한 내용을 확인하세요.

다음을 통해 공유

빠른 시작: 파일 또는 이미지 리소스 사용(HTML)

지침

파일 리소스 및 전역화

관련 항목

추가 리소스