다양한 화면 크기 지원

Windows 8 빌드

Windows 기술팀 내부 모습

다양한 화면 크기 지원

  • Comments 0

픽셀 밀도에서 종횡비까지 디스플레이의 핵심 기술에 수많은 혁신이 있었습니다. Windows 8은 디스플레이 에코시스템이 발전하고 개선되는 만큼 그에 발맞춰가도록 설계되었습니다. PC 제조업체가 PC를 개발하거나 사용자가 자신에게 필요한 최상의 경험을 제공하는 외부 디스플레이를 사용할 수 있도록 광범위한 디스플레이 기술을 지원하는 것이 우리의 목표입니다. 이러한 맥락에서 우리는 다양한 디스플레이 기술을 지원하는 플랫폼을 제공하기 위해 WinRT를 구축하였습니다. 이 글에서는 다양한 물리적 화면 크기, 픽셀 밀도 및 해상도 지원에 대한 다소 복잡한 내용을 다룹니다. 사용자 경험 팀 수석 프로그램 관리자 David Washington이 작성한 이 글에는 제가 사용 중인 "27인치 모니터" 외에도 다양한 디스플레이가 등장합니다.
- Steven


Windows 플랫폼의 핵심 약속 중 하나는 오늘날 10억 대가 넘는 모든 PC에서 자유롭게 Windows를 사용할 수 있도록 다양한 폼 팩터를 지원하는 것입니다. 우리는 이러한 장점을 기반으로 폼 팩터 또는 화면 크기에 관계없이 뛰어난 경험을 제공하는 Windows 8 개발에 착수했습니다. Windows 8 PC는 소형 태블릿 화면에서 랩톱 및 대형 데스크톱 모니터와 다중 모니터 설정까지 다양한 형태와 모양으로 출시될 것입니다. 또한 일반적인 태블릿에서 새로운 고해상도 태블릿까지 다양한 픽셀 밀도로 확장될 것입니다. 우리는 다음과 같은 설계 프로세스 원칙을 갖고 있습니다.

  1. 고객에게 다양한 폼 팩터 선택권을 주는 동시에 세련되고, 일관적이고, 예측 가능한 사용자 경험을 제공합니다.
  2. 개발자가 Windows 에코시스템의 어떤 폼 팩터에서도 멋지게 보이는 앱을 간단하게 개발할 수 있도록 지원합니다.

Windows를 사용하면 사용자의 요구 사항, 선호도 또는 스타일에 맞는 화면을 포함하여 사용자에게 가장 적합한 PC를 선택할 수 있습니다. 예를 들어, 터치 스크린에서 논문을 쓰면서 영화를 감상하거나 게임을 하는 것처럼 멀티 작업을 하려는 사용자는 대형 화면을 갖춘 터치 방식 랩톱을 구입하면 됩니다. 가족이 공유하는 PC로는 대형 터치 스크린을 통해 모든 가족 사진을 보고 정리할 수 있는 올인원 데스크톱이 적당할 것입니다. 통근 시간이 긴 회계사라면 지하철을 타고 출퇴근하는 동안 가방에 넣고 다니면서 웹 서핑을 하거나 각종 콘텐츠를 읽을 수 있는 소형 태블릿을 선택할 것입니다. 전문 설계자 또는 금융 트레이더에게는 한 개의 터치 스크린과 가로 및 세로 방향 구성이 혼합된 3개의 화면을 사용하는 PC가 적합할 것입니다.

Windows 8은 이 모든 PC 및 사용자 경험을 지원하며, 여러 대의 PC를 사용하는 것이 일상화된 현대 사회에서 어떤 화면 크기의 PC를 사용하더라도 일관적이고 익숙한 경험을 제공합니다. 이처럼 폭넓은 하드웨어 선택권을 제공하는 것은 오직 Windows뿐이며, 앞으로도 Windows는 이런 방향으로 발전할 것입니다.

Windows 8에서 사용자 경험을 결정하는 것은 앱입니다. 따라서 개발자가 모든 화면에 적용할 수 있는 아름다운 사용자 인터페이스를 간단하게 개발할 수 있도록 개발 플랫폼을 제공하는 것이 매우 중요합니다. 이러한 근본적인 이유 때문에 Windows 8이 다양한 화면에서 구동이 가능한 뛰어난 앱 개발용 플랫폼이 되도록 하기 위해 Windows를 처음부터 다시 설계했습니다.  

전통적인 데스크톱 모니터, 랩톱, 컨버터블 및 태블릿 PC

다양한 장치

Windows 8을 실행하게 될 다양한 장치의 화면을 몇 가지 기준에 따라 분류할 수 있습니다.

  • 화면 크기: 태블릿의 소형 화면에서 랩톱의 중형 화면, 데스크톱 및 올인원의 대형 화면까지 다양한 화면 크기의 PC가 있습니다. 이러한 화면의 형태 및 종횡비 또한 다양합니다.
  • 화면 해상도: 화면의 픽셀 수 또는 해상도는 점점 높아질 것입니다. 일반적으로 화면이 클수록 해상도가 높지만 반드시 그런 것은 아닙니다.
  • 픽셀 밀도: 또한 화면마다 픽셀 밀도가 다릅니다. 픽셀 밀도란 물리적 영역 내의 픽셀 수 또는 DPI(인치당 도트 수)를 말합니다. 화면 해상도가 높아지면 픽셀 밀도도 증가하지만 화면 크기는 변하지 않습니다.

