![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 16 0 C 7.028 0 0 4.07 0 9.265 L 0 25.735 C 0 30.93 7.028 35 16 35 C 24.972 35 32 30.93 32 25.735 L 32 9.265 C 32 4.07 24.972 0 16 0 M 16 2.059 C 23.566 2.059 29.957 5.358 29.957 9.265 C 29.957 13.171 23.566 16.471 16 16.471 C 8.434 16.471 2.043 13.171 2.043 9.265 C 2.043 5.358 8.434 2.059 16 2.059 M 29.957 25.735 C 29.957 29.642 23.566 32.941 16 32.941 C 8.434 32.941 2.043 29.642 2.043 25.735 L 2.043 22.096 C 4.766 24.905 9.935 26.765 16 26.765 C 22.065 26.765 27.234 24.905 29.957 22.096 Z M 29.957 17.5 C 29.957 21.407 23.566 24.706 16 24.706 C 8.434 24.706 2.043 21.407 2.043 17.5 L 2.043 13.861 C 4.766 16.67 9.935 18.529 16 18.529 C 22.065 18.529 27.234 16.67 29.957 13.861 Z" fill="rgb(0, 0, 0)" height="35px" id="Xg0kd_6bM" transform="translate(4 3)" width="32px"/></svg>)
하나의 데이터, 유연한 전환
기능을 정의하면 흐름이 되고, 흐름을 그리면 화면이 됩니다. 처음부터 다시 쓰지 않아도 기획이 이어집니다.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 26.053 0 L 4.947 0 C 2.215 0 0 2.215 0 4.947 L 0 26.053 C 0 28.785 2.215 31 4.947 31 L 26.053 31 C 28.785 31 31 28.785 31 26.053 L 31 4.947 C 31 2.215 28.785 0 26.053 0 M 29.021 26.053 C 29.021 27.692 27.692 29.021 26.053 29.021 L 4.947 29.021 C 3.308 29.021 1.979 27.692 1.979 26.053 L 1.979 4.947 C 1.979 3.308 3.308 1.979 4.947 1.979 L 26.053 1.979 C 27.692 1.979 29.021 3.308 29.021 4.947 Z M 13.851 12.202 C 13.851 13.113 13.113 13.851 12.202 13.851 C 11.291 13.851 10.553 13.113 10.553 12.202 C 10.553 11.291 11.291 10.553 12.202 10.553 C 13.113 10.553 13.851 11.291 13.851 12.202 M 20.447 18.798 C 20.447 19.709 19.709 20.447 18.798 20.447 C 17.887 20.447 17.149 19.709 17.149 18.798 C 17.149 17.887 17.887 17.149 18.798 17.149 C 19.709 17.149 20.447 17.887 20.447 18.798" fill="rgb(0, 0, 0)" height="31px" id="IJqHjBaZ1" transform="translate(4 4)" width="31px"/></svg>)
다양한 뷰로 문서화
구조를 파악할 때, 세부 정책을 작성할 때, 사용자 흐름을 그릴 때. 목적에 맞게 원하는 뷰에서 기획을 이어갈 수 있습니다.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 0.343 2.836 C 0.126 3.021 0.001 3.291 0 3.575 L 0 31.02 C 0 31.561 0.443 32 0.989 32 C 1.536 32 1.979 31.561 1.979 31.02 L 1.979 23.637 C 6.609 19.916 10.533 21.841 15.061 24.057 C 17.719 25.363 20.584 26.764 23.636 26.764 C 25.873 26.764 28.213 26.013 30.654 23.92 C 30.871 23.735 30.998 23.467 31 23.183 L 31 3.575 C 31 3.191 30.774 2.843 30.422 2.683 C 30.07 2.524 29.655 2.583 29.363 2.834 C 24.581 6.935 20.577 4.971 15.939 2.697 C 11.34 0.442 6.101 -2.097 0.343 2.836 M 29.021 22.721 C 24.391 26.444 20.467 24.517 15.939 22.3 C 11.773 20.258 7.105 17.97 1.979 21.224 L 1.979 4.036 C 6.609 0.313 10.533 2.24 15.061 4.454 C 19.227 6.496 23.895 8.783 29.021 5.536 Z" fill="rgb(0, 0, 0)" height="31.999713998638754px" id="V51l8KUPg" transform="translate(5 4.002)" width="31.00000053662508px"/></svg>)
맥락을 잃지 않는 기획
기획 데이터를 한 캔버스에서 관리하기 때문에, 내용이 바뀌어도 누락이나 충돌 없이 정합성을 유지할 수 있습니다.
빈 칸이 아닌, 구조에서 시작하는
기획 프레임워크
시각화와 문서화를 동시에,
트리 뷰 ↔ 디렉토리 뷰
한눈에 구조화된 형태를 볼 수 있는 트리 뷰와,
기능에 집중하여 편집할 수 있는 디렉토리 뷰를 제공합니다.
두 가지 뷰는 실시간으로 동기화되어, 목적에 따라
원하는 형태로 기획을 이어갈 수 있습니다.
유저플로우 - 와이어프레임 연결
유저플로우에서 설계한 화면 흐름을 바탕으로
와이어프레임이 자동으로 생성됩니다.
기획 단계에서 화면을 보며 흐름을 직접 검토하세요.
이렇게 활용해보세요.
문서 정합성 유지
사용자 여정 최적화
사용자가 서비스를 탐색하는 흐름을 시각화하고,
기획 단계에서 팀원들과 빠르게 논의하세요.
개발 핸드오프