# 시나리오의 구성요소

## 시나리오 구성의 3가지

시나리오 개발을 하기 위해선 시나리오 구성의 3가지 요소인 **Step, 이벤트, 서비스**에 대한 이해가 필요합니다. 

* 화면을 구성하는 **Step**
* 특정 시점에 프로그램의 작동을 지정할 수 있는 **이벤트**
* 서버나 DB와 데이터를 연결하는 **서비스**

Step, 이벤트 그리고 서비스의 개념을 이해하지 못하더라도 3요소가 있다는 것을 알았다면 충분합니다. 이어지는 글에서는 Step, 이벤트, 서비스에 대해 순차적으로 설명합니다. 설명을 통해 개념을 알아보고 구성 요소들을 이해할 수 있습니다. 

### 화면을 구성하는 단위 Step

Step은 화면에 보여지는 단위 입니다. 

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fh5zfU9O0GCoCZiKMcDdH%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-06-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.10.12.png?alt=media&#x26;token=da180084-7bf8-446d-b656-1beb2225e28b" alt=""><figcaption><p>실제 시나리오 개발화면 모습</p></figcaption></figure>

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F1ouB1THnVaGJ9UNglb1U%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-06-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.11.39.png?alt=media&#x26;token=fdfd2172-d71c-45e2-832c-4006ead654e9" alt=""><figcaption></figcaption></figure>

위의 이미지처럼 시나리오는 Step 단위로 개발할 수 있습니다.

예시를 보여드리겠습니다. 아래는 중고거래 시나리오입니다.&#x20;

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FbYFsgpoffCH1oVJaHFrc%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-06-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.12.44.png?alt=media&#x26;token=45237747-2044-4e54-9e63-308d2db8001f" alt=""><figcaption></figcaption></figure>

이미지에서는 여러 개의 Step이 모여 한 개의 시나리오를 이루고 있습니다. 각 Step은 '내 물건 팔기', '내 동네 설정' 등 다른 화면을 보여줍니다. 이처럼 개발하려는 화면 단위로 Step을 구성하고 특정 상황에서 Step 단위로 유저에게 보이게 됩니다.&#x20;

### 사용자와 이벤트

이벤트는 앱을 사용하는 유저의 행위로 발생하는 사건입니다. 예를 들어 '특정 버튼을 누르는 것', '값을 입력하는 것'같은 모든 행위가 이벤트를 발생시킵니다.&#x20;

앱을 사용하는 사용자가 버튼을 누르거나 입력 등의 행위를 할 때 이벤트를 통해서 [컬렉션](#undefined-1)의 데이터를 변경하거나 보이고 있는 화면을 제어할 수 있습니다.

{% hint style="info" %}
컬렉션은 시나리오가 시작해서 종료될 때까지 모든 데이터의 흐름을 관리하는 곳으로 플렉스튜디오에서 데이터를 다루는 고유한 개념입니다. 이 시점에서는 간단하게 데이터라고 이해하고 넘어가셔도 됩니다.\
\
컬렉션에 대한 자세한 설명은 하단의 [#undefined-1](#undefined-1 "mention")에서 확인할 수 있습니다.
{% endhint %}

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FQH27XJknnzAzS87XCblo%2F%E1%84%80%E1%85%A2%E1%84%82%E1%85%A7%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%85%E1%85%B5_%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3%20(1).gif?alt=media&#x26;token=272b707c-17b7-4acb-aa5f-4cc066eae9cf" alt=""><figcaption><p>이벤트로 발생하는 과정을 도식화한 이미지</p></figcaption></figure>

### 서비스를 통한 DB 연결

서비스는 DB나 외부 API와 데이터를 주고받기 위해서 사용합니다. 컬렉션에서 데이터를 서비스를 통해 DB에 보내고 받은 결과를 다시 컬렉션에 반영하게 됩니다.

{% hint style="info" %}
컬렉션은 시나리오가 시작해서 종료될 때까지 모든 데이터의 흐름을 관리하는 곳으로 플렉스튜디오에서 데이터를 다루는 고유한 개념입니다. 이 시점에서는 간단하게 데이터라고 이해하고 넘어가셔도 됩니다.\
\
컬렉션에 대한 자세한 설명은 하단의 [#undefined-1](#undefined-1 "mention")에서 확인할 수 있습니다.
{% endhint %}

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fm4cLZQaMZhOdon2pXqJP%2F%E1%84%80%E1%85%A2%E1%84%82%E1%85%A7%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%85%E1%85%B5_%E1%84%89%E1%85%A5%E1%84%87%E1%85%B5%E1%84%89%E1%85%B3.gif?alt=media&#x26;token=b554c6cc-ec16-4820-8cdf-00a5813fc3aa" alt=""><figcaption><p>서비스로 발생하는 과정을 도식화한 이미지</p></figcaption></figure>

이벤트 > 서비스 연결을 더 자세히 알고 싶다면 [eventservice](https://docs.flextudio.com/flextudio/concept/eventservice "mention") 페이지를 참고하세요.

## 시나리오의 생애 주기와 데이터

컬렉션은 시나리오가 시작해서 종료될 때까지 모든 데이터의 흐름을 관리하는 곳입니다.

컬렉션은 아래와 같은 특징을 갖습니다.

* 시나리오가 동작하는 동안 데이터를 관리하는 컬렉션이 생성됩니다.
* 각 스텝은 컬렉션에 있는 데이터를 기반으로 구현되고
* 데이터의 생성이나 수정은 모두 컬렉션에서 이뤄지게 됩니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FsECuqdVjXzehk4JNRLUb%2F%E1%84%80%E1%85%A2%E1%84%82%E1%85%A7%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%85%E1%85%B5_%E1%84%89%E1%85%B3%E1%84%90%E1%85%A6%E1%86%B8-%E1%84%8F%E1%85%A5%E1%86%AF%E1%84%85%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB.gif?alt=media&#x26;token=3219dec7-1fb2-46cd-a91e-57ee059a773b" alt=""><figcaption></figcaption></figure>

컬렉션에 대한 자세한 설명은 다음 챕터인 [collection-sector](https://docs.flextudio.com/flextudio/concept/collection-sector "mention")페이지에서 이어집니다.

## 챕터 마무리

이번 챕터에서는 시나리오 구성 요소의 3요소에 대해 알아보았습니다. 또한 컬렉션이라는 개념에 대해 가볍게 살펴보았습니다. 다음 챕터에서는 컬렉션과 데이터에 대해 자세히 알아보겠습니다.&#x20;

Step의 구성요소에 대한 심화 학습을 위해서는 [step](https://docs.flextudio.com/flextudio/concept/step "mention") 페이지를 참고하세요.