우리는 Windows 8을 설계할 때 사용자와 개발자를 위해 화면 크기, 해상도 및 픽셀 밀도를 세심하게 고려했습니다. 화면에 대해 이야기할 때에는 변수 또는 크기를 명확히 이해하는 것이 매우 중요합니다. 예를 들어 13인치 화면은 모든 해상도, 즉 모든 픽셀 수에서 실행 가능하며 여러 종횡비 중 하나를 사용할 것입니다.

이 그림은 Windows 8을 실행할 수 있는 다양한 일반 와이드스크린 종횡비 및 화면 크기의 예를 보여 줍니다. 그래픽 드라이버 및 하드웨어가 Windows에 올바른 정보만 제공한다면 Windows는 거의 모든 화면 크기를 지원합니다. 또한 일부 화면은 잘라내기 및/또는 늘이기를 통해 여러 종횡비로 확장할 수 있습니다. 아래 다이어그램에서 슬레이트 또는 랩톱을 지칭하기는 했지만 PC 간 경계가 점점 "모호"해지고 있다는 사실을 기억하시기 바랍니다.

10.1인치 2560x1440, 11.6인치 2560x1440, 10.1인치 1920x1080, 11.6인치 1920x1080, 10.1인치 1366x768, 11.6인치 1366x768, 14인치 1920x1080, 14인치 1366x768, 12인치 1280x800, 15.6인치 1920x1080, 17인치 1920x1080, 23인치 1920x1080, 27인치 2560x1440.

    

최소 해상도

몇몇 블로그에서 최소 해상도에 대한 댓글을 읽었습니다. 예를 들어 2011년 10월에 작성된 시작 화면의 검색 디자인 이야기에서 @wolf 님이 다음과 같은 의견을 주셨습니다.

“모든 개발자가 Metro 앱의 최소 화면 크기를 800x600으로 설계하도록 의무적으로 규정하는 것이 좋겠습니다. Metro 앱에 1024x768 해상도만 사용하도록 제한한다면 모든 넷북 사용자가 등을 돌리고 Windows 앱 스토어도 외면 받을 것입니다."

우리는 최소 화면 해상도를 1024x768로 선택했는데, 이는 개발자가 현재 출시된 화면은 물론이고 앞으로 출시될 모든 화면에서 작동하는 뛰어난 앱을 최대한 수월하게 개발할 수 있도록 하기 위한 것입니다. 최소 해상도는 개발자에게 필수적인 출발점입니다. 개발자는 최소 해상도를 기준으로 모든 탐색, 컨트롤 및 콘텐츠를 화면에 맞출 수 있습니다. 우리는 다양한 앱 디자인 레이아웃을 작업하면서 최소 해상도가 높을수록 풍부한 사용자 경험을 제공하는 앱을 개발할 수 있다는 사실을 확인했습니다. 개발자가 낮은 해상도 때문에 레이아웃에 제약을 받는 일 없이 자유롭게 레이아웃을 재단하여 1024x768의 모든 해상도를 사용할 수 있기를 원했습니다.

날씨 사이드 앱 옆에 있는 주식 앱

개발자가 1024x768에서 공간을 최대로 활용하여 풍부한 레이아웃을 만들 수 있는 Windows 8의 최소 해상도

최소 해상도로 1024x768을 선택한 이유

우리는 다음과 같은 세 가지 이유로 Metro 스타일 앱의 최소 해상도를 1024x768로 선택했습니다.

  • 우리가 Metro 스타일 앱에서 기대하는 풍부하고 아름다운 레이아웃을 지원하기에 충분한 크기입니다. 1024x768보다 낮을 경우 단순한 기본 레이아웃을 더 많이 사용해야 하므로 콘텐츠가 그만큼 더 적게 들어갑니다.
  • 일반적으로 웹 사이트는 1024x768 이상 또는 1024x768 해상도만 지원하며, 웹 개발자 역시 이 해상도에 익숙합니다.   
  • 현재 시장의 장치 사용 현황을 보면 Windows 7 사용자 중 1024x768 미만의 해상도를 사용하는 사람은 고작 1.2%에 불과합니다. 현재 사용되는 장치 및 미래에 출시될 장치(해상도가 더 높아질 것이 분명함)를 지원하는 새 플랫폼을 설계할 때 우리는 사용자 경험을 희생하거나 개발자가 기존 화면 지원에 대해 고민하는 일이 없도록 시장에 출시된 거의 대부분(약 98.8%)의 화면에 맞게 최적화했습니다. 또한 1024x600 및 1280x720 해상도를 사용하는 PC의 사용률이 급격히 하락했으며, 이 해상도를 주력으로 사용하는 새 PC가 거의 없는 것으로 알고 있습니다. 더 낮은 해상도에서도 실행되는 특별히 제작된 컴퓨터도 있는데, 이러한 컴퓨터는 특수한 데스크톱 앱을 사용하기 위해 제작된 것입니다. 많은 웹 사이트에서 가상 컴퓨터를 실행하는데, 웹 사이트의 기본 해상도가 1024x768 미만인 경우에도 VM은 간단하게 1024x768 해상도를 지원할 수 있습니다.

