앱디자인 | 유저 플로우 툴 추천 - Overflow / user flow tool

 

 

Adobe XD로 앱 화면을 60페이지 넘게 작업을 마치고...

이 많은 내용을 어떻게 하면 개발자에게 잘 전달할 수 있을까 고민을 많이 했다.

XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다. 여기저기 알아보다가 알게된 툴이 있는데 아주 좋은 것 같다!

 

 

Overflow 툴 소개

The world's first user flow diagramming tool tailored for designers. Build and present beatiful user flow diagrams that tell a story.

 

오버플로우는 세계 최초 디자이너에게 최적화된 유저플로우 도식화 툴이다.

스토리를 말해주는 아름다운 유저플로우 도형을 만들고 보여줘라!!! 라고 말하고 있다

 

overflow.io/

Overflow | User flows done right

 

 

호환 가능한 프로그램

Overflow의 가장 좋은 점.

Sketch, Figma, XD, Photoshop 과 호환이 된다는 점이다.

Adobe XD에서 작업하고 overflow로 내보내기를 클릭만하면, overflow 툴에서 바로 유저플로우 작업이 가능하다.

 

 

 

 

Adobe XD에서 Overflow 로 화면 내보내는 방법

1. 플러그인에서 overflow를 추가한 다음

2. 내보낼 화면을 전체 선택 한 후, 플러그인 창에서 overflow 를 클릭

 

 

3. [Sync to Overflow] 클릭 후 새 문서를 열건지, 기존에 문서에 덮어씌울건지 창이 뜨는데 알맞게 설정 후 넘어가면 된다.

 

 

 

4. 어도비XD에서 작업한 것을 그대로 가져올 수 있다.

나중에 XD에서 업데이트를 하더라도 덮어씌울수 있어서 아주 편리하다.

60페이지가 넘는 화면들....

 

 

5. 상단의 툴이 아주 심플한데, 도형이나 텍스트를 넣을 수 있고, 디바이스 기기 모양을 넣을 수도 있고,
유저플로우를 만드는데 필요한 것은 다 있다.

 

 

 

---

 

 

이런식으로 흐름을 한눈에 볼 수 있도록 도식화 할 수있다.

화살표 중간에 라벨을 붙일 수 있어서 어떤 경우에 화면을 이동을 하는지 설명하기도 좋다.

 

 

 

 

이 영상 하나만 봐도 바로 사용법을 익힐 수 있을 정도로 직관적이고 쉬운 툴!

 

 

 

 

 

 

단점은...

바로 한달만 무료라는점.

한달 사용 이후에는 한달에 $12씩 내야 이용이 가능하다.

그치만 너무 좋은 툴이라, 앱 디자인하는 분들에게는 유용할 것 같다. (나도 조만간 결제하겠지...)

아직까지 이만한 툴을 보지 못했다.