장치 적응

웹 또는 JavaScript를 사용하는 Windows 스토어 앱 개발자는 최대한 많은 장치, 크기 및 해상도에서 작동하도록 사이트를 코딩해야 하는 어려움이 있습니다. 또한 콘텐츠가 조각나거나(고정 레이아웃) 뒤섞여서(부동 레이아웃) 사용자의 외면을 받게 될 위험이 있습니다. @-ms-viewport 규칙을 CSS 스타일시트 미디어 쿼리와 함께 사용하면 JavaScript로 작성된 Windows 8용 Windows 스토어 앱 개발자와 웹 개발자가 최소한의 노력으로 각 장치용 앱과 사이트 레이아웃을 최적화할 수 있으므로 이러한 문제를 해결하는 데 도움이 됩니다.

@-ms-viewport 규칙은 CSS 장치 적응 사양에 정의되어 있는 @viewport 규칙을 기반으로 합니다. 이 사양은 현재 작업 초안 상태입니다. Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 @-ms-viewport 구현은 사양에 정의된 정보와 정확하게 매핑되지 않습니다. CSS 장치 적응 사양이 수정 또는 개선되면 그에 따라 구현도 변경될 수 있습니다.

좁은 창에서 사이트 보기

대부분의 최신 웹 사이트는 매우 좁은 창에 표시할 경우 편리하게 사용할 수 없습니다. 그럴 경우 고정 레이아웃은 잘리고 부동 레이아웃은 뒤섞인 상태로 표시될 수 있습니다. Windows 8의 앱 시나리오에서는 매우 좁은 창이 사용되는 경우가 많습니다. 콘텐츠가 잘리거나 뒤섞이는 문제를 방지하기 위해 콘텐츠가 자동으로 축소됩니다. 이 경우 개발자의 추가 작업이 필요하지는 않지만 콘텐츠의 기본 너비에 따라 콘텐츠가 보기 좋게 표시되지 않을 수도 있습니다. 사용자가 콘텐츠에 액세스할 때마다 강제로 확대/축소됩니다.

@-ms-viewport 규칙을 사용하면 최적화된 사이트와 앱을 쉽게 제공할 수 있습니다. "단일 고정 크기(one-size-fits-all)" 시나리오를 강제하여 작은 UI를 과도하게 확대하거나 큰 UI를 지나치게 압축하는 대신 @-ms-viewport 및 기존 CSS 미디어 쿼리 지원을 모두 사용하여 다양한 해상도에 맞게 사이트 또는 앱을 최적화할 수 있습니다. 특정 범위에 최적화된 페이지가 해당 범위 내의 해상도를 가진 장치에서 더 자연스럽게 크기가 조정되도록 지정할 수 있습니다. 그러면 데스크톱 디스플레이뿐만 아니라 소형 슬레이트나 사이드 상태에서도 사이트를 최적화할 수 있습니다.

@-ms-viewport 규칙 사용

@-ms-viewport 규칙은 미디어 쿼리와 함께 작동하여 레이아웃 최적화를 도와줍니다. 일반적으로 @-ms-viewport 규칙은 다음 의사 코드 조각과 같이 미디어 쿼리 내에 중첩됩니다.

@media [media query logic here] {
  @-ms-viewport {
    [viewport size here]
  }
  [CSS for this layout combination goes here.]
}

Internet Explorer 10 이외의 브라우저(또는 이전 Windows Internet Explorer 버전)에서는 이 CSS의 성능이 적절하게 저하됩니다. @-ms-viewport 규칙과 해당 콘텐츠는 인식할 수 없는 경우 무시됩니다.

사용 예제: 사이드 상태에 최적화된 웹 페이지

다음 예제는 @-ms-viewport 규칙의 일반적인 사용을 보여 줍니다. 특히 이 선택기를 사용하여 작은 웹 페이지 버전을 사이드 상태에서 보기에 적합하도록 최적화할 수 있습니다.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

너비가 400픽셀보다 작은 뷰포트(예: 사이드 상태)는 너비 320픽셀로 배치되고 적합한 크기로 조정됩니다. 아래 나열된, 작은 화면에 최적화된 CSS가 적용됩니다.

