태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2012.10.30 07:20

새로 나온 Windows 8 UI 얼마나 달라졌을까?

10월 26일 새벽 Windows OS의 새 버전인 Windows 8이 전 세계에 동시 출시되었습니다. 그 동안 Preview버전을 통해서 미리 맛을 볼 수 있었는데요,  사용하면서 느낀 점들을 공유하고, UI부분이 얼마나 달라졌는지 살펴보고자 합니다.

글을 들어가기 전에... 

- 이 글의 모든 내용은 Preview 버전을 바탕으로 작성되었으므로, 정식배포버전과는 차이가 있을 수 있습니다.
- 글에서 Modern UI App이라고 명칭한 것은 공식적으로는 Windows Store App이라고 부릅니다. 그렇지만 글의 내용에 의미가 더 맞는 것 같아서 이 글에서는 Modern UI App이라고 표현했습니다.


1. Modern UI
기존 Windows 시리즈와 비교해서 가장 크게 바뀐 부분이죠. 이전에는 Metro UI라고 불렀지만 법적인 이슈 때문에 지난 8월부터 Modern UI라고 이름을 바꿨습니다. (기사 링크)
그럼 Modern UI의 주요 요소들을 보면서 얼마나 새로워졌는지 알아볼까요?

Start Screen_시작화면
Windows OS의 상징이었던 시작버튼과 시작메뉴가 완전히 사라지고 대신 '시작화면'이 새롭게 등장했습니다. 이 시작화면은 이전의 시작메뉴를 화면 전체에 펼쳐놓은 것으로 보시면 이해가 빠르실 것 같네요.

기존 Windows Phone의 기본 UI 였던 Modern UI 형식을 동일하게 적용했기 때문에 아마 Windows Phone을 쓰시는 분들은 익숙한 화면일 것 같습니다. 
 

태블릿 스크린을 의식한 듯, 시작화면은 높이가 고정되어 있고 좌우로만 스크롤 하는 방식이며, Internet Explorer, 날씨, 캘린더, 메시지와 같은 앱들을 전면에 노출시켜서 사용자들이 주로 사용하는 필수적인 앱들을 바로 접근가능하도록 배치를 하였습니다. 

시작화면의 배경은 독특하게 통짜 배경을 적용해서 스크롤시 배경이 같이 따라 움직이고, 색상과 모양을 입맛대로 바꿀 수 있도록 하고 있습니다.

그리고 Windows 8에서는 어느 상황에서든 윈도우 키를 누르면 항상 시작화면으로 복귀하도록 되어있어 이제는 윈도우키가 마치 모바일기기의 홈버튼 역할을 맡게 된 것 같네요.


Lock Screen_잠금화면
이전 Windows에서는 잠금을 하면 단순히 로그인하는 화면으로 전환되었었는데요, 이번 버전에서는 잠금화면이 새롭게 추가되었습니다.
시작화면과 마찬가지로 Windows Phone의 잠금화면과 유사한 인터페이스를 보여주는데요, 터치스크린의 경우 위로 Swipe하거나 마우스로는 쓸어올려서 잠금을 해제합니다.
기존 Windows 잠금화면(좌)과 Windows 8의 잠금화면(우). 출처: http://archwin.net
Windows Phone의 잠금화면(좌)과 Windwos 8의 잠금화면(우). 출처: http://archwin.net

그리고 시간, 네트워크 상태, 일정 등 다양한 정보를 제공해서 이전 잠금화면보다 더 유의미한 정보전달을 하고 있음을 알 수 있습니다.

하지만 PC사용자의 경우에는 잠금화면을 볼 일이 그리 많지 않기 때문에 얼마나 유용하게 쓰일지는 약간 의문이 드네요.


Tile
Tile은 Modern UI의 핵심구성요소로, 애플을 위시로한 미려하고 컬러풀한 아이콘 트렌드 (관련 포스트 참조 - 두 디자인 대륙의 충돌 - 메트로냐 메타포냐)와는 반대로, 넓은 사각형에 심플한 흰색 심볼과 글씨로 아이콘을 표현합니다.
이 Tile들로 레이아웃을 구성하게 되면 마치 깔끔한 타일벽을 보는 듯한 인상을 받을 수 있는데요.
필수 앱 중 하나인 여행 앱의 Tile 레이아웃

Microsoft는 가이드라인을 통해서 시작화면 뿐 아니라, 앱에도 Tile을 사용하여 Windows 8 전체 사용경험의 일관성을 높이도록 권장하고 있습니다.

