Stately

캔버스가 곧 제품이다. 상태를 놓고 전이를 그리고 이벤트 이름을 그 자리에서 고친다. 가드, 액션, 설명은 옆 패널에서 다룬다. Design은 만드는 용도, Simulate는 이벤트를 하나씩 밟는 용도다. 둘 다 코드를 먼저 요구하지 않는다. 그래서 디자이너가 엔지니어와 같은 파일을 만질 수 있다.

두 문장으로 흐름을 설명하면 상태와 이벤트, 전이를 갖춘 머신을 만든다. 기존 머신을 골라 재시도 분기를 추가해 달라고 요청할 수도 있다. 지시는 이력에 남고, 생성할 때마다 버전이 자동 저장되어 다시 열 수 있다. 실험 기능이고 월 생성 횟수에 한도가 있으며, 흐름을 수정할 때는 머신 정의가 OpenAI로 전송된다.

시뮬레이션은 슬라이드쇼가 아니다. 머신용 React UI를 생성하므로 검토하는 사람이 진짜 버튼을 누르고 진짜 전이를 일으킨다. Pro 계정은 편집하는 동안 머신을 돌리는 라이브 시뮬레이션도 쓴다. 그림을 자꾸 잘못 읽는 팀이라면 결제 도중 취소를 눌렀을 때 무슨 일이 생기는지 보여 주는 가장 빠른 방법이다.

모든 머신은 자바스크립트나 타입스크립트로 나가며 Stately가 관리하는 오픈소스 XState 위에서 돈다. 잠금은 없다. Node 스크립트, React 앱, 백엔드 워커 어디서든 작동한다. 유료 플랜에서는 GitHub를 연결하거나 CLI로 저장소와 머신을 동기화하고, 그림과 코드 사이에서 변경이 양방향으로 흐른다.

Pro 계정은 테스트 경로를 생성한다. 머신이 지날 수 있는 경로를 나열해 테스터가 무엇을 시도할지 알게 한다. 버전 기록은 복원 가능한 스냅숏을 남기고, 에디터는 흐름을 마크다운 스토리, Mermaid 다이어그램, JSON으로 내보낸다. Figma 프레임을 얹으면 그림이 디자인 맥락까지 함께 지닌다.

프로젝트는 관련 머신을 묶고 누가 보는지를 정한다. 공개 프로젝트는 Discover 페이지에 뜨고, 목록 미공개는 링크로 열리며, 비공개는 팀 안에 머문다. 역할은 소유자, 관리자, 편집자, 뷰어다. Enterprise는 싱글 사인온, 감사 로그, 자체 호스팅, 자사 앱에 Stately를 넣는 옵션을 더한다.