Figma를 활용해 플로우차트(Flowchart)와 와이어플로우(Wireflow)를 빠르게 그리는 방법에 대해 알아보겠습니다.
최근 디자이너뿐만 아니라 기획자, 개발자도 Figma를 사용해 작업 흐름을 정리하는 경우가 많아졌는데요, 특히 플로우차트와 와이어플로우를 깔끔하게 정리해두면 팀 내 커뮤니케이션이 훨씬 수월해집니다. 자아~지금부터 쉽게 차근차근 알아보겠습니다.
플로우차트와 와이어플로우의 차이
먼저 플로우차트와 와이어플로우의 차이를 간단히 포인트하고 넘어가야 하는데요. 플로우차트(Flowchart)는 어떤 프로세스나 사용자의 흐름을 박스와 선으로 시각적으로 표현한 것입니다. 반면에 와이어플로우(Wireflow)는 와이어프레임(Wireframe)에 흐름(Flow)을 추가해서, 실제 UI 화면 이동을 보여주는 방식입니다. 쉽게 말하면 플로우차트는 개념 흐름, 와이어플로우는 실제 화면 흐름을 보여준다고 생각하면 됩니다.
Figma에서 플로우차트 빠르게 그리는 방법
본격적으로 Figma에서 플로우차트를 빠르게 만드는 방법을 알아보겠습니다. Figma에는 기본적으로 도형(Shape) 툴이 잘 준비되어 있습니다. 플로우차트를 만들 때는 ‘사각형(Rectangle)’, ‘원(Circle)’, ‘화살표(Arrow)’를 주로 사용해요. 단축키를 활용하면 훨씬 빠르게 작업할 수 있는데요. ‘R’ 키를 누르면 바로 사각형을 그릴 수 있고, ‘O’ 키를 누르면 원을 그릴 수 있습니다. 화살표는 선(Line)을 그리고 속성에서 “Arrow”를 추가해주면 됩니다.
플로우차트를 깔끔하게 만들기 위해서는 간격(Spacing)과 정렬(Alignment)이 정말 중요합니다. Figma에서는 Shift 키를 누른 채 여러 오브젝트를 선택하고 상단 Align 패널을 이용해서 정렬하면 됩니다. 또한, Auto Layout 기능을 적용하면 박스 간 간격을 자동으로 조절할 수 있어서 수정할 때도 매우 편리합니다.
만약 플로우차트를 더 빠르게 만들고 싶다면, Figma 플러그인 중 “Flowkit” 또는 “Wireflow” 같은 플러그인을 사용하는 것도 좋은 방법입니다. 이 플러그인들은 미리 준비된 플로우차트 컴포넌트를 드래그앤드랍 방식으로 추가할 수 있어서 시간 절약에 도움이 됩니다.
와이어플로우 그리기 실전 방법
이제 와이어플로우를 그리는 방법을 살펴볼까요? 와이어플로우를 그릴 때는 먼저 간단한 와이어프레임부터 시작하는 것이 좋아요. 예를 들어, 로그인 화면, 회원가입 화면, 메인 페이지 화면 등을 사각형 블록으로 간단히 그리고, 각 화면을 화살표로 연결해주면 됩니다. 여기서도 Auto Layout을 잘 활용하면 화면 간 정렬과 간격이 깔끔하게 유지됩니다.
또한, 텍스트 스타일을 미리 세팅해두면 좋습니다. 예를 들면 화면 이름은 Bold, 버튼명은 Regular로 설정해두는 식이죠. 이렇게 하면 나중에 수정할 때도 일관성을 유지할 수 있습니다.
Figma에서는 프로토타입 모드(Prototype Mode)를 이용해서 실제 화면처럼 클릭 이동까지 설정할 수 있습니다. 화면을 하나 클릭한 다음 오른쪽 패널에서 “Prototype” 탭을 누르고, 연결하고 싶은 화면으로 드래그하면 됩니다. 이 과정을 통해 와이어플로우를 단순 시각적 연결뿐만 아니라 실제 인터랙션까지 설정할 수 있어요.
작업 마무리 및 공유 방법
마지막으로, 플로우차트나 와이어플로우 작업을 끝낸 후에는 팀원들과 공유할 때 ‘뷰 온리 링크(View Only Link)’를 생성해서 배포하는 것이 좋습니다. 이렇게 하면 실수로 누군가가 편집하는 것을 막을 수 있고, 팀 전체가 같은 내용을 볼 수 있어요.
정리
정리해보면, 플로우차트는 기본 도형과 Auto Layout을 활용해서 빠르게 만들고, 와이어플로우는 간단한 와이어프레임과 프로토타입 기능을 조합해서 만드는 것이 핵심입니다. 플러그인도 적극적으로 활용하면 훨씬 효율적으로 작업할 수 있습니다.
Figma는 플로우차트나 와이어플로우 작업을 처음 해보는 사람도 쉽게 접근할 수 있도록 인터페이스가 직관적입니다. 그래서 처음에는 조금 헷갈리더라도, 몇 번만 연습해보면 금방 익숙해질 수 있어요. 이렇게 플로우차트와 와이어플로우를 잘 그려두면, 프로젝트 시작할 때 방향을 잡고, 팀원들과 아이디어를 정리할 때 정말 큰 도움이 됩니다. 그러니 꼭 한 번 직접 시도해보세요!