Be MODERN with Windows & Azure

사실 "가장"이라는 제목이 달린 이상 하나만 쓰려고 했는데,

첫 글(새창)에 이어서 눈에 밟히는 나쁜 UI가 보여서 부득이하게 2편을 씁니다. 하하...

늘 비교되는 맥과 윈도우.

둘의 사용 경험 중 제가 느낀 가장 큰 차이는 USB 제거 방법입니다.

출처: http://uwithelpdesk.wordpress.com/tag/how-to-eject-usb-drive/

네. 윈도우는 위의 흔한 그림처럼 작업표시줄에서 조막만한 USB 아이콘을 누르고 또 그 중에 목록에서 선택을 해야 합니다. USB가 여러개 꽂혀있으면 뭔지 알지도 못합니다.

맥은 두가지 방법으로 USB 제거가 가능한데,

출처: http://uwithelpdesk.wordpress.com/tag/how-to-eject-usb-drive/

위의 Finder(맥의 탐색기)에서 버튼을 누르거나 그저 휴지통으로 해당 드라이브를 드래그앤드롭하면 됩니다.

이건 정말 멋진 사용 경험입니다.

사실 윈도우7이 되면서 '안전하게 USB 제거'를 굳이 하지 않아도, 파일 관련 작업이 종료되면 그저 빼면 되기 때문에 작은 아이콘을 클릭하려고 애쓸 필요는 없습니다. 하지만, 정말 필요없으면 UI로도 나올 필요가 없다고 생각하고 과거에 USB를 그저 뿍! 뽑았다가 데이터가 복사가 안된 경험을 몇 번 겪은 사람들은 꼭 안전하게 제거를 클릭해야만 마음이 편하므로(저도 그 중 하나입니다) 이 부분은 개선이 필요하다고 생각합니다.

윈도우8이 되어도 이 부분은 여전히 개선이 안되어서 아쉬운 포인트라고 할 수 있겠습니다.

윈도우 8은 많은 UI의 시도를 했지만, 윈도우 9x시절부터 안바뀐-그러면서도 좋지 않은- UI도 있습니다.

윈도우에서 가장 나쁜 UI로 저는 "환경 변수 설정"을 꼽습니다.

환경변수 설정

위 스크린샷 중 우측의 창인데, 시스템 정보의 고급 탭에서 들어가서 "환경 변수(N)..."를 클릭하면 볼 수 있는 창이지요.

물론 사실 이것을 건드릴 일은 일반 유저에겐 거의 제로에 가깝습니다.

저같은 프로그래머에게도 JRE(Java Runtime Environment)를 설치하고 JAVA_HOME을 설정할 때만 들어가지요. 아놔 오라클 이것 좀 자동으로 등록하게 해놔라 쫌.

아무리 빈도가 낮아도, 어쨌거나 쓰라고 만든 UI지요.

나쁜 UI에 대한 정의는 여러가지지만, 보통은 "설명서없이 쓸 수 있는 UI"를 좋다고 말하곤 하는데요.

위의 환경 변수 설정 창의 경우는 다음과 같은 문제를 지닙니다.

1. 편집을 할 경우 폭이 좁은 Single Line으로 나옴.
   
2. 처음 쓰는 사람은 구분자를 세미콜론(;)으로 한다는 것이 없음.
   
3. 각 변수가 무엇을 의미하는지 설명하는 곳이 없다는 것.
   

1의 경우, 하~염없이 뒤로 가거나 대부분의 경로는 글자수가 많다보니 하나도 제대로 표현못한다는 것으로 가장 큰 문제고요. 전형적인 UI의 이슈입니다. 이것이 가장 큰 문제인데, 왜냐하면 실수를 아주 쉽게 야기시키기 때문입니다.

2의 경우, 1번과 엮이는 문제이지만 개선을 한다면 여러 줄(MultiLine)로 표현하거나 세미콜론 별로 자동 구분하여 목록으로 출력해야 할 것입니다.

3의 경우, 환경 변수란 특정 소프트웨어가 임의로 정하므로 설명을 쓸 수 없다고 생각할 수 있지만, 적어도 윈도우 처음 설치부터 존재하는 위의 path, TEMP, TMP 같은건 설명을 해야 한다고 봅니다.