1366x768, 1280x800, 1600x900, 1920x1080, 1280x1024, 1440x900, 1680x1050, 1024x768, 1360x768, 1920x1200 및 1280x768에서 지원되는 모든 Windows 8 앱을 보여 주는 막대 그래프. 데스크톱 앱은 1024x600 및 1280x720에서만 지원되며 각 해상도의 점유율은 약 1%에 불과

최소 해상도가 없는 세계

최소 해상도를 가벼운 권고 사항이 아닌 의무 사항으로 규정한 이유가 궁금한 분들이 있습니다. 최소 해상도를 규정해 놓으면 개발자는 위에서 설명한 것처럼 잘 사용되지 않는 낮은 해상도를 고려할 필요가 없으므로 개발 과정이 간소화됩니다. 낮은 해상도를 고려하지 않고 앱을 설계할 경우 일부 레이아웃이 잘리거나, 겹치거나, 예측할 수 없는 방식으로 깨질 수 있습��다. 그렇게 될 경우 Windows 8이 지원하는 모든 장치에서 멋지게 보이는 앱을 개발하는 것이 어렵게 됩니다. 최소 해상도를 강제로 규정하지 않으면 더 낮은 해상도에 맞게 앱을 개발하여 테스트하는 개발자도 있을 것이고 그렇지 않은 개발자도 있을 것입니다. 이 경우 개발자는 전체 플랫폼이 아닌 특정 장치에 맞게 앱을 개발하게 되므로 에코시스템이 무너질 수 있습니다. 또한 개발자는 거의 사용되지 않은 최저 해상도를 선택할 수밖에 없게 되므로 앱의 사용자 경험 및 품질에 악영향을 미칠 수 있습니다.

1024x600을 사용할 경우 화면 아래 1/5 지점에 표시된 빨간색 영역이 잘리는 것을 보여 주는 오목 게임 앱.

1024x600에서 실행할 경우 화면 아래쪽이 잘리는 게임 앱의 레이아웃

최소 해상도 및 동시 보기 기능

동시 보기 기능 기반의 멀티태스킹을 포함하여 Windows 8의 모든 기능을 지원하는 해상도는 1366 x 768입니다. 1024 픽셀의 메인 앱 옆에 320픽셀의 사이드 앱이 위치할 경우 너비가 딱 맞기 때문에 이 해상도를 선택했습니다 우리가 //build/ 컨퍼런스에서 소개한 Samsung 태블릿의 사양은 11.6인치에 1366x768 해상도입니다(현재 출시된 Samsung 시리즈 7 태블릿 기준). 이 사양은 Windows 8의 모든 기능을 지원하는 최소 화면 해상도로, 충분한 물리적 크기를 제공합니다.사이드 앱은 320픽셀 너비로, 메인 앱은 1024 x 768로 표시

        

동시 보기는 언제나 320픽셀 너비로 고정되어 있으므로 개발자는 이 크기에 맞게 앱을 개발하면 됩니다. 320픽셀 너비는 여러 휴대전화 플랫폼에서 널리 사용되고 있으므로 개발자들에게 매우 익숙한 크기입니다.

동시 보기의 크기를 마음대로 변경하거나 다양한 멀티태스킹 크기를 지원하지 못하게 하는 이유를 묻는 분들도 있었습니다. 이렇게 작은 레이아웃에서 크기를 마음대로 변경하도록 허용할 경우 앱을 개발하는 과정이 매우 복잡해지므로 개발자가 할 일이 늘어날 수 있습니다.

사이드 앱의 너비는 고정되어 있지만 세로 길이는 화면에 맞게 늘어나므로 넓은 화면을 사용한다면 스크롤할 일은 별로 없을 것입니다. //build/ 컨퍼런스의 훌륭한 Metro 스타일 앱의 8가지 특징에 훌륭한 동시 보기 레이아웃의 예가 많이 나와 있습니다. 동시 보기 및 멀티태스킹에 대한 이야기는 다음 기회에 자세히 다루도록 하겠습니다.

아래는 왼쪽에 사이드 앱 레이아웃, 오른쪽에 메인 앱 레이아웃을 표시한 몇 가지 예입니다.

기본 레이아웃 옆에 사이드 앱을 표시한 3개의 앱

최대 해상도

왜 최대 해상도는 없는지 궁금한 분도 있을 것입니다. 해상도가 높으면 더 많은 공간을 사용할 수 있으므로 레이아웃이 깨지거나 잘리는 경우가 거의 없습니다. Metro 스타일 앱은 30인치 2560x1600 해상도까지 실행됩니다. 공간이 많으면 앱이 깨지는 일은 없지만 앱의 아름다운 모양을 훼손하지 않으면서 공간을 활용해야 하므로 개발자는 다음과 같은 몇 가지 사항을 고려해야 합니다.

화면 크기

화면 크기가 커지면 화면의 픽셀 수도 늘어나기 때문에 데스크톱 모니터 같은 대형 화면의 경우 일반적으로 사용자는 화면에서 더 많은 콘텐츠를 보길 기대합니다. 아래 다이어그램은 언제, 어떻게 화면 크기와 픽셀 수가 늘어나고 화면의 개체 수가 늘어나는지를 표시한 것입니다. 아래의 작은 화면은 40개의 오렌지 사각형을, 큰 화면은 84개의 오렌지 사각형을 표시할 수 있습니다.

