이런 제목이었으면 더 좋았을 텐데 "니즈를 파악하라" 라는 제목이달린 디자인 정글 1월호 원고에요. 니즈를 찾으려는 시도가 무의미하다는 도널드 노만의 주장도 있지만, 디자이너는 니즈를 파악해서 디자인을 하는 수동적인 입장이 아니라, 사용자에게 새로운 경험을 전달해서 능동적으로 니즈를 알려주는 것이라고 생각해요. 부모가 아이들에게 풍부한 경험을 통해서 고급스러운 맛(Taste)을 알려줄 수 있는 것처럼요.

더보기

알리바바와 40인의 도둑에서 알리바바는 40인의 도둑의 소굴에 들어가서 보물을 얻었는데요. 저는 40인의 디자이너 분들과의 만남에서 무엇을 배워왔을까요?

더보기

그래도 오셨던 분들은 정말 즐겁게 웃으면서 시간을 함께했어요. 전체적인 분위기가 정말 재미있었는데, 한분씩 발표하면서 자신을 소개하는 것도 인상적이었어요. 보통 자기소개를 하면 자신의 이름과 소속, 하는 일을 말하는데 이 중에 기억나는 것은 실제로 별로 없죠. 그래서 제가 특별히 부탁하기를, 우리가 익숙하게 알고 있는 개념 또는 단어를 가지고 자신에게 별명을 붙여달라고 주문했어요. 아빠, 엄마, 캔유, 스마트폰, 광고, UI, 차세대, K7, 정수기, 세탁기 등 재미있는 별명들이 많이 나왔고 그만큼 쉽게 서로를 기억할 수 있는 장치가 되었어요.

우리가 무엇인가를 새로 배울 때 생소한 개념과 단어를 익히는 것이 가장 큰 장애요소 중에 하나이죠. 이런 활동은 참석자들의 이름을 중요하지 않게 생각해서가 아니라, 참석자 들이 기존에 익숙하게 알고 있던 단어와 한사람 한사람을 매치시킴으로써 보다 쉽게 서로에게 친근감을 느끼고 다가갈 수 있도록 하기 위해서 였답니다. 사연이 있으면 굉장히 재미있는데 전문용어가 나오면 약간 따분해 지는 그런 감이 있었어요.

발표자료가 없이 발표를 하는 대신, 추가적인 설명과 이해를 돕기 위해 급히 노트북을 빌려서 Q&A 시간을 진행했는데요. 그 동안 유팩에 쌓아둔 자료들이 많은 도움이 되더라고요. 현업에서 실무를 하시는 분들이 많았기 때문에 제 발표를 최대한 짧게 하려고 했는데, 생각보다 시간이 많이 흘렀어요. 발표 내용은 여기에 아주 잘 정리가 되어 있답니다. (여기도, 여기도)

참석자들과 대화를 진행하면서, 순간순간 얘기가 나오는 것들과 떠오르는 자료들을 찾아서 함께 보는 것이 강의나 세미나를 보다 생동감있게 만드는 것 같아요.

시간 관계상 많은 대화를 나누지는 못했지만 참석자들의 경험을 듣는 시간은 서로에게 도움이 많이 되었을 것 같아요. 이런 방법은 작년 UX팩토리 만나기에서 있었던 경험의 공유 시간에서 진행했던 방식인데, 모두가 궁금해 할만한 주제를 가지고 참석자들이 자유롭게 발언권을 가지고 대화를 주고 받는 방식으로 진행을 했어요. 참석자가 많기 때문에 시간이나 화제를 잘 조절하는 것이 중요하더라고요.

예상한 결과지만, 40여분의 참석자분들은 아주 뜨겁게 네트워킹을 하셨어요. 진행을 하기 위해서 어쩔 수 없이 다음 순서로 넘어갔지만 여러번 안내드려도 좀처럼 안 들으셔서 진행하시는 프로젝트만의 황경록 선배님이 힘들었어요.

