슬로워크의 웹 개발실에서는 웹과 관련한 다양한 서비스를 제공하고 있습니다. 많은 프로젝트를 수행하고 있기 때문에 효율적으로 업무를 관리하고 협업하는 것이 업무에 있어서 가장 중요한 요소이자 끊임없이 해결해 나가야 하는 숙제이기도 합니다. 

 효율적인 업무 관리와 협업을 통해 좀 더 나은 서비스를 제공하기 위해 웹 개발실에서는 다양한 서비스를 이용하고 있습니다. 이번 블로그에서는 저희가 사용하는 서비스를 소개해드리고자 합니다. 







프로젝트 관리



1. Moxtra(www.moxtra.com)


 Moxtra는 팀 내 의사소통과 협업을 도와주는 메신저 및 업무 관리 서비스입니다. 



이미지 출처 www.moxtra.com



 기본적으로 팀원 간 의사소통을 위해 Slack을 쓰고 있지만, 프로젝트 단위의 할 일을 관리하는 데에는 부족함이 있었습니다. Podio라는 업무 관리 서비스도 사용해보았지만, 상대적으로 복잡한 UI로 인해 많은 사람이 이른 시일 안에 익히는 데에 어려움이 있었습니다. 


 이에 반해 Moxtra는 간단하고 효과적으로 프로젝트를 관리할 수 있습니다. 프로젝트 단위의 '바인더'를 만들어 그 안에서 'to-do'리스트를 만들고 각각의 할 일을 개별적으로 관리할 수 있습니다. 또 누구든지 상대방에게 할 일을 할당할 수 있어서 슬로워크의 수평적인 업무 구조와도 잘 맞아떨어집니다. 





 또 자신의 컴퓨터 화면까지 공유가 가능한 '화상 회의' 기능이 있어 원격 근무자가 있어도 회의를 원활하게 진행할 수 있고, '화이트보드'기능이 있어서 음성이나 자신의 메모를 전달할 수 있어, 의견을 더욱 효과적으로 공유할 수 있습니다. 






2. Trello(trello.com)


 Trello는 이슈를 관리하는 데 있어 효과적인 서비스입니다. '목록'과 '카드'를 기본 인터페이스로 하여 카드를 목록으로 옮기며 이슈의 흐름을 확인할 수 있는 것이 가장 큰 장점입니다. 포스트잇을 붙였다 떼는 것처럼 손쉽게 카드를 관리할 수 있습니다.  





 단순하게 할 일을 점검하는 경우에서보다는, 프로젝트상의 문제나 팀 내 프로세스상의 문제를 정리하고 해결할 때 많이 사용합니다. Trello 역시 다른 사람을 카드에 할당할 수 있고, 카드 개별적으로 체크리스트를 만들거나 댓글을 달 수도 있습니다. Moxtra에 밀려 사용 빈도가 예전보다는 많이 줄었지만, 그래도 개인적으로는 애착을 가지고 있는 서비스입니다.






3. Workflowy(workflowy.com)


 팀 내 공유 목적이 아닌, 개인적으로 프로젝트를 관리하는데 구성원들의 가장 많은 지지를 받은 리스트 관리 서비스입니다. 여러 단계에 걸쳐 항목을 계층적으로 만들 수 있습니다. 



이미지 출처 workflowy.com



 Moxtra가 웹이나 모바일에서 상대적으로 무겁지만, Workflowy는 텍스트를 기반으로 하여 가볍게 할 일을 정리할 수 있습니다. 물론 다른 사람과 할 일을 공유하거나 함께 관리할 수도 있습니다. 또한 '#' 또는 '@' 태그를 붙이거나 노트를 첨부하여 할 일을 손쉽게 모아보거나 효율적으로 관리할 수도 있습니다. 



이미지 출처 workflowy.com







4. Todoist(todoist.com)


 심플한 Workflowy 대신 좀 더 다양한 기능을 지원하는 Todoist를 사용하기도 합니다. 저는 두 가지를 서비스를 다 사용하고 있는데 상대적으로 Todoist가 날짜, 댓글, 알림, 능률 그래프 등을 지원하기 때문에 할 일을 완료하는 재미가 있습니다.  







 단순해 보일 수도 있는 이러한 일정관리 서비스는, 여러 프로젝트를 한 번에 수행하다 보면 겪게 되는 뇌의 혼란(?)을 막아주고 우선순위를 설정하여 빠르고 효율적으로 업무를 수행할 수 있도록 도와줍니다. 






