HTML 컨트롤을 이용한 멋진 Metro 스타일 앱 만들기

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

HTML 컨트롤을 이용한 멋진 Metro 스타일 앱 만들기

  • Comments 0

Windows 8에서는 HTML을 사용해 Metro 스타일 앱을 만들 수 있습니다. HTML 컨트롤을 직접 사용하여 새로운 Windows 8 경험을 자동으로 구현할 수 있습니다. 터치 기능을 지원하면서 HTML을 유연하게 사용할 수 있는 앱을 만들어 상업적 경쟁력을 높일 수 있도록 HTML 구현 환경을 개선하는 데 많은 노력을 기울였습니다. 이는 멋진 앱을 쉽고 빠르게 만들 수 있게 하고자 하는 목표에서 비롯된 것입니다.

특히 기존의 전문 지식을 활용해 우수한 경험을 구현할 수 있도록 Windows 8에서도 <button>과 같은 공용 HTML 컨트롤을 계속 이용할 수 있게 하고자 했습니다. Windows 8에서는 Windows 8 경험이 기본 적용된 표준 HTML의 새로운 구현 방식을 지원합니다. 즉, 이러한 표준 컨트롤은 모두 Windows 8의 디자인, 간편한 터치 경험, 철저한 현지화 및 세계화 지원 기능을 기본적으로 갖추고 있습니다. 따라서 표준 HTML 컨트롤을 사용하면 고객에게 어필할 수 있으면서 HTML 특유의 유연성을 그대로 유지하는 Metro 스타일 앱을 만들 수 있습니다.

Windows 8 팀은 여러분이 사용자를 만족시키는 뛰어난 앱을 만들 수 있도록 하는 데 사명감을 가지고 있습니다. 대표적인 예로 <button>이라는 간단한 컨트롤이 Windows 8에 새로 추가되면서 생산성이 어떻게 향상되었는지를 살펴보겠습니다. 이 글에서 소개하는 유용한 정보는 Windows 8에서 HTML의 이점을 최대한 활용해 뛰어난 Metro 스타일 앱을 만드는 데 도움이 될 것입니다.

Windows 8 단추

우리가 제공하는 글과 디자인 지침을 읽어본 개발자라면 멋진 Metro 스타일 앱을 만들기 위해 알아야 할 아래 디자인 지침 정도는 이미 알고 계실 것입니다.

  1. Metro 스타일의 디자인 적용
  2. 터치에 적합한 디자인
  3. 세계화 및 접근성과 같은 기본적인 요소를 고려한 코딩
  4. 빠른 속도와 유연성

Windows 8의 업데이트된 HTML 컨트롤은 이러한 디자인 지침을 충돌 없이 따를 수 있도록 구현되었습니다. 이는 개발자가 '성공의 나래'를 펼칠 수 있도록 하려는 개발 목표를 반영한 것입니다.

성공의 나래: 우리는 플랫폼과 프레임워크를 제공함으로써 고객이 많은 시행 착오와 난관이라는 산을 넘고 언덕을 지나 사막을 건너는 험난한 과정을 겪는 대신 성공이 보장되는 방법을 쉽게 따를 수 있도록 했습니다. 우리가 쉽게 문제에 직면하고 실패를 경험하게 되는 모든 곳에 이러한 원칙을 적용했습니다.

- Internet Explorer 팀 파트너 설계자, Rico Mariani

그럼 이제 <button>을 사용할 때 어떻게 앱이 이 성공의 나래를 펼치고 멋진 Metro 스타일 앱의 특성이 실현되는지를 본격적으로 살펴보겠습니다.

Metro 스타일의 디자인 적용

Metro 스타일 디자인을 사용한 사용자 인터페이스를 쉽게 만들 수 있도록 하면서도 앱의 고유 브랜드와 요구 사항에 맞게 모습을 사용자 지정할 수 있는 유연성과 기능을 제공하고자 했습니다. VS 템플릿을 사용해 JavaScript와 HTML로 Windows 8 앱을 만들어본 개발자라면 <button>과 같은 모든 표준 HTML 컨트롤에 다음과 같이 Metro 스타일 디자인이 기본적으로 적용되어 있는 것을 이미 아실 것입니다.

<button>Windows 8 Rocks!</button>

 

Internet Explorer 10의 기본 단추
그림 1: Internet Explorer 10의 기본 단추
Windows 8 Metro 스타일 앱의 단추

그림 2: Windows Metro 스타일 앱의 단추

