서비스 기획에 사용하는 Tool
적절한 Tool 사용으로 일의 효율성 높이기
기획서 작성을 위한 도구
서비스 기획업무에서 가장 많이 하는 작업은 글을 읽거나 글을 쓰는 것이라 초반에는 Tool이라고 할만한 것을 쓰지 않았다. 그나마 도구라고 부를만한 것은 회의록이나 벤치마크 또는 뉴스 스크랩핑 용도로 쓰는 에버노트(Evernote) 정도지만, 여기에 기획문서를 작성해서 공유한 것은 아니라 기획 업무에 도움이 되었다고는 할 수 없다.
대부분 아실거라 생각해서 부연설명은 생략한다.서비스 기획서는 주로 아틀라시안의 지라(JIRA)에 ISSUE를 생성한 후에 컨플루언스(Confluence)에 작성 후 사내에 공유하여 리뷰를 받아서 수정하고 리뷰 받고 수정하고를 반복하는 과정 속에서 완성되었다. 초반에는 와이어프레임에 대한 개념도 없었고, 글줄로 설명하고 표로 정리하는 수준의 문서로만 만들어서 기획서를 만드는 나도 리뷰를 해주시는 다른 팀원들도 모두 힘들어했다ㅠㅠ
물론 회사에서 지라와 컨플루언스를 도입해서 쓰고 있다면 지속적으로 컨플루언스에 기획서를 작성해서 공유하는건 좋은 방법이고 지금도 애용하고 있다. 한 공간에서 문서를 쌓아놓고 정리하고 공유하고 이슈를 관리하는데 지라와 컨플루언스는 최적화 되어 있기 때문이다. 하지만 아무리 문서작성에 최적화된 프로그램이라도 글줄과 도표만으로는 기획서 작성하는데 분명 한계가 있고 이미지가 있을 때와 없을 때 팀원들이 기획서를 이해하는 정도의 차이는 엄청나서 차츰차츰 Tool을 도입하게 되었다.
그래서 기획서 작성 맨처음 도입한 것이 컨플루언스 내 서드파티로 들어가 있는 글리피(Gliffy)를 사용하여 Flow 순서도를 그리고 와이어프레임도 조금씩 그리기 시작했다. 다만 컨플루언스 내 Gliffy는 너무 무거워서 그려야할 화면이 많아질수록 중간에 꺼지거나 저장이 안되거나 컨플루언스 문서를 불러오는데 너무 많은 시간이 걸려서 다른 Tool 도입을 고려해야만 했다.
Gliffy는 다이어그램이나 흐름도를 그리기엔 적합했지만 와이어프레임을 그리기엔 좀 무거웠다.기존에 디자이너분이 쓰시던 스케치(Sketch)를 사용할까 하였으나 디자이너를 위한 도구란 인식이 강했고, 은행이나 기타 금융기관을 자주 들어가서 살펴봐야하는 핀테크 업계 특성상 기획자이지만 윈도우를 써야했기에 스케치는 사용할 수 없었다. 때마침 Adobe에서 스케치의 대항마로 Adobe Xd란 새로운 Tool을 윈도우에서도 사용가능하도록 내놓아서 시범삼아 써보기 시작하였다.
사랑합니다 어도비♥어도비가 Xd란 프로그램을 키우려는지 튜토리얼이나 사용안내서, 무료 공유 디자인 파일 등을 적극적으로 내놓아서 한번도 이런 프로그램을 다뤄본 적이 없는 초보자라도 조금만 사용해보면 쉽게 익숙해질 수 있게 해 놓았다.
2) Adobe XD Templates, UI kits and Freebies - Top resources on XDGuru
덕분에 와이어프레임을 그리고 화면을 기획하는데 좀 더 시간이 절약되고 세심하게 살펴볼 수 있게 되었을 뿐만 아니라 팀원들의 기획서 이해도를 높이는데도 매우 도움이 되고 있다. 윈도우를 쓰는데 적당한 와이어프레임 Tool을 찾지 못하신 분이라면 Adobe Xd를 한번 써보시길 권한다. (무료플랜부터 있으니 한번 사용해보시라 https://www.adobe.com/kr/products/xd.html 히힛)
생각을 정리하는 도구
1) 마인드맵
서비스 기획은 업무를 시작하면 바로 문서가 써지는 것이 아니라, 시작하기 전에 서비스에 어떤 내용을 담고 어떤 모양으로 표현해야할지에 대한 생각을 정리하는 시간이 필수적으로 필요하다. 처음엔 어떻게 정리를 해야할지 감을 잡지 못하다가 마인드맵을 그려야겠다고 생각했는데 손으로 그리기 시작하면 종이의 크기에 따라 아이디어가 제한적으로 떠오르고, 그냥 에버노트나 윈도우 기본 note앱에다가 적기엔 좀 부족하고, 맘에 드는 마인드맵 프로그램의 경우엔 너무 비싸거나 저렴할경우 너무 버벅되서 이용하기 어려운 점이 많아 고민이 많았다. 그러다가 아는 개발자분이 추천해주신 mindmup (www.mindmup.com)이란 마인드맵 프로그램에 정착하게 되었다. 구글드라이브를 연동하면 무료이고, 무한대 생성이 가능하며 아이디어 연결성도 쉽고 각 키워드별로 메모를 별도로 해놓거나 색으로 구별해놓을 수 있어서 애용하고 있다.
지금도 기획을 진행하다 머리 속에서 정리가 안되는 부분이 있으면 마인드맵에 연관되는 키워드를 쭈욱 나열해서 연결했다 이동했다 하면서 눈으로 보고 키워드들을 정리한다. 머리 속으로만 정리하는 것보다 눈으로 보면서 정리하는 것이 시간도 절약되고 종종 더 많은 아이디어가 떠오르기도 하기 때문이다. 하지만 마인드맵이 오히려 생각을 정리하는데 방해가 되시는 분들도 있다고 하니 사용해보시고 맞는 분들만 이용하시길 권유한다.
2) Note 앱
회의록이나 기획서, 간단한 메모는 위에서도 썼다시피 에버노트를 쓰다가 최근에 노션(Notion)을 알게 되면서 모든 회의록, 할일 정리, 간단한 메모, 뉴스 스크래핑 등의 거의 모든 문서 정리를 노션으로 진행하고 있다. 에버노트의 모든 문서를 키워드 하나로 검색하거나 단순 스크래핑 기능 등은 제공하지 않지만, 기타 다른 정리 기능은 노션을 따라갈만한게 없다는 생각이 들 정도로 매료되었다. (지금 이 글도 노션에 먼저 작성해서 옮긴 것이다.)
notion.so 에 들어가면 웹기반으로도 사용할 수 있고 앱으로도 다운받아 사용할 수 있다.다양한 탬플릿을 기본적으로 제공하고 트렐로(Trello)와 같은 프로젝트 관리 기능도 있어 회사차원에서 쓰는 곳들도 늘어나는 것으로 알고 있다. 개인적으로는 기업에서 쓰기엔 얼마나 효용성이 있을지에 대한 의문이 아직 남아있지만, 개인용으로 쓰는 것에 대해서 고민한다면 유료플랜으로 쓰시길 적극 권장할 정도다.(물론 어느정도 무료로 쓸수 있으니 무료로 먼저 체험해 보시고 쓰시는게 좋다.)
벤치마크에 쓰는 Tool
1) 화면 캡쳐
서비스 기획은 무에서 유를 창조하기보단 다른 서비스와 우리만의 차별점을 조합하여 새로운 것을 만들어내는 경우가 많기 때문에 벤치마크가 매우 중요하다. 그래서 벤치마크시 타사의 서비스를 이용해보고 화면을 캡쳐해놓는 경우가 많은데, 팀원 중에 한분이 쓰시던 캡쳐프로그램을 사용해보고 너무 좋아서 모든 화면캡쳐는 이걸로 진행하고 있다. 바로 픽픽(PicPick)이란 프로그램이다. 개인 및 기업까지 무료로 사용할 수 있어서 윈도우에서 정지된 화면만 캡쳐한다면 매우 효율적인 프로그램이다. (Mac을 쓰신다면 물론 필요 없을 수 있습니다)
픽픽 앱을 깔면 각 캡쳐방식에 대한 단축기를 설정할 수 있어 간편하다.2) 새로운 화면 구성이 필요할 때
종종 기존 서비스 화면 구성에서는 다 담아내지 못해 창의적이면서도 기존 UI의 법칙을 크게 벗어나지 않는(?!) 아이디어가 필요할 때가 있다.(슬프게도 그럴때가 정말 있다ㅠ) 그럴땐 Tool이라기보단 주로 참고하는 사이트들이 있는데 아래와 같다
찾고자 하는 이미지를 키워드 검색해서 찾고 핀으로 저장해서 필요할때마다 보면 좋다. 컴퓨터에 파일이 쌓이는 것이 아니라서 이미지 관리하기 편하다.
Behance는 어도비에서 운영하는 사이트로 디자인적 감각을 경험하기 좋은 페이지다. 이것 또한 별도 이미지 저장 없이 내 계정에 저장하거나 핀터레스트와 연계해서 핀으로 저장해 놓을 수 있어 간편하다.
모바일 앱 UI/UX를 전문적으로 분석하는 사이트다. 가입해야 상세내용을 볼 수 있다. 모바일 앱 구성을 참고하기 좋다. 매주 새로운 앱에 대한 캡쳐 이미지가 올라와서 참고하기 좋다.
3) 실제 서비스에 적용하려고 할 때
실제 서비스를 벤치마크하거나 감각적인 화면들을 참고한다고 하더라도 실제 소스코드가 있는 것들이 아닌 경우가 많기 때문에 구현가능한지 확인이 필요한 것들이 많다. 그래서 참고를 많이 하는 것이 소스코드를 오픈하고 있는 사이트들의 예제이다. 가장 많이 사용하는 곳들은 세 곳이다.
중국에서 만든 사이트인 것으로 알고 있다. ng-zorro라고 사내에선 부르며 다양한 컴포넌트 사례들을 볼 수 있다. 예제가 많고 커스텀 가능한 것이 많아 애용하고 있다.
역시 중국에서 만든 사이트인 것 같다. 다양한 그래프 예시를 볼 수 있고 직접 값을 넣어 데이터 변화에 따른 그래프 모양 변화를 살펴볼 수 있다. 그래프를 많이 쓰는 회사라면 매우 유용할 것으로 보인다.
사정상 모바일앱을 하이브리드로 개발하고 있어서 모바일 화면 기획시 참고하여 사용하고 있다. 여기서 사용하기 어려운 UI를 기획한다면 반영할 수 없기 때문에 가급적 여기서 사용 가능한 UI를 최대한 커스텀하여 사용할 수 있도록 살펴본다.
구글 디자인 가이드라고 생각하면 좋다. 앱에 대한 기본적인 용어나 개념이 없을 경우 이 사이트를 보면서 공부하면 도움이 된다.
이 외에도 사내에서 업무 협업을 위해 다양한 Tool을 사용하고 있지만, 일단은 서비스 기획 업무를 진행함에 있어서 주로 사용하는 도구와 사이트 위주로 작성하였다. 나중엔 사내에서 사용하는 Tool에 대해 종합적으로 다룰 수 있길 바란다.