Tile의 특징은 새로운 정보나 통지메시지가 도착하게 되면 실시간으로 표시되는 내용이 바뀔 수 있다는 것인데요, 이를 Live Tile이라고 부릅니다.

1분 전 화면(좌)과 1분 후 화면(우). Tile에 표시되는 내용이 변경됨을 알 수 있음

Live Tile 덕분에 주요 정보들을 굳이 앱을 실행시켜서 확인하지 않고도 바로 확인할 수 있게 되었고, 작은 아이콘보다 훨씬 풍부한 정보를 전달하기 때문에 사용자 입장에서는 상당히 유용한 변화인 것 같습니다.

Charm bar
Windows 8에서는 어떤 앱을 실행하고 있든지 마우스를 화면 오른쪽 상단 혹은 하단에 가져가거나 터치스크린의 경우 화면 오른쪽 끝에서 왼쪽으로 Swipe하게 되면 아래와 같은 Charm Bar가 나타납니다.

Charm bar에서는 위의 사진에서 볼 수 있듯 검색, 공유, 시작, 장치, 설정의 5가지 기능을 제공하는데 독특한 점은 각 기능의 맥락이 현재 실행 중인 앱에 의존적이라는 점입니다.
예를 들어, 설정 기능의 경우 현재 사진 앱을 실행 중인 경우에는 사진 앱의 설정을 변경하는 내용이 나타나지만, 날씨 앱에서는 날씨 설정에 관한 설정이 나타난다는 것이죠.

벅스 뮤직 앱에서는 해당 가수나 곡명에 대한 검색을 제공하지만...

주식 앱에서는 해당 기업에 대한 주가 검색을 제공합니다

전통적인 Windows프로그램이나 여러 모바일 앱들을 보면 앱별로 저마다의 설정메뉴를 가지고 있어서 각기 다른 인터페이스를 제공했었는데요.

Windows 8에서는 새롭게 추가된 Charm bar를 통해 검색하고 공유하고 설정하고 장치를 변경하는 기능들을 실행 중인 앱과 상관없이 하나의 인터페이스로 통일하여 제공함으로써 사용자가 일관된 경험을 느낄 수 있도록 하고 있습니다.
MS 가이드라인에서도 Modern UI App을 개발할 때 Charm bar와 앱이 연동될 수 있도록(이를 contract라고 부름) 개발하라고 권고하고 있고요.

OS전체에서 일관된 사용자 경험을 제공하고자 하는 MS의 의지가 엿보이네요.


Switching pane
기존 Windows의 작업표시줄 같이 현재 실행 중인 모든 앱을 썸네일 형태로 볼 수 있는 Switching pane을 제공합니다. 
화면 왼쪽 상단에 마우스를 가져가거나 터치스크린의 경우 왼쪽 끝에서 오른쪽으로 Swipe하여 활성화 할 수 있습니다.
(키보드로는 윈도우키 + Tab 을 누르면 됩니다.)

화면 왼쪽에 표시되는 Switching pane


썸네일들은 드래그해서 Switching pane 바깥으로 빼낼 수 있고, 화면 아래 쪽으로 드랍하면 해당 앱이 종료되고 화면 왼쪽이나 오른쪽에 붙이면 다음에 설명 드릴 Snap기능이 활성화 됩니다. 다만 Switching pane 안에서의 순서를 바꿀 수는 없습니다.

한편, Switching pane에는 Modern UI App들과 데스크톱 자체의 썸네일들만 표시되기 때문에 데스크톱에서 실행 중인 전통적인 프로그램들(ex. 메모장, 탐색기 등)은 보이지 않는다는 문제가 있습니다. (릴리즈 프리뷰 버전 기준)
Alt + Tab을 눌러서 작업전환창을 띄우면 모든 앱과 프로그램들이 다 표시되기 때문에 임시방편으로 문제를 해결할 수 있긴 하지만 이 점은 좀 아쉬운 부분이네요.

Snap
Snap은 화면을 좌우로 분할해서 동시에 두 가지 앱을 띄워놓고 작업을 할 수 있는 기능입니다. 예를 들어, 오른쪽에 트위터 앱을 띄워놓고 왼쪽 화면에서는 블로그에 올릴 글을 작성할 수도 있습니다. 

오른쪽에 트위터 앱을 띄워놓고 왼쪽에서 블로깅을 하고 있는 모습. 출처: http://archwin.net

특히 데스크톱을 Snap하게 되면 아래와 같이 Snap영역에 데스크톱에서 실행 중인 프로그램들의 썸네일이 표시됩니다.

왼쪽에 데스크톱 앱을 Snap하고 오른쪽에서 제어판을 실행한 모습. 출처: http://archwin.net


