UI·UX 포트폴리오는 완성 화면과 함께 왜 그렇게 설계했는지 설명이 있어야 설득력이 생깁니다. 수업 후반에는 기획 의도, 화면 흐름도, 스타일 가이드, 완성…
논리 흐름도와 화면 흐름도는 보는 사람이 다릅니다
기획 단계의 흐름도는 '조건이 맞으면 이쪽, 아니면 저쪽'처럼 판단 과정을 도형과 화살표로 그리는 경우가 많습니다. 시스템 규칙을 정리하기에는 좋지만, 실제로 유저가 보는 화면이 몇 장인지, 버튼이 어디에 있는지는 잘 보이지 않습니다.
화면 흐름도는 각 칸에 해당 화면의 축소 시안을 넣습니다. 상점 화면이라면 탭과 상품 목록, 구매 버튼의 대략적인 위치가 보이는 작은 그림이 들어가고, 그 버튼에서 구매 확인 팝업으로 화살표가 이어집니다. 그래서 UI 디자이너는 디자인할 화면 수를, 개발자는 구현할 화면과 전환을, 기획자는 빠진 흐름을 한눈에 확인할 수 있습니다.
포트폴리오에서도 화면 흐름도는 큰 힘이 됩니다. 예쁜 화면 몇 장보다, 그 화면들이 어떻게 이어지는지 설계한 흔적이 UX를 고민하는 디자이너라는 인상을 주기 때문입니다.
그리기 전에 화면 목록부터 정리하기
바로 그리기 시작하면 화면이 하나둘 빠지기 쉽습니다. 먼저 이번 흐름도에 들어갈 화면을 목록으로 적고, 각 화면이 어떤 종류인지 구분합니다. 종류에 따라 흐름도에서 표시하는 방법이 달라지기 때문입니다.
| 화면 종류 | 특징 | 흐름도 표시 방법 |
|---|---|---|
| 전체 화면 | 이전 화면을 완전히 덮음 | 큰 썸네일, 기본 칸 |
| 팝업 | 이전 화면 위에 겹쳐 뜸 | 작은 썸네일, 부모 화면 옆에 붙여 배치 |
| 토스트·알림 | 잠깐 떴다 사라짐 | 점선 칸이나 메모로 표시 |
| 탭 전환 | 같은 화면 안에서 내용만 바뀜 | 한 칸 안에 탭별 작은 그림 또는 별도 표기 |
| 로딩·연출 | 유저 조작 없이 지나감 | 얇은 칸이나 화살표 위 표기 |
목록에는 화면 번호를 붙여 두세요. 'S01 로비', 'S02 상점', 'P01 구매 확인'처럼 전체 화면과 팝업을 구분하는 번호 규칙을 정하면, 회의에서 화면을 부를 때도 헷갈리지 않습니다.
목록을 만들 때는 유저의 목적 하나를 정해 처음부터 끝까지 따라가 보는 방법이 효과적입니다. '새 장비를 사서 장착한다'는 목적이라면 로비, 상점, 상품 상세, 구매 확인, 구매 완료, 인벤토리, 장비 상세, 장착 완료 순으로 필요한 화면이 자연스럽게 떠오릅니다. 목적을 두세 개 더 따라가면 화면 목록이 거의 채워집니다.
썸네일 배치와 이동선 연결하는 순서
- 유저가 가장 많이 머무는 허브 화면(보통 로비나 메인)을 가운데 둡니다.
- 허브에서 바로 가는 화면들을 주변에 배치하고, 깊이가 깊어질수록 바깥쪽으로 놓습니다.
- 각 썸네일에서 이동을 일으키는 버튼에 번호나 표시를 달고, 그 버튼에서 화살표를 시작합니다.
- 화살표 위에 '탭', '길게 누름', '자동 이동'처럼 이동 조건을 짧게 적습니다.
- 되돌아오는 흐름은 다른 색이나 점선으로 구분해 표시합니다.
화살표를 화면 전체가 아니라 버튼에서 시작하게 그리는 것이 핵심입니다. 그래야 '상점 화면의 어느 버튼이 구매 팝업을 여는지'가 분명해지고, 버튼이 빠졌거나 같은 버튼이 두 곳으로 가는 모순도 바로 드러납니다.
화살표가 너무 많이 얽히면 흐름도가 읽히지 않습니다. 이럴 때는 상점 흐름, 인벤토리 흐름처럼 기능별로 장을 나누고, 허브 화면만 공통으로 두는 방식이 깔끔합니다.
팝업, 뒤로 가기, 예외 상태를 빠뜨리지 않기
화면 흐름도에서 가장 많이 빠지는 것이 뒤로 가기입니다. 팝업에서 닫기를 누르면 어디로 돌아가는지, 안드로이드 기기의 뒤로 가기 버튼을 누르면 어떻게 되는지, 세 단계 깊이 들어간 화면에서 홈 버튼을 누르면 어디로 가는지 모두 적어야 합니다. 이 부분이 비어 있으면 개발 단계에서 화면마다 동작이 제각각이 됩니다.
예외 상태도 화면으로 그려 둡니다. 재화가 부족해 구매할 수 없을 때, 목록에 아이템이 하나도 없을 때, 네트워크가 끊겼을 때, 이미 받은 보상을 다시 누를 때 각각 어떤 화면이나 팝업이 뜨는지 흐름에 연결합니다. 정상 흐름만 그린 흐름도는 실제 개발에서 절반만 쓸모 있습니다.
팝업 위에 또 팝업이 뜨는 경우는 특히 주의합니다. 구매 확인 팝업에서 재화 부족 팝업이 뜨고, 거기서 충전 화면으로 넘어갔다가 돌아오면 어느 화면이 남아 있어야 하는지 정해 두지 않으면 유저가 길을 잃습니다. 팝업이 겹치는 경우에는 쌓이는 순서를 숫자로 적어 두면 개발자가 화면 관리 구조를 설계하기 쉬워집니다.
도구 선택과 마무리 점검
화면 흐름도는 피그마 같은 UI 디자인 도구에서 그리는 경우가 많습니다. 실제 시안 화면을 축소해 썸네일로 쓰고, 화살표 연결 기능을 활용하면 시안이 바뀔 때 흐름도도 함께 갱신하기 쉽습니다. 시안이 아직 없다면 회색 상자로 대략적인 배치만 그린 와이어프레임 썸네일로 시작해도 충분합니다.
- 모든 화면에 들어오는 길과 나가는 길이 하나 이상 있는가
- 눌러도 아무 데도 가지 않는 버튼이 없는가
- 뒤로 가기와 닫기의 도착 화면이 모두 적혀 있는가
- 재화 부족, 빈 목록, 통신 오류 같은 예외 화면이 연결되어 있는가
- 화면 번호가 목록과 흐름도에서 일치하는가
완성한 흐름도는 처음 보는 사람에게 '상점에서 아이템을 사고 인벤토리에서 장착하기까지 따라가 보라'고 부탁해 보세요. 손가락으로 따라가다 멈추는 곳이 바로 고쳐야 할 곳입니다. 직접 그린 흐름도를 UI/UX 포트폴리오 안에서 어떻게 보여 줄지 고민된다면, SBS아카데미게임학원 게임UIUX 과정 상담에서 화면 시안과 흐름도를 한 묶음으로 구성하는 방법을 상의해 보세요.
자주 묻는 질문
화면 흐름도는 기획자와 UI 디자이너 중 누가 그리나요?
회사마다 다릅니다. 기획자가 논리 흐름을 먼저 정리하고 UI 디자이너가 화면 흐름도로 구체화하는 경우가 많으며, 작은 팀에서는 한 사람이 둘 다 맡기도 합니다.
모작 포트폴리오에도 화면 흐름도를 넣는 게 좋을까요?
좋습니다. 기존 게임의 화면 흐름을 분석해 흐름도로 정리하고, 개선하고 싶은 부분을 표시하면 분석력과 설계 능력을 함께 보여 줄 수 있습니다.
가까운 캠퍼스에서 게임 UI·UX 알아보기
사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.