그렇다면 기본적인 원리는 무엇일까요? 이와 관련하여 Windows 8은 두 가지 측면에서 개선되었습니다. 첫째로, CSS를 통해 컨트롤에 다양한 부분과 시각적 상태를 표시할 수 있도록 그동안 없었던 유연성을 제공하기 위해 <button>과 같은 HTML 컨트롤에 대한 스타일링 기능을 개선했습니다. 둘째로, JavaScript용 Windows 라이브러리(WinJS)의 구성 요소 중 하나이자 모든 VS 템플릿에 기본적으로 포함된 두 가지 기본 스타일 시트를 통해 기본 Metro 스타일의 모든 시각적 요소를 HTML 컨트롤에 제공했습니다.

새로운 HTML 컨트롤 인프라

컨트롤을 좀 더 자유롭게 스타일링할 수 있도록 컨트롤 작성 방식을 핵심부터 다시 설계했습니다. 사실 Windows 8에서는 기본적인 디자인을 명확하게 나타내기 위해 모든 HTML 컨트롤에 이와 같은 개선된 스타일링을 적용했습니다.

현재 사용되는 대부분의 브라우저는 이전에 생성된 이미지를 사용해 컨트롤을 렌더링합니다. 따라서 컨트롤에 스타일을 적용할 때마다 브라우저는 하드 코드된 이미지를 버리고 단순하고 기본적인 모습으로 다시 렌더링한 다음 그 위에 개발자가 원하는 스타일을 적용합니다.

<button>의 경우 배경색만 적용해도 이러한 현상을 확인할 수 있습니다. 두 번째 단추에는 테두리에 3D 가장자리 모습이 적용된 것을 알 수 있습니다. 3D 테두리는 기본 모습의 일부입니다.

<button>Normal</button>

<button style="background-color: red;">Styled</button>

단추 스타일링

그림 1: Internet Explorer의 일반 단추와 스타일이 적용된 단추

하드 코드된 이미지를 통해 구현되는 기본 모습은 스타일링하는 데 한계가 있습니다. 새로운 스타일에 직접 스타일을 적용할 수 없고 이전에 생성된 비트맵에 스타일을 적용했을 때 스타일링이 어떻게 될지 그 결과를 바로 알기가 어렵습니다. 이러한 이유로 Windows 8에서는 더 이상 하드 코드된 이미지를 통해 HTML 컨트롤의 원래 모습을 제공하지 않습니다. 그에 따라 벡터 기반 기본 형식인 CSS를 사용하여 컨트롤에 직접 스타일을 적용할 수 있도록 모든 HTML 컨트롤을 처음부터 새로 설계했습니다.

또한 컨트롤의 내부 코드에 액세스할 수 있는 기능을 추가했습니다. 확인란과 같은 컨트롤의 경우 -ms-check 의사 요소를 사용하여 내부 확인 표시를 선택하고 상자와 별도로 이 내부 요소에 스타일을 적용할 수 있습니다.

input[type=checkbox]::-ms-check
{
background-image: url("myCheckMark.svg");
}

HTML 컨트롤에 추가된 부분을 모두 확인하려면 빠른 시작: 컨트롤 스타일 지정(JavaScript 및 HTML을 사용하는 Metro 스타일 앱)을 참조하세요.

CSS 스타일링을 조금만 더 살펴보다 보면 이전에는 불가능했던 멋진 스타일들이 기존 컨트롤에 가능해졌음을 알 수 있습니다.

확인란
그림 2: 스타일이 적용된 확인란 예제

자세한 내용은 공용 HTMS 컨트롤 샘플빠른 시작: 컨트롤 스타일 지정을 참조하세요.

모든 컨트롤을 CSS 기본 형식을 사용해 만들 경우 배율을 조정하기가 용이하다는 이점도 얻을 수 있습니다. Windows 8은 다양한 장치의 에코시스템을 지원할 뿐 아니라 컨트롤이 모든 화면 해상도와 DPI를 지원해야 한다는 점에서 이는 특히 중요합니다.

CSS 기본 형식을 사용하면 모든 컨트롤에서 효과적인 자동 크기 조정이 가능해지고 화면 해상도나 DPI에 관계없이 선명하게 표시됩니다.

소형, 중형 및 대형 벡터 단추

그림 3: 모든 해상도에서 선명하게 표시되는 CSS로 그린 이미지