애플 제품에서 사람들이 신통방통하다고 느끼는 첫 경험 중

아이팟(또는 아이폰)에서 음악재생 중 이어폰을 뽑았을 때 재생이 중지되는 기능이 있습니다.

윈8.1도 비슷한 기능이 구현되어 있습니다.

제 PC 3대가 윈7 아니면 윈8.1 Preview라서 윈8에서도 그런지 가물가물합니다만(아..한 대라도 윈8 남겨둘걸) 제 기억에 윈8 때는 안그랬던 것이 하나 있는데 그건 바로 이어폰을 뽑으면 자동으로 이전 설정으로 되는 것입니다. 다시 말해, mute 였다가 이어폰 꽂으면 이어폰 설정 때의 볼륨으로 전환되고, 다시 이어폰 뽑으면 mute가 되지요.

mute가 아니라 보통의 스피커 볼륨을 60으로, 이어폰 꽂았을 때 25로 했으면 이어폰의 연결 유무에 따라 그 상태 그대로 이원화되어 적용됩니다. 세부적인 설정의 기준은 몰라도 아마 기본값이 "뽑았을 때 mute로" 되어 있는 것 같은데, 그래서 회사에서 이어폰 뽑을 때 갑자기 소리가 크게 울려펴지는 문제가 전혀 없습니다 :)

이어폰을 뽑으면 mute에 불이 켜집니다. 역시 접사촬영은 닦고 찍어도 먼지가 잘보이는군요.

물론 이것은 사운드카드 드라이버와 긴밀하게 연결되어야만 동작하는 것이니, 꼭 동작된다는 보장은 없습니다. 제 경우 싱크패드 x230t에서는 동작하고, 슬레이트7에서는 동작 안하네요.

그리고 싱크패드의 경우, DisplayPort의 아웃풋으로 HDMI컨버터를 거쳐서 모니터를 연결하면 소리가 외부모니터에서 나오는데, 이 경우는 해당 기능이 동작을 안합니다.

요런거 꽂으면 자동 소리 조절 안됩니다 고갱님.

버그도 하나 있는데, 인터넷으로 유튜브 재생 중에 이어폰을 뽑거나 꽂으면, 아이콘으로는 전환되었다고 표시가 되어도 실제 동작은 그렇게 안됩니다. 그럴 땐 F5를 눌러서 새로고침하면 잘됩니다.

또 한가지, 소리에 대한 경험 중 하나로 "음악"앱에 대해서도 아래와 같이 좌상단에 음악앱에서 재생 중인 트랙 정보를 표시해줍니다. 깔끔하네요.

좌상단의 재생 중인 음악앱 트랙 표시. 영화 TRON의 OST는 개인적으로 다섯손가락 안에 꼽는 좋아하는 앨범입니다 :)

== 수정 (2013-07-30) ==

페이스북에 물어본 결과 상황에 따른 볼륨 자동제어는 윈도우8.0도 있던 기능이랍니다.

다만, 대부분의 제조사 사운드 드라이버를 설치하면 안되는 경우가 많다더군요.

아래 스크린샷은 저의 윈도우8.1 Preview 시작화면입니다.

시작화면

가장 눈에 띄는 타일은 단연 날씨앱 타일입니다.

아주 고상한 그림을 배경으로 한 타일이 단정한 정사각형 크기로 놓여있습니다.

윈8.1이 되면서 타일사이즈는 크게 4가지입니다.

시작화면 수정을 하는 중.

크게/넓게/보통/작게. 이렇게 네가지이며.

기존의 윈도우8.0은 넓게/보통 두가지였습니다.

개인적으로, 위 그림에서 두가지를 지적하고 싶은데요.

• '작게'는 없어도 될 것 같다고 생각.
• 각 레이블 앞에 田모양 아이콘을 놓아서 각자에 대한 상대적 크기의 감을 잡도록

이렇게 수정되면 좀 더 친절하지 않았을까 싶습니다.

'작게'가 없어지는게 나을거라고 생각한 이유는, 반드시 4개를 짝으로 맞추어야 표준크기가 되기 때문입니다.

4개 들어갈 공간에 꽉 차지 않으면 이빨빠진 듯한 느낌을 주지요.