11.6인치 1366x768 해상도와 17인치 1920x1080 해상도를 비교한 그림. 화면이 크면 더 많은 사각형 표시 가능

  일반적으로 화면이 클수록 픽셀 수가 많으므로 더 많은 콘텐츠를 표시할 수 있음 

화면에 더 많은 콘텐츠를 표시할 수 있다고 해서 모든 앱이 이 공간을 활용할 수 있는 것은 아닙니다. 고정된 크기 또는 특정 폼 팩터를 염두에 두고 앱을 설계할 경우 큰 화면에서 아래 그림처럼 빈 공간이 많이 남게 됩니다. 어떤 분들이 지적하신 것처럼 이는 바람직한 사용자 경험이 아닙니다.

화면 해상도가 아무리 커도 현재 웹 사이트 중 특별히 큰 화면에 맞추어 설계되는 곳은 거의 없으며 Ctrl 키와 마우스 휠 또는 키보드 단축키 Ctrl +, Ctrl -, Ctrl 0을 사용하여 텍스트를 확대해서 보는 사용자가 많기 때문에 공간을 많이 남겨 두는 경향이 강합니다. 모바일 웹도 마찬가지입니다. 사이트가 너무 커서 모바일 화면에 표시할 수 없을 경우 마찬가지 방법이 적용됩니다. 폼 팩터를 탐지하여 앱 사용 방법을 결정하는 방식으로 다양한 폼 팩터에 따라 콘텐츠를 표시하는 개발자가 점점 늘어나고 있습니다.

Headlines(헤드라인) 앱은 화면 왼쪽 상단 구석에 표시되고 오른쪽 하단은 빈 공간이 표시된 모습.

다양한 화면 크기를 고려하지 않을 경우 큰 화면에서 빈 공간이 많이 발생

Windows 8 플랫폼은 기본 레이아웃 컨트롤 및 기술을 제공하므로 개발자는 다양한 화면 크기로 확장되는 앱을 간단하게 개발할 수 있습니다. Windows 8의 앱은 가능한 한 콘텐츠를 최대로 많이 가져와서 사용 가능한 공간을 채웁니다. 개발자는 작은 화면의 태블릿에서 중간 화면의 랩톱, 대형 화면의 데스크톱까지 화면 크기가 변함에 따라 더 많은 콘텐츠를 표시하는 동일한 앱을 간단하게 개발할 수 있습니다. 예를 들어 다음 뉴스 앱은 화면이 커질수록 더 많은 기사를 표시합니다. 기본 플랫폼 및 도구는 비동기 프로그래밍을 지원하도록 설계되었습니다. 큰 화면을 가득 "채우는" 것은 물론이고 작은 화면과 다를 바 없이 빠르고 부드럽게 표시하므로 대규모 콘텐츠를 가져와서 채우는 동안 사용자를 차단할 필요가 없습니다.

11.6인치 1366x768 화면에서는 기사 10개, 13인치 1400x1050 화면에서는 기사 15개, 20인치 1920x1080 화면에서는 기사 21를 표시하는 Headlines(헤드라인) 앱

대형 화면을 위한 앱 개발

Windows 8은 태블릿, 랩톱, 데스크톱 모니터 등 다양한 크기와 형태의 화면에서 예측 가능하고 일관적으로 작동하도록 설계되었습니다. 사용자가 다른 크기의 화면으로 변경하더라도 시스템 및 앱이 새로운 화면 공간을 최대한 활용하여 가장 몰입도가 뛰어난 경험을 제공하는 것이 중요합니다.

세 가지 크기의 화면에 표시된 샘플 앱

이 샘플 앱처럼 //build/ 컨퍼런스에서 발표된 개발자 프리뷰의 자동 조정 레이아웃을 사용하면
사용자가 큰 화면에서 더 많은 콘텐츠를 볼 수 있습니다.

Windows 8은 앱 개발자가 다양한 크기의 화면에 앱을 적용할 수 있도록 표준 기반 자동 조정 레이아웃을 위한 앱 플랫폼을 지원합니다. 과거의 웹에서는 다양한 크기의 화면에서 멋지게 표시되는 앱 레이아웃을 개발하는 것이 어려웠습니다. Windows 8은 새로운 독점 레이아웃 컨트롤을 개발하는 대신 XAML을 사용한 익숙한 자동 조정 레이아웃 및 W3C에서 승인한 CSS3 기능을 기본적으로 지원하며, 이러한 지원 기능은 웹 개발자의 레이아웃 작업을 돕기 위해 특별하게 설계되었습니다.

HTML에서 CSS3 격자, 플렉시블 박스(flexible box) 및 다중 열 레이아웃은 개발자가 다양한 장치 및 해상도에서 화면 공간을 보다 효율적으로 사용할 수 있도록 지원합니다.

개발자는 CSS3 격자 레이아웃을 사용하여 레이아웃의 행과 열을 지정할 수 있습니다. HTML 테이블과 비슷한 방식이지만 훨씬 많은 컨트롤과 유연성을 제공합니다. 또한 격자를 사용하여 Windows 8의 시작 화면이나 파일 선택기 같은 UI처럼 최고의 자동 조정 레이아웃을 정의할 수 있습니다. 행과 열을 정의한 다음 콘텐츠를 격자의 셀에 배치하면 됩니다. 화면에 맞게 조정하고 재배치할 셀을 간단하게 정의할 수 있습니다.

다음 숫자 쌍을 포함하는 4개의 상자로 구성된 격자: 1,1; 1,2; 1,2; 2,2