협업



1. Power Mockup(www.powermockup.com)





 주로 프로젝트의 기획 단계에서 사용하는 와이어프레임 서비스입니다. 파워포인트 내에 설치되기 때문에 PPT 형태로 손쉽게 문서를 작성할 수 있습니다. 다양한 종류의 웹사이트를 기획하다 보면 겹치는 요소가 많습니다. 이것들을 일일이 만들 필요 없이 'shapes'에서 끌어다 쓰면 편리합니다. 온라인에서 무료 이미지나 요소들을 자유롭게 내려받아 쓸 수 있는 것도 장점입니다. 또한 다른 와이어프레임 서비스들보다 설명을 첨부하여 상세한 문서를 만들기 쉽습니다.






2. Bitbucket(bitbucket.org) with Slack

 


이미지 출처 bitbucket.org



 프로젝트의 코드관리를 위해 얼마 전까지 'Yobi'라는 서비스를 이용했는데 프로젝트가 종료되어 안타까운 마음이 컸습니다. 새로 Bitbucket을 사용하게 되었고 효율성을 높이기 위해 Slack과의 연결하여 사용하고 있습니다.   





  Bitbucket은 비공개 저장소를 무제한으로 만들 수 있다는 장점이 있어서 개인적으로도 또 업무적으로도 손쉽게 사용할 수 있습니다. Slack과의 연결을 통해 함께 일하는 동료에게 코드 배포와 관리에 관한 메시지를 자동으로 보낼 수 있습니다. (Slack과 연결할 수 있는 다른 App보러가기)   


  • 가격 : 무료 (사용자 5인 초과 시 유료)

  • 다운로드 : 웹에서만 가능





3. Pocket(getpocket.com)


 디자인 레퍼런스를 모으거나 읽어보았으면 하는 내용을 스크랩하기 위해 사용하는 서비스입니다. Pocket 서비스 내에서 메시지를 보내거나 다른 SNS 서비스로 공유할 수 있어서 팀 구성원들끼리 쉽게 링크를 공유하고 정보를 주고받을 수 있습니다.  





 모바일에서도 편하게 사용할 수 있습니다. 주말에 야외로 이동하면서 틈틈이 링크를 보내는 경우가 많아서, 팀 내에서 주말에 알림에 제일 많이 오는 서비스 1위입니다.









사용하진 않지만 추천하는 서비스들 



1. Groove(www.groovehq.com)



이미지 출처 www.groovehq.com



 고객의 문의와 요청을 통합적으로 관리할 수 있는 '헬프데스크 서비스'입니다. 서비스를 제공하면서 중요한 것은 사용자의 요구를 충족시키고 궁금증을 해결해주는 것이 아닐까요. Groove는 통합적으로 고객의 반응과 요청을 관리할 수 있다는 점에서 서비스 제공자가 놓치면 안 될 서비스입니다.


  • 가격 : 이메일 전용 무료 (기업용 유료)

  • 다운로드 : 웹에서만 가능





