한빛출판네트워크

제공 : 한빛 네트워크
저자 : Peter Meyers
역자 : 서윤정
원문 : Five digital design ideas from Windows 8

Metro로 확인한 마이크로소프트의 터치스크린 설계에 대한 많은 노력의 흔적을 확인하다.

대부분의 마이크로소프트의 디자인은 혹평을 받을 만하다. 그러나 마이크로소프트가 올바른 방향으로 나아갈 때에는 칭찬도 필요하다. 마이크로소프트는 윈도 8에서 메트로 터치스크린 인터페이스(Metro touchscreen interface)를 선보였는데, 정말 멋졌다. 메트로는 인간적이고, 효율적이며, 혁신적이다. 내 생각에 메트로에는 디지털 책 디자이너가 따라 해볼만한 기능도 많은 것 같다. 빌드 프레젠테이션 "8 traits of great Metro style apps"를 시청하면서 노트패드를 잽싸게 꺼내 핵심 기능을 급히 메모했다. 시청한 시간을 대략적으로 기록할 수 있었기 때문에 90분 짜리 세션을 여러 번에 걸쳐 시청할 수 있다. 가장 좋았던 부분? 좋았던 부분이 어디냐를 떠나서 마이크로소프트가 보여준 데모 제품을 실제 만들어냈고, 우리는 마이크로소프트가 만든 제품으로부터 유익을 얻을 수 있다.



태블릿 사용자의 자세와 손의 위치(16분 31초)

마이크로소프트는 태블릿 사용자가 어떻게 앉고 디바이스를 어떻게 손에 쥐는지를 여러 번 실험했다. 태블릿을 이미 써본 사람이라면 예측할 수 있는 결과다. 그럼에도 이 결과는 의미가 있다. 대부분의 사람은 두 손으로 태블릿을 잡으며 가장 많이 손과 닿는 위치는 모서리다. 여기서 배울 수 있는 점은 무엇일까? "사용자가 편리하게 사용하려면 모서리 근처에 키를 배치해야 한다(19분 23초) ". 그리고 "기기의 방향을 어떤 방향으로 사용하고 있는지와 관계없이 화면의 중앙을 터치하려면 사용자는 자세를 바꿔야 한다". "즉, 사용자가 몸을 움직이지 않고는 화면의 가운데를 터치할 수 없다"는 말이다. 따라서 "자주 사용하는 기능을 모서리 근처에 배치"하고, "디바이스의 모서리를 잡은 채로도 편하게 사용할 수 있는 곳에 입력 키를 배치"해야 한다.

"빠르고 부드러움"과 "느리고 투박함"의 차이 (25분 45초)

첫 번째 문장 "빠르고 부드러움"은 마이크로소프트가 주장한 것으로 윈도우 8이 어떻게 동작하는지 꽤 긴 데모를 통해 보여준다. 두 번째 문장 "느리고 투박함"은 필자의 생각이다. 어쨌든 데모는 개발자가 하지 말아야 할 행동을 명확하게 보여준다. 예를 들어, 사용자가 그림을 리스트에 추가할 때 마이크로소프트가 제공하는 변화 효과를 사용하는 것이 좋다. 이 내용이 별 대수롭지 않은 것 같이 들릴 수 있겠지만, 데모에서는 이 점을 명확히 보여준다. 이 작은 차이로 인해 사용자와 콘텐츠 사이에 엔지니어가 끼어들었다는 느낌을 덜 받게 될 수 있고 따라서 사용자는 콘텐츠에 좀 더 집중할 수 있다.

특히 마이크로소프트는 이런 애니메이션 기능을 구현할 때 윈도 8의 "Animation Library"를 이용하면 하드웨어 가속 등과 같은 장점이 있으므로 윈도우 8에서 제공하는 라이브러리를 사용할 것을 권장한다. 마이크로소프트의 라이브러리를 사용하면 프로그래머가 멋있는 애니메이션이나, After Effects를 배울 필요가 없다는 것을 데모에서 보여줬다. 윈도 8에서 제공하는 애니메이션 기능은 디자인 작업을 알아서 해준다. 빠르고 부드러움에 대해 글을 쓴 이유는 느린 읽기 속도 때문에(심지어 0.5초 정도의 시간도 너무 느린 편이다) 독자는 떠날 수 있기 때문이다.

