[마침표] 01. State Diagram / Flowchart

Mermaid를 활용하여 상태 다이어그램과 플로우차트를 간단하게 구현하였다.

 

일반적인 CRUD 기반 프로젝트라면 ER Diagram 또는 Wireframe을 먼저 진행한다.

그러나 이 앱은 시간과 사용자의 행위에 따른 데이터의 상태가 엄격해야 하기 때문에 State Diagram과 Flowchart를 먼저 진행하였다.

 

1. State Diagram

State Diagram을 통해 "오늘의 문장"이라는 객체가 시간과 사용자 행위에 따라 어떻게 변하는지를 정의하였다.

일반적인 게시글과 달리, 이 앱의 기록은 수정 가능한 시간에 제한이 있다. 따라서 Closed 상태와 Locked 상태를 분리하였다.

 

핵심 로직

• Expired (만료): 사용자가 앱을 켜지 않아도 시간이 흐르면 데이터는 Empty에서 Expired로 상태가 바뀐다.
• Locked (영구 확정): 익일 새벽 4시(아직 확정은 아님)가 지나면, 사용자가 작성한 문장(Closed)이나 기록하지 않음(닫지 않음, Skipped) 상태는 수정 불가능한 Locked 상태로 변경된다.

---

2. Flowchart

 

State Diagram에서 정의한 상태를 기반으로 사용자가 앱을 이용하는 흐름을 구성했다.

 

앱 실행 시 사용자의 현재 상태를 파악하여 화면을 분기한다.