컨트롤을 사용자 지정한 후에도 CSS 기본 형식이나 SVG 같은 벡터 기반 기술이 계속 사용되도록 해야 합니다. 래스터 이미지를 사용하면 크기를 조정했을 때 컨트롤에 픽셀화된 것 같은 느낌이 남고 모든 Windows 8 장치에서 앱이 매끄럽게 보이지 않습니다.

흐린 소형 래스터 단추그림 4: 최소화했을 때 흐리게 보이는 이미지
픽셀화된 대형 래스터 단추

그림 5: 확대했을 때 픽셀화된 것처럼 보이는 이미지

크기 조정을 처리하는 자세한 방법은 크기 조정 SDK 샘플을 참조하세요.

Windows 8의 Internet Explorer 10과 HTML은 동일한 HTML 플랫폼을 기반으로 합니다. 따라서 Internet Explorer 10의 모든 HTML 컨트롤도 CSS와 웹 페이지를 사용하여 구축되기 때문에 Windows 8에서 여러 화면 해상도와 DPI 간에 선명한 크기 조정이 가능합니다.

Metro 스타일 모습 기본 적용

우리는 CSS 스타일 시트를 통해 모든 컨트롤에 새로운 Metro 스타일의 모습을 제공합니다. 새로운 Windows 8 Metro 스타일 디자인이 어떻게 구현되는지, 그리고 앱의 브랜드 색 구성표를 사용해 컨트롤의 색을 바꾸면서 그러한 스타일을 통해 자체 브랜드를 어떻게 반영할 수 있는지를 명확하게 보여 주고 싶었습니다. 이러한 유연성의 이점을 한껏 살려보십시오. 컨트롤의 색을 손쉽게 적용할 수 있는 테마 롤러 SDK 샘플의 링크를 소개합니다.

이제 두 가지 기본 스타일 시트 중 하나를 선택하기만 하면 기본 모습을 적용할 수 있습니다. 두 스타일 시트는 기반으로 하는 색 구성표만 다릅니다. ui-dark.css에는 어두운 배경에 잘 어울리는 컨트롤 색이 포함되어 있고 ui-light.css에는 밝은 배경에 어울리는 색이 포함되어 있습니다. 대체로 이미지나 비디오를 많이 표시하는 앱의 경우 어두운 스타일 시트를 사용하고, 텍스트가 많이 들어 있는 앱에는 밝은 스타일 시트를 사용하는 것이 좋습니다. 사용자 지정 색 구성표를 사용할 경우에는 앱의 디자인에 가장 잘 어울리는 스타일 시트를 사용하면 됩니다. 다음 HTML을 사용하여 프로젝트에 이 두 스타일 시트 중 하나를 참조하는 방식으로 사용할 색 구성표를 선택합니다.

<head>

<!-- Dark Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

<!-- or Light Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

<!—Other header content -->

</head>

기본 스타일 위에 다른 스타일을 적용하여 만드는 가장 쉬운 방법은 CSS 기본 스타일 시트를 열어 포함된 CSS 스타일을 확인하는 것입니다.

원래 단추 예제로 돌아가서, 앞서 Metro 스타일 앱에서 살펴본 코드를 실행하면 이제는 다음과 같은 결과를 얻게 됩니다.

ButtonCSS

그림 6: 일반 단추와 스타일이 적용된 단추

Metro 스타일 앱에서는 개발자가 적용한 '스타일만' 덮어쓸 수 있습니다. 따라서 새로운 Metro 스타일의 디자인을 그대로 유지하면서 손쉽게 앱의 브랜드를 적용할 수 있습니다.

보다시피 컨트롤을 효과적으로 스타일링할 수 있고 여러 화면 해상도와 DPI에서 자동으로 선명하게 크기 조정되는 것을 알 수 있습니다. Metro 스타일의 디자인은 그대로 유지하면서 개발자가 앱에서 원하는 디자인을 쉽게 구현할 수 있도록 한 결과입니다.

터치에 적합한 디자인

여러분이 멋진 앱을 개발하실 수 있도록 터치, 마우스, 키보드를 모두 지원함과 동시에 시스템 내에서 일관적이면서도 익숙한 조작 방식을 제공할 수 있도록 하였습니다.

기존의 HTML 컨트롤도 키보드와 마우스 지원 기능이 뛰어납니다. 하지만 터치라는 새로운 조작 모드가 추가되었기 때문에 모든 HTML 컨트롤에서 터치가 효과적으로 지원되도록 해야 했습니다. 터치를 보다 효과적으로 지원하도록 코드를 작성하려면 먼저 터치 입력 방식만의 해결 과제를 이해해야 합니다.

