게임에는 로비, 상점, 인벤토리, 설정처럼 수십 개의 화면이 있습니다. 어떤 버튼을 누르면 어느 화면으로 가는지, 뒤로 가기를 누르면 어디로 돌아오는지를 한 장으로 정리한 것이 UI 흐름도입니다. 흐름도는 기획자, UI 디자이너, 개발자가 같은 그림을 보고 이야기하게 해 줍니다. 이 글에서는 흐름도를 그리는 방법을 단계별로 설명합니다.

UI 흐름도가 필요한 이유

화면 하나하나를 잘 디자인해도 화면 사이의 연결이 엉키면 유저는 길을 잃습니다. 원하는 메뉴까지 몇 번을 눌러야 하는지, 같은 기능에 들어가는 길이 여러 개라 헷갈리지 않는지는 흐름도를 그려 봐야 보입니다.

흐름도는 일정 관리에도 쓰입니다. 화면 수와 연결 수가 보이면 디자인과 개발에 필요한 작업량을 가늠할 수 있습니다. 또 새로운 기능을 추가할 때 기존 흐름의 어디에 끼워 넣을지 판단하는 기준이 됩니다.

기본 기호와 규칙

• 화면마다 고유 이름과 번호를 붙입니다.
• 화살표 위에는 이동을 일으키는 행동을 적습니다.
• 뒤로 가기, 닫기 같은 되돌아가는 길도 빠짐없이 그립니다.
• 한 장에 너무 많이 넣지 말고 큰 흐름과 세부 흐름을 나눕니다.

기호 규칙은 팀 안에서 통일하는 것이 가장 중요합니다. 범례를 문서 맨 앞에 넣어 두면 처음 보는 사람도 바로 읽을 수 있습니다.

그리는 순서

1. 화면 목록 만들기: 게임에 필요한 화면과 팝업을 모두 적습니다.
2. 중심 화면 정하기: 대부분의 이동이 시작되는 로비나 메인 화면을 가운데에 둡니다.
3. 주요 경로 연결하기: 유저가 가장 자주 다니는 길부터 화살표로 잇습니다.
4. 분기 추가하기: 재화 부족, 레벨 제한, 네트워크 오류처럼 조건에 따라 갈리는 곳에 마름모를 넣습니다.
5. 되돌아가는 길 그리기: 각 화면에서 뒤로 가기와 닫기의 도착지를 그립니다.
6. 깊이 확인하기: 중심 화면에서 각 기능까지 몇 번을 눌러야 하는지 셉니다.

자주 쓰는 기능이 너무 깊은 곳에 있다면 바로가기 버튼을 추가하거나 메뉴 구조를 바꿔야 합니다. 반대로 거의 쓰지 않는 기능이 중심 화면을 차지하고 있다면 정리 대상입니다.

완성된 흐름도는 직접 따라가 보며 검증합니다. 대표적인 유저 행동, 예를 들어 '접속해서 출석 보상을 받고 상점에서 아이템을 산 뒤 던전에 들어간다'를 시나리오로 정하고 흐름도 위에서 손가락으로 길을 따라가 봅니다. 중간에 끊기는 화살표나 돌아올 수 없는 화면이 있다면 바로 드러납니다.

예외 상황 빠뜨리지 않기

흐름도에서 가장 많이 빠지는 부분이 예외 상황입니다. 구매 버튼을 눌렀는데 재화가 부족할 때, 결제 중에 연결이 끊겼을 때, 이벤트 기간이 끝난 화면에 들어갔을 때 어디로 보낼지 정해 두지 않으면 개발자가 임의로 처리하게 됩니다.

• 재화 부족: 충전 화면 안내 팝업
• 네트워크 끊김: 재접속 팝업 후 원래 화면 복귀 여부
• 권한 없음: 레벨 제한 안내
• 기간 종료: 이벤트 종료 안내 후 로비로 이동

도구와 활용 팁

흐름도는 한 번 그리고 끝나는 문서가 아닙니다. 기능이 추가되거나 화면 구성이 바뀌면 함께 고쳐야 합니다. 수정 날짜와 버전을 문서 구석에 적어 두면 팀원이 최신본인지 바로 알 수 있습니다.

흐름도는 일반 도식 도구나 프레젠테이션 도구, 협업용 화이트보드 도구로 그릴 수 있습니다. 처음에는 손으로 빠르게 그려 전체 구조를 잡고, 확정되면 도구로 깔끔하게 옮기는 방식이 효율적입니다.

흐름도가 완성되면 화면별 상세 설계 문서(와이어프레임)와 번호를 맞춰 연결해 둡니다. 흐름도에서 화면 번호를 보고 바로 상세 문서를 찾을 수 있으면 팀 전체의 작업 속도가 빨라집니다. SBS아카데미게임학원 게임UIUX 과정에서는 유저가 보고 누르는 UI와 유저가 겪는 흐름을 설계하는 UX를 함께 다룹니다.

자주 묻는 질문