Snap은 Switching pane을 설명하면서 언급했듯이 터치스크린의 경우 Switching pane을 띄워놓은 상태에서 앱의 썸네일을 드래깅하여 화면 왼쪽이나 오른쪽에 붙이면 되고요, 마우스로는 Switching pane에서 앱의 썸네일에 오른쪽 버튼을 클릭하여 Snap을 활성화 할 수 있습니다.
(제가 테스트 해본 릴리즈 프리뷰 버전에서는 제대로 작동하지 않아서 다른 곳의 설명을 참조하였습니다. 혹시 잘못된 점이 있다면 알려주세요.)

Snap으로 화면을 나누게 되면 각 앱이 화면을 차지하는 비율을 조절할 수 있는데요, 이 비율을 조정함에 따라 앱들이 자동으로 레이아웃을 변경하는 모습을 볼 수 있습니다.

각 앱이 차지하는 비율을 조정함에 따라 자동으로 레이아웃이 변경되는 모습. 출처: http://archwin.net


Snap기능을 잘 활용하면 듀얼모니터가 없을 때에도 화면을 나눠서 작업을 원활하게 할 수 있을 것 같습니다. 물론 화면이 작은 태블릿에서는 어렵겠지만요.

(저희가 여러 화면을 인용한 아크몬드님께서 직접 코멘트 주셨습니다.
아크몬드 스냅은 1366*768 이상 해상도에서 작동합니다. ^^)


Modern UI App Layout
시작화면을 포함하여 Modern UI App들은 기본적으로 전체화면에서 실행되고, 좌우로만 스크롤되며, Tile들의 묶음인 그룹들이 가로로 나열되어 있는 형태를 띕니다.

날씨 앱의 전체 레이아웃 모습. 메인, 매시간 일기예보, 지도, 이전 날씨의 그룹으로 구성되어 있다.

앱은 전체화면모드 외에 Snapped, Fill과 같이 총 3가지의 상태가 될 수 있는데요, MS에서는 어떤 상태에서도 앱의 콘텐츠가 능동적으로 창의 크기에 맞춰서 변할 수 있는 Fluid(Flexible) Layout을 따르도록 권고하고 있습니다.

App의 3가지 Layout 상태. Fill은 Snapped된 나머지 영역을 채울 경우를 의미함. 출처: http://msdn.microsoft.com

Semantic Zoom
Modern UI App이 전체화면 상태일 때 마우스를 화면 아래 쪽으로 가져가면 스크롤바와 함께 최소화 버튼이 나타나는 것을 확인할 수 있습니다. 이 때 최소화 버튼을 누르면 현재 앱의 모든 Tile들을 작은 스케일로 한 화면에서 볼 수 있는데요, 이를 Semantic Zoom이라고 합니다. (터치스크린에서는 Pinch 동작으로 쉽게 확인해 볼 수 있습니다.)

Semantic zoom out된 상태(좌)와 지수명으로 Drill down하여 Zoom In한 화면(우). 오른쪽 사진 우하단에 최소화 버튼이 있음을 확인할 수 있다.

다시 확대해서 보려면 화면의 빈 영역을 누르거나 줌인된 Tile을 눌러서 Drill down하거나 Pinch로 넓히면 됩니다.

Windows 8의 슬로건이 'Fast and Fluid'인데 이를 가능하게 해주는 것이 바로 Semantic Zoom입니다. 위의 Layout 부분에서 설명했듯이 Windows 8에서는 앱들이 전체 콘텐츠들을 가로로 나열해서 제공하는데요. 이 때 원하는 콘텐츠를 찾아보기 위해서 전통적인 방법으로 스크롤링을 할 수도 있지만, Semantic Zoom Out을 해서 전체 콘텐츠를 훓어보고 바로 원하는 부분을 찾은 뒤 Semantic Zoom In을 하여 빠르게 원하는 콘텐츠에 접근을 할 수 있는 것이죠.

Semantic zoom을 통해 사용자가 원하는 위치에 빠르게 접근 가능하도록 권장하는 MS의 Guide. 출처: http://msdn.microsoft.com

이는 멀티뷰나 탭 등으로 콘텐츠를 나눠서 표시하던 기존의 레이아웃에서는 찾아볼 수 없었던 새로운 네비게이션 방식이라고 할 수 있겠네요.