개발자는 CSS3 플렉시블 박스(flexible box) 레이아웃을 사용하여 여백 및 공백을 균등하고 예측 가능하게 배치할 수 있습니다. 또한 도구 모음이나 이미지 컬렉션 같은 개별 구성 요소 및 컬렉션의 레이아웃을 지정하기에 매우 좋습니다.

마지막으로, CSS3 다중 열 레이아웃을 사용하여 신문 또는 잡지의 레이아웃처럼 페이지의 여러 열에 콘텐츠를 정리할 수 있습니다. Visual Studio 11에서 제공되는 모든 템플릿은 이러한 레이아웃 구조를 사용하며, ListView 및 기타 컨트롤을 활용하여 기본적으로 다양한 크기의 화면을 지원합니다. 개발자는 다양한 화면 크기에서 다양한 방향 및 동시 보기에 맞게 레이아웃을 조정할 수 있는 동일한 표준 기반 레이아웃 기술 및 컨트롤을 사용할 수 있습니다. HTML에서 사용 가능한 모든 레이아웃 구조는 XAML 개발자도 사용할 수 있습니다.

일부 앱, 특히 게임 및 게임과 비슷하게 렌더링된 UI는 높은 화면 해상도에서도 더 많은 공간을 활용하지 않습니다. 이러한 앱을 위해 우리는 1366x768에 맞게 설계된 앱을 모든 화면 크기로 간단하게 확장할 수 있는 방법을 제공합니다. 종횡비가 콘텐츠와 맞지 않을 경우 시스템에서는 테마를 적용할 수 있는 레터박스를 제공합니다. 데스크톱 모니터에서 사물이 매우 크게 표시될 수 있으므로 모든 UI에서 이상적인 방법은 아니지만 대부분 비트맵 그래픽으로 구성된 게임 및 게임과 비슷한 UI에서는 잘 작동합니다. 또한 이 방법을 사용하면 개발자의 복잡한 작업 없이도 다양한 화면 크기에서 앱의 몰입도를 그대로 유지할 수 있습니다.

        

화면이 클수록 게임도 크게 표시

이 오목 게임과 같이 레이아웃이 고정되어 있으면 화면이 클수록 게임도 더 크게 표시됨

앱 개발자가 콘텐츠 및 작업 흐름에 따라 자동 조정 또는 화면 맞춤 확장 레이아웃 기술 중에 보다 적합한 것을 선택할 수 있도록 하는 것이 중요합니다. 모든 앱이 자동 조정 레이아웃을 사용한다면 여백을 많이 남기지 않고 23인치 1920x1080 화면을 채우는 게임처럼 렌더링된 UI를 개발하기가 어려울 것입니다. 반면 모든 앱이 화면 맞춤 확장 레이아웃을 사용한다면 사용자는 23인치 1920x1080 화면에서 더 많은 이메일 메시지를 볼 수 없을 것입니다. 우리가 제공하는 솔루션은 적절한 균형을 유지하고 있으며, 개발자에게 가장 중요한 시나리오를 기반으로 다양한 화면에서 ��절한 레이아웃을 선택하여 앱을 최적화할 수 있는 도구를 제공합니다.

앱 크기를 마음대로 조정할 수 없게 한 이유가 궁금한 분들도 있을 것입니다. Windows의 크기 조정 가능 창의 변천사를 생각해 보면 이는 합리적인 의문입니다. 사실, Windows의 첫 번째 버전에서는 "바둑판식" 창을 지원했으며 Windows 2.0 이후부터 창 겹치기가 지원되었습니다. 이러한 이유로 인해, 또 여러 해상도에서 신뢰할 만한 사용자 경험을 제공하기 위해, 우리는 Metro 스타일 앱에서 전체 화면 레이아웃에 집중했습니다.

일상 생활에서 Windows를 사용하는 경험을 고려할 때 이는 비직관적인 것으로 보일 수도 있습니다. 하지만 수많은 앱과 계속해서 확장되는 화면 크기를 생각한다면 개발자가 모든 화면에 맞추어 최적화한다는 것은 불가능한 일입니다. 대부분의 소프트웨어가 최소 요구 사항을 제시하고는 있지만 실제로는 창의 크기를 조정하거나 최대화할 경우 UI가 잘리거나, 배치가 이상하게 되거나, 렌더링이 제대로 되지 않는 등 수많은 오류가 발생합니다. 또한 다양한 픽셀 밀도에 맞게 적절하게 확장되지 않는 자산(아이콘 및 UI 요소)도 있습니다. Office 2007의 리본을 설계할 때에도 아래 스크린샷과 같이 리본을 확장하는 작업에 엄청난 노력이 필요했습니다.

네 가지 크기의 "정렬" 청크: Large(크게), Medium(중간), Small(작게), Popup(팝업), Popup Expanded(팝업 확장)

Jensen Harris: Office 사용자 인터페이스 블로그확장 및 축소 이미지

