시스템의 상태 변화를 표현하기

2020. 10. 6. 07:50UI 가벼운 이야기
gunggmee

하나의 시스템을 분석하고 설명하는 여러 관점이 있다. 상황에 따라 각 관점이 가져다주는 장단점이 다르므로, 시스템을 분석하는 다양한 관점들을 알아두면 유익하다. 이 글에서는 상태 전이state transition라는 관점에서 시스템을 이해하는 방법을 설명한다.

 

상태 전이란

어떤 인터넷 서비스가 있다. 이 서비스에 가입하지 않은 사람은 "비회원"이다. 가입을 하면 "회원"이 된다. 탈퇴를 하면 다시 "비회원"이 된다. 이 간단한 멤버십은 이렇게 정리할 수 있다.

  • 비회원이 가입을 하면 회원이 된다. 시스템은 회원 가입 시 가입 환영 메일을 발송한다.
  • 회원이 탈퇴를 하면 비회원이 된다.

위 기획에서, "비회원"과 "회원"은 상태state이다. "가입"과 "탈퇴"는 사건event이다. 특정 상태에서 특정 사건이 발생하면 다른 상태로 변경되는데 이 상태 변화를 상태 전이state transition라고 부른다. 예를 들어 "비회원" 상태에서 "가입"이라는 사건이 발생하면 "회원"으로 상태 전이가 일어난다. 특정 상태 전이가 일어날 때 시스템이 수행하는 작용(예: 메일 발송)은 액션action이라고 부른다.

그림으로 표현하면 이렇게 된다.

 

그림1. 회원과 비회원

위 그림에서 네모 상자들은 각각 상태를 나타낸다. 하나의 네모 상자에서 다른 네모 상자로 향하는 화살표는 상태 전이를 나타낸다. 화살표 위에 "메일 발송"이라고 써 있는데 "가입"은 사건을 뜻하고 "메일 발송"은 해당 상태 전이에서 시스템이 수행하는 액션을 뜻한다. 작은 동그라미는 시작 상태이다. 시작 상태에서 "비회원"으로 향하는 화살표가 있으므로, 이 시스템에서 유저의 초기 상태는 "비회원"임을 알 수 있다.

동일한 정보를 표로 나타낼 수도 있다. 여러 방법이 있는데 보통은 한쪽 축에 상태를 열거하고 다른 축에 사건을 열거한다.

 

  가입 탈퇴
비회원 회원 / 메일 발송 X
회원 X 비회원

 

회원이 다시 가입을 하거나, 비회원이 탈퇴를 하는 사건은 발생할 수 없으므로 X 표시를 한다.

 

조금 더 복잡한 시나리오

위와 같이 단순한 기획은 굳이 상태 전이 관점에서 살펴보아도 큰 장점이 없다. 이번에는 쇼핑몰의 주문-배송-수령 단계를 상태 전이 관점에서 나타내보자.

  • 주문을 하면 재고 확인, 포장 등 발송 준비를 한다.
  • 준비가 끝나면 발송을 시작한다.
  • 발송이 끝나면 주문 프로세스가 완료된다.
  • 고객은 주문을 취소하거나 반품할 수 있다.

위 기획을 도식으로 표현하면 이렇게 된다. 주문 상태가 명확히 드러나고, 각 상태에서 어떤 사건이 발생할 수 있는지, 상태 전이가 일어날 때 시스템은 어떤 액션을 취해야 하는지 쉽게 파악할 수 있어서 좋다. 또 각 단계에서 일어날 수 있는 사건이 무엇인지 살펴보며 기획을 꼼꼼하게 확인할 수도 있다.

 

그림2. 주문 프로세스

  • "상품준비 중" 상태인 경우엔 "주문 취소"를 할 수 있고, "수령 완료" 상태인 경우엔 주문 취소가 아닌 "반품"을 해야 한다.
  • "배송 중" 상태에서 발생할 수 있는 유일한 사건이 "배송 완료"라는 점을 통해, 배송 중엔 "주문 취소"를 하거나 "반품"을 할 수 없다는 점을 명확히 파악할 수 있다. 현재 시스템에 배송 중 변심한 경우 고객이 할 수 있는 일은 수령한 후 반품을 하는 것 뿐이다.

