brunch

You can make anything
by writing

C.S.Lewis

by Seeyeon Apr 26. 2019

2019 웹/앱 UX 기획자를 위한 참고 사이트 정리

마인드맵, 페르소나, 플로우차트, 와이어프레임, 프로토타입, 스토리보드

서비스 기획에 관련된 툴은 계속해서 새로운 기술을 접목하여 발달하고 글로벌 트렌드에 따라 많은 변화를 겪고 있습니다. 오래 사용하여 익숙한 툴로 빠르게 기획하는 것도 중요하지만, 트렌드에 발맞추는 것 또한 놓쳐서는 안 됩니다. 아래에 2019년 기준 웹/앱 기획자를 위한 유용한 참고 사이트를 소개합니다. 주로 Web기반의 팀 공동작업이 가능한 서비스 위주로 작성되었으며, 트렌드와 관계없이 꾸준히 사용되고 있는 툴도 함께 소개하고 있습니다.




1. 마인드 맵

    (1)Gloo maps

     Web / Free

-사이트 맵 작업에 특화된 툴로, 온라인 기반으로 쉽고 빠르게 작업할 수 있으며 링크를 통해 팀 멤버들에게 공유하기 쉽다는 장점이 있습니다. 다양한 형태의 맵핑을 제공하진 않지만, Map, Matrix, Outline 세가지 형태로 시각화가 가능하고 사용이 간편합니다. 유료 결제 없이도 xml, png, pdf 파일로 export가 가능합니다. 서비스 기획 초기 단계에서 유용하게 사용하고 있는 툴입니다.

https://www.gloomaps.com/

   


    (2)Plectica

    Web/Free(limit)

-마인드맵, 플로우 다이어그램, 사용자 시나리오, 사용자 페르소나 등 다양한 서비스 기획 지도를 작성할 수 있는 툴입니다. 기본적으로 제공되는 양식이 70여 개에 달하여 거의 제한 없는 기획 지도 구상이 가능합니다. 팀 멤버를 초대하여 함께 작성하거나 공유할 수도 있고, 프레젠테이션 형식으로 내보내는 것도 가능합니다. 회원가입 후 무료로 이용시 250개 카드, 25mb 제한으로 사용할 수 있고, 월 혹은 연 결제 시 제한 없는 이용이 가능합니다.

https://www.plectica.com/



2. 사용자 페르소나

    (1)Uxpressia

    Web/Free(limit)

-사용자 페르소나 작성에 특화된 사이트입니다. 단순 페르소나 프로필 작성만이 아닌 사용자 유형별, 서비스 타입별 다양한 기본 템플릿을 제공하고 있습니다. 한 가지 아쉬운 점은 회원가입 후 무료 이용 시 1개의 프로젝트만 생성할 수 있다는 점입니다. 기획팀의 규모가 큰 기업에서는 사용자 분석 파트를 맡은 부서가 사용하기엔 부족함이 없어 보입니다.

https://uxpressia.com/


    (2)Userbit

    Web/Free(limit)

-현재 베타배포 단계로, UX 기획 및 리서치에 필요한 대부분의 템플릿으로 작업할 수 있는 강력한 툴입니다. 리서치 단계에서 활용 가능한 인터뷰 양식과 리서치 결과 및 피드백 노트작성도 가능하며, 분석 툴도 제공하고 있습니다. 사용자 페르소나와 사이트맵 작성 또한 가능해, 다양한 방식으로 활용이 가능합니다. 회원가입 후 최대 5개의 프로젝트까지 무료로 생성이 가능합니다. 유료 결제 모델도 타 사이트에 비해 저렴한 편입니다.

https://userbitapp.com/


3. 플로우 차트

    (1)Whimsical

    Web/Free(limit)

-플로우차트와 와이어프레임 그리고 스티키노트를 제공하는 툴입니다. 회원가입 후 총 4개의 프로젝트를 무료로 생성할 수 있습니다. 주의할 점은, 생성된 프로젝트의 수는 전체 생성가능한 프로젝트 수에서 차감되어 체크되어 프로젝트 생성 후 삭제를 해도 다시 차감된 수가 늘어나지 않는 다는 점입니다. 무료 이용자에게는 여러모로 불편한 점이 많은 툴이지만,  제공되는 기본 플로우차트의 기능이 뛰어난 것도 사실입니다.

Whimsical 의 플로우차트 사용 예시

https://whimsical.co


    (2)Draw.io

    Web/Free

-이미 많은 분들이 알고 계실 것으로 생각되는 Draw.io입니다. 최신의 툴은 아니지만 무료 이용이 간편한 점과 구글드라이브를 통한 간편한 저장 및 버전 관리가 가능해 꾸준히 쓰이는 툴입니다. 구글계정에 연동하거나 디바이스에 파일을 저장하여 웹에서 작성 및 수정이 가능합니다.

https://www.draw.io/


    (3)Lucidchart

     Web/Free(limit)

-Draw.io 와 유사한 플로우차트 툴을 사용해본 기획자라면 빠르게 손에 익힐 수 있는 툴입니다. 사용방법 또한 Draw.io와 거의 유사하며, Draw.io에서 생성한 요소들은 Lucidchart로 동일하게 복사 붙여 넣기가 가능합니다.(반대의 경우에도 마찬가지로 적용됩니다.) 기본으로 제공되는 템플릿이 다양하고, 스타일 적용 및 매끄러운 동작을 보여줍니다. 단순 플로우차트 만이 아닌 대부분의 다이어그램을 그릴 수 있게 도와주며, 개발기획에도 주로 쓰이는 툴입니다. Slack, Github, Aws import, G suite 등 다양한 서비스와의 연계가 가능하여 팀작업에 특화된 기능들을 가지고 있습니다. 회원가입 후 무료 이용 시 3개의 도큐먼트, 25mb 제한으로 이용이 가능합니다. 제공하는 기능들에 비해 저렴한 가격을 책정하고 있어, 팀 작업시 유료로 이용해도 좋을 서비스 입니다.