정밀성이 떨어지는 손가락 조작

픽셀 단위로 정확한 조작이 가능한 마우스 포인터에 비해 손가락은 정밀도가 떨어지는 입력 수단입니다.

그림 7: 성인 손가락의 평균 너비가 11mm이고 유아는 8mm이며, 일부 농구 선수의 경우 19mm가 넘는 경우도 있음을 보여 주는 이미지

finger_size

탭 제스처의 정확도를 높이기 위해 Windows 8 HTML 플랫폼에는 다음 기능이 추가되었습니다.

  • 터치에 적합한 컨트롤 크기

기본적으로 Metro 스타일 HTML 컨트롤은 평균적인 손가락 크기에 맞춘 크기로 만들어져 있습니다. 때문에 사용자가 컨트롤을 편하게 조작할 수 있습니다. 잘못된 대상을 터치했을 때 제스처 한 번 또는 두 번 이내 또는 5초 이내에 수정이 가능한 경우 최소 크기로 7x7mm가 적당합니다. 기본 스타일 시트에는 모든 컨트롤의 최소 높이와 최소 너비가 7x7mm의 최소 면적으로 맞추어져 있습니다. 다음은 기본 스타일 시트의 값을 보여 주는 예입니다.

button, input[type=button], input[type=reset], input[type=submit] 
{
min-height: 32px;
min-width: 90px;
}
  • 터치 리타기팅

Windows 8 터치 타기팅 기능은 접촉 기하에서 시스템이 가장 가까이 있는 컨트롤을 찾아 터치 지점이 그 컨트롤을 향하도록 조정함으로써 사용자의 조작을 돕습니다.

  • 터치 명확화

터치 명확화 엔진은 손가락이 2개 이상의 컨트롤을 터치한 경우 사용자가 어디를 타깃으로 했는지 보다 효과적으로 판단할 수 있도록 시스템에 스마트 기능을 더합니다.

타기팅 피드백이 없음

마우스를 사용할 때는 먼저 커서로 목표 지점을 가리켜 1픽셀 크기의 점이 조작할 컨트롤에 정확하게 위치하도록 한 다음 클릭할 수 있습니다. 하지만 터치의 경우에는 가리킨 지점이 정확한지를 보여 주는 피드백이 없는 상태에서 화면을 가리켜야 합니다. 그리고 화면에 접촉하는 순간 바로 UI가 작동합니다. 즉, 마우스를 사용할 때는 준비한 후에 실제로 조작이 이루어지는데 반해, 터치를 사용할 때는 바로 조작이 이루어지는 것입니다. 타기팅할 틈이 없으니 당연히 터치에서는 실수가 발생할 가능성이 훨씬 큽니다.

Windows 8에서는 사용자가 터치를 편하게 사용할 수 있도록 하기 위해 사용자가 컨트롤을 실행하려 하는 시점을 나타내는 일련의 시각적 조작 상태를 정의했습니다. 예를 들어 사용자가 컨트롤을 작동했을 때 나타나는 시각적 요소가 컨트롤의 작동을 성공적으로 취소했을 때에도 그대로 나타납니다. Windows 8에서는 기본 스타일 시트를 통해 이러한 시각적 요소를 컨트롤에 직접 적용했습니다. Windows 8에서 이러한 시각적 요소는 CSS 상태를 터치 조작 상태에 매핑하는 식으로 구현했습니다. 다음은 <button> 컨트롤의 CSS 매핑을 보여 주는 예제입니다.

터치 조작 상태의 CSS 매핑그림 8: 터치 조작 상태의 CSS 매핑

몇 가지 조작 상태와 각 상태별로 시각적 요소를 컨트롤에 어떻게 적용했는지를 좀 더 자세히 살펴보겠습니다.

누른 상태

이제 컨트롤을 누르면 명확한 시각적 피드백이 나타나므로 사용자가 시스템에서 실제로 타기팅한 단추가 어느 것인지를 알 수 있습니다.

단추 터치 상태

그림 9: 단추 터치 상태

사용자가 단추를 누르면 :hover 및 :active와 같은 CSS 의사 상태가 모두 단추에 적용되어 CSS의 배경색 및 글꼴 색 스타일링을 통해 시각적 피드백을 제공합니다.

button:hover:active {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}

터치 조작에 :active 상태만 매핑하는 것이 아니라 :hover와 :active를 모두 매핑해 마우스와 유사한 프로그래밍 모델을 사용할 수 있게 했습니다. 따라서 두 가지 입력 유형에 같은 코드를 편리하게 사용할 수 있습니다. 마우스를 사용해 단추를 클릭할 때는 대개 마우스가 이미 해당 단추 위에 위치하고 있고 항상 이미 :hover 상태입니다. 마우스로 단추를 클릭하면 여기에 :active라는 상태가 추가됩니다.

취소

사용자가 다른 단추를 터치한 것을 시각적으로 확인하면 손가락을 바깥쪽으로 끈 후 떼는 방식으로 취소할 수 있습니다. 손가락이 단추에서 떨어지면 단추가 보통 상태로 돌아가 조작이 취소됨을 보여 줍니다.

비활성화 상태를 시각적으로 보여 주기 위해 사용자가 단추 밖으로 손가락을 끌면 :active는 단추에 계속 적용하고 :hover 상태는 무효화합니다. :active 상태 자체에는 적용되는 스타일이 없기 때문에 컨트롤이 다시 일반 스타일로 돌아가 마치 단추가 유휴 상태로 돌아가는 것처럼 보입니다. 이는 사용자에게 단추 동작이 취소되었음을 시각적으로 보여 주는 것으로, 마우스 조작에서도 실제로 사용되는 동작입니다. IE9에서는 전용 테마 비트맵 전환을 통해 이러한 시각적 효과를 구현했습니다. IE10에서는 공용 CSS 상태를 통해 변경되는 상태를 노출함으로써 컨트롤을 스타일링할 때 똑같은 효과를 구현할 수 있게 했습니다.

컨트롤을 스타일링할 때 단순히 :active 상태에 누른 상태 스타일을 적용해서는 안 됩니다. 이 상태는 취소 동작도 나타내므로 일반 상태와 같은 스타일이어야 합니다. 활성화 시의 올바른 상태는 :hover:active 상태입니다.

단추 취소 상태

그림 10: 단추 취소 상태

사용자가 실수로 다른 컨트롤을 작동하지 않기 위해 손가락을 떼야 하는 번거로움을 겪어서는 안 됩니다. 예를 들어 [확인] 단추와 [취소] 단추가 서로 가까이에 위치해 있는데 사용자가 실수로 [확인] 단추를 누른 후 끌어서 취소하려 할 때 잘못해서 [취소] 단추를 누를까봐 염려하지 않도록 해야 합니다. 즉, 이 경우에는 [취소] 단추가 활성 스타일로 작동 준비 상태가 되어서는 안 됩니다.

HTML 플랫폼에서는 <button>에서 터치 입력이 캡처되므로 이러한 작동 방식이 기본적으로 구현됩니다. 따라서 단추를 터치한 상태에서는 사용자가 다른 컨트롤을 실수로 작동할 염려 없이 편하게 끌어서 취소할 수 있습니다.

중복 클릭

터치의 경우 사용자가 화면에서 언제든지 포인터를 2개 이상 조작할 수 있습니다. 이를 멀티 터치 기능이라고 하며, 이 경우 터치 입력의 방향과 속도, 즉 제스처가 특별한 의미를 갖습니다. 예를 들어 손가락으로 화면의 한쪽을 터치하고 화면의 가로로 이동하는 '살짝 밀기'라는 제스처가 있습니다.

Windows 8 HTML 플랫폼에서는 멀티 터치 기능을 통해 동시에 둘 이상의 컨트롤에 :active 상태와 click 이벤트가 매핑되도록 했습니다. 따라서 사용자가 화면을 터치할 때 2개 이상의 컨트롤을 동시에 작동할 수 있습니다. <button>과 같은 단순한 컨트롤을 키보드 앱의 키나 게임의 컨트롤과 같은 시나리오에 사용할 수 있게 된 것입니다.

또한 제스처 감지 기능 덕분에 여러 가지 제스처를 인식하여 각각의 제스처에 HTML 컨트롤의 동작을 나타내는 의미를 부여할 수 있습니다. 예를 들어 단추를 살짝 밀 경우 페이지를 이동하라는 의미로 바로 인식됩니다. 슬라이더를 살짝 밀 경우에는 <input type=”range”>가 컨트롤에 대한 입력으로 해석됩니다. 이러한 동작은 사용자가 어떤 컨트롤을 터치하는지에 관계없이 앱이 터치 제스처에 유동적으로 반응하도록 하는 데 도움이 됩니다.

뛰어난 시각적 표시, 기본 지원되는 향상된 터치 타기팅 기능, 멀티 터치 지원, 터치 제스처에 대한 유동적인 반응을 통해 모든 HTML 컨트롤이 우수한 터치 경험을 기본적으로 지원하게 되었기 때문에 개발자가 컨트롤을 사용하고 이 글에서 설명하는 팁과 방법을 따를 경우 HTML Metro 스타일 앱에서 터치 기능이 자동으로 지원됩니다.

기본에 충실: 세계화와 접근성

우수한 앱이 되려면 최대한 많은 사람이 이용할 수 있어야 합니다. 다시 말해 앱을 세계화하고 접근성을 높여야 합니다. 개발자가 이러한 목표를 실현할 수 있도록 모든 HTML 컨트롤에 이러한 기반 기능을 적용했습니다.

글꼴 지원

HTML 컨트롤에 적합한 글꼴 지원 기능을 적용했습니다. 앱을 현지화하지 않더라도 현지화된 텍스트를 Windows 8에서 지원하는 모든 언어로 표시할 수 있습니다. 이러한 기능은 앱에서 텍스트 상자 컨트롤과 같이 사용자의 입력에 따라 텍스트를 표시할 때 특히 유용합니다. 해당 문자를 지원하는 글꼴이 컨트롤에 사용되도록 경험을 구현했기 때문에 앱에서는 다른 언어로 된 텍스트가 올바르게 표시됩니다. 또한 현지화된 Windows 버전에 맞는 기본 설정 Metro 스타일 글꼴도 제공됩니다. Windows는 모든 언어에 대해 기본 설정 Metro 스타일 글꼴을 선택합니다. 한마디로 글꼴을 지원하기 위한 추측성 작업을 없앤 것입니다.

글꼴 지원 원리를 자세히 살펴보려면 기본 스타일 시트를 다시 열어 여러 언어에 대해 대체 글꼴 목록이 자동으로 설정되는 것을 확인해보십시오. 다음의 일본어 예제에서는 Meiryo UI라는 글꼴이 첫 번째로 선택됩니다. 하지만 Meiryo UI 글꼴이 지원하지 않는 유니코드 문자가 앱에 사용될 경우 다음으로 Segoe UI가 대체 글꼴로 사용되고, 이 글꼴로도 문자를 모두 표시할 수 없으면 Ebrima를 사용하는 식으로 작동합니다. 따라서 대부분의 경우 Windows Metro 스타일의 기본 설정 글꼴 내에서 모든 문자가 지원됩니다. 특정 언어를 표시할 기본 글꼴이 없는 경우에 대비해 웹 플랫폼에서도 대체 글꼴을 기본 제공합니다. 따라서 컨트롤에 자리 표시자가 나타나는 경우는 없습니다.

body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja),

.win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja),

.win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja)
{
font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/
}

또한 이전 예제에서 보듯이 <body> 요소나 HTML 컨트롤에만 이러한 기능을 추가한 것이 아니라, 앱 콘텐츠에 적용 가능한 활자 스타일 목록도 제공되므로 콘텐츠에 대해서도 이러한 지능형 글꼴 선택이 자동으로 이루어집니다. 자세한 내용은 활자용 WinJS CSS 클래스를 참조하세요.

올바른 리소스 선택

개발자가 앱을 손쉽게 현지화할 수 있도록 리소스 로더를 만들었습니다. 이 로더를 사용하면 모든 HTML 컨트롤에 문제 없이 적용될 앱에 맞는 현지화된 문자열 집합을 로드할 수 있습니다. 이 리소스 로더는 지원해야 할 복잡한 언어들에 대해 개발자가 신경 쓰지 않아도 되도록 대체 메커니즘을 제공합니다. 이제 HTML에서 리소스를 선언적으로 참조하면 리소스 로더가 올바른 리소스를 자동으로 선택합니다.

<button data-win-res="{textContent: ‘string2’}">OK</button>

기본적으로 보장되는 접근성

앱이 보다 많은 사용자층에 제공될 수 있도록 모든 HTML 컨트롤에는 접근성 인프라가 기본 구축되어 있습니다.

우선, 모든 HTML 컨트롤에는 의미 체계상의 의미가 있기 때문에 내레이터와 화면 읽기 프로그램을 기본 지원합니다. 이는 시각 장애가 있는 사용자가 특정 화면상의 시각 요소를 식별하고 해석할 수 있도록 하기 위한 기능입니다. 화면 읽기 프로그램을 통해 <button> 컨트롤의 경우 앱에서 사용자의 조작을 기다리게 되고 <div> 컨트롤의 경우 모습이 비슷하더라도 사용자 조작이 필요 없다는 사실을 최종 사용자에게 알릴 수 있습니다. 화면 읽기 프로그램과 내레이터가 <div> 컨트롤에 대해 올바르게 작동하려면 ARIA 특성을 직접 추가해야 합니다.

둘째로, 모든 HTML 컨트롤이 고대비를 계속 지원하도록 했습니다. 고대비는 시력이 좋지 않은 사용자를 위해 고안된 표시 방법으로, 고대비 색 구성표를 사용할 경우 다른 색 조합이 사용되면서 화면의 대비가 높아져 일부 사용자가 화면을 알아보기가 쉬워집니다.

이러한 고대비 색은 기본 스타일 시트에 기본 적용되어 있으며, Windows를 고대비 테마로 표시할 때 컨트롤이 자동으로 고대비 색으로 전환되도록 했습니다. 즉, 앱에서도 고대비 기능이 기본적으로 호환됩니다. 고유한 기본 컨트롤에 스타일에 따라 업데이트한 색을 적용했더라도 동일하게 설정된 선택기를 사용하는 한 Windows가 컨트롤에 올바른 고대비 색을 표시합니다. 이 기능에 대한 자세한 내용은 BUILD 강연 이목을 사로잡는 HTML 앱용 스타일 만들기에서 참조할 수 있습니다.

고대비 전환 기능은 고대비 모드에 대한 미디어 쿼리를 추가하고, 기본 스타일 시트에 있는 각각의 고유 컨트롤에 필요한 색을 모두 정의하는 방식으로 간단히 구현했습니다. 어떠한 색이 사용되었는지는 기본 스타일 시트를 열어보면 쉽게 확인할 수 있습니다.

@media (-ms-high-contrast) 
{
/* high contrast definition */
}

뛰어난 글꼴 지원 기능, 올바른 현지화 리소스를 선택해 주는 리소스 로더, 기본적으로 구현되는 접근성은 최대한 많은 Windows 사용자층에 앱을 제공하는 데 도움이 될 것입니다.

앱의 속도와 유연성 개선

HTML 앱이 ARM을 비롯한 모든 Windows 8 장치에서 뛰어난 성능을 발휘할 수 있도록 앱의 기본 구성 요소인 컨트롤의 성능부터 높이고자 했습니다.

Windows 8에는 두 가지 브라우징 경험(Metro 스타일과 데스크톱)을 모두 지원하는 HTML 엔진과 HTML5 및 JavaScript 기반의 Metro 스타일 앱이 포함되어 있습니다. 이 공용 HTML 엔진은 브라우저 경험과 Metro 스타일 앱 모두를 위해 웹 표준 및 웹 프로그래밍 모델을 변함 없이 빠르고 강력하며 안전하게 지원합니다. 따라서 HTML Metro 스타일 앱은 IE10이 가지는 성능상의 이점을 모두 보여줍니다. 다음은 HTML 컨트롤의 성능에 영향을 주는 몇 가지 기능입니다.

  • Direct2D 하드웨어 가속

컨트롤은 HTML 플랫폼의 기본 구성 요소이기 때문에 HTML 플랫폼의 Direct2D 하드웨어 가속을 이용했습니다. 즉, 이제 Windows 8 HTML 앱의 모든 그래픽과 텍스트에 GPU를 사용할 수 있게 되었습니다. GPU는 전용 하드웨어를 사용해 화면을 효율적으로 업데이트할 수 있습니다. 시각적 렌더링에 GPU를 사용함으로써 JavaScript 코드의 JIT(Just-in-time) 컴파일과 같은 다른 작업을 수행할 CPU 성능을 추가로 확보하게 되어 앱의 성능이 개선됩니다.

  • 독립적인 터치

웹 플랫폼에서 성능을 개선한 부분으로는 이동과 확대/축소를 들 수 있습니다. 이동과 확대/축소 동작을 최적화함으로써 컨트롤의 자연스러운 동작을 구현하기 위해 많은 노력을 기울였습니다. 예를 들어 이동 영역에 표준 단추 컨트롤을 사용할 경우 사용자가 이동을 시작하면 시스템이 이동 영역과 단추의 터치 동작을 동시에 처리합니다. 따라서 처리할 컨트롤이 여러 개인 경우에도 최종 사용자의 환경에서 속도가 느려지지 않고, 이동 영역 내에 단추가 없었던 것처럼 이동 동작이 빠르게 실행됩니다. 컨트롤을 보다 단순하게 구현한 환경에서 종종 나타나는 것처럼 컨트롤을 사용할 때 속도가 저하되는 문제를 방지하기 위해 노력했습니다.

  • 컨트롤의 강력한 터치 지원 기능