상태 전이 표는 아래와 같다.

 

  주문 준비 완료 배송 완료 반품 반품 중 주문 취소
(초기 상태) 상품준비 중 X X X X X
상품준비 중 X 배송 중 X X X 취소 완료
배송 중 X X 수령 완료 X X X
수령 완료 X X X 반품 중 X X
반품 중 X X X X 취소 완료 X
취소 완료 X X X X X X

 

기획 변경

원래는 카드결제만을 받았는데 무통장입금도 받도록 기획을 바꿔보자.

 

현실에서 기획이 바뀌는 일은 흔하다. 기획 도중 시간이 흘러서 비즈니스 요구사항이 바뀌었을 수도 있고, 원래 있던 요구사항을 뒤늦게 파악했을 수도 있다. 또는 동일한 요구사항을 만족시킬 수 있는 다른 방안이 떠올랐을 수도 있다.

 

이제 그림이 아래와 같이 바뀐다.

 

그림3. 무통장입금 추가

"입금대기 중" 상태가 추가되었고, "시작 상태"에서 "신용카드 주문"인지 "무통장입금 주문"인지에 따라 서로 다른 상태로 이동하도록 수정하였다.

 

하지만 이걸로 다 된걸까? 기획에 새로운 내용이 추가될 때 발생하는 어려움은 종종 추가된 내용 그 자체에서 발생하기보다는, 추가된 내용이 기존 기획에 미치는 영향을 파악하고 기존 기획을 적절히 수정하는 데서 발생한다. 이런 상황에서 상태 전이 표를 그려보면 도움이 된다.

 

  ... ... ... ... 무통장입금 주문
... ... ... ... ... ?
... ... ... ... ... ?
... ... ... ... ... ?
... ... ... ... ... ?
... ... ... ... ... ?
입금대기 중 ? ? ? ? ?

 

"입금대기 중" 상태가 추가되었으므로 행을 하나 더했다. "무통장입금 주문" 사건이 추가되었으므로 열을 하나 더했다. 이로 인해 표에 새로운 빈 칸들이 생겨나는데(위 표에서 물음표로 표시한 부분들), 각 빈 칸을 하나씩 검토하며 어떤 내용이 들어갈 수 있는지 검토하면 새로 추가된 상태와 사건으로 인해 고려할 부분을 빠짐없이 챙길 수 있다.

 

예를 들면, 위 표를 채우는 과정에서 자연스럽게 "입금대기 중 상태에서 주문 취소를 하면 어떻게 처리해야 하는지" 고려할 필요가 있음을 발견하게 된다. 그 결과 아래와 같이 새로운 상태 전이를 추가할 수 있게 된다.

 

그림4. 빠진 상태의 발견

 

낙서하기

상태 전이를 나타낼 때 꼭 거창한 도구를 쓰기 보다는 종이나 태블릿 등에 간단하게 낙서를 하는 편이 더 유용한 경우가 많다. 대부분의 도식화 방법들은 이미 확정된 기획을 정리하는 도구로도 유용하지만, 그보다는 기획을 하는 과정에서 생각을 다듬는 도구로 쓸 때 더 가치가 있다.

 

그림5. 낙서하며 생각을 정리하기

 

한계와 개선안

상태 전이라는 관점은 세상을 "상태", "사건", "액션", "상태 전이"라는 네 가지 요소로 나누어 체계적으로 분석할 수 있다는 점에서 유용하다.

 

하지만 기획이 조금만 더 복잡해지면 이런 저런 문제점들이 발견되기 시작한다. 예를 들면, 시스템의 상태가 총 10개이고 발생할 수 있는 사건의 종류가 총 10개라면, 고려해야할 상태 전이는 무려 100개나 된다.

 

다음 글에서는 복잡한 상태 전이를 다루기 위해 위에서 설명한 개념들을 어떻게 확장할 수 있는지 살펴볼 생각이다.