사용 가이드로 건너뛰기
State Machine작성자 Owl-Listener

State Machine 스킬.

컴포넌트의 각 상태에서 다음에 일어날 수 있는 일을 설명합니다.

  • 인터랙션 디자인
  • 동작 모델링
소스 검토 · State MachineSKILL.md
작업 인터랙션 디자인 결과물 • 하나의 구체적인 관심사에 대한 상태 및 이벤트 목록 • 가드와 진입 또는 종료 액션이 포함된 전환 맵 • 검토를 위한 오류, 복구, 불가능한 상태 사례 시작하기 전에 필수로 지정된 state-machine 패키지는 없습니다. 실제 구현과 테스트는 이후 작업으로 남습니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

복잡한 UI 상태를 명확하게 드러내세요

이벤트, 가드, 전환, 부수 효과, 복구를 다루는 UI 컴포넌트용 유한 상태 모델링 가이드입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

State Machine은 인터페이스 동작을 느슨하게 연결된 불리언 플래그가 아니라 명시적인 상태와 전환으로 모델링합니다. 컴포넌트를 움직이는 이벤트, 전환을 허용하는 가드, 그 과정에서 일어나는 액션을 파악합니다. 소스가 드는 예시는 폼, 데이터 요청, 인증, 다단계 마법사입니다.

목표는 테스트 가능한 동작 명세입니다. 각 상태에는 정의된 UI 표현이 필요합니다. 종료 상태가 아닌 상태에는 나가는 경로가 있어야 하며, 유효하지 않은 조합은 구현 전에 식별해야 합니다. 소스는 특정 state-machine 라이브러리를 선택하지 않으며, 완전한 증명을 자동으로 생성한다고 주장하지도 않습니다.

예상 결과물

  • 하나의 구체적인 관심사에 대한 상태 및 이벤트 목록.
  • 가드와 진입 또는 종료 액션이 포함된 전환 맵.
  • 검토를 위한 오류, 복구, 불가능한 상태 사례.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    상태와 이벤트 나열

    의미 있는 모드와 이를 바꿀 수 있는 모든 트리거에 이름을 붙이고, 정상 경로부터 시작합니다.

  2. 02
    유효한 전환 정의

    도착 상태, 조건, 부수 효과를 명시합니다. 설계에서 막아야 할 조합을 식별합니다.

  3. 03
    복구 및 UI 매핑 추가

    실패, 재시도, 취소, 종료를 모델링하고 각 상태에서 인터페이스가 어떻게 보이는지 보여줍니다.

02 활용 상황

사용 시기

필수로 지정된 state-machine 패키지는 없습니다. 실제 구현과 테스트는 이후 작업으로 남습니다.

적합한 경우

  • 상호작용하는 상태로딩, 검증, 권한, 오류 플래그가 모호한 조합을 만들 때 유용합니다.
  • 디자인에서 테스트로의 인계디자이너와 엔지니어에게 동작과 엣지 케이스에 대한 공통 어휘를 제공합니다.

확인할 한계

  • 애니메이션 완성도 작업 아님허용되는 동작을 정의할 뿐, 개별 마이크로 인터랙션의 타이밍이나 느낌을 다루지는 않습니다.
  • 라이브러리별 코드 아님소스는 XState나 다른 런타임을 요구하지 않고 모델링 접근법을 제공합니다.

준비할 입력

  • 컴포넌트 목표모델을 읽기 쉽게 유지하도록 하나의 동작 또는 관심사를 선택하세요.
  • 이벤트와 조건사용자 동작, 타임아웃, 응답, 권한, 검증 규칙을 포함하세요.
  • UI 결과눈에 보이는 상태와 기대되는 복구 동작을 제공하세요.

03 핵심 결정

중요한 결정

  1. 불가능한 상태를 조기에 발견

    임시 플래그가 우연히 허용할 수 있는 조합에 대해 모델이 결정을 내리게 합니다.

  2. 복구는 핵심 경로

    재시도, 취소, 복귀 경로가 없는 오류 상태는 막다른 길로 드러납니다.

04 예시 브리프

구체적인 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일을 함께 유지하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 구체적인 디자인 방법을 설명합니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/state-machine/SKILL.md

필수로 지정된 state-machine 패키지는 없습니다. 실제 구현과 테스트는 이후 작업으로 남습니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 조정하세요.

예시 브리프
state-machine을 사용해 검증, 진행률, 취소, 실패, 재시도가 있는 파일 업로드를 모델링하세요. 상태, 이벤트, 가드, 전환 부수 효과, UI 표현을 나열하세요. 어떤 동시 상태가 유효하지 않은지, 그리고 종료 상태가 아닌 모든 상태가 어떻게 빠져나갈 수 있는지 설명하세요. 아직 런타임 라이브러리는 선택하지 마세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 모든 상태가 눈에 보이는 UI 조건에 대응합니다.
  • 모든 전환에 이벤트와 필요한 가드가 있습니다.
  • 실패와 취소가 설명되지 않는 막다른 길을 남기지 않습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나, 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
이벤트, 가드, 전환, 부수 효과, 복구를 다루는 UI 컴포넌트용 유한 상태 모델링 가이드입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타는 날짜 기준의 인기 지표이며, 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

상태 머신은 복잡한 앱에만 필요한가요?

구체적인 폼이나 요청 흐름도 설명할 수 있습니다. 가치는 전체 애플리케이션의 규모가 아니라 상호작용하는 동작에 달려 있습니다.

가드란 무엇인가요?

유효한 입력이나 충분한 권한처럼, 전환이 허용되기 전에 참이어야 하는 조건입니다.

사용자 플로 다이어그램을 대체하나요?

아니요. 사용자 플로는 화면 간 경로를 강조하고, 상태 머신은 컴포넌트나 관심사 안에서의 유효한 동작을 강조합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/state-machine/SKILL.md