뛰어난 터치 성능을 보장하기 위해 강력한 터치 기능이 지원되도록 시스템을 조정했습니다. 예를 들어 <button> 컨트롤에서는 탭 또는 살짝 밀기와 같은 터치 관련 제스처가 먼저 처리되도록 누른 상태를 표시하는 데 지연 시간을 두었습니다. 따라서 모든 조작에서 CPU 성능을 많이 소모하고 복잡한 상위 레이아웃 계산을 즉시 실행할 필요가 없게 됩니다. 결과적으로 사용자가 단추를 탭하기만 할 때 단추는 상위 컨테이너에서 레이아웃을 업데이트할 필요 없이 신속하게 누른 상태로 전환되었다가 다시 일반 상태로 전환됩니다. 이러한 약간의 조정만으로도 HTML 앱의 전반적인 성능을 높이는 데 도움이 됩니다.

통합 도구

지금까지 살펴본 유용한 플랫폼 기능 외에 HTML 컨트롤을 위한 뛰어난 도구도 제공됩니다.

Visual Studio와 Blend에서 성능이 향상된 몇 가지 도구의 예는 다음과 같습니다.

  • Visual Studio와 Blend에서 HTML, CSS 및 JavaScript용의 뛰어난 IntelliSense가 제공됩니다. 예를 들어 사용자가 Visual Studio에서 배경색을 설정하고자 할 때는 텍스트 기반 IntelliSense 대신 색 선택기를 제공합니다.

Blend의 인라인 색 선택기그림 11: Blend의 인라인 색 선택기

  • Blend에서는 모든 컨트롤을 도구 모음에서 디자인 화면으로 직접 끌어 놓을 수 있습니다. 또한 Blend에서는 디자인 화면에서 바로 컨트롤의 레이아웃과 크기를 지정할 수도 있습니다. 한마디로 앱의 컨트롤을 시각적으로 배치할 수 있게 된 것입니다.

Blend 디자인 화면의 단추그림 12: Blend 디자인 화면의 단추

  • Blend에서는 스타일 창을 통해 컨트롤에 스타일을 적용할 수 있습니다.

예를 들어 기본 제공 색 선택기를 사용해 배경색과 전경색을 설정할 수 있습니다.

styling_panel

그림 13: 색 선택기가 있는 Blend의 스타일 창

또는 컨트롤의 전환을 설정하는 등의 복잡한 작업도 가능합니다.

Blend의 전환 속성 창그림 14: Blend의 전환 속성 창

제공되는 도구 기능에 대한 자세한 내용은 Soma의 블로그를 참조하세요.

요약

이 글에서는 <button> 컨트롤을 주로 설명했지만 <button>에 적용되는 모든 기능은 다른 모든 기본 HTML 컨트롤에도 똑같이 적용됩니다.

Metro 스타일 앱을 만드는 개발자들에게 조금이라도 더 도움을 드리기 위해 HTML 컨트롤을 세부적으로 조정하는 데 많은 노력을 기울였습니다. 그 덕분에 이제 폼 팩터를 다양하게 지원하고 사용자에게 보다 향상된 경험을 선사하며 사용자층이 넓은 앱을 만들기에 손색없는 컨트롤이 구현되었습니다. Windows 8 앱 스토어, 메일, 일정 및 사진 앱 등 Release Preview에서 제공되는 주요 앱 중에는 HTML 컨트롤을 주로 사용하는 앱이 몇 가지 있습니다. 이러한 컨트롤을 사용함으로써 Metro 스타일의 디자인을 자동으로 적용할 수 있으며, 따라서 개발자는 앱의 핵심 가치를 높이는 데 더욱 전념할 수 있게 됩니다.

자세한 내용은 다음을 참조하세요.

컨트롤 및 콘텐츠 추가

Metro 스타일 앱용 UX 지침

SDK 샘플

CSS 스타일링: 앱 샘플의 브랜드 상품화

HTML 컨트롤 샘플

컨트롤스타일링에 대한 //BUILD/ 강연

- Windows 수석 프로그램 관리자, Kathy Kam


  • Loading...
Leave a Comment
  • Please add 1 and 3 and type the answer here:
  • Post