팀플레이 시간인데, 년차별로 3개의 그룹을 만들어서 다시 자기소개하는 시간을 가졌어요. 어떤 그룹은 끝나고 식사도 하시고 다시 연락처까지 공유하는 등 뜻깊은 시간을 만드셨다고.

그룹별 팀플레이를 뭘로 할까 상의 중이에요. 현장에서 즉석해서 팀플레이 프로그램을 생각하려니 쉽지 않더라고요. 황경록 선배님(프로젝트만의 참가자들은 모두 이렇게 부릅니다. 황선배님도 그렇게 불러주기를 바라고요. ㅋ 학교 선배나 직장 선배라기 보다는 웹 업계의 선배님이라는 의미에서)의 조언으로 재미있는 명함 모으기 아이디어를 생각하고 시작할 수 있어요.

각 그룹에 주어진 과제는 그룹별로 10장의 명함을 사용해서 작품을 만들고, 모든 사람이 돌아가면서 마음에 드는 곳에 명함을 놓는 것이었는데요. 참석자들의 명함을 가장 많이 얻는 작품이 상품을 받게 되는 과제였어요. 즉, 10장의 명함으로 보는 사람으로 하여금 행동(명함을 추가해서 놓는 것)을 유발하게 하는 것이 미션이었죠.

그렇게 해서 3가지의 작품이 나왔어요.

첫 번째 작품은 10장의 명함으로 둥그런 벽을 만들어서 그 안에 명함을 쉽게 넣을 수 있도록 만들었어요.

두 번째 작품은 명함에 홈을 내서 서로 퍼즐처럼 겹칠 수 있게 해서 참가자들이 나무를 만들어 갈 수 있도록 하였고요.

마지막 작품은 명함을 서로 쌓아 산을 만들었어요.

각 그룹별로 작품을 소개하는 시간이 끝나고 모두들 둘러 서서 한명씩 작품에 참여하기를 시작했어요.

저마다 각각의 작품 중 마음에 드는 것에 명함을 찟거나 접거나, 돌돌 말아서 참여하게 되었어요.

재밌는 것은 3번째 작품을 만든 그룹이 처음 설명했을때 게임이라는 말을 안 썼는데, 추가 설명을 하면서 카드 쌓기처럼 명함을 쌓는 도전을 주는 게임이다라고 설명해 주었고 그 말 덕분에 많은 사람들이 쉽게 이해하게 되었어요.

이 걸 보면서 게임이라고 설명한 한 마디가 사람들에게 어떤 기대를 갖게 하는지 새삼 와닿았어요. 주변에서도 흔히 게임이라고 하면 지루한 일이 재미있게 보이는 경우가 종종 있죠?

세가지 조별 결과물을 보면서 저는 여러 가지 영감을 얻었답니다.

1. 누가봐도 쉬운 참여 첫 번째 작품과 무척이나 불편하고 어려워 보이는 세 번째 작품 중에, 세 번째 작품에 도전하는 사람이 많았고 세 번째 작품을 성공했을 때 사람들의 탄성이 나왔다는 것.

2. 두 번째 작품도 참여를 이끌어 냈지만 모양이 무너지면서 더 이상 참여하기가 어려운 상태가 되었다는 것.

3. 사람들은 역시 자기 작품에 더 많은 애착을 느낀다는 것. ^^

작은 사례이지만, 사용성보다 경험이 중요한 이유, 게임에서의 UX가 다른 분야에 어떤 영감을 줄 수 있는지, 사람들은 어떤 상황에서 참여하고 싶어하는지, 충분한 커뮤니케이션이 사람의 행동에 미치는 영향 등을 인상적으로 느낄 수 있었어요. 이번 UX팩토리 만나기에서 다시 한번 해보고 싶다는 생각이 드네요.

마지막 시간은 경품 증정 시간인데요. 지난 css nite의 뒷풀이에서 했던 게임을 다시 해봤어요. 많은 사람들이 가위바위보를 해서 최종 승자에게 상품을 주는 건데, 처음에는 다들 어떻게 이렇게 많은 사람들이 가위바위보를 하냐며 의아해 했어요.