아마 이것은 사용성보다는 윈도우폰의 형태와 맞추려고 하기 때문인지도 모르겠습니다.

위 사진에서 "라이브타일 끄기"는 언제 이걸쓰나 싶었는데...

사진앱의 경우 사진 폴더의 사진들이 나오다보니 정작 해당 타일이 사진앱인지 모르겠더군요.

좌하단에 작은 "사진" 글자만으론 파악하기 어렵고요. 아마 어떤 분에게는 원하지 않는 사적인 사진이 나오는 프라이버시 문제를 겪을 수도 있겠죠? 그래서 라이브타일 끄기를 했더니 알아보기 쉬워서 좋았습니다.

윈도우8.0은 모던앱이라는 "완전히 다른 시스템"을 도입했습니다.

처음 모던앱 개념이 나왔을 때 "두 머리를 가진 용"같다는 글을 어느 외국블로그에서 봤는데 (그래서 쓸 때도 머리가 둘로 나뉠 것 같다고;;;) 실제 구조상으로도 기존의 전통적인 데스크톱용 앱과 완전히 다른 공간에서 실행되고 관리됩니다. 샌드박스라고도 하지요.

기존에도 자바버추얼머쉰(JVM)이나 플래시 모두 일종의 샌드박스 모델입니다.

앱이 죽어도 OS나 그것을 구동했던 컨테이너에 영향을 안주고 외부로부터의 연결도 아주 최소화함으로써 보안이나 안정성을 향상시키지요.

이번 글에서는 어디까지나 제목이 UX이니만큼, 기술적인 것이 아닌 UX적인 면으로만 쓰겠습니다.

윈도우 8.0은 두가지 다른 모델을 구분지으려고 기존 데스크톱앱은 타일 배경으로 동일한 어두운 색을 사용했습니다. 해당 프로그램의 아이콘을 놓았지요.

아래 스크린샷처럼 말입니다.

가장 우측 열의 MS오피스 제품군 아이콘을 보면 아이콘이 어떤 색이든 파란 배경입니다.

그렇지만, 윈도우 8.1은 해당 아이콘의 색에 맞추어 배경색이 바뀝니다. 오~

제 시작화면입니다

우측 "일하자" 부분에 워드와 파워포인트 아이콘이 있군요. 차이가 보이시나요?

워드는 파란 배경, 파워포인트는 오랜지색 배경으로, 해당 아이콘 색과 최대한 유사한색입니다.

좀 더 살펴보면, 위의 제 시작화면 구성은 다음과 같습니다.

• "즐거운 하루"라는 첫번째 열(column)은 데스크톱타일 빼고는 모두 모던앱입니다.
• "일하자"라는 두번째 열은 모두 데스크톱용 앱입니다.
  

하지만, 어쩌면 아이콘 디자인만 잘하면 둘은 크게 다를 바 없어보일 것 같습니다.

이렇듯 해당 아이콘에 따라 배경색을 맞춰주는 센스는 윈도우7이나 인터넷익스플로러9에서도 볼 수 있습니다.