유감스럽게도 대부분의 응용 프로그램은 Windows 리본처럼 이미 사용 가능한 컨트롤을 활용하여 안전하게 확장하지 않습니다. 따라서 최종 사용자는 창을 얼마나 크게 또는 작게 조절해야 하는지 경험으로 익혀야 하고, 개발자는 모든 해상도, 종횡비 및 픽셀 밀도를 고려할 수 없기 때문에 테스트를 거치지 못한 해상도에서 발생하는 버그 및 불일치를 해결해야 합니다. 개발자는 고유한 레이아웃, 컨트롤 및 UI 메타포를 만들 때 화면 해상도 및 픽셀 밀도를 추측하여 코드를 작성했으며, 이러한 사항이 사전에 규정된 경우는 거의 없었습니다. 그 결과 심지어 지금도 초기 넷북 또는 VM에서나 볼 수 있었던 600 미만 해상도에서 Windows 속성 시트가 클립되기도 합니다.

이 글을 읽으시는 많은 분들이 크기 조정 가능 창을 자유롭게 관리하고 배열할 수 있다고 생각하시는데, 자료에 의하면 다음과 같은 두 가지 명확한 사실을 확인할 수 있습니다. 첫째, PC 시장의 75%가 넘는 비율을 차지하는 랩톱에서 대부분의 응용 프로그램은 항상 최대 화면에서 실행됩니다. 사용 가능한 공간과 대부분의 인터페이스 및 웹 사이트의 설계 관점에서 보자면 이는 타당한 일입니다. 둘째, 대형 화면에서 대부분의 창은 일반적으로 합리적인 크기로 조정됩니다. "무한 배율"을 지원하는 프로그램은 거의 없기 때문입니다.

우리는 새로운 사용자 인터페이스 접근 방식 및 새로운 명령 구성 방법을 보게 될 것입니다. Windows 8은 이전 버전과는 비교할 수 없이 풍부한 사용자 인터페이스 레이아웃 코딩용 라이브러리와 유연한 도구 및 언어를 갖고 있습니다. 물론 Windows 데스크톱은 그대로 남아 있으며 더욱 개선되었습니다. 따라서 현재 사용 중인 앱에서도 익숙한 기능으로 작업할 수 있습니다.

다양한 픽셀 밀도

픽셀 밀도는 사람들에게 생소한 개념이지만 오늘의 주제인 화면 크기 및 해상도와 밀접하게 관련되어 있습니다. 기본적으로 픽셀 밀도는 물리적 영역에 포함된 픽셀 수를 말하여, 인치당 도트 수 또는 DPI로 표현합니다. 픽셀 밀도가 상승하면 고정 픽셀의 물리적 크기는 감소합니다. 고해상도 랩톱에서 텍스트가 얼마나 작게 표시되는 경험해 보신 분들이 많을 것입니다. 이러한 물리적 현상을 해결하기 위해 사람들은 "큰 글꼴" 또는 "텍스트 크게 보기"를 많이 사용합니다. Windows 8은 이를 고려하여 WinRT 응용 프로그램에 새로운 지원 체계를 도입했습니다.

135 DPI 화면은 4개의 행에 좀 더 큰 사각형 표시

190 DPI 화면은 6개의 행에 좀 더 작은 사각형 표시

픽셀 밀도가 높은 화면에서는 배율을 조종하지 않아도 물리적 크기가 작아집니다.

대부분의 사람들은 픽셀 밀도가 낮은 랩톱 또는 데스크톱 모니터에 익숙합니다. 13인치 화면에 DPI가 116인 1280x800 해상도를 사용하는 일반 랩톱이 대표적인 예입니다. 다양한 디스플레이를 요구하는 활발한 에코시스템 덕분에 화면의 픽셀 밀도가 놀라운 속도가 발전하고 있습니다. Windows 8 태블릿 PC의 상당수는 픽셀 밀도가 적어도 135 DPI 이상이며, 이는 우리가 익숙한 픽셀 밀도보다 훨씬 높은 수치입니다. 물론 11.6인치 화면에 190 DPI Full HD 1920x1080 해상도를 제공하는 HD이나 11.6인치 화면에 253 DPI, 2560x1440 해상도를 제공하는 쿼드-XGA 태블릿도 있습니다. iPad 같이 종횡비가 작고 크기가 작은 화면에서는 픽셀 밀도가 훨씬 높아질 수 있습니다. 픽셀 밀도가 상승하면 화면에 표시되는 개체의 크기도 작아집니다. Windows가 다양한 픽셀 밀도를 지원하도록 설계되지 않았다면 화면의 개체가 너무 작게 표시되어 태블릿에서 제대로 탭하거나 읽을 수 없을 것입니다.

1366x768 해상도와 1920x1080 해상도의 단추 크기를 비교하는 손가락 그림. 해상도가 높아지면 터치 대상도 작아져서 손가락을 사용해 효율적으로 탭하는 것이 어렵게 됨.

오른쪽의 HD 태블릿처럼 픽셀 밀도가 높은 화면에서는 배율 조정을 하지 않아도 개체가 작게 표시되어 탭하기가 쉽지 않습니다.

이렇게 픽셀 밀도가 높은 화면을 구입하는 고객을 위해 이러한 장치에서도 앱, 텍스트 및 이미지가 아름답게 표시되고 원활한 탭 동작이 가능한지 확인해야 합니다. 앞에서 우리는 픽셀 밀도의 배율을 계속해서 높일 경우 개체 크기는 변하지 않지만 대부분의 앱이 비트맵 이미지를 사용하기 때문에 예측할 수 없는 크기로 배율을 높일 경우 개체가 흐릿하게 보일 수 있다는 사실을 확인했습니다. Windows 8은 예측 가능한 배율을 사용하여 Windows가 이러한 장치에서도 아름답게 보이도록 했습니다. Windows 8은 다음과 같은 세 가지 배율이 있습니다.

  • 배율 조정을 하지 않았을 때 적용되는 100%
  • HD 태블릿을 위한 140%
  • 쿼드-XGA 태블릿을 위한 180%

