http://blog.whoborn.net 후본 블로그 Fri, 19 Jun 2015 07:54:19 +0000 ko-KR hourly 1 https://wordpress.org/?v=6.2 http://blog.whoborn.net/wp-content/uploads/sites/9/2015/04/blogfavicon.png http://blog.whoborn.net 32 32 http://blog.whoborn.net/go_straight/ beom Fri, 19 Jun 2015 07:48:03 +0000 Design Whoborn Lean UX 중국 특허 협업 http://43.201.136.35/blog-whoborn-net/?p=849 <p>이전에블로그를 통해서 기획과 디자인에 대한 나의 짧은 경험을 말했던 적이 있었다. 후본에 오면서 기획과 디자인이 통합되는 경험을 하게 되었는데, 오늘은 그 두서 없었던 과정을 두서 없이 공개하려고 한다. &#160; 현재 후본은 중국 사업을 준비하고 있는 중이다. (곧 그 아이템이 공개 될테지만, 이 글에서는 잠시 비밀에 붙여두기로 하였다. 그렇지만 이 글에 스포일링이 숨겨져 있으니, 자세히 들여다 보시라. ㅎㅎ) 거두 절미하고.. 그 작업을 하는 중에 기획, 디자인이 섞여서 통으로 작업이 진행되었다. 첫 번째 가장 큰 이유로... <p>이전에블로그를 통해서 <a href="http://blog.whoborn.net/2015/05/17/plan_n_design/">기획과 디자인</a>에 대한 나의 짧은 경험을 말했던 적이 있었다.<br /> 후본에 오면서 기획과 디자인이 통합되는 경험을 하게 되었는데, 오늘은 그 두서 없었던 과정을 두서 없이 공개하려고 한다.</p> <p>&nbsp;</p> <p>현재 후본은 중국 사업을 준비하고 있는 중이다.</p> <p><span style="color: #999999;"><em>(곧 그 아이템이 공개 될테지만, 이 글에서는 잠시 비밀에 붙여두기로 하였다.</em></span><br /> <span style="color: #999999;"> <em>그렇지만 이 글에 스포일링이 숨겨져 있으니, 자세히 들여다 보시라. ㅎㅎ)</em></span></p> <p>거두 절미하고.. 그 작업을 하는 중에 기획, 디자인이 섞여서 통으로 작업이 진행되었다.</p> <p>첫 번째 가장 큰 이유로 사업의 시급성으로 인해 2주 안에 개발까지 해야 한다는 매우 어려운 미션이 있었기 때문이고, 두 번째 이유는 <a href="http://story.pxd.co.kr/878">Lean UX 방식</a>을 차용하여 불필요한 문서를 없애고 화면의 구성을 바로 확인 할 수 있어야 하기 때문이었다.</p> <p>&nbsp;</p> <p><strong>1. 사업 이해하기</strong></p> <p>기획과 디자인을 맡은 나로썬 가장 중요한 시작점이다.<br /> 이 사업의 방향성, 특징, 사용자의 패턴 등을 리서치할 시간이 충분히 없기 때문에 <a href="http://blog.whoborn.net/2015/06/14/중국-특허소송-승소까지에-앞서/">중국 특허의 유경험자 후본의 배영식대표님의 사례</a>를 기반으로 사업이해와 기획이 시작되었다.<br /> 워낙 잘 모르는 사업 분야이기 때문에 이것들이 가지는 성질에 대해서 충분히 설명을 듣고 머릿속에 있는 물음표 가지들을 최대한 빨리 수집해서 질문해야한다. 말하자면 대표님을 심층 인터뷰하는 방식일 수 있겠다. -_-a</p> <p><a href="http://blog.whoborn.net/wp-content/uploads/2015/06/confused.png"><img decoding="async" loading="lazy" class="alignnone wp-image-851 size-large" src="http://blog.whoborn.net/wp-content/uploads/2015/06/confused-1024x768.png" alt="confused" width="960" height="720" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/confused-1024x768.png 1024w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/confused-300x225.png 300w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/confused-75x55.png 75w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/confused-400x300.png 400w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/confused.png 1200w" sizes="(max-width: 960px) 100vw, 960px" /></a></p> <p>&nbsp;</p> <p>&nbsp;</p> <p><strong>2. 러프한 화면 구성</strong></p> <p>일단 최대한 빨리 화면을 구성해야만 했다.</p> <p><span style="color: #999999;"><em>(그래, 나에게는 목업 툴이 있지. ㅎㅎ<br /> </em><em>재빠른 목업은 발사믹으로 작업했습니다. 발사믹에 대한 경험기는 추후에&#8230;)</em></span></p> <p>소요 된 시간은 약 하루하고 반나절.</p> <p><a href="http://43.201.136.35/blog-whoborn-net/wp-content/uploads/sites/9/2015/06/bilokeuin1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-853 size-large" src="http://blog.whoborn.net/wp-content/uploads/2015/06/특허청구_비로그인1-1024x622.png" alt="특허청구_비로그인" width="960" height="583" /></a></p> <p>&nbsp;</p> <p><strong>&#8220;대표님! 봐주세요!!&#8221;</strong></p> <p>&nbsp;</p> <p>대표님 왈.</p> <blockquote class="center"><span style="color: #800080;"><strong>"구성은 괜찮은데요.</strong></span> <span style="color: #800080;"><strong> 구글처럼 심플했으면 좋겠어요."</strong></span></blockquote> <p>&nbsp;</p> <p><span style="color: #999999;"><em>(응? 무슨 말씀이시지..?)</em></span></p> <p>순간 모른다고 하면, 대표님이 잡스처럼 <span style="color: #ff0000;">&#8220;You Fire!&#8221;</span>라고 할지도 모른다는 웃기는 상상을 하며..<br /> 나의 핵존심을 최대한 빨리 접기로 했다.</p> <p>그리고 바로 처음 기획한 것을 기반으로 GUI와 통으로 작업 하기로 했다. +_+</p> <p>&nbsp;</p> <p><strong>3. 디자인하면서 기획하고 가이드하기.</strong></p> <p>여기서부터가 진짜다.<br /> 후하&#8230; 읽기 전에 호흡부터 가다듬길 권장한다.</p> <p>&nbsp;</p> <p>우선 디자인 컨셉에 해당하는 메인화면에 주력하기로 하였다.<br /> 상단에는 주요 서비스와 기능들을 집중시키고, 상단과 풋터 사이에 들어가는 서비스 소개에 해당하는 내용은 스킵하기로 한다.</p> <p><em><span style="color: #999999;">(머리 속에는 구글처럼이 가득하다.)</span></em></p> <p>메인 화면에 대한 사람들의 1차 피드백을 받고 그 자리에서 고쳐서 보여주어야 한다.</p> <p><span style="color: #999999;"><em>(지져분한 포토샵 레이어는&#8230; 일단 알아보기만 하면 된다&#8230; 하아..)</em></span></p> <p>결정권자인 대표님을 비롯해 개발자, 그리고 서비스에 대한 톤을 함께 정할 수 있는 팀원들이 함께하는 자리를 마련해야 한다. 절대적으로 내가 혼자 디자인할 수 없다는 사실을 빨리 인정하고 수정할 부분을 피드백 받는다.</p> <p>이 작업에서 강점은<br /> Wireframe으로 구성된 디자인 보다 완제품에 가깝게 보여주어 버튼 효과나 화면의 이동을 보다 쉽게 상상할 수 있다는 점이다. 단, 앞서 첫번째에서 말했듯이 사업에 대한 방향성을 잘 이해하고 있어야 하며, 자신이 올바로 가고 있는지에 대한 피드백도 최대한 자주 받아야 한다.</p> <p><strong><span style="color: #008000;">디자인 1차 작업  &#8211;  피드백  &#8211;  디자인 2차 작업  &#8211;  피드백 &#8230; </span></strong>(완료 될 때 까지 무한 반복)</p> <p>여기에서 사이사이 해야 할 일이 있는데, 그것이 바로 개발자 세팅에 관한 정보 전달이다.<br /> 디자인과 기획이 함께 진행되는 관계로 정확한 DB설정에 대한 내용은 못주더라도,<br /> 이미지 레이아웃을 전달하면 우리의 멋쟁이 개발자들이 기본 레이아웃 작업을 진행할 수 있기 때문이다.</p> <p>디자인 가이드는 언제 어떻게 전달해야 할지에 대한 이슈가 있다.<br /> 가이드도 최대한 약식으로 주는 방향으로 해야한다. 이럴 경우 개발자와 디자이너의 이전에 했던 협업 방식이 중요하다.<br /> 약식 가이드에 대한 방식에 충분한 이해와 약속이 있을 경우에 쉽게 가능하다.</p> <p><span style="color: #999999;"><em>(디자인 작업물을 보여주고 싶지만&#8230; 엄청 큰 스포일링이기 때문에 추후에 올려주기로 한다. ㅎㅎ)</em></span></p> <p>&nbsp;</p> <p><strong>4. 가이드에 추가 QA 응하기와 브라우저 테스트</strong></p> <p>여기서부터는 내 역할이 확연히 줄어든다.<br /> 옆에서 방해인지 응원인지 모를 화이팅을 외쳐주거나, 조용히 다른 일 하면서 개발자들의 질문에 최대한 답변해 줄 준비를 하고 있어야 한다.<br /> 그리고 중간중간 멀티 디바이스 대응에 빠진 부분에 대한 내용을 개발자들에게 공유하는 체크리스트를 전달하기도 한다.</p> <p><a href="http://blog.whoborn.net/wp-content/uploads/2015/06/hooha.png"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-858" src="http://blog.whoborn.net/wp-content/uploads/2015/06/hooha-1024x768.png" alt="hooha" width="960" height="720" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/hooha-1024x768.png 1024w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/hooha-300x225.png 300w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/06/hooha.png 1200w" sizes="(max-width: 960px) 100vw, 960px" /></a></p> <p>이후&#8230;<br /> 버그찾기와 서비스가 잘 돌아가는지 확인해야 하나&#8230;<br /> 아직 개발 단계이기 때문에 잠시 숨한번 돌리는 마음으로 이 글을 마친다. 후하.</p>The post <a href="http://blog.whoborn.net/go_straight/">통으로 UX, UI, GUI 기획 경험기 (Lean UX 개발)</a> first appeared on <a href="http://blog.whoborn.net">Whoborn Blog</a>.