Ux Design + Mobile App

SmamshingMagazine에 글을 쓴 바 있는 Jeff Gothelf 님께서 TheLadders.com이라고 하는 구인구직사이트를 운영하는 회사에서 Agile+ LeanUX를 적용한 사례를 적은 글을 발견하였습니다. 전통적인 방식으로 사용자경험을 설계하는 회사에서 어떻게 Agile+ LeanUX를 적용시키는 것이 좋을 지에 대해 많은 답을 줄 수 있을 것 같습니다. 
-->( http://johnnyholland.org/2010/10/21/beyond-staggered-sprints-how-theladders-com-integrated-ux-into-agile/ )

원래 이 회사의 UX팀은 전통적인 워터폴방식(직역하면 폭포방식이라고 할수있을까요? 위에서 승인해주면 그다음 단계를 진행하는 전형적인 업무 방식, 피드백을 받는 것이 느리고 적용과 수정에도 시간이 걸리는 방식) 을 취하고 있었다고 합니다. 즉 서비스 기획을 하고 승인을 받은 후 디자이너가 디자인을 다하고 승인을 받고 개발자에게 넘기고 코딩을 하여 서비스를 완성하는 방식을 취하고 있었던 거지요. 

Jeff Gothelf님은 기존의 방식에 익숙한 UX팀에 Agile + LeanUx를 적용시키기 위해 했던 시도들을 총4단계로 나누어 설명해 주시면서,그 속에서의 실패와 성공에 관해서 글에 자세히 적어주셨습니다.  그 4가지 단계중에 눈에 뛰는게 3번째 시도에 나오는 '사용자 테스트'인데요. 좀더 자주, 형식화되지 않은 방식으로 테스트를 하기위해 다음과 같은 규칙들을 세우게 되었다고 합니다. 

• 사용자테스트는 한번에 3명 미만으로
• 같은 날 같은 시간에 매주 테스트
• 테스트시 그것이 단순한 스케치라고 할지라도 준비된 모든 것을 보여준다.
• 인터랙션에 있어서 장애물을 제거하는데 테스트를 이용한다.
• 2주후 남은 시간을 디자인 및 만든 서비스를 유저들과 제확인하는 데 사용할 것.
   

이러한 규칙들을 토대로 좀더 정형화되지 않고 자주 테스트를 수행하여 반영한다는 것은 실제 제작하는데 있어서도 적용해 볼만한 것이라고 생각합니다. 그리고 디자인 리뷰에 관한 글도 관심이 가서 보게 되었는데요.

"한번의 턴(만들어서 팀에서 회고를 하기까지를 하나의 턴으로 보고) 에 두번의 디자인 리뷰를 진행하였습니다. 하나는 중반에 마지막은 완성이틀전에 하게 됩니다. 디자인은 95점정도가 되어야 되고 그렇지 않다면 UX팀은 다시한번 2주동안 수정을 하기위해 달리게 되는 것이지요. 그리고 이러한 과정에, 디자이너가 필요로한다면, 특별한리뷰를  한번더 진행되게 됩니다. 디자인 리뷰에 있어서 참석이 매우 중요하므로, 시간과 요일을 똑같이 맞추어 진행하였습니다. 그리고 리뷰에 참석하지 않는다면 그 디자인을 인정한다는 의미로 해석하겠다고 하였는데, 결과적으로 출석률은 매우 좋았습니다. "

결론부분에서 Jeff Gothelf님은 이렇게 말하였습니다. "첫번째 스텝은 커뮤니케이션이지만, 최종적인 목표는 서로를 신뢰하는 것이다." 서로에 대한 신뢰없이는 Agile + Ux디자인도 쉽지많은 않다는 것이지요. 팀작업을 베이스로 하는 Agile의 특성을 잘 반영하고 있는 말이라고 생각합니다.

 Jeff Gothelf님의 글을 보면서 Agile+LeanUX를 기존의 팀에 적용시키는 데 있어서 나타나는 문제점들과 해결방안에 대해 생각할있는 기회를 갖게 되어 많은 도움이 되었다고 생각합니다. 이 분이 관련 책도 낼 예정이라고 하시는 데 기대가 되어지네요. 

전체과정을 종이로 한번 만들어서 시뮬레이션을 해 보는 '페이퍼 프로토타이핑'을 해 봅시다. 대충 다 아는데 왜 굳이 그렇게 해야하냐구요? 하다보면 문제점들을 발견하게되고, 그러한 문제를 해결해 줌으로써 나중에 다시 수정을 하는 시간을 줄여줄 수 있으며, 프로젝트의 방향과 사용자의 경험에 대해서도 팀 전체가 생각해 볼 시간을 가질 수 있게되기때문이죠. 게다가 코드를 작성하지 않아도, 디자이너들이 색을 고르고, 그래픽스타일을 정하지않아도 됩니다. 모두가 알아볼 수 있는 글씨로, 실제 나올 비율과 어느 정도 비슷한 수준으로 만들면 충분하기 때문에 제작에 드는 시간도 그렇게 많지 않습니다. 

물론, 이러한 페이퍼프로토타이핑은 팀원모두가 프로젝트를 함께 이끌어나간다는 인식이 있을 때 힘을 발휘할 수 있다고 생각합니다. 예를 들어, 프로그래머는 UX설계에 대해 귀찮아하며, 기획자는 다른이들의 간섭을 싫어하고, 디자이너는 그래픽 디자인 작업이외에 해야할 일들이 늘어만 가는 것 같아 불만을 표시한다면 이러한 페이퍼 프로토타이핑도 결국엔 시간낭비가 되고 말겠지요.
 

얼마전 세미나에 가보니 요즘은 프로젝트를 할 때에도 기획자, 디자이너, 프로그래머가 기획단계에서부터 한 팀으로 움직이고 있으며, 이러한 과정들이 서로가 서로를 이해하고 좀 더 효율적인 제안을 하는데 도움이 되었다고 들었던 기억이 납니다. UX는 '백지장도 맞들면 낮다'는 옛날 속담이 적용되는 분야라고 생각합니다. 많은 이들의 피드백을 받고 보다 좋은 UX를 설계함에 있어서, 낮은 수준의 그래픽(러프한 스케치)으로 팀원모두가 초기에 참여가능한 시뮬레이션을 가능하게 해, 높은 효율의 결론도출을  이끄는 방법이 바로 '페이퍼 프로토타이핑' 이며 UX설계 과정에 있어 빠져서는 않될 중요한 과정이라고 생각합니다.
 

에스노그라피에 관한 인터넷 검색을 하는 중에 에스노그라피에 관한 설명이 들어있는 좋은 신문기사를 발견하였습니다. 사용자조사에 관한 공부를 하다보면 나오는 단어가 바로 이 '에스노그라피'입니다만, 좀 포괄적인 학문이라 그런지 어떻게 조사하는 것인지 잘 다가오지가 않습니다. 링크된 기사는 2008년 7월26일 조선일보에 게재된 글로서, 사용자조사에 대한 당시의 흐름을 알 수 있으며, 기사에 사용된 여러가지 단어들을 일반인들이 이해할 수 있도록 쉽게 풀어 놓아 UX를 공부하는 사람들에게도 개념을 이해하는데에 도움이 된다고 생각합니다. 
--> [ http://news.chosun.com/site/data/html_dir/2008/07/25/2008072500886.html ] 

                        사진은 (http://mktg343.pbworks.com/w/page/9973641/Ethnography%20-
                        %20Methods%20and%20Examples ) ethonnography관련해 실린 사진입니다.  

 기사중 주목해볼 점은 에스노그라피(Ethnography)란 단어입니다. 사실 이 단어는 좀 어려운 단어로 원래 뜻은 '민속학' 이란 뜻으로 영영사전을 직역하면 인간 문화에 대한 과학적 서술을 다루는 인류학'이라고 되어있습니다. 바로 확, 다가오지 않으시지요? 결국 사용자의 문화, 습관 등에 대해서 조사하는 것입니다.  예를 들면, 일본분들은 식사를 하실 때 밥그릇을 들고 먹으시지요. 그런 일본인에 대한 에스노그라피조사 없이 무겁고 아름답기만한 제품을 만든다면 팔리기 힘들겠지요. 사용자 설계를 함에 있어서도 이런 에스노그라피조사를 통해 문화적 , 관습적 행동에 대한 이해를 기초로 하는 것이 필요하다는 것입니다. 

기사중에는 기존에 특정시간에 사용자를 모아 인터뷰하는 방식보다 더욱 사용자에 밀착적인 (예를들면, 카메라를 달아 관찰한다든지, 사용자와 동행하며 조사한다든지 하는) 조사를 인류학자들이 특정집단을 조사하기위해 직접 관찰하던 방식과 비슷하다고 하여 '에스노그라피'라고 부른다고 쉽게 설명해 주고 있습니다. 2008년에 이 정도라면, 지금의 대기업은 이보다 더 발전된 기기를 이용하여 에스노그라피 조사를 하고 있지 않을까 하는 생각도 듭니다. 

이 기사이외에도 에스노그라피를 이해하는 데 도움이 되는 사이트가 있습니다. [ http://uxfactory.com/429 ]인데요. 이 곳에는 유엑스 관련 사이트 및 페이스북 UX그룹을 운영하시는 황리건님께서 작성해주신 글이 많이 실려있는 곳이지요. 이 페이지에는, 미국과 일본의 전쟁중에 미국이 일본문화에 대한 이해를 위해 루스 베네딕트라는 인류학자에게 일본에 대한 보고서를 쓰게 했다는 에스노그라피의 오래된 사례또한 알려주시고 있습니다. 

사용자를 즐겁고 행복하게 하기위해 하는 UX에서 사용자 조사는 매우 중요한 것이라고 생각이 되며, 경우에 따라서 에쓰노그라피 조사 또한 매우 중요하다고 생각이 되어집니다.   

제 블로그를 통해서 여러번 언급되었던 페르소나에 대해서 좀 더 알아보도록 하겠습니다. 다시 한번 그 정의에 대해서 짚고 가면서 시작해보겠습니다. 페르소나라는 것은 타겟 고객, 즉 사용자를 정의한 가상의 인물 또는 문서를 애기합니다. 이런 예는 어떨까 합니다. '무릎팍 도사'에서 강호동은 그만의 캐릭터를 만들어 쇼에서 표출합니다. 큰소리 탕탕치면서 말도 않되는 해결책을 제시해주는 무릎팍 도사라는 캐릭터말입니다. 이 캐릭터는 티비시청자들을 위해서 만든 캐릭터입니다. 이런식으로 만든 캐가공의 릭터가 바로 페르소나이지요. 다만 차이점은 무릎팍도사라는 캐릭터는 시청자에게 재미를 주기위한 현실에 없을 것같은 캐릭터이고 페르소나는 대표적인 시청자들을 캐릭터로 정의하여 분류한 것입니다. 

UX디자인 과정에서 페르소나를 정하는, 그리고 이것이 중요한 이유는  UX design, 즉 사용자 경험 디자인의 대상은 사용자이기 때문입니다. 사용자를 만족시키기 위해, 행복을 주기 위해 디자인하는 것이 UX디자인인 것인데 이러한 사용자에 대한 정의없이, 개별적으로 제기된 문제에 대해 제작자가 이러면 좋을 것 같다 저러면 좋을 것 같다고 하면서 문제해결이 사용자가 아닌 제작자의 시각에서 이루어지는 것을 막을 수 있기 때문이다. "이건 이러면 좋지 않아?"보다는 "24세살의 강남에 살며, 자동차를 몰고다니고 아이티 기기에 관심이 많은 대학생 김모세는 ~한 방식을 선호할 것이다." 라고 보다 정확하게 사용자의 시점으로 판단할 수 있기 때문입니다.  

                        (사진은 http://www.bolducpress.com/design/user-personas-and-how-they-can-im
                         prove-your-site/  에서 소개한 Persona의 예입니다.)

이러한 페르소나는 보다 자세할 수록 좋습니다. 그런데 이러한 페르소나가 크게는 두가지로 나뉩니다. 하나는 마케팅에 있어서 사용되는 페르소나로 구매동기를 가진 가상캐릭터이고, 두번째는 인터랙션 디자인에 있어서 인터랙션을 정의하기 위한 가상 캐릭터입니다. 둘다 중요한 것이며, UX디자인에서 다루는 것은 주로 후자쪽입니다.

실무에서 사용되는 예를 생각해보면 다음과 같습니다. 기획단계를 거쳐서 여러가지 문제를 해결하고 문제에 봉착했을 때, 흔들리지 않는 중심을 잡아줍니다. 나라면 이것을 이렇게 할 것이다가 아니고, 우리의 페르소나 브라이언은 이런 방식을 불편해할 것이다. 혹은 우리의 페르소나 셀리는 귀엽고 아기자기한 디자인을 좋아할 것이다,라는 식으로 사용자에 대해 좀더 몰입하여 문제해결을 할 수 있다는 것이지요. 

또한 페르소나를 제대로 정의하지 않고 가면, 페르소나를 한두개 정의했다고 해도, 디자인을 해가면, 혹은 개발을 해가면서, 우리의 대상은 우리가 정했던 페르소나가 아닌것 같다. 라는 결론에 다다르고 다시 처음부터 시작하던지, 기존의 개발자 시선의 문제해결로 문제를 풀어가게 되는 것입니다.

네, 페르소나는 매우 중요한 것이군요. 프로젝트를 이끄는 모든이들이 이의 중요성을 알고 사용자 중심으로 문제를 해결하여 좋은 하드웨어를 , 소프트웨어를, 서비스를 만들 수 있었으면 합니다.   

오늘 열린 대종상 영화제를 티비를 통해서 보았습니다. UX를 공부하고 있어서 그런지, UX의 관점에서 다시 한번 영화제를 되짚어 보고자 합니다.

대종상영화제는 대한민국 최고의 권위와 역사를 가진 영화제입니다.  이 영화제는 누구를 위해 만든 무엇을 하기위한 영화제 일까요? 우선, 영화를 만든 영화인들의 그동안의 노력과 예술성에 대해 상을 주는 것일 거구요. 티비로 보아도 앞좌석에 많은 자리를 차지하고 앉아계시는 스타들의 모습을 보니 틀림없는 사실이군요. 그렇다면 관객은 어떻게 되나요? 이 영화제에는 관객이 대종상영화제를 기획하는데 있어서 고려대상에 들어가 있는 걸까요?

다시 UX의 개념으로 말하자면, 대종상 영화제에는 관객을 페르소나(페르소나 관련해서는 제가 페르소나에 관해 포스팅한 글을 보시면 더욱 알기 쉬우실 것 입니다.) 의 일부로 설정한 걸 까요? 물론 그렇기는 하겠죠. 다만,  제1페르소나와 제2페르소나 혹은 그 아래의 페르소나 중 관객은 어느정도에 위치해 있을까요? 관객이 이 영화제에 있어 우선적으로 만족시킬 제1페르소나로설정 된 것일까요? 아니면 그 시상식에 참여한 영화인들이 제1페르소나가 되어 있는 것일까요?

누구를 우선으로 할 것인지는 차치하고 제가 영화제를 본 바로는 기획하시는 분이 영화인들을 제1페르소나로 잡지는 않았다고 생각 합니다. 영화제를 보고자 하는 관객을 위한 시상식이라면 좀더 관객이 즐길 수 있고 , 영화제에 대한 일관적인 내용을 알려야 하는게 맞겠지요. 첫 화면부터 '최종병기 활'을 연상시키려고 했는지 영화시상식에 갑자기 뮤지컬비슷한 춤을 추는 장면을 공연하고, 이 후에 '소녀시대' 가 무대에 나왔습니다. 누구를 또 무엇을 위한 최종병기 활 무대 재현인가요? 소녀시대가 나오는 것은 (물론 개인적으로야 환영할 만한 일이지만) 또 무슨 연유일까요? 

계속이어지는 구성은 아주 단순 합니다. 시상자 발표 + 엠씨의 농담 + 연예인 공연(무대의 쉬크한 반응) 이죠. '단순 시상식 + 뮤직뱅크'와 크게 다를바가 없네요. 엠시뒤에 세워진 병풍같은 배경과 조금 부족해 보이는 조명등은 이 시상식이 그렇게 화려하고 대단한 영화제라는 인상을 주기에도 조금 부족하지 않나하는 생각이 들었습니다. 레드카펫에 오기까지는 얼마나 화려햇는지 모르겠습니다만 말입니다. 

이번 대종상 시상식은 관객이나 방송 시청자들을 제1페르소나, 즉 가장 중요한 대상으로 고려한 것이 아니라는 생각이 들었습니다. 관객을 초대하고 관련 방송을 내보내고 언론에 알리는 시상식이라면, 관객을 (UX관점에서의 사용자) 먼저 생각하고, 관객이 영화와 관련하여 즐길수 있는 구성이 되었으면 더욱 좋지 않았을까 하고 생각해봅니다.  
 

다음,네이버,네이트,파란은 국내 4대 포털서비스입니다. 이런 큰 기업에서 많은 인력과 시간을 가지고 진행하는 UX설계과정과 소규모 벤처회사에서 진행하는 과정은 달라질 수 밖에 없습니다. 하지만, 인력이 적고 시간이 없다고 해서 중요한 과정들을 무시하고 나간다면 그 만큼 퀄리티도 떨어지게 됩니다.

그래서 생각해 보았습니다.소규모 회사에서 적용하는 UX 디자인의 적용 과정과 순서입니다.
1.  6하원칙에 따른 타겟 유저 분석
    누가,언제, 무엇을 어떻게,왜, 어디서를 정의합니다.

2.  페르소나 설정 --> 시나리오 작성
    타겟 유저분석에 따른 페르소나를 설정해봅니다. 되도록 현실적으로 페르소나를 실제 인물로 가정하고 진행을 해봅니다.
    또한 그렇게 설정된 페르소나를 바탕으로 시나리오를 작성해보도록 합니다.

3. 경쟁사 벤치마킹, 자사 강약점 분석, 디바이스 환경분석, 러프스케치
    -->이 때 러프스케치에는 되도록 많은 사람들이 참여하며, 
           제대로 만들려고 하기보다는 러프하게 만들고 피드백 만드는 과정을 반복하여 보강해나간다.

4. 분석결과  리포트, 키워드 도출, 브레인스토밍,  플로우 스케치

5. 프로토 타입 작성 (발사믹 이용 혹은 종이프로토 타입도 괜찬음)

6. 주요화면 설계, 기능정의서, 가이드 작성 

이상에 제가 생각한 소규모 벤처회사의 UX디자인 적용과정입니다. 가장 큰 문제는 저런 상황을 적용하면서 사용자 분석데이터를 가지지 못한다는 문제입니다. 백데이터 없이 진행하는 과정으로서 생기는 여러 문제가 있겠지만, 믿을만한 사용자 분석을 할만한 예산이 않된다면 적어도 저런 방식으로라도 나가야 한다는 것이 제 생각입니다. 

아직도 대부분의 작은 회사에선 대충 기획하고 디자이너에게 보기좋게 디자인해달라고 한다음 되도록 빨리  개발자에게 전달하게 하여, 우선은 기본적인 기능을 사용할 수 있고 보기 좋지 않으면 괜찮다는 방식을 취하고 있습니다. 적어도 위와 같은 과정만이라도 소규모 인원끼리는 적용이 가능하므로 꼭 적용해 나갔으면 합니다. 

풀브라우징이란 단어가 종종 거론되고 있다. 쉽게 말하자면 어느기기, 어떤 화면에서도  브라우징을 할 수 있게 한다는 것이다.
물론 요즈음 지하철에서도 쉽게 볼수 있는 아이패드나, 갤럭시 탭부터 안드로이드 및 아이폰등의 스마트폰 게다가 점점 그 크기를 키워나가고 있는 개인용 컴퓨터의 모니터들에 다 맞춰서 디자인을 하고 UX를 구성해 나간다는 것은 여간 쉽지가 않은 일이다.

시각 디자인을 전공하고 일을 해나가며 UX를 공부하면서 현업에 적용해나가려는 디자이너로서 풀브라우징은 큰 짐이 아닐 수 없다. 하지만 그 실천 방향에 대해서 모색해 보면 다음과 같다. 

첫째, 기존 디자인 작업에서도 적용해왔던 그리드에 대해서 좀더 계산하고 테스트해나갈 필요성이 있다. 예를 들어 그리드를 잡을 때 간격이 홀수라면 화면이 커지거나 확대되었을 때 문제가 발생하게 되므로 되도록 짝수여야 할 필요가 있다. 
http://mediaqueri.es/ 이 사이트에 가보면 풀브라우징을 고려한 사이트들의 좋을 예들을 많이 볼 수 있다

둘째, 마우스로 클릭하는 사용자만이 아니라 화면을 터치하는 사용자들이 있으므로 버튼등의 GUI디자인에 있어서도 신경을 써야 할 것이다. 캐나다의 벨사의 사이트( http://www.bell.ca/home/ )에 가보면 마치 아이패드용 웹사이트를 연상시키게 하는데 아이패드 및 피시사용자를 함꼐 고려한 경우일 것이다.

셋째, 디자인 소스사용에 있어서 포토샵등의 픽셀베이스의 툴보다는 벡터베이스의 툴을 사용하는 것이 좋다는 것이다. 작업물의 크기에 구에 받지않을 수 있기 때문이다. 예를 들면 최근에 겪었던 예를 들면, 아이폰4 같은경우 화면은 3.5인치에 불과하지만 이 휴대폰이 레티나디스플레이라고 하는것을 지원하므로 640x960씩이나 되는 해상도를 갖는다. 게다가 작업자들은 아이폰3를 고려하여 320x480해상도의 소스도 동시에 가지고 있어야 하는 경우가 생긴다. 
 

일관성있는 디자인과 사용자 경험을 위해서 풀브라우징을 위한 디자인도 중요하고, 각 기기의 특성을 살린 디자인도 중요하므로 기획단계에서부터 고려해야 될 사항들이 많이 늘게 된 것이다.
 

회사에 입사하여 디자인을 하다 기획단계에 참가하고
사용자의 UX에 관하여 생각하며 공부해 나가다 만나게 된 단어는
페르소나(Persona)입니다.

( http://www.adaptivepath.com/ideas/a-little-thing-about-personas )

아! 여기 페르소나에 관하여 잘 정리 해주신 프레젠테이션 파일이 있습니다.
http://www.slideshare.net/perficientinc/using-personas

이곳에도 자세히 잘 설명해 주신 자료가 있네요.
http://www.masternewmedia.org/how-to-use-personas-in-user-experience-design-and-development-research/

페르소나란 그리스어로 마스크를 뜻합니다.
뭔가 어려운 단어같지만 결국 쉽게 풀어쓰면
사용자 데이터들을 바탕으로 디자이너와 개발자들이 모두 일관성있게 작업할 수 
있도록 가상의 사용자 캐릭터들을 정하는 데 이것을 페르소나라고 부릅니다.
물론, 이 때의 가상인물 즉,페르소나는 회사에서 진행하는 프로젝트의 대상이 되었으면
하는 또는 대상이 될만한 인물 또는 캐릭터들이지요.

프로젝트를 진행하며 이러한 페르소나를 좀 더 리얼하게
인식하게 하기위해서 페르소나의 그림, 사진등을 놓고 진행하거나
작업중에 페르소나에 붙인 이름을 언급하는 등의 노력을 하는 회사도 있다고 합니다. 

작은 기업의 경우, 특히 UX에 관하여 인적, 물적자원을 소비할만한 여유가 없는
회사의 경우 페르소나를 정하는 과정을 지나치기 쉽상입니다.
하지만, 일관성있고 사용자가 만족할 수 있는 디자인을 하는데에는 
매우 중요한 부분이라고 생각합니다. 

제가 가보았던 유엑스 관련 세미나들에서 여러차례 회자되었던
Hipmunk 사이트입니다.

http://itunes.apple.com/kr/app/id419950680 (아이폰 앱 다운로드) 
Http://www.hipmunk.com

저렴한 가격순으로 항공사들의 마크를 보여주며 선택하게 하는 타 항공사 사이트들과는 
차별화된 화면구성을 가지고 있습니다.

처음에는 기존의 것과 달라서 보기가 조금 힘들수도 있으시겠지만 적응하시면 이만큼 편한것도
없을 것이라고 생각합니다. 
몇시부터 몇시까지라고 문자로 써진 대다수의 항공예약사이트가 사용하고 있는 디자인보다
그래프로 되어 있어 직관적으로 알 수 있는 hipmunk 의 인터페이스가  
소비자가 빠르게 원하는 것을 선택하는데 있어 훨씬 도움이 된다고 생각합니다.

아이폰이 있으시다면 지금 바로 다운받아 실행 해 보세요~
(물론 웹에서도 해보실 수 있습니다)