높은 픽셀 밀도 화면은 픽셀 밀도가 낮은 화면에 비해 텍스트가 훨씬 선명하게 표시되며, 터치 대상의 크기는 변하지 않음.

Windows 8의 배율 조정 기능을 사용하면 픽셀 밀도가 높은 장치의 물리적 개체 크기는 변하지 않고 화면의 텍스트 및 콘텐츠가 선명하게 표시됩니다.

배율은 에코시스템의 실제 장치에 맞게 최적화되었습니다. 140% 및 180%는 너무 과한 것이 아닌가 생각하실 수도 있지만 고성능 하드웨어에서 얼마나 선명한 화면이 보일까를 생각하면 이해가 될 것입니다.

예를 들어 140% 배율은 태블릿 기본 해상도 1366x768의 140%에 해당하는 1920x1080 HD 태블릿에 최적화되어 있습니다. 이렇게 최적화된 배율은 기본 태블릿과 HD 태블릿 간에 일관적인 레이아웃을 유지합니다. 두 장치의 효율적인 해상도가 동일하기 때문입니다. 100% 1366x768 태블릿용으로 설계된 레이아웃이 140% HD 태블릿 또는 180% 쿼드-XGA 태블릿에서도 콘텐츠의 물리적 크기와 레이아웃을 동일하게 유지할 수 있도록 각 배율이 선택되었습니다.

1366x768, 1920x1080 및 2560x1440의 최적 픽셀 밀도를 보여 주는 그래프

Windows의 배율은 터치 대상 및 레이아웃을 그대로 유지하는 동시에
조만간 시장에 출시될 실제 태블릿에 최적화되도록 설계되었습니다.

새로운 iPad 화면에 대해 궁금하게 생각하는 분이 있을 것입니다. 이 화면의 경우 Apple은 200% 배율을 선택했습니다. 새 화면은 같은 화면 크기에 두 배의 픽셀 밀도(132 PPI에서 264 PPI로)*를 갖고 있습니다. iOS 및 개발자는 사전 정의된 해상도만 지원하면 되므로 이 배율만 추가로 고려하면 됩니다. iPad 2와 새로운 iPad를 비교하여 설명하자면 200% 배율이란 1024x768에서 표시되는 개체가 새 해상도에서도 그대로 표시되며, 위의 앱 이미지에서 본 것처럼 더 많은 픽셀이 사용되므로 보다 선명하게 표시됩니다. 또한 새로운 iPad처럼 픽셀 밀도가 높은 화면을 사용하여 게임 또는 성능이 중요한 앱을 개발하는 개발자는 낮은 해상도에서 레터박스 변환과 앱 실행 간에 적절한 균형을 유지하여 최고의 경험(예: 프레임 속도)을 제공할 수 있습니다.

배율 조정 작업은 사용자에게 보이지 않으며, Windows가 화면 크기를 기반으로 알아서 구현하므로 사용자, IT 관리자 또는 OEM 공급업체의 작업이 필요 없습니다. 개발자는 각 배율에서 이미지가 아름답게 표시되는지에만 신경을 쓰면 됩니다. 이러한 배율은 예측 가능하기 때문에 각 배율에 대한 이미지를 제공하는 개발자는 이미지 늘이기로 인해 화면이 흐릿하게 표시되거나 아티팩트가 나타나는 현상을 간단하게 방지할 수 있습니다.

픽셀 밀도의 증가로 인해 기존의 도구 모음 및 메뉴 방식을 그대로 사용하기가 점점 어려워지고 있습니다. 큰 글꼴 또는 시스템이 다른 DPI를 사용하게 하는 것은 "임시방편"에 불과합니다. DPI가 높은 화면을 사용하는 사람은 기존 응용 프로그램 및 UI 방식이 제대로 작동하지 않아서 별 쓸모가 없다고 생각할 수 있습니다. 일반 도구 모음 단추가 아주 작은 사각형으로 표시되거나 메뉴 및 텍스트가 너무 작아서 제대로 읽거나 탐색할 수 없는 경우가 여기에 해당합니다. 물론 개인적인 선호도가 한몫을 하고 시스템 조정 기능이 어느 정도 도움이 될 수는 있지만, 이러한 방식으로는 Windows가 차세대 하드웨어에서 신뢰를 받을 수 없습니다.

Windows 8은 개발자에게 광범위한 하드웨어에서 작동하는 소프트웨어를 간단하게 개발할 수 있는 방법을 제공하도록 설계되었으며, 소비자는 이러한 소프트웨어를 사용하여 풍부하고 일관적인 사용자 경험을 얻을 수 있습니다. 이러한 방식을 "더 이상 창 크기 조절 불가능"으로 생각할 것이 아니라, 다양한 화면 크기, 해상도 및 픽셀 밀도 중에 고를 수 있도록 선택권을 제공함으로써 개발자는 앱이 제대로 작동할 것인지 여부를 미리 알 수 있고 소비자는 앱이 하드웨어와 호환되는지 확인할 수 있도록 하기 위한 시도라는 것을 이해해야 합니다. 화면과 관련된 모든 것을 우리가 처리해 드리므로 여러분은 완벽하게 작동하지 않거나 화면 크기, 가격 및 전력 소모의 선택 범위가 좁은 소프트웨어를 사용할 필요가 없습니다.

