사수님의 코멘트혹시나 작업하시는데 도움이 될까 해서 정보 추가로 공유드리려고 합니다.
화면별 플로우 고민하실때 화면 단위로만 놓고 보면 전체 흐름이 눈에 잘 안들어올때가 있을거에요.
그래서 저는 꼭 모든 프로젝트 마다 유관부서들과 원활한 소통을 위해 스크린 플로우를 무조건 그리고 가는데요.
스크린 플로우를 그리지 않으면 화면 단위로 설명하다 보면 전체 흐름이 이해가 되지 않는다는 피드백을 듣게 될 수 있어요.
스크린 플로우를 그리는 방법은 정해져 있지 않아요. 해당 플로우를 봤을 때 상대방이 화면별 이동이 어떻게 작동하는지 보고 이해할 수만 있으면 됩니다.
크게 2가지 형태로 나눠 볼 수 있어요.
화면이 비교적 단순할때: 첨부한 A 이미지 케이스 참고
화면 내 케이스가 많아서 분기처리해야 되거나 눌렀을때 다양한 지면으로 이동할 경우: B이미지 케이스 참고
두가지 방식 모두 공통적으로 눌렀을때 다음와 같은 정보들을 확인할 수 있도록 정리하는것이 좋은것 같습니다.
•
눌렀을때 같은 화면 안에서의 동작이 이루어지는지 (ex. 바틈시트, 팝업 등이 뜬다)
•
눌렀을때 다른 화면으로 이동하는 동작이 이루어지는지 (ex. A -> B 화면으로 화면 전환을 한다)
•
스크린 플로우를 통해 에러, 예외 케이스들을 알려줘야 한다면 해당 정보들까지 담고갑니다. (Ex. 00 눌렀을때 에러가 뜰 경우 A 화면 케이스를 띄어준다)
B 케이스는 정보 처리 방식이 케이스에 따라 화면 ui 구성이 달라지는 화면들에 저는 자주 활용하는 편이에요.
빠진 케이스를 알아차리고 보완하는데 꽤 유용합니다.
예를 들어서 B이미지는 실제 제 플젝 예시인데 보안상 이미지는 다 지웠는데요. 그 당시 상황이, 상세화면에서 결제하기를 눌렀을때 본인인증 여부에 따라 노출되는 화면 구성이 달라질 경우, 플로우차트를 활용해서 “본인인증 한 사용자인지?” 질문을 던지고 Yes 일 경우, No일 경우에 따라 노출되는 화면을 붙여 넣었습니다.
또한, 특정 화면에서 화면 UI로 붙여 넣는것 보다 정보 형태로 전달하는게 더 유용한 상황이 있어요. 그럴때도 플로우차트를 더 저극적으로 활용해서 스크린 플로우와 함께 정리하는 편이에요.
B 이미지 맨 마지막 쪽 보시면, 주문결제화면에 필수 정보값 미입력 한 상태에서 결제 화면으로 넘어가려고 할때, 어떤 정보가 입력됬는지에 따라 노출해주는 에러 메시지 순서가 달라지는 정책이었어요. 이럴때는 스크린 플로우 안에서 토스트 메시지 A, B, C,D 이런 ui로 노출해줘 개념보다는, 각 상황일때는 이런 메시지로 이런 순서로 노출해줘 같은 플로우차트가 더 적합합니다.
이번주 전체 화면 플로우 어떻게 갈지 정리하시고 난 뒤에, 한눈에 보고 이해하기 쉬운 스크린 플로우 형태로 한번 정리해보시는 것을 추천드립니다!