사용 예제: 고정 크기 응용 프로그램

다음은 미디어 쿼리 없이 @-ms-viewport 규칙을 사용하는 기본 예제입니다(규칙이 항상 적용됨).


@-ms-viewport {
  width: 1024px;
  height: 768px;
}

예를 들어 가로 모드로 잠겨 있는 JavaScript를 사용하는 Windows 스토어 앱에서 이 예제를 사용할 수 있습니다. 이 경우 디스플레이 해상도나 디스플레이 비율(4:3, 16:9 와이드 스크린 등)에 관계없이 표시되는 콘텐츠("뷰포트")가 항상 1024픽셀 x 768픽셀 이상으로 유지되어야 합니다. 예를 들어 1920픽셀 x 1080픽셀(16:9 와이드 스크린 비율)인 디스플레이의 경우 디스플레이 높이에 맞게 뷰포트 크기가 조정됩니다. 와이드 스크린 디스플레이기 때문에 "필러박스" 효과(뷰포트 양쪽의 검은색 막대)를 위해 일반 CSS를 사용하여 응용 프로그램을 가운데에 배치할 수 있습니다. 1280×960 디스플레이에서는 가로 세로 비율이 1024×768 뷰포트와 같으므로 디스플레이를 완전히 채우도록 뷰포트 크기가 조정됩니다.

이 앱에 가로 및 세로 모드를 모두 허용하는 미디어 쿼리를 추가하여 이 예제를 확장할 수 있습니다.


@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 1024px;
    height: 768px;
  }
  /* CSS for landscape layout goes here */
}

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

이 예제는 두 번째 @media 규칙에서 세로 방향을 고려한다는 점을 제외하고 실제로 이전 예제와 동일한 작업을 합니다. 세로 모드의 경우 콘텐츠 방향이 변경될 수 있지만(방향 차이를 고려하기 위해 텍스트와 사진이 다르게 배치될 수 있음) 뷰포트는 동일하게 유지됩니다. 너비 및 높이 값이 바뀌었으므로 표시되는 콘텐츠 영역은 변경되지 않습니다.

사용 예제: 너비에 최적화

다음은 미디어 쿼리 및 @-ms-viewport를 사용하여 크기 조정 동작을 너비에 최적화한 페이지 예제입니다. 각 미디어 쿼리가 다른 해상도 범위를 다룹니다. 각 범위 내에서 @-ms-viewport 규칙은 해당 범위 내의 장치 크기가 조정되어야 하는 너비를 지정합니다. 각 규칙을 따르는 CSS는 해상도 범위에 맞게 크기가 조정된 콘텐츠를 표시하는 방법을 정확하게 정의합니다.


@media screen and (max-width: 400px) {
    @-ms-viewport { width: 320px; }
    /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
    @-ms-viewport { width: 400px; }
    /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
    @-ms-viewport { width: 640px; }
    /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
    /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
    /* CSS for 1366px layout goes here */
}

사용 예제: 자동 크기 조정 옵트아웃(opt out)

기본적으로 새 Windows UI의 Internet Explorer에서는 창의 폭이 1024픽셀보다 좁아지면 자동으로 콘텐츠 크기를 조정합니다. 주로 사이드 상태 및 세로 모드가 여기에 해당합니다.

그러나 이 자동 크기 조정이 필요 없거나 적합하지 않은 경우 device-width 키워드를 사용할 수 있습니다. 이 키워드는 장치 너비에 관계없이 페이지가 제대로 작동하도록 최적화되었음을 나타냅니다.


@-ms-viewport { width: device-width; }

이 키워드를 사용할 경우 페이지가 좁은 사이드 상태 및 세로 모드에서 제대로 작동하는지 확인합니다.

API 참조

Device Adaptation

샘플 및 자습서

적응 웹 사이트 디자인

Internet Explorer 테스트 드라이브 데모

Make it Snappy!

IEBlog 게시물

창 크기에 맞게 사이트 적응
IE10 Release Preview에서 웹 안정성 향상

사양

CSS 장치 적응

관련 항목

미디어 쿼리 및 수신기

 

 

표시:
© 2014 Microsoft