IE의 pinned site(사이트 고정)을 사용하면 해당 홈페이지 아이콘 색에 맞추어 뒤로/앞으로 버튼 색이 변경됩니다. (출처: http://www.zdnet.com/blog/bott/internet-explorer-9-beta-review-microsoft-reinvents-the-browser/2430)

실제로 써보니 기존보다 심미적으로 보다 나아졌다는 생각을 합니다. 기존에 배경색을 단일화 한 것은 칙칙한 느낌도 들고 어쩐지 클릭하고 싶지 않아지기도 하고, 조금 불쾌하기도 했습니다. 왜냐하면 데스크톱앱이 뭐 죄도 아닌데 너무 구분지었기 때문이지요. 이제는 그 차이가 줄어든 것 뿐만 아니라 더 이쁘게 표현되어서 보기 좋습니다.

"사람이 하나의 IT기기를 쓸 때 어떤 것에 감동을 받는가?"

아주 소소한 센스, 아주 작은 디테일에서 감동을 받는다고 저는 생각하고 10년전부터 저는 이것을 일할 때 "배려"라는 키워드로 묶어서 말하곤 합니다.

사용자에게 배려심이 느껴지는 몇가지 장치들에서 오는거죠.

아래는 윈도우8.1에서 새로 추가된 반띵 기능입니다.

반띵기능. 화면을 반반 갈라서 두 앱을 보여줍니다

개인적으론 윈도우8.0→8.1로의 UX 업그레이드 중 가장 맘에 드는 변화라고 꼽습니다.

참고로 기존엔 FullView/SnapView 식으로 거의 7:3의 화면분할만 가능했습니다.

아래 사진처럼 말이죠.

윈도우8.0의 멀티태스킹 화면분할 (출처: http://www.windows8designhandbook.com/img/gallery/nasdaq/nasdaq_snap-view.png)

실제 개발에서는, 8.0은 Full View/Snapped View를 구분하여 레이아웃을 설계하도록 템플릿이 주어졌습니다.

하지만 8.1에서는 가로사이즈에 따라 반응형(responsive)으로 알아서 조절되도록 바뀌었지요.

개인적으론, 8.1의 변화가 더 미래지향적이라고 생각합니다.

아마 이 글을 읽는 분들도 모두 그렇게 생각하실겁니다.

여하간, 다시 반반무마니 글에 맞추어, 반띵 기능을 마저 알아보겠습니다.

우리는 중요한 센스 하나를 볼 수 있는데요.

우측 앱이 포커스됨을 표시

가운데 가로막을 기준으로 점 세개 우측에 작은 세로줄이 있습니다.

이것이 어느 앱에 포커스되었는지를 표현하고 있습니다.

아래 안드로이드(갤럭시노트10.1) 스크린샷을 보면, 가운데 화살표로 되어 있습니다.

둘 중 무엇이 나은가. 저는 윈도우8.1 쪽이 더 낫다고 생각합니다.

개인적으로 삼성 갤럭시 제품군의 멀티윈도우는 쓸 때 아주 머리가 지끈거리는데요, 그 이유 중 하나는 하단의 메뉴바는 위의 두 앱의 조작과 어떤 관계인지가 모호하기 때문입니다. 그리고 지원되는 앱/안되는 앱의 구분이 있다는 것도 뭔가를 요상하게(?) 만드는 이유 중 하나죠.

갤럭시노트10.1의 멀티스크린 (출처: http://olpost.com/v/9494391)

사실 안드로이드 멀티윈도우가 머리아프게 구현될 수 밖에 없는 이유는, 처음 설계시 하나의 앱화면(액티비티)은 반드시 풀스크린이라는 것이 전제이기 때문입니다. 물론 이런 안드로이드의 멀티윈도우 기능이란, '그냥'으로는 안되고 삼성에서 제공하는 기능이니 기존 안드로이드 유저에겐 꽤 감사한 기능인건 사실입니다.

(안드로이드 깐다고 뭐라고 하지 마세요. 저도 안드로이드 유저이며 개발자에요...)

그렇다면 반띵화면에서 다시 시작화면을 가서 새로운 앱을 부를 땐 어떻게 될까요?

이제 꽤 멋진 센스가 나옵니다.

새로운 앱을 선택할 때, 반반화면의 위에 얹혀짐.

얹혀진 타일을 좌우 중 선택되도록 시소처럼 표현됨.

우측을 선택하면 그 부분이 변경

하나를 닫을 경우 기본 컬러의 백그라운드가 나타남

꽤 유기적이고 이쁜 형태로 표현이 됩니다. 저는 이 센스를 좋아합니다.

하나 지적하고 싶은건, 마지막 스크린샷인데요. 앱을 닫을 경우 덩그러니 배경색(=윈도우 바닥색?)만 나와서 이게 앱인지 바닥인지 모호합니다. 옅은 회색으로 창문로고를 가운데 표시해주면 "아, 앱이 없는 공간이구나"라는걸 알텐데 말이죠.

남겨진 앱이 나머지로 채워지는 것도 그렇게 불편할 것 같진 않습니다.

윈도우 8에서 윈도우 8.1이 되면서,

데스크톱의 바탕화면과 동일한 이미지를 시작화면 배경으로 할 수 있게 되었습니다.

기존의 시작화면의 배경은, 색색의 타일을 강조하고 싶었는지 대부분 어둡고 무채색 계열이었는데요.

이렇게 함으로써 "데스크톱"을 가리키는 타일(아래 사진의 좌하단 꽃그림 타일)은 데스크톱의 바탕화면 이미지를 보여줌으로써 다른 하얀 아이콘의 모던앱과 차이를 둔 의도도 엿보이죠.

기존 윈8 시작화면 (출처: http://windows.microsoft.com/en-us/windows-8/how-to-download)

8.1이 오면서 스타트화면의 배경도 데스크톱의 배경과 온전히 같은 그림을 만들 수 있게 되었습니다.

아래처럼 말이죠.

개선된 8.1의 시작화면 (출처: http://www.nbcnews.com/technology/windows-8-1-microsoft-doubles-down-new-touch-interface-6C10126434)

참고로 시작화면이 나오면 배경화면이 약~간 어두워지고 타일이 나옵니다.

'완전히' 동일한 바탕화면 이미지는 아닌셈인거고요.

실제로 8.1 Preview를 써보니, 바탕화면과 시작화면의 배경을 동일하게 하는 것은 인지적으로도 큰 장점이 있음을 느꼈습니다. 기존에 시작화면이 대차게 까였던 이유는, 고작 좌하단에 시작아이콘 하나 눌렀다고 화면 전체가 "싹!" 바뀌는 걸로 혼란스럽다는 것이 있었는데요.

저 역시도 그렇게 느꼈고요.

그런데, 데스크톱 배경과 동일해지니 마치 "하나의 레이어를 얹은 느낌"만 들 뿐 뭔가 '온전히 새로운 화면'이 펼쳐졌다는 느낌이 들지 않습니다. 위화감이 적다고 이해하시면 될 것 같습니다.

관련 기사에 제 생각과 같은 내용이 나오는군요.

you can achieve a surprising mental cohesiveness. Shifting back and forth isn't so jarring, and both become pieces of a whole.

- 출처: http://www.nbcnews.com/

참고로 이 설정은 시작화면 상태에서 참바>개인설정을 보면 배경이미지 목록의 가장 우하단에 나옵니다.

시작화면의 배경도 데스크톱과 동일한 바탕화면 이미지로 지정

8.0을 쓰다가 8.1을 쓰니까 소소한 변화가 눈에 띕니다.

아주 깨알같은 변화랄까요.

그동안 8.0은 우측 참바(Charm Bar)를 쓰기에 마우스나 대화면 데스크톱 유저들에게 너무 마우스 동선이 길다는 비판을 받았습니다. 뭐 거의 까이다시피 했지요.

제 노트북인 12인치 수준에서는 기존과 차이가 없이 위아래의 딱 중간인 가운데 정렬로 나오지만.

조금 큰 모니터에서는 아래와 같이 마우스를 윗모서리→아래로 내리느냐 아랫모서리→위로 올리느냐에 따라서 참바 아이콘 5개의 위치가 조금 조정됩니다.

우측 참바가 아래쪽에 나타나고...

이 스크린샷에서는 위쪽에 나타납니다.

물론 실질적으로 마우스 동선이 많이 짧아졌습니다.

특히 중앙까지 포인터를 움직여서 아이콘 5개 중 하나로 위치를 맞추는 일은 꽤 번거로웠고요.

윈8부터 등장한 우측의 참바라는건, 터치환경에서 일관된 콘트롤센터를 준다는 것을 위해 도입한거 같은데,

장점은 어느 앱이나 일원화된 콘트롤이고 단점은 지나치게 추상화된 것 같다는 생각이 듭니다.

• 검색, 시작, 설정 - 이 세가지 버튼은 상당히 자주 쓸 수 밖에 없는 기능성을 가졌는데,
• 공유, 장치 - 이 두 버튼은 어쩐지 위의 3개 만큼의 활용성은 떨어지거나 모호합니다.

특수한 일을 하지 않는 이상 (예: 직업이 강사라서 프로젝터 연결을 매 시간마다 한다던지) 하루 중 한두번 쓸까말까한 기능이지요. 아마 5개의 아이콘을 심미적으로 맞추고자 하는 노력인 것도 같습니다.

쓸수록 윈8은 타블렛이나 제가 쓰는 터치스크린 노트북 기기에 최적이라는 생각이 듭니다.

다만 8.1은 고집을 충분히 꺾고 수많은 VOC를 반영한 것 같아서 좋게 생각합니다.