높은 픽셀 밀도를 위한 앱 개발

또한 Windows 8은 다양한 픽셀 밀도에서 작동하는 앱을 간단하게 개발할 수 있습니다. 무엇보다도 앱을 확장하기 위해 수동 작업을 할 필요가 없습니다. 이전 버전과는 달리, 개발자를 대신하여 앱을 확장하는 프레임워크가 있으므로 앱이 DPI를 인식하도록 별도의 작업을 할 필요가 없습니다. 웹 표준 CSS 픽셀 단위 또는 XAML 레이아웃을 사용하기만 하면 앱 레이아웃이 그에 비례하여 확장됩니다. 앱이 확장되면 이미지가 늘어나서 흐리게 나타날 수 있지만 Windows 8에서는 개발자가 간단한 방법으로 이러한 이미지를 선명하고 아름답게 유지할 수 있습니다.

늘어난 비트맵은 흐리게 표시되지만 180% 비트맵은 선명하게 표시됨

   

Windows 8은 기본적으로 벡터 그래픽을 지원하는 플랫폼입니다. SVG(Scalable Vector Graphics) 또는 XAML 아트로 내보낸 이미지는 흐려짐 현상 없이 확장됩니다. 또한 Windows 8은 자동 리소스 로드 기능이 도입되었습니다. 따라서 개발자는 명명 규칙을 사용하여 세 가지 버전의 이미지를 저장할 수 있으며, 현재 배율(100%, 140% 및 180%)과 일치하는 이미지가 자동으로 로드되어 높은 DPI에서도 선명한 이미지를 유지합니다. 또한 개발자는 CSS3 해상도 미디어 쿼리 또는 시스템 이벤트를 사용하여 다른 배율에서 이미지를 다시 로드할 수 있습니다. 개발자는 Windows 8의 픽셀 밀도 확장 기능을 사용하여 최소의 노력으로 기본 수준 이상의 품질을 달성한 후 높은 픽셀 밀도 화면에서도 세련되고 선명하게 보이도록 이미지를 손질하면 됩니다. 100%, 140% 및 180%에서도 선명하게 표시되는 비트맵

다양한 화면에서 앱 테스트

Windows를 사용하면 다양한 화면에서 잘 실행되는 아름다운 앱을 간단하게 개발할 수 있지만 여러 화면 크기에서 앱을 테스트하는 작업은 여전히 중요합니다. 우리는 대부분의 사람들이 즉흥적인 기분에 따라 필요 이상으로 비싼 장치를 구입한다는 사실을 발견하고, 여러 화면에서 앱을 테스트할 수 있는 도구를 개발했습니다. Visual Studio 11은 Windows 시뮬레이터를 제공하며, 개발자는 이 시뮬레이터를 사용하여 다양한 화면 크기, 방향 및 픽셀 밀도에서 앱을 실행할 수 있습니다. 메뉴에서 다른 화면 크기를 선택하기만 하면 간단하게 화면 크기가 전환됩니다.

오른쪽에 해상도 테스트용 컨트롤이 표시된 시뮬레이터의 Windows 8 시작 화면

다양한 화면을 테스트할 수 있는 Windows 시뮬레이터

Microsoft Expression Blend 5는 다양한 화면 크기 및 픽셀 밀도에서 앱을 설계할 수 있는 플랫폼 메뉴를 제공합니다. 사용자가 선택하는 플랫폼 메뉴에 따라 Blend 캔버스가 동적으로 업데이트됩니다.

다양한 화면 해상도가 포함된 옵션, 크롬 표시, 배율 재정의, 대상 배포, 보기 및 디스플레이

다양한 화면 해상도를 테스트할 수 있도록 설계된 Microsoft Expression Blend 5

요약

우리는 다양한 화면 및 폼 팩터에서 확장되는 Windows 8을 만들기 위해 수많은 계획을 세우고, 고민하고, 새 기능을 개발했습니다. 사용자의 경우, Windows 8은 모든 장치에서 예측 가능하고 일관적인 경험을 제공합니다. 큰 화면에서는 각 앱에 더 많은 콘텐츠가 표시됩니다. 픽셀 밀도가 높은 화면에서는 읽기 쉽고 터치 또는 키보드와 마우스로 간편하게 상호 작용할 수 있는 선명하고 뛰어난 사용자 경험을 제공합니다. 개발자의 경우, Windows 8은 표준 기반 및 잘 알려진 레이아웃 기술과 픽셀 밀도에 따라 자동으로 확장되는 기능을 통해 다양한 화면 크기 및 픽셀 밀도를 간단하게 지원할 수 있습니다. 개발자는 이 모든 기능을 사용하여 각 폼 팩터에서 멋지게 표시되는 사용자 경험을 개발할 수 있습니다.

다양한 화면에서 Windows 8을 사용해 보시기 바랍니다.

감사합니다.
David

 

*2012년 3월 22일자로 두 번째 PPI 번호의 오타를 수정했습니다. 불편을 드려 죄송합니다.

  • Loading...
Leave a Comment
  • Please add 6 and 2 and type the answer here:
  • Post