규칙은 사회자 한명과 참석자 가 1:다수로 가위바위보를 해서 사회자에게 진 사람이 탈락하는 방식으로 하는 거에요. 끝까지 살아남은 사람에게 상품이 돌아가는 골든벨 같은 게임이죠.

이 방식은 개인적으로 인상적인 게임이었는데, 예전에 여러 오브젝트 간의 상호작용에 대해서 관심을 갖던 때에 수많은 오브젝트가 규칙을 가지고 상호작용하려면 모두가 참조할 수 있는 하나의 기준이 있어야 한다는 것을 크게 실감한 적이 있거든요. 예를 들면, 판자 위에 수십개의 구슬을 올려놓고 각각의 구슬이 평면을 흔들리게 해서 다른 구슬에 영향을 미칠 경우, 구슬의 움직임을 예측할 때 모든 구슬로 부터의 영향을 따로 계산하는 것이 아니라 평면에 미치는 무게 중심을 한번 계산하고 그 것을 기준으로 적용하면 되는 것처럼요. 3차원 그래픽에서도 2차원 평면에 투영시킬 이미지를 계산할 때 이와 같은 방법을 쓰지요.

40명이든, 4명이든 똑같은 규칙으로 게임을 했어요. 최근에 윈도우7 디자인 원칙에 대한 포스팅도 있었지만, 많은 사람들이 작업하는 데에는 원칙이 정말 중요하다는 사실을 다시 한번 느끼기도 했답니다.

마지막으로 참가하신 분들과 U, X를 만들며 단체사진을... 참석하신 분들도 저도 준비하셨던 분들도 모두 즐거운 시간이었어요.

Photo by MARKERS (예쁜 사진 감사합니다. ^^)

많은 분들이 저에게 스터디 그룹을 참여하려면 어떻게 해야 하는지 물어보고 계세요.

어제 서울여대에서 디자인학부 학생들을 대상으로 마이크로소프트의 UX 디자인에 대해서 특강을 하고 왔어요. 


발표자료는 이미지 중심으로 되어 있고 실제 특강에서는 내부에서 보고 느꼈던 것들과 에피소드을 가지고 설명을 덧붙였습니다.
 

윈도우7에서는 알려진 것처럼 멀터터치 스크린을 사용하여 프로그램을 개발할 수 있죠. 개발자와 미디어 아티스트 들에게 도움이 될만한 윈도우7 멀티터치 개발에 대해 배울 수 있는 동영상이 있어서 소개해 드려요.

서피스 프로그램 개발 경험이 있는 오일석님이 윈도우7에서 멀티터치가 어떻게 적용이 될지(어떻게 활용해야 할지) 설명해 주고, 본격적으로 멀티터치를 개발하는 방법에 대해서 자세히 설명해 주고 있어요. 여기서 보실 수 있네요.

내 모니터에 지문을 묻히기엔 아직 망설여 진다.

• 익숙한 마우스 vs 어색한 손가락
• 링크를 누르기엔 내 손가락이 두껍다.
• 텍스트 입력은 거의 불가능하고(텍스트 입력의 경우 가상 키보드를 사용해서 가능할텐데...)
• 마우스 오버가 없다
• 멀티터치가 신기하고 재미있지만…
• 작업을 하기에는 불편하다

세심한 배려가 필요하다.

• 정교한 마우스 vs 두꺼운 손가락: 점프 리스트의 예
• 다르다는 걸 인정: 바탕화면 보기 동작 차이
• 어쨋든 반응한다: 끝에서 바운스 바운스(터치가 동작하고 있는지 여부에 대해서 피드백을 주어야 하기 때문에, 휠마우스와는 다르게 스크롤이 끝나는 영역에서 약간의 반동 효과가 들어간다는)
• 마우스 오버가 없다.
• 기존 응용 프로그램을 사용하기에는…