https://www.lucidchart.com



    (4)FlowMapp

    Web/Free(limit)

-사이트맵과 플로우차트 에 특화된 툴입니다. 플로우차트는 현재 베타 단계로, 향후 사용자 페르소나와 사용자 시나리오 그리고 디자인 리뷰까지 출시 예정이라고 합니다. 특히 사이트맵 구성 방식이 서비스 목업 화면 위주로 되어 있어 효과적인 시각화가 가능합니다. 팀 작업 혹은 클라이언트와의 미팅에서 강력한 설득력을 보여줄 수 있습니다. 다만 회원가입 후 무료 이용 시 생성가능한 프로젝트가 1개인 점이 아쉽습니다. 아마도 업데이트를 거치며 가격정책도 조정되지 않을까 싶습니다.

https://app.flowmapp.com/



4. 와이어프레임/프로토타입

    (1)Kakao Oven

    Web/Free

-다음 카카오에서 제작한 웹 기반 프로토타이핑 툴입니다. 기본으로 제공되는 디자인 요소들이 편리한 사용을 도와주며, 직관적인 인터페이스를 갖추고 있어 초보 기획자에게 유용한 툴입니다. 페이지 혹은 요소마다 링크를 걸어 웹 테스트 화면을 만들 수도 있습니다. 아이디어 단계나 초기 기획 회의 단계에서 간편하게 사용이 가능합니다. 모든 기능은 무료로 사용이 가능합니다.

https://ovenapp.io/


    (2)Sketch

    Mac/Purchase

-Mac 기반의 와이어프레임,프로토타이핑,디자인 툴입니다. 이미 많은 사용자가 사용하고 있는 주요 디자인 툴로, 대부분의 웹/앱 서비스 기획에 이용되고 있습니다. 한정 기간동안 무료체험이 가능하며, 다양한 확장기능을 가지고 있으며 호환되는 기타 툴이 많아 앞으로도 오랜기간 사랑받을 것으로 예상됩니다.

https://www.sketch.com/


    (3)Adobe XD

    Window/Free(limit)

-Mac 사용자에게는 Sketch가 있다면, Windows 사용자에게는 Adobe XD가 있습니다. Adobe에서 개발한 툴로, Starter버전으로 무료 다운로드하여 이용이 가능합니다. Starter로 무료 이용시, 1개의 프로토타입만 공유 가능합니다. 다른 Adobe 프로그램을 주로 사용하고 있고, 팀 혹은 소속 회사에서 주로 Adobe를 기반으로 작업하고 있다면 XD를 사용하는 것이 현명한 선택일 것입니다.

https://www.adobe.com/kr/products/xd.html


    (4)Figma

    Web/Free(limit)

-웹 기반으로 와이어프레임, 프로토타이핑, 디자인이 가능한 툴입니다. 최근 많은 곳에서 이용 중인 툴로, 특히 공동작업에 강합니다. 팀 라이브러리와 컴포넌트 적용 등으로 전체 프로젝트의 스타일을 맞추어나가는 데에 유용하며, 프로토타이핑 툴에서 제공하는 기능이 많아 웹 테스트 화면으로 팀 혹은 클라이언트에게 원활한 시각적 자료 공유를 할 수 있습니다. 기본적인 draft는 모두 무료로 사용할 수 있으며, 팀 작업시에는 유료 결제를 이용해야 합니다. Sketch와 거의 유사한 인터페이스를 갖추고 있으며 간편한 기본 단축키는 대부분의 디자인툴에서 사용되는 단축키 설정과 같아, 기존에 디자인/와이어프레임 툴 등을 이용해본 사용자라면 어려움 없이 적응이 가능합니다. Sketch파일 확장자나 Zeplin 혹은 InVision export 도 가능해 다른 툴과 함께 사용하기에도 적합합니다. 단점이라면 웹 기반 서비스인 탓에, 오프라인 환경에서는 작업이 불가능하다는 점이 있지만 이는 기타 웹 기반 서비스도 가지고 있는 단점이니 어느정도 감안이 가능하다고 보여집니다.


https://www.figma.com/


    (5)Draftium

     Web/Free(limit)

-다양한 기본 웹 템플릿을 제공하는 프로토타이핑 툴로, 무려 300개 이상의 템플릿을 보유하고 있습니다. 간편한 인터페이스로 사용이 편리하며. 프로젝트 생성 가장 첫 단계에서 부터 템플릿을 선택하여 편집이 가능합니다. 기존에 어느정도의 양식이 있는 웹 서비스들이 사용하는 템플릿을 참고하기 위한 사이트로도 손색이 없습니다.

https://draftium.com/


소개드린 서비스 중에 어떤 서비스를 사용하고 계신가요? 혹은 어떤 서비스를 사용하고 싶으신가요? 기획을 위한 툴을 선택하는 기준에는 정답이 없습니다. 다만 어떤 툴이 나에게 필요한 기능을 가지고 있는지, 어떤 툴로 팀 작업이 원활해지는지가 가장 중요한 고려요소입니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari