가로와 세로 방향에 모두 최적화된 디자인
여러 포럼을 통해 Windows 8을 시연하면서 가로 방향의 와이드스크린을 사용하는 경우가 많았습니다. 그 이유는 주로 프로젝터를 사용하는 경우가 많아서 가로 방향이 더 효과적이기 때문이었습니다. 그 밖에 //build/ 컨퍼런스에서 Windows 개발자 프리뷰 빌드와 함께 선보인 삼성 태블릿 등 초기 장치의 상당수가 와이드스크린이라는 점도 이유로 들 수 있습니다. 와이드스크린은 새로운 스냅 기능을 사용하여 여러 응용 프로그램을 옆에 나란히 표시하기에 가장 적합하며 가로 방향에서 최적화되어 있습니다. 저희는 사용자들에게 보다 빠르고 자연스러운 화면 전환 기능을 제공하고, 특히 세로 방향을 선호하는 사람들에게도 더 나은 경험을 제공할 수 있도록 많은 노력을 기울이고 있습니다. 또한 아래 내용에서도 보실 수 있듯이, 이러한 저희들의 노력은 화면 방향 선택의 선호도를 결정짓는 요인을 알아내고자 했던 연구 결과를 통해 이루어진 것입니다. 그리고 개발자 여러분들이 어느 방향에서든 잘 실행되는 응용 프로그램을 개발할 수 있도록 Visual Studio와 Expression 같은 도구에도 동일한 노력을 기울여 왔습니다. 이 글을 작성한 사용자 경험 팀의 David Washington은 //build/ 컨퍼런스의 APP-207T 세션을 담당했으며, 여기에서는 Windows 8의 가로 및 세로 화면을 중점적으로 설명합니다. - Steven
Windows 8 PC는 완전히 새로운 종류의 장치로서, 터치로만 작동하는 소형 태블릿부터 랩톱, 데스크톱에 이르기까지 매우 다양합니다. 저희는 Windows 8을 새롭게 상상하는 과정에서 형태나 화면 방향에 관계없이 사용자들에게 최고의 경험을 제공할 수 있도록 디자인하는 것에 역점을 두었습니다. 태블릿 장치는 인체공학적 유연성을 갖추고 있기 때문에 콘텐츠를 최적화하여 표시하고 사용자가 가장 편리한 방향으로 사용할 수 있습니다.
태블릿이 가장 뛰어난 점 중 하나는 바로 손 안에 쏙 들어가는 나만의 장치라는 것입니다. 뉴스를 읽든 결혼식 사진을 찾아보든, 사용하는 대상을 들고 터치할 수 있다는 것은 곧 장치와 사람을 감정적으로 결속시킵니다. 디지털 시대에는 중요한 많은 정보들을 장치에 보관하기 때문에 Windows 8을 기획하는 과정에서 어떤 방향으로 장치를 들고 있어도 훌륭한 경험을 할 수 있도록 디자인하고자 했습니다.
다양한 형태의 장치를 통해 Windows 8에서 제공할 경험을 총체적으로 디자인하면서 다음과 같은 원칙을 세웠습니다.
- 소형 스크린, 와이드스크린, 랩톱, 데스크톱에 이르기까지 모든 형태의 장치에 알맞게 디자인합니다.
- 멀티태스킹과 전체 화면 비디오 재생에 적합하게 와이드스크린 형식을 최대한 활용합니다.
- 가장 편리한 방식으로 장치를 들고 이용할 수 있도록 합니다.
- 개발자는 다양한 형태의 장치에서 모든 보기와 방향으로 실행되는 하나의 앱을 간편하게 개발할 수 있습니다.
여러 사용자 분들을 모시고 사용성 연구를 위한 실험실뿐 아니라 각자 집에서도 태블릿 장치를 사용하도록 하고, 그 결과를 연구하는 데 상당한 시간을 투입했습니다. 이미 태블릿에 익숙한 사람들과 태블릿을 처음 접하는 사람들을 모두 관찰하고, 실험 후에도 수개월에 걸쳐 지속적으로 연락했습니다. 실험에서는 장치를 잡는 스타일, 몸의 자세, 손 동작을 비롯해 다양한 앱과 장치 배치, 방향에 따른 상호 작용의 변화에 주목했습니다. 상당히 다양한 결과가 나왔으며, 사용자들에게 몸의 방향과 장치 방향을 결정할 때 영향을 미치는 요인이 무엇인지 직접 질문하고 답변을 들었습니다. 그 결과 손의 크기와 엄지 손가락이 닿는 거리 등의 인체 측정적 요인, 반복과 피로와 같은 인체공학적 요인, 하드웨어 단추에 대한 접근성 등의 하드웨어 요인, 태블릿을 사용하는 위치(부엌, 침실, 거실 등) 같은 환경적 요인, 장치를 사용할 때 서 있는지, 소파에 앉아 있는지, 책상에 앉아 있는지 등의 신체적 요인이 모두 영향을 미치는 것으로 나타났습니다. 이러한 요인이 조합되는 경우의 수는 무수히 많기 때문에 자세, 잡는 모양, 방향이 상당히 자주 바뀐다는 결론이 나왔습니다. 즉, 장치를 잡는 방법은 한 가지로 정해진 것이 아니라, 사람들이 장치를 사용할 때마다 가장 편리하다고 느끼는 위치와 방향을 자연스럽게 찾아간다는 것입니다.
처음에는 대부분 개인적 취향에 따라 가로 방향과 세로 방향 중 하나를 선택한다고 생각했습니다. 그러나 직접 관찰한 결과, 사람들은 각자 장치를 돌리면서 장치와 UI가 그 순간에 회전 방향에 맞게 조정될 것이라고 기대했습니다. 놀라운 점은 실험 대상자들이 사용하는 장치와 앱에 익숙해짐에 따라 장치를 회전하게 만드는 가장 중요한 요인은 화면에 표시되는 콘텐츠의 유형이라는 것입니다. 가로 방향으로 콘텐츠를 표시해서 사용하는 것이 더 편리하게 느껴지면 사람들은 자연스럽게 가로 모드에서 앱을 사용했습니다. 마찬가지로, 세로 방향으로 콘텐츠를 표시해서 사용하는 것이 더 편리하면 세로 모드에서 앱을 사용했습니다. 예를 들어, 대부분의 사람들은 영화를 볼 때 검은 띠(화면 비율 조정을 위해 표시되는 레터박스) 없이 가로 방향의 전체 화면으로 보기를 원하는 반면, 긴 기사나 웹 페이지를 읽을 때는 스크롤할 필요가 별로 없는 세로 모드를 선호합니다. 사람들이 말하는 선호도란, 해당 방향에서 앱이 훌륭한 경험을 제공했는지 여부에 관해 각자가 느끼는 감각에 주로 좌우되었습니다. Windows 8이 '가로형'인지 또는 '세로형'인지를 놓고 많은 질문과 의견을 받았지만, 저희의 관점은 가로 방향과 세로 방향이 모두 중요하고, 모든 방향에서 훌륭한 경험을 누릴 수 있다는 것입니다. 특정한 자세와 방향에 맞게 최적화하는 것이 아니라, 장치를 잡는 방식에 관계없이 합리적이면서도, 앱과 해당 콘텐츠에 맞춤 설정된 것으로 느껴지도록 디자인했습니다.
가로/세로 방향의 문제를 다루면서 다음과 같은 점에 목표를 두었습니다.
- 작업이나 인체공학적 자세에 가장 잘 맞게 태블릿을 쉽게 회전할 수 있어야 합니다.
- Windows의 화면 전환은 빠르고 자연스러워야 합니다.
- Windows의 시스템과 모든 앱은 예상 범위 내에서 회전하여 사용자가 원하는 대로 제어할 수 있어야 합니다.
- 개발자는 구현하려는 경험에 따라 특정 용도를 가진 고품질의 가로 및 세로 레이아웃의 제품을 쉽게 개발할 수 있어야 합니다.
가로 모드의 Windows
//build/ 컨퍼런스에서 Windows 8 사용자 인터페이스의 많은 부분을 가로 모드로 보여준 이유가 무엇인지 궁금해 하시는 분들이 있었습니다. Windows 8은 단지 태블릿용이 이니라 모든 PC를 새롭게 상상한 결과물입니다. Windows 8은 수억 개의 랩톱과 데스크톱(Windows 7 및 새로운 Windows 8용 기기들)에서 실행될 것이며 그 중 대부분은 가로 전용 모드일 것입니다. 또한 가로형 와이드스크린에서는 스냅 기능으로 두 앱을 나란히 표시하여 멀티태스킹을 구현하고, 검은 띠 없이 전체 화면으로 비디오를 재생할 수 있습니다. 그 밖에도 대규모 시연 현장에서는 프로젝터로 초대형 스크린에 영상을 표시하는 경우가 많은데, 이런 경우 가로 모드가 보기에 더 좋습니다.
Windows 8은 모든 방향에서 인체공학적으로 편리하게 디자인되었습니다. 가로 모드에서 태블릿을 사용할 때는 양손으로 태블릿을 잡고 엄지 손가락으로 화면을 터치하는 것이 편안한 자세이기 때문에 대부분 엄지 손가락으로 쉽게 접근할 수 있도록 디자인했습니다. 또한 시스템을 가로 스크롤에 최적화하여 가로 모드와 세로 모드에서 빠르고 매끄럽게 느껴지도록 했습니다.
세로 모드의 Windows
Windows는 세로 모드에서도 훌륭하게 작동하도록 디자인되었습니다. 웹 브라우저에서 뉴스를 읽고 세로로 찍은 사진을 감상하며 긴 전자 메일 메시지 목록을 스크롤하는 등의 상황을 광범위하게 연구하고, 그 결과를 시스템 디자인에 반영하여 모든 방향에서 자연스럽게 작동하도록 했습니다. 키보드, 파일 선택, Charm 메뉴 등의 시스템 경험을 세밀하게 조정하여 가로 방향뿐 아니라 세로 방향에서도 훌륭하게 작동하도록 했습니다. 세로 모드로 전환해도 시스템 작동 방식을 다시 배울 필요가 없으며 그대로 동일하게 작동합니다.
회전
가로와 세로 방향으로 회전할 때 빠르고 자연스럽게 전환하는 것이 목표였기 때문에 Windows의 다양한 팀이 협력하여 가속도계 하드웨어부터 그래픽 스택과 앱에 이르기까지 모든 수준에서 회전을 자연스럽게 하는 작업에 전력을 다했습니다.
가로와 세로의 전환에서 중요한 요소는 바로 애니메이션입니다. 애니메이션은 두 개의 레이아웃 상태가 부드럽게 전환되는 모양을 연출합니다. 전환과 반응이 빠르면서도, 부자연스럽지 않고 매끄럽게 전환을 연출해야 하기 때문에 애니메이션의 타이밍이 매우 중요합니다. 이 애니메이션은 Windows 7과 Windows 8에서 부드러운 애니메이션 기능의 기반이 되는 DWM(데스크톱 창 관리자)가 조정합니다.
화면 회전이 과도하게 반응할 경우 매우 번거로우므로 회전 동작을 최대한 안정적이고 예측 가능하게 만들기 위해 지속적으로 노력하고 있습니다. 회전을 시작하기 전에 시스템은 원하지 않는 회전을 방지하기 위해 가속도계가 안정화될 때까지 기다립니다. 또한 불필요하게 회전하지 않도록 사용자가 제어할 수 있도록 하고, '중력을 무시'하고 사용자가 원하는 방향으로 유지하기 위해 하드웨어 방향을 고정하는 기능을 도입했습니다.
다양한 크기의 화면
다음 기회에 개발자의 관점으로 Windows 8이 다양한 화면에 알맞게 확장되는 방식을 자세히 알아보겠지만, 가로/세로 방향의 관점에서 화면 크기에 대해 간단히 알아보는 것도 의미가 있을 것 같습니다. Windows 8은 화면 크기와 해상도, 가로세로 비율이 각기 다른 다양한 PC에서 실행됩니다. 예를 들어 가로세로 비율은 정사각형에 가까운 4:3 비율에서 와이드스크린인 16:9 비율에 이르기까지 다양한 크기의 화면들이 있습니다. 확장성 플랫폼인 Windows 8에서는 Windows와 앱이 다양한 크기의 화면에 자연스럽게 적응하고 콘텐츠가 알맞게 재배열되어 공간을 효율적으로 활용합니다. 이러한 장치의 대부분을 가로와 세로 중 어떤 방향으로도 사용할 수 있습니다. 이러한 선택의 다양성은 Windows만의 독보적인 특징입니다. 필요한 작업과 사용 패턴에 가장 적합한 장치와 방향을 직접 선택할 수 있습니다.
Windows 8 메트로 스타일 앱을 실행할 수 있는 최소 해상도는 1024 x 768입니다. 이 크기는 웹에서 사용하도록 설계된 일반적 크기이고 Windows 사용자의 대다수인 98.8%가 이 해상도 이상에서 작업할 수 있기 때문에 이 크기를 선택했습니다. 아래 차트를 참조하십시오.
앱에 최소 해상도를 지정하는 것이 중요한데, 모든 개발자가 다양한 장치에서 세분화하지 않고도 앱의 기본 보기를 최대한 작게 디자인할 수 있다는 이점이 따르기 때문입니다. 사용자 입장에서는 화면이 작더라도 앱 레이아웃이 흐트러지는 일 없이 콘텐츠를 볼 수 있습니다.
스냅 기능을 사용하는 멀티태스킹을 포함하여 Windows 8의 모든 기능을 지원하는 해상도는 1366 x 768입니다. 1024 x 768(웹에서 사용하도록 설계된 일반 크기)의 기본 앱 옆에 320픽셀(많은 휴대전화 레이아웃용으로 설계된 너비)의 앱이 스냅될 경우 너비가 딱 맞기 때문에 이 해상도를 선택했습니다.
이 제한은 런타임 시 강제로 적용되며, 이전과 달리 해결 방법은 제공되지 않습니다. 기본 취지는 명시된 특정 해상도에서 메트로 스타일 앱이 기능적으로 완전히 실행되도록 디자인하는 것이기 때문입니다. 개발자 프리뷰 빌드에서는 다운로드 사이트에서 제공하는 정보를 제외하고 유용한 런타임 경고 메시지가 제공되지 않았습니다. 물론 베타 버전에서는 이 부분이 포함될 것입니다. 600 x 800 가상 머신 또는 1024 x 600 넷북을 사용하는 분들께는 불편을 끼쳐 드려 죄송합니다만, 1024 x 600 시스템의 사용률은 매우 낮은 실정이며, 로엔드급에서도 화면 해상도가 스냅 기능 없이 메트로 스타일 앱을 지원하는 1280 x 800으로 이동하고 있습니다. 이 해상도도 아직 완전한 성능을 발휘하는 해상도라고 할 수는 없으며, 향후 새로운 PC가 출시되면서 해상도가 더 높은 화면으로 전환하는 추세가 이어질 것으로 예상합니다.
개발자 관점에서 바라본 회전
Windows 8에서 전반적 경험의 중심은 앱에 있기 때문에 개발자가 가로 보기와 세로 보기를 모두 최대한 쉽게 개발할 수 있도록 했습니다. 다른 플랫폼에서처럼 개발자는 해당 앱에 지원되는 방향을 결정하고 어떤 식으로 경험을 맞출지 선택할 수 있습니다. 오늘날 시장에 출시된 PC의 대부분은 기존의 랩톱과 데스크톱이 차지하고 있으므로 많은 개발자는 가로 보기를 제공할 것으로 예상합니다. 그러나, 앱 경험이 가로와 세로를 모두 지원할 수 있다면 레이아웃 작업을 조금만 추가해서 세로 보기도 간단히 지원할 수 있습니다.
개발자는 스냅 기능이나 다양한 크기의 화면에 맞게 앱을 개발할 때 사용한 것과 동일한 기술을 활용하여 세로 경험을 쉽게 구축할 수 있습니다. HTML5 개발자는 CSS 미디어 쿼리를 사용하여 레이아웃 스타일을 시스템 방향에 바인딩시키는 한편, XAML 개발자는 보기 상태 이벤트에 대한 응답으로 레이아웃을 변경합니다. HTML과 XAML에서 플랫폼이 제공하는 모든 적응형 컨트롤과 서식 파일은 가로와 세로를 모두 지원합니다. 또한 시스템에서 전환 애니메이션을 자동으로 처리하므로 개발자가 추가 작업을 하지 않아도 됩니다. 만약 어떤 앱의 콘텐츠가 한 가지 특정 방향으로 표시하는 것이 더 낫다면, 개발자는 이 방향을 기본 방향으로 설정할 수 있으며, 장치가 지원할 경우 시스템은 앱을 이 방향으로 유지합니다.
개발자가 앱을 테스트할 경우 태블릿 장치를 사용할 수 없어도 Visual Studio 11과 Expression Blend에서 가로 및 세로 모드, 여러 가지 화면 크기 및 가로세로 비율에서 앱을 테스트할 수 있습니다.
여러분들은 그저 갖고 싶은 장치를 선택하여, 가장 편안한 방식으로 들고, 원하는 방식대로 사용하기만 하면 됩니다. 앱은 멀티태스킹이 가능한 와이드스크린을 활용하는 동시에, 최소한의 노력만으로 세로 방향에서도 멋지게 표시될 수 있습니다.
다음은 가로-세로 전환 과정을 실제로 보여 주는 간단한 비디오입니다.
다른 미디어 플레이어로 보려면 이 비디오를 다운로드하십시오.
고화질 MP4 | 저화질 MP4
직접 경험해 보시기 바랍니다!
감사합니다.
David