실버라이트 기초를 약간 알고 있는 사람들은 실버라이트 멀티터치 개발에 대한 동영상을 보면 좋겠네요. 프로젝트 생성, 이벤트 처리, 실행 정도의 방법만 알고 있어도 이해하는 데 어려움이 없을 정도로 쉽게 잘 설명해 주고 있어요.

아시다시피, 멀티터치가 가능한 PC에서 해볼 수 있겠죠. 멀티터치 개발을 해보고 싶어서 PC를 구입하는 사람들도 생겨나겠네요. TechDays 2009에서 좀 더 다양한 주제의 개발 동영상들을 보실 수 있습니다.

주변에서 다양한 주제의 이반젤리스트로써 활동하는 분들이 알게 모르게 참 많죠.

웹표준 이반젤리스트, UX방법론 이반젤리스트, 플래시/플렉스/AIR 이반젤리스트, 미투데이 이반젤리스트, 맥 이반젤리스트, 웹2.0 이반젤리스트, 루비온레일즈 이반젤리스트, 웹사운드 이반젤리스트, IT가젯 이반젤리스트, 위젯 이반젤리스트, 윈도우7 이반젤리스트, 아이폰 이반젤리스트, 안드로이드 이반젤리스트, 스마트폰 이반젤리스트, 파이어폭스 이반젤리스트, 웹접근성 이반젤리스트 등등...

지금 보니 이 분야엔 열정적인 활동가가 참 많은 것 같네요. 대표적인 분들로 이찬진님(아이폰) 윤석찬님(웹표준, 파이어폭스) 정찬명님(웹접근성) 표철민님(위젯) 작은아이님(미투데이)이 있어요.

이제 저도 기업의 프로(?) 이반젤리스트로 활동한지 2년 정도 되었는데요.(마이크로소프트에는 저 말고도 여러 분들이 이반젤리스트로 일하고 계세요) UX에 대한 사람들의 관심이 더 커지고, 많은 사람들이 UX를 알아갈수록 제가 하는 일에서 스스로 많은 자부심을 느끼게 되는 것 같아요. 그 동안 세상을 변화시키기 위해서 어떤 것들을 알아야 하는지 참 많이 생각해 봤어요. 한 분야의 이반젤리스트로 활동한다는 것은 관심 분야에 대해서 깊이 몰입할 수 있는 흥미로운 여정이랍니다. 

윈도우7이 최근에 정식 버전(RTM)이 발표가 되었죠. 저도 덕분에 기존에 사용하던 윈도우7 RC(출시 후보) 버전 대신에 사내에서 배포되는 정식 버전을 새로 설치했답니다. 이전에도 몇 번의 재설치를 하느라고 번거로움이 있었지만, 그 때 사용했던 팁을 공유하려고요.

윈도우를 C: 드라이브에 설치하는 경우, 포맷하기에 앞서서 데이터들을 찾아서 백업해야 하는 번거로움이 있는데요, 특히 C:\My Document, C:\My Picture 등 파일들이 백업하기가 귀찮더라고요. 윈도우7에서는 이들을 모아서 관리하는 가상폴더인 Libraries가 생기면서, 처음부터 My Document 등의 폴더를 D: 드라이브 등으로 변경해 두고 사용할 수 있게 되었어요.

위 화면처럼 Documents의 Properties로 들어가면 대상 폴더를 바꿀 수 있죠. 오른 쪽에 잘 보면 My Documents(210) 라는 항목 밑에 D:\ 가 기본으로 보이는 것을 확인할 수 있어요.

위 화면처럼 Documents의 대상 폴더를 D:\My Documents로 바꾸어 놓으면 내 문서 폴더가 항상 D:\My Documents를 보여주도록 쓸 수 있게 되는거죠. 여러 개의 문서 폴더를 쓴다면 모두 등록해 놔도 되구요. 저는 이미지파일을 자주 사용하는 편이라 내 문서에 추가로 D:\My Picture 폴더도 함께 등록해 두었어요. 내 동영상, 내 사진, 내 음악 등 폴더도 각각 이렇게 설정이 가능해요.

그리고 브라우저의 즐겨찾기(Favorites)는 서로 다른 장치들 간에 파일을 공유할 수 있도록 도와주는 Mesh 를 이용하면 편리해요. Mesh에 접속해서 Live 아이디로 가입을 하고, 아래와 같이 Add Device를 이용해서 PC를 추가해서 사용할 수 있는데요.

지난 글에 이어서 윈도우7에서 새롭게 도입된 인터랙션 디자인 요소들을 통해 UX를 향상시킨 점들을 살펴 보려고 해요. 사용하면서 발견한 것들을 두서없이 짧게 남겨봅니다. 혹시 보시다가 다르게 생각한 부분이나 제가 미처 발견하지 못한 요소가 있으면 댓글로 의견 달아주세요. 지난 글 보기

첫 번째 살펴볼 것은 타이틀바인데요. 아무래도 윈도우에서 가장 많이 만지는(마우스로) 부분이기 때문에 저도 가장 먼저 발견한 요소랍니다. 다른 분들이 윈도우7 리뷰에서 작업표시줄를 중심으로 많이 다뤄주셨기도 하고, 실제 사용할 때 더 많이 사용하니까 이번에 윈도우 창의 인터랙션 디자인 요소를 한번 소개해 보려고요.

타이틀바는 윈도우 창의 가장 윗 부분으로 창을 이동하거나, 닫기 또는 축소 등의 기능 버튼이 있는 부분을 말하는데, 왼쪽 상단의 아이콘을 더블 클릭해서 창을 닫는다 던지… 타이틀바 중간 부분을 더블 클릭해서 전체 화면 전환 등의 잘 알려지지 않은 인터랙션 요소가 있었죠.

이번에 새롭게 추가된 것은 타이틀바를 드래그 할 때 발생합니다. 위 화면처럼 타이틀바를 드래그해서 화면 맨 위 쪽으로 가져가면 전체화면으로 쉽게 전환할 수 있어요. 이 때 전체화면으로 전환될 모습을 투명한 사각형 모양으로 미리 알려주어서 사용자가 인터랙션의 결과를 예측할 수 있도록 해줍니다.

반대로 전체화면으로 되어있는 창의 타이틀바를 아래로 드래그하면 원래 화면으로 전환이 됩니다.

더블클릭이나 아이콘 클릭이 실제로는 그렇게 쉽게 사용할 수 없다는 점을 감안할 때 이러한 드래그 방식의 조작은 상당히 편리하게 쓸 수 있는 기능이네요.

이 인터랙션 디자인 요소가 좋은 점은 1) 사용자가 스스로 발견할 수 있다는 점 뿐 아니라, 2) 다른 방식으로 응용할 수 있다는 점이 아닐까 싶은데요.

창을 왼쪽, 또는 오른쪽 끝으로 드래그 했을 때에는 위 화면처럼 왼쪽, 오른쪽에 맞추어서 정렬이 됩니다. 그래서 2개의 창을 열어놓고 볼 때에 특히 좋은데 와이드 화면이라면 더더욱 쓸만한 기능이라고 생각이 되네요.

타이틀바에 적용된 재미있는 기능이 하나 더 있는데, 위와 같이 복잡하게 창이 열려있는 경우에 하나의 창을 잡고(타이틀바를 클릭한 상태) 좌우로 2~3번 정도 흔들면 뒤에 있는 창들이 싹 정리가 됩니다.

이렇게 말이죠.

처음 이 기능을 보고서 “신기하다”라는 생각이 들었는데 실제로 쓸만할까라는 의문도 들었어요.

그런데, 윈도우7의 경우에는 이전 버전과 달리 작업표시줄이 아주 잘 정리되어 있기 때문에 아무리 많은 창이 있더라도 신경 쓰지 않고 작업할 수 있다는 점을 생각해 보면… 이 기능도 ‘알려지면’ 꽤 사랑 받을 것 같다는 생각이 드네요.(위의 두 가지 기능에 비하여 사용자가 스스로 이 기능을 터득할 것 같지는 않다는 생각이 들어요)