빠르고 부드러움에 대해 얘기하다 보니 "The Elements for iPad"의 저자이면서 "Touch Press" 작업에 참여한 사람 중 하나인 Theo Gray를 만났을 때 나눴던 대화가 생각난다. 그는 작업중인 앱을 내게 보여주다가 중간에서 데모를 중지했다. 화면의 보석 중 하나가 약간 늦게 회전했기 때문이다. 그는 아주 미묘한 차이라도 사용자는 알아차린다고 말했다. Touch Press 앱이 훌륭한 이유는 이와 같은 지독한 섬세함 때문인 것 같다.

"터치용 언어" (27분 30초)

이 부분에서 마이크로소프트가 강조한 점은 터치스크린 앱을 만들 때에 마우스를 동작하는 것처럼 손가락과 터치 움직임을 만들지 말라는 것이다. 멀티터치 스크린은 일반 컴퓨터와는 다른 방법으로 제어해야 한다. 마이크로소프트는 iOS 사용자가 홈 화면에서 다른 화면으로 아이콘을 움직이려고 드래그하는 과정을 조롱했다. "이것은 자동차로 바다를 건너는 것과 같다". 몇 개의 페이지를 채울 정도의 앱을 가지고 있는 사람이라면 마이크로소프트의 말이 무슨 의미인지 이해할 수 있을 것이다. 현재 애플의 디자인은 실제로 마우스를 이용해 수평 스크롤을 하는 것과 같은 동작이다(iOS에는 스크롤바가 화면에 없다는 점을 빼면).

마이크로소프트는 이 문제를 깔끔하게 해결한다(28분 48초). 한 손으로 움직이려는 아이콘을 선택한 상태에서 다른 손으로 화면을 조작해 아이콘을 놓을 화면으로 이동한다. 이 방법은 부드럽게 동작하며 터치스크린의 장점을 어떻게 살릴 수 있는지를 보여준다.

"Semantic" 줌(33분 25초)

지금까지는 화면을 건드려서 이미지나 기사의 폰트 크기를 조절했다. 마이크로소프트는 콘텐츠를 얼마나 확대할 것인지 새롭고 더 자세한 정보를 제공할 수 있는 트위스트를 소개한다. 예를 들어, 화면을 자세히 보면 홈 화면에서 이웃한 아이콘 그룹이 다음과 같이 표시된다.


[일반모드(확대하지 않은)의 앱 아이콘 시작 화면]

사용자가 하늘을 나는 bird"s eye 시점으로 화면을 축소하면 같은 그룹에는 라벨이 표시되며, 이동하거나 그룹을 다른 순서로 정렬하는데 필요한 정보가 제공된다.


[bird"s eye 뷰로 본 시작 화면 앱 아이콘 모습]

책 디자이너도 이와 같은 기법을 적용해서 사용자가 다양한 수준(책 전체, 챕터 수준 등)으로 책을 탐색할 수 있도록 할 수 있다. 몇 달 전에 필자는 outline zooming tool를 이용한 Glo Bible과 비슷한 제품에 대한 글을 썼다.

진정한 멀티태스킹 (46분 42초)

메트로에서는 메인화면에서 두 개의 앱을 동시에 나란히 배치할 수 있다. 한 개의 앱이 화면 중앙을 차지하면 다른 앱은 "스냅"이라 부르는 상태로 전환된다. 즉, 다른 앱이 실행되면 윈도우를 다른 앱에게 양보하고 작은 사각형으로 이동한다.


[스냅 위치로 이동한 아이콘 설명]

Jensen Harris는 "스냅 상태 덕분에 사용자는 앱을 화면에 더 오래 유지할 수 있다"고 설명한다. 스냅 위치에 표시되는 앱일지라도 동작은 계속 수행된다. 예를 들어, 피아노 앱이 스냅 상태에 있고 드럼 앱이 메인 화면에 실행되고 있다고 하면, 사용자는 동시에 두 가지 악기를 모두 연주할 수 있다. 즉, 윈도우 8은 실제 같은 멀티태스킹을 지원하므로 사용자는 여러 앱을 동시에 사용할 수 있다. 동시에 여러 문서를 열어놓고 작업하는 독자나 작가에게도 구미 당기는 기능이 아닐 수 없다.