다만 마우스로 조작할 때는 최소화버튼을 누르기가 힘들어서 (참고 포스트 - 피츠의 법칙 Fitts' Law) 그렇게 Fast하게 느껴지진 않는다는 점이 아쉬웠습니다.


2. Desktop UI
기존 Windows 유저들을 배려해서인지 데스크톱은 시작버튼이 없어진 것과, 탐색기와 그림판 그리고 워드패드에 Ribbon UI가 도입된 것을 제외하고는 기존의 데스크톱과 매우 유사합니다.

데스크톱에서도 다른 앱과 마찬가지로 Switching pane과 Snap, Charm bar 기능을 사용할 수 있습니다. 다만 데스크톱에서는 Charm bar의 공유기능을 사용할 수 없고, 검색기능도 시작화면의 검색기능과 동일하기 때문에 실제로는 쓸 수 없어서 경험의 통일성이 떨어지는 문제가 있습니다.

Charm bar에서 공유를 선택한 화면. 파일을 선택하거나 텍스트를 블록지정하더라도 아무것도 공유할 수 없다.

다른 Modern UI App에서는 잘 되던게 데스크톱에만 오면 안되다보니, 왠지 데스크톱에서 작업을 하고 있으면 고립되고 소외된 느낌을 받습니다. 그래서 다른 앱들을 기분전환 삼아 종종 실행해보게 되는데요. MS에서 이런 세세한 부분까지 좀 더 신경써주었으면 어땠을까 하는 아쉬움이 남습니다.


3. 터치스크린과 전통적인 입력방식
터치스크린으로 사용하기
MS의 가이드라인에서는 Modern UI를 위해서 Touch를 먼저 고려하는 디자인(Touch-First)을 하라고 권고하고 있습니다. 확실히 태블릿과 같은 모바일기기에서 Windows 8의 사용성을 높이고자 신경을 쓰고 있는 모습입니다.

Swipe, Pinch, Panning, Turn to rotate와 같은 이미 널리 알려진 터치 인터랙션들은 기존의 사용경험과 동일하게 제공하고 있고요, 특별히 Tile Selection을 위한 타일에 대고 아래로 Swipe 하기, App의 메뉴를 표시하기 위한 화면 하단에서 위쪽으로 Swipe하기는 새롭게 추가된 인터랙션 방식입니다.

마우스는 정확한 포인팅이 가능하지만 손가락은 그렇지 않으므로, 선택을 위한 터치 인터랙션을 새롭게 제공. 출처: http://msdn.microsoft.com

데스크톱의 전통적인 UI도 터치로 조작을 할 수는 있습니다만, 마치 Windows Mobile 6때 손톱 끝으로 조그마한 버튼들을 누르던 때와 같이 매우 불편한 편이고, 탐색기에서 다중 파일 선택은 터치 인터페이스로는 불가능합니다.

대신에 터치로 텍스트 입력을 할 수 있는 손글씨 입력기와 화상키보드를 제공하고 있습니다. 

손글씨로 검색어를 입력하는 화면. 천천히 쓸 경우 좋은 인식률을 보여준다. 출처: http://www.techradar.com

Windows 8의 Split 화상키보드로 워드에 텍스트를 입력하는 모습. 출처: http://www.techradar.com

손글씨 입력기는 천천히 글씨를 쓰면 인식이 잘 된다고 하고 화상 키보드는 두손으로 타이핑을 할 때는 비교적 빠르게 텍스트 입력을 할 수 있다고 하는데요. (직접 써보진 못해서 리뷰사이트의 설명을 참고하였습니다.)
한글입력이 얼마나 잘될지, 화상키보드 한글 자판배열은 어떻게 될지 궁금하네요.
 

마우스와 키보드로 사용하기
Modern UI의 대부분의 기능은 마우스로도 동일하게 사용할 수 있고요, 특히 마우스오버와 같은 인터랙션은 터치 인터페이스보다 사용하기가 쉽습니다. 터치의 경우에는 일정 시간동안 누르고 있어야 동일한 인터랙션을 할 수 있기 때문이죠.
예를 들어, 파일 검색 결과 중 한 파일에 마우스오버를 하면 해당 파일의 상세정보를 바로 볼 수 있지만, 터치로 같은 동작을 하려면 파일을 일일이 꾹꾹 누르고 기다려야 하겠죠.

파일 검색 결과에 마우스 오버한 화면. 이를 통해 빠르게 해당 파일의 상세정보를 볼 수 있다.  http://www.techradar.com

그리고 Modern UI에서 새롭게 등장한 기능들을 단축키로 실행시킬 수 있기 때문에 조금만 익숙해지면 작업을 빠르게 할 수 있지 않을까 생각합니다. (Windows8의 새로운 단축키 23개 목록 링크)


4. Interface Issues
Windows 8에는 데스크톱이 포함된 Windows 8 RTM과 데스크톱이 없는 Windows RT버전으로 크게 2가지 버전이 존재합니다. Windows RT버전은 태블릿과 같은 모바일 기기에 미리 설치되서 판매되는 형태이기 때문에 배포버전을 구입할 수 없습니다. 그래서 기존의 많은 PC유저들은 Windows 8 RTM 버전을 사용해야 하는데요.

Windows 8 RTM에는 Modern UI와 데스크톱이라는 두 개의 공간이 존재하고 서로 매우 이질적인 문제가 있습니다. 그 예로, 시작화면에 있는 IE와 데스크톱에 있는 IE는 서로 별개의 프로그램이고 호환되지 않습니다.

그리고 Modern UI App과 전통적인 데스크톱 프로그램의 UI는 매우 다르기 때문에, Modern UI App <-> 데스크톱 프로그램으로의 전환시마다 매우 어색한 느낌을 주는데, 저는 마치 서로 다른 두개의 OS 사이를 왔다갔다 하는 느낌을 받았습니다. (VMWare와 같은 가상장치로 다른 OS를 전체화면으로 쓰다가 원래의 OS로 화면을 전환하는 느낌을 생각해보시면 이해가 빠를 것 같습니다)
이런 어색함이 주는 문제는 윈도우키를 누를때마다 Modern UI가 적용된 시작화면 으로 전환되기 때문에 생각보다 심각합니다.

Microsoft 입장에서는 새로운 Modern UI를 통해서 혁신적이고 일관적인 OS사용 경험을 제공하길 원하면서도, 기존의 수 많은 전통적인 프로그램들과의 호환성을 고려하지 않을 수 없었을 것입니다. 그래서 이러한 두 가지 UI - Modern, 데스크톱 - 를 제공하고 있습니다만 아직까지는 과도기인 것 같은 느낌을 지울 수 없네요.


글을 마치며...

터치하기 쉽고, 빠르게 네비게이션 할 수 있고, 새롭게 갱신된 정보를 앱을 실행하지 않고도 확인해볼 수 있는 Modern UI는 충분히 혁신적이고 매력적이었습니다. 하지만 Modern UI와 데스크톱 UI와의 괴리감은 큰 아쉬움으로 남습니다.
어쨌든 이미 주사위는 던져졌고, 앞으로 Windows 8이 기존 유저들에게 얼마나 사랑을 받게 될지 기대해 봐야겠습니다.


참고링크
Microsoft Windows 8 UX Guideline
Techradar Windows 8 Review 
Archwin Blog

[참고##windows##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 6
  1. jay 2012.10.29 00:08 신고 address edit & del reply

    일관성을 위해 엄청 노력했구나.. 하면서 읽다가 Desktop UI에서의 Charm bar 모습을 보고 말았네요..ㅋ

  2. 아크몬드 2012.10.30 15:27 신고 address edit & del reply

    스냅은 1366*768 이상 해상도에서 작동합니다. ^^

    • 이 재용 2012.10.30 15:40 신고 address edit & del

      평소 저희 블로그에 종종 댓글 남겨 주셔서 감사하게 생각하던 차에, 이번에 jun.ee님이 아크몬드님 블로그에서 많은 자료를 참고할 수 있어서 다시 한 번 감사드립니다. 남겨주신 커멘트는 본문에 크레딧과 함께 삽입하였네요.

    • jun.ee 2012.10.31 14:16 신고 address edit & del

      블로깅 하는데 덕분에 많은 참고가 되었습니다. 관심가져 주셔서 감사합니다^^

  3. 유엑스가이 2014.06.13 23:03 신고 address edit & del reply

    95시절부터 사용자들이 20년이 넘도록 익숙해진 시작버튼이 사라져버리고 그곳에 메트로화면으로 넘어가는 기능으로 바꿔놓았는데 이게 과연 UX를 고민한걸까요? 마치 쿼티자판의 엔터키에 어느날 갑자기 백스페이스기능으로 바꿔놓고 거기에 대한 어떤 정보도 제공하지않는거랑 다를바가 없네요. 20년동안 익숙해진 윈도우에 대한 사람들의 멘탈모델을 바꿔버리고...툴팁같은 정보조차 제공하지않은걸보면 우리가 디자인한대로 쓰고 불편하든지 말든지 알아서 익숙해져라라고 사용자에게 강요하는것 같습니다

  4. 사포 2015.08.28 11:04 신고 address edit & del reply

    윈도우 10에서 변경된 점들이 적지 않게 있는데, 이 글을 쓰신 분께서 포스팅을 해주시면 정말 감사하겠습니다.

Ad Test...