2. Usability Hub(usabilityhub.com


 내가 디자인한 웹사이트의 사용성이 좋은지, 또는 어떤 요소를 배치해야 사용자들이 액션을 취하는지 등을 알고 싶을 때 사용하면 좋은 서비스입니다. 

 


이미지 출처 usabilityhub.com


 

이미지 출처 usabilityhub.com



 5초 제한 테스트, A/B 테스트, 클릭 테스트 등의 다섯 가지의 사용성 테스트를 통해 사용자의 통계를 받아낼 수 있습니다.


  • 가격 : 무료 (타겟팅, 팀 계정, 인구 통계 자료 수집 등 고급 기능 유료)

  • 다운로드 : 웹에서만 가능



 여러분은 어떤 서비스를 사용하고 계신가요? 업무 환경과 자신의 성향에 맞는 다양한 서비스를 활용해보시길 바랍니다.


출처 : Medium 


by 수달 발자국





Posted by slowalk

UI/UX 기획을 할 때 사용하는 와이어프레임(Wireframe)에 대해 들어보셨나요?

웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다.



와이어 프레임이 실제 업무에서 사용되는 예시를 살펴보겠습니다. (*주관적인 흐름으로 개인적, 업체별로 다른 프로세스로 사용될 수 있습니다.) 

고객이 웹 페이지 제작을 요청합니다. 기획자는 고객의 요구사항을 파악하고 메인에 나올 콘텐츠와 기능 요소들을 정리합니다. 정리된 자료를 토대로 와이어프레임을 제작하게 됩니다. 디자인의 컨셉, 레이아웃, 각각 요소들의 상호작용과 인터렉션까지도 정해주게 됩니다. 이 와이어프레임을 통해 개발자는 사이트의 기능을 이해하고, 디자이너는 디자인 컨셉을 원활하게 잡을 수 있고, 클라이언트는 요구사항과 원하는 기능이 제대로 전달되었는지를 사전에 확인할 수 있습니다.



와이어프레임을 초기에는 파워포인트로 제작을 주로 했습니다. 하지만 앞서 설명한 것과 같이 화면 기획서에는 디자이너와 웹 퍼블리셔, 개발자, 클라이언트에게 필요한 다양한 정보가 들어가 있습니다. 그러나 파워포인트로 제작 할 시 조금 불편한 점이 있습니다. 파워포인트는 Document 사이즈이고 웹은 pixel 단위입니다. 그러므로 클라이언트 입장에서는 실제로 이 와이어프레임이 웹 페이지에서 어떠한 사이즈로 보일지 감을 잡기 어렵습니다. 또한, 실시간 공유와 협업이 쉽지 않습니다. 그렇게 되면 매끄러운 업무협의가 어려워지고 제작 시간 또한 늘어날 수 있습니다. 그렇기 때문에 최근 많이 사용되고 있는 다양한 와이어프레임툴을 사용해볼 것을 권합니다. 이러한 다양한 와이어프레임툴들은 실제 웹 페이지와의 1:1사이즈 대응, 실시간 공통편집 등의 다양한 기능을 제공하며 공유 또한 쉽습니다. 그렇다면 사용하기 쉬운 와이어프레임 제작 도구 몇 가지를 소개해드리겠습니다. 


1. Moqups (https://moqups.com)

슬로워크 웹 개발실에서 사용하고 있는 툴입니다. PNG,PDF로 저장이 가능하고 메일이나 URL로 여러 사람과 공유하기가 쉽습니다. 직관적인 UI로 누구나 손쉽게 사용할 수 있다는 장점이 있습니다. 



2. UXPin (http://www.uxpin.com)

반응형 웹 기획에 적합합니다. 동일 페이지를 해상도별 사이즈로 쉽게 만들 수 있고, 실제 html로 확인할 수 있습니다. 실시간 협업 또한 가능합니다.



3. Balsamiq (https://balsamiq.com)

손으로 스케치한듯한 캐쥬얼한 느낌을 주는 와이어프레임 도구입니다. 네트워크 연결 없이도 사용할 수 있다는 점이 있습니다.




4. Proto.Io (https://proto.io)

모바일 앱을 만들기에 적합한 툴입니다. 아이폰, 아이패드, 안드로이드, 안드로이드 타블렛 모두 가능합니다. QR코드를 통해 스마트폰에서 바로 확인하여 볼 수 있습니다.




5. Power mockup (http://www.powermockup.com/)

파워 목업은 많은 기획자들이 사용하는 툴입니다. 다운로드를 받으면 파워포인트 내에 설치되어 손쉽게 와이어프레임과 문서작성을 동시에 할 수 있습니다. 사용성이 매우 간편하고 스텐실 종류가 다양해 초보자도 쓰기가 편하다는 장점이 있습니다. 





이 밖에도 다양하고 손쉽게 쓸 수 있는 와이어프레임 툴이 많습니다. 가장 좋은 것은 직접 사용해 보고 자신의 사용 목적에 맞고 편한 와이어프레임 툴을 선택하는 것이 좋습니다. 

참조사이트 <http://likelink.co.kr/20702>를 확인하시면 더 많은 와이어프레임 툴에 대해 소개하고 있습니다. 

UIUX기획, 손쉽게 와이어프레임 툴로 시작해보세요.



by 양 발자국




Posted by slowalk