실제 동작하는 영상은 여기에서 보실 수 있어요. 꽤 뒷부분에 나온답니다.


윈도우7 팀은 창 관리 기능을 디자인 하기 위해서 아래와 같은 원칙들을 세웠다고 합니다.

• 최소한의 설정으로 동시에 두 창을 효율적으로 볼 수 있다.
• 최대 길이 및 읽기에 편안한 너비로 문서를 간단하게 본다.
• 데스크톱에서 창을 빠르고 쉽게 본다.
• 가장 흔한 작업에 가장 적은 노력이 든다. 창을 빠르게 최대화하거나 복구하는 데 최소한의 마우스 정확도가 요구된다.
• 고급 사용자들을 위하여 가능할 땐 언제나 마우스 움직임을 대체할 수 있는 키보드 단축키를 제공한다.
• 다양한 화면을 위한 유용하고 예측할 수 있고 효율적인 창 옵션을 제공한다 - 작은 랩톱에서부터 30인치 또는 그 이상의 화면들, 하나의 또는 여러 개의 모니터를 모두 고려한다.
• 마우스, 키보드, 트랙 패드, 펜, 또는 터치 스크린 같은 다른 입력 방법들을 쉽게 사용한다.
• 최대화되었어도 볼 수 있는 사용자 정의된 창 투명 효과 색상.
• 전반적으로 고객들이 제어하고 있다고 느끼고, 시스템이 작업을 빠르고 쉽게 마치게 해준다고 느낀다.

윈도우7 제품을 만들기 위해 적용한 디자인 프로세스도 꼭 보세요.

요즘 한창 이슈가 되고 있는 윈도우7을 뒤늦게(?) 깔아봤어요. (다운로드 링크는 여기서)

두 개의 이미지에서 발견할 수 있는 차이가 무엇일까요? 좌측과 우측 이미지의 해상도는 똑같은데, 아이콘, 글꼴, 브라우저 안의 화면 등 확대 비율이 다릅니다.

DPI 를 변경한 것인데요.  이런 기능을 OS와 웹브라우저에서 지원하고 사용자들이 저마다 다른 설정을 하게 되면 웹사이트와 소프트웨어 제작 방법도 지금과는 많이 달라질 것 같다는 생각이 듭니다. 비트맵 기반의 글꼴과 그래픽은 DPI 변경 시에 자연스럽게 표현하기 어렵기 때문이죠.

윈도우7의 경우에는 처음 설치하고 나면, Display 설정을 100%가 아닌 125%로 설정을 하도록 되어 있어요.

(화면은 윈도우7의 설정을 150%로 했을 때)

모니터에서 처리할 수 있는 픽셀 수가 늘어나더라도, 글꼴 크기나 그래픽 등의 크기는 고정되어 있어서 상대적으로 UI가 작아지는 것으로 느껴 졌었는데, 이와 같은 DPI 변경은 고정 비트맵 그래픽(또는 글꼴)의 단점을 보완하여 사용자에게 물리적 해상도와는 관계없이 큼직한 화면을 제공할 수 있어요.

이런 장점에도 불구하고 기존의 웹사이트와 소프트웨어들이 비트맵 기반에서 많이 제작되었기 때문에 어색한 모습이 많이 발견되네요. 앞으로도 계속 비트맵 기반으로 작업하게 된다면 다음과 같은 UX 문제점들을 발견하게 될 거에요.(각각의 이미지는 클릭해서 큰 화면으로 보세요.)
 

시작 버튼에 있는 검색창은 비트맵 글꼴이 적용되어 있는 한편 다른 폰트는 벡터(트루타입) 글꼴이 적용되어 있어서 매끄러워 보이지 않네요.

윈도7의 개발팀에서 직접 소개하는 윈도7 블로그가 최근에 한국어 버전으로 오픈했어요.