# Flextudio

## Flextudio 가이드

- [GETTING STARTED](https://docs.flextudio.com/flextudio/starter/getting-started.md)
- [0. 플렉스튜디오 준비하기](https://docs.flextudio.com/flextudio/starter/getting-started/ready.md): 플렉스튜디오는 앱을 개발하는 데 필요한 모든 여정을 함께 합니다.  여러분의 아이디어를 시나리오 형태로 개발하고 앱을 구성하여 고객에게 전달하기 까지, 이 모든 과정을 플렉스튜디오에서 직접 해 나갈 수 있습니다.
- [1. 워크스페이스 시작하기](https://docs.flextudio.com/flextudio/starter/getting-started/start.md): 플렉스튜디오가 처음이거나 플렉스튜디오 홈페이지에서부터 워크스페이스를 어떻게 시작하는지 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [2. 시나리오 개발하기](https://docs.flextudio.com/flextudio/starter/getting-started/develop.md): 시나리오가 무엇인지 알아보고 본격적인 개발 시작하는 방법을 안내하는 페이지입니다.
- [3. 앱 배포하기](https://docs.flextudio.com/flextudio/starter/getting-started/deploy.md): 앱을 배포하기 위하여 어떻게 시나리오를 등록하고 레이아웃 구성을 설정하는지를 알아보겠습니다.
- [4. 앱 사용하기](https://docs.flextudio.com/flextudio/starter/getting-started/use.md): 라이브에 적용한 앱을 사용하는 방법에 대해 알아보겠습니다.
- [플렉스튜디오 로드맵](https://docs.flextudio.com/flextudio/starter/undefined.md): 플렉스튜디오를 사용하다가 막힌 부분이 있나요?
- [튜토리얼(Tutorial)](https://docs.flextudio.com/flextudio/starter/tutorial.md): 플렉스튜디오가 처음이라면 튜토리얼을 따라서 직접 시나리오를 개발하면서 필요한 개념들도 함께 학습할 수 있습니다. 플렉스튜디오에서 제공하는 튜토리얼은 개념과 실습을 함께 얻을 수 있는 플렉스튜디오 학습에 가장 중요한 과정입니다.
- [메모장 앱 만들기(필수)](https://docs.flextudio.com/flextudio/starter/tutorial/memo.md): 따라하며 만들 수 있는 \[메모장] 어플 만들기 튜토리얼의 목차 페이지입니다
- [1. \[Design\] 디자인하기](https://docs.flextudio.com/flextudio/starter/tutorial/memo/design.md): 메모장 앱을 직접 디자인해 보겠습니다.
- [2. \[Event\] 화면 이동 구현하기](https://docs.flextudio.com/flextudio/starter/tutorial/memo/event.md)
- [3. \[Data\] 컴포넌트에 데이터 연결 하기](https://docs.flextudio.com/flextudio/starter/tutorial/memo/data.md)
- [템플릿을 활용해 앱 만들기(초급)](https://docs.flextudio.com/flextudio/starter/tutorial/usedtrade.md): 따라 하며 만들 수 있는 \[중고거래 앱 물건 판매] 시나리오 만들기 튜토리얼의 목차 페이지입니다
- [0. 시나리오 생성하고 사용하기](https://docs.flextudio.com/flextudio/starter/tutorial/usedtrade/start.md)
- [1. \[Design\] 디자인 템플릿 사용하기](https://docs.flextudio.com/flextudio/starter/tutorial/usedtrade/design.md)
- [2. \[Event\] 클릭 시 스텝(Step) 이동하기](https://docs.flextudio.com/flextudio/starter/tutorial/usedtrade/event.md)
- [3. \[Data\] 컴포넌트에 데이터 연결하기](https://docs.flextudio.com/flextudio/starter/tutorial/usedtrade/data-1.md)
- [4. \[Data\] 이벤트 스크립트로 게시물 삭제 구현하기](https://docs.flextudio.com/flextudio/starter/tutorial/usedtrade/data-2.md)
- [약속잡기 앱 만들기(중급)](https://docs.flextudio.com/flextudio/starter/tutorial/undefined.md): 친구나 지인과 만남이 가능한 일정을 잡는 약속잡기 앱을 직접 만들어봅니다.  이 앱은 구글에서 제공하는  데이터베이스 Firestore를 활용합니다. Firestore는 무료로도 하나의 앱 정도는 운영해 볼 수 있을 만큼의 용량과 편의를 제공합니다.  이번 실습을 통해서 DB를 활용한 앱을 직접 배포까지 해보세요.
- [0. 시나리오 생성하기](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/0..md)
- [1. \[Data\] Firestore 준비](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/1.-data-firestore.md)
- [2. \[Event\] 약속 만들기](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/2.-event.md)
- [3. \[Data\] 약속 데이터 생성](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/3.-data.md)
- [4. \[Event\]약속 조회하기](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/4.-event.md)
- [5. 사용자 SNS로그인](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/5.-sns.md)
- [6. 앱 배포/링크](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/6..md)
- [7. \[Event\] 약속 회신하기](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/7.-event.md)
- [8. 배포하고 확인하기](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/8..md)
- [9. 추가 상세 가이드](https://docs.flextudio.com/flextudio/starter/tutorial/undefined/9..md)
- [개념 학습하기](https://docs.flextudio.com/flextudio/concept.md)
- [시나리오의 구성요소](https://docs.flextudio.com/flextudio/concept/scenario_component.md): 시나리오의 개념적 설명이 필요할 때 해당 페이지를 참고하여 개념을 익힐 수 있습니다. Step, 이벤트, 서비스라는 구성요소에 대해 생소하다면 해당 페이지를 참고하면 도움이 될 수 있습니다.
- [컬렉션(Collection)과 섹터(Sector)](https://docs.flextudio.com/flextudio/concept/collection-sector.md): 컬렉션에 대한 개념적 설명이 필요하다면 해당 페이지를 참고하세요. 또한 컬렉션 키와 섹터가 생소하다면 해당 페이지가 도움이 될 수 있습니다.
- [사용자 입력에 의한 데이터 변화](https://docs.flextudio.com/flextudio/concept/data.md): 사용자가 입력한 값에 의해 컬렉션이 변하는 방식과, 화면에 어떻게 나타나는지를 학습하려면 해당 페이지가 도움이 될 수 있습니다.
- [이벤트와 서비스 구동 방법](https://docs.flextudio.com/flextudio/concept/eventservice.md): 시나리오 스튜디오에서 이벤트, 서비스의 구동방식을 모르거나, 어떻게 이벤트가 발생하고 발생된 이벤트를 서비스와 연결시키는지 알고 싶다면 해당 페이지가 도움이 될 수 있습니다.
- [대체 텍스트 사용하기](https://docs.flextudio.com/flextudio/concept/alternative.md): 대체 텍스트를 활용해서 다국어, 컬렉션, 스크립트 부분의 데이터를 쉽게 출력 하고 싶다면 이 페이지가 도움이 될 수 있습니다.
- [\[심화\] Filter - 섹터(Sector) Status, Condition](https://docs.flextudio.com/flextudio/concept/filter-sector-status-condition.md): 모든 컬렉션에서 원하는 섹터를 필터링해서 연결하거나 수집할 수 있습니다. 필터를 사용하는 방법이 알고 싶다면 이 페이지가 도움이 됩니다.
- [\[심화\] Step의 구성과 생애주기](https://docs.flextudio.com/flextudio/concept/step.md): Step의 구성요소와 생애 주기에 대해 알고 싶다면 해당 페이지를 참고하세요. 시나리오 구성요소 중 하나인 Step에 대해 심화 학습을 하고 싶다면 해당 페이지가 도움이 될 수 있습니다.
- [\[심화\] 컬렉션의 카테고리](https://docs.flextudio.com/flextudio/concept/category.md): 이 페이지는 컬렉션의 심화 개념인 카테고리를 다룹니다. 카테고리라는 개념에 대한 이해가 필요하거나 컬렉션을 심화있게 학습하고 싶다면 해당 페이지가 도움이 될 수 있습니다.
- [\[심화\] 데이터의 상태관리(Sector Status)](https://docs.flextudio.com/flextudio/concept/sector-status.md): 섹터(Sector)에 대한 설명이 필요하다면 이 페이지가 도움이 될 수 있습니다.
- [\[심화\] 카테고리 연결관계](https://docs.flextudio.com/flextudio/concept/undefined.md): 이 페이지에서는 카테고리 간의 연결 관계를 설정하는 방법을 다룹니다. 두 개의 카테고리 사이에 연결 관계를 생성하거나, 이러한 연결 관계를 기반으로 화면에 데이터를 표시하는 방법을 학습하고 싶다면 해당 페이지가 도움이 될 수 있습니다.
- [워크스페이스 콘솔 인터페이스](https://docs.flextudio.com/flextudio/workspace/interface.md): 워크스페이스 콘솔은 Flextudio에서 제공하는 앱 통합 관리 서비스로, 앱 운영과 서비스 개발에 필요한 다양한 기능을 제공합니다. 이를 통해 사용자는 자신의 앱을 효율적으로 관리하고 개발할 수 있습니다.
- [앱](https://docs.flextudio.com/flextudio/workspace/interface/app.md)
- [시나리오 관리](https://docs.flextudio.com/flextudio/workspace/interface/app/scenario.md)
- [레이아웃관리](https://docs.flextudio.com/flextudio/workspace/interface/app/layout.md)
- [데이터연결](https://docs.flextudio.com/flextudio/workspace/interface/app/undefined.md)
- [고객관리](https://docs.flextudio.com/flextudio/workspace/interface/app/tenant.md)
- [링크앱팩설정](https://docs.flextudio.com/flextudio/workspace/interface/app/link-apppack.md)
- [링크관리](https://docs.flextudio.com/flextudio/workspace/interface/app/link.md)
- [서비스오류로그](https://docs.flextudio.com/flextudio/workspace/interface/app/service_errorlog.md)
- [SDK설정](https://docs.flextudio.com/flextudio/workspace/interface/app/setting-sdk.md)
- [앱정보설정](https://docs.flextudio.com/flextudio/workspace/interface/app/undefined-1.md)
- [앱팩](https://docs.flextudio.com/flextudio/workspace/interface/app-pack.md)
- [개발](https://docs.flextudio.com/flextudio/workspace/interface/develop.md)
- [시나리오](https://docs.flextudio.com/flextudio/workspace/interface/develop/scenario.md)
- [권한키관리](https://docs.flextudio.com/flextudio/workspace/interface/develop/authkey.md)
- [패키지설치](https://docs.flextudio.com/flextudio/workspace/interface/develop/packageadd.md)
- [데이터](https://docs.flextudio.com/flextudio/workspace/interface/data.md)
- [API 연동](https://docs.flextudio.com/flextudio/workspace/interface/data/api.md)
- [호스팅 폴더](https://docs.flextudio.com/flextudio/workspace/interface/data/undefined.md): 시나리오에 등록한 이미지와 파일을 저장하는 공간입니다.
- [FlexSQL](https://docs.flextudio.com/flextudio/workspace/interface/data/flexsql.md)
- [고객 관리](https://docs.flextudio.com/flextudio/workspace/interface/tenant-setting.md): 워크스페이스에서 관리하는 모든 고객(앱 사용자 그룹) 목록을 확인하고 고객 설정 페이지로 이동할 수 있습니다.
- [설정 페이지](https://docs.flextudio.com/flextudio/workspace/interface/tenant-setting/setting.md)
- [에뮬레이터](https://docs.flextudio.com/flextudio/workspace/interface/emulator.md): PC에서 모바일에서의 앱을 체험해 볼 수 있습니다.
- [워크스페이스 설정](https://docs.flextudio.com/flextudio/workspace/interface/ws-setting.md)
- [기본정보](https://docs.flextudio.com/flextudio/workspace/interface/ws-setting/info.md)
- [개발자 관리](https://docs.flextudio.com/flextudio/workspace/interface/ws-setting/developer.md): 개발자 관리는 워크스페이스에서 작업할 수 있도록 권한을 부여하는 곳입니다.
- [Flex API Key관리](https://docs.flextudio.com/flextudio/workspace/interface/ws-setting/developer-1.md): Flex API Key는 워크스페이스에서 Flextudio API를 호출하기 위한 API Key를 관리하는 곳입니다.
- [시나리오 스튜디오 인터페이스](https://docs.flextudio.com/flextudio/scenario/interface.md): 시나리오 UI를 설명하는 페이지입니다.
- [상단영역](https://docs.flextudio.com/flextudio/scenario/interface/toparea.md): 시나리오 스튜디오 상단 영역 기능입니다.
- [시나리오 관리](https://docs.flextudio.com/flextudio/scenario/interface/management.md): 시나리오 관리 패널에서는 시나리오 정보를 변경하거나 삭제하고,  편집내역을 관리할 수 있습니다.
- [시나리오 설정](https://docs.flextudio.com/flextudio/scenario/interface/undefined.md): 익스플로러에 시나리오명을 클릭하면 추가 시나리오 설정을 할수있습니다.
- [시나리오 배포](https://docs.flextudio.com/flextudio/scenario/interface/deploy.md): 시나리오 배포 패널에서는 수정한 시나리오를 앱에서 사용할 수 있도록 배포하며, 버전 관리로 인해 이전 버전의 시나리오도 확인할 수 있습니다.
- [테마색 설정](https://docs.flextudio.com/flextudio/scenario/interface/deploy-1.md): 워크스페이스에서 테마색을 추가 및 설정할 수 있습니다. 앱 아이덴티티 또는 브랜드 색상등을 테마색으로 설정해 시나리오를 디자인하고, 앱 설정에서 해당 테마색을 연결해 앱에 일관된 브랜드 경험을 제공해 앱의 전반적인 가치를 높일 수 있습니다.
- [하단패널-Collection](https://docs.flextudio.com/flextudio/scenario/interface/collection.md)
- [하단패널-DataBase](https://docs.flextudio.com/flextudio/scenario/interface/database.md)
- [하단패널-Authkey](https://docs.flextudio.com/flextudio/scenario/interface/authkey.md): 시나리오에서 적용한 권한키들이 리스트로 조회되며 추가/삭제도 가능합니다.
- [DB 연결하기](https://docs.flextudio.com/flextudio/scenario/interface/db.md): FlexDB를 연결하면 시나리오에서 필요한 Table 정보와 간단한 입출력 이벤트까지 시나리오 스튜디오에서 함께 생성할 수 있습니다.
- [디자인 모드 (Design Mode)](https://docs.flextudio.com/flextudio/scenario/design-mode.md): 디자인 모드에서는 화면의 흐름을 설계하고 화면내 컴포넌트를 배치하고 디자인 아이덴티티를 입힐 수 있습니다.
- [디자인 템플릿](https://docs.flextudio.com/flextudio/scenario/design-mode/template.md): 레아이웃이나 시나리오에 적용할 수 있는 템플릿을 제공합니다.
- [고정 그룹](https://docs.flextudio.com/flextudio/scenario/design-mode/fixed-layout.md): Step 상단이나 하단에 Group을 고정하는 속성입니다. 스크롤을 이동해도 해당 요소는 설정한 위치에 고정되어 있습니다.
- [너비 높이](https://docs.flextudio.com/flextudio/scenario/design-mode/width-height.md): 컴포넌트의 사이즈를 설정할 수 있는 속성입니다.
- [마진](https://docs.flextudio.com/flextudio/scenario/design-mode/margin.md): 컴포넌트를 기준으로 바깥쪽 여백을 설정하는 속성입니다.
- [패딩](https://docs.flextudio.com/flextudio/scenario/design-mode/padding.md): 컴포넌트를 기준으로 내부로 여백을 설정하는 속성입니다.
- [배경](https://docs.flextudio.com/flextudio/scenario/design-mode/background.md): 컴포넌트의 배경색상 또는 배경 이미지를 설정하는 속성입니다.
- [배치](https://docs.flextudio.com/flextudio/scenario/design-mode/display.md): Group에 추가하는 하위 컴포넌트의 배치 방식을 설정합니다.
- [보더](https://docs.flextudio.com/flextudio/scenario/design-mode/border.md): 컴포넌트의 테두리를 설정하는 속성입니다.
- [색상](https://docs.flextudio.com/flextudio/scenario/design-mode/color.md): 컴포넌트의 색상을 바꿔 서비스의 통일감과 디자인의 완성도를 올릴 수 있어요.
- [스크롤 타입](https://docs.flextudio.com/flextudio/scenario/design-mode/scroll.md): Group, Layout에 가로 또는 세로에 스크롤 속성을 설정하는 기능입니다.
- [스타일 유형](https://docs.flextudio.com/flextudio/scenario/design-mode/default-style.md): 이 기능은 컴포넌트의 디자인 스타일을 변경할 수 있습니다. 이미 디자인된 스타일을 활용하면, 더 쉽고 편리하게 화면을 디자인할 수 있습니다.
- [아이콘](https://docs.flextudio.com/flextudio/scenario/design-mode/icon.md): 기본으로 제공되는 아이콘을 넣어 텍스트와 함께 전달력을 올릴 수 있어요.
- [절대값 위치 설정](https://docs.flextudio.com/flextudio/scenario/design-mode/absolute-position.md): 그룹 또는 컨트롤을 부모를 기준으로 특정 위치에 지정할 수 있습니다.
- [컨트롤 명](https://docs.flextudio.com/flextudio/scenario/design-mode/control-name.md): Explorer에 표기되는 컴포넌트의 명칭을 설정하는 속성입니다.
- [캡션](https://docs.flextudio.com/flextudio/scenario/design-mode/caption.md): 인풋 박스 내용을 설명하는 캡션의 속성을 변경할 수 있어요.
- [텍스트](https://docs.flextudio.com/flextudio/scenario/design-mode/text.md): 컴포넌트 내에 작성한 텍스트 속성을 변경하여 텍스트의 중요도를 구분할 수 있어요.
- [투명도 설정](https://docs.flextudio.com/flextudio/scenario/design-mode/opacity.md): 그룹, 컨트롤에 투명도를 설정하여 보이지 않게 하거나 반투명으로 보이게 할 수 있어요.
- [힌트](https://docs.flextudio.com/flextudio/scenario/design-mode/placeholder.md): 컨트롤에 입력 데이터 전에 보여지는 힌트를 입력할 수 있는 설정입니다.  이 기능으로 데이터 입력 시 도움이 되는 예시를 표현할 수 있습니다.
- [인풋 컨트롤 변경](https://docs.flextudio.com/flextudio/scenario/design-mode/undefined.md): 인풋 컨트롤 사용 시 타입을 변경해 원하는 형식으로 사용자가 데이터를 입력하게 만들 수 있어요.
- [개발 모드 (Dev Mode)](https://docs.flextudio.com/flextudio/scenario/dev-mode.md): 개발 모드에서는 디자인 되어 있는 화면에 데이터를 연결하고 프로그램 로직을 구성할 수 있습니다.
- [컴포넌트(Component)](https://docs.flextudio.com/flextudio/scenario/dev-mode/component.md): 컴포넌트는 화면을 구성하는 모든 요소들을 지칭합니다.  컴포넌트 탭에서는 각 컴포넌트가 갖고 있는 속성값들을 보고 설정할 수 있습니다. 컴포넌트들의 성격과 분류에 따라 비슷한 속성들을 갖게 됩니다.
- [컴포넌트 상태](https://docs.flextudio.com/flextudio/scenario/dev-mode/component/status.md): 컴포넌트를 화면에서 숨기거나, 필수 입력 창으로 지정하거나, 비활성화 혹은 읽기 전용 모드를 지정할 수 있습니다. 컴포넌트 상태에 대한 개념이 필요하다면 해당 페이지가 도움이 될 수 있습니다.
- [로드스크립트](https://docs.flextudio.com/flextudio/scenario/dev-mode/component/loadscript.md): 컴포넌트가 로드되기 전 실행되는 스크립트입니다. 로드 스크립트를 통해 데이터에 따라 동적으로 컴포넌트 속성을 변경하는 등의 작업을 할 수 있습니다.
- [데이터(Data)](https://docs.flextudio.com/flextudio/scenario/dev-mode/component/data.md): 컴포넌트 프로퍼티 중 데이터 작업과 관련된 프로퍼티를 모아둔 영역입니다. 각 컴포넌트마다 항목이 달라지거나 영역이 존재하지 않을 수 있습니다.
- [이벤트(Event)](https://docs.flextudio.com/flextudio/scenario/dev-mode/component/event.md): 컴포넌트 설정 중 이벤트 작업과 관련된 설정을 모아둔 영역입니다. 컴포넌트마다 항목이 달라지거나 영역이 존재하지 않을 수 있습니다.
- [컴포넌트 동적 활용(컴포넌트 아이디)](https://docs.flextudio.com/flextudio/scenario/dev-mode/component/id.md): 사용자의 행동이나 컴포넌트의 상태에 맞춰서 더 다양한 변화를 만들 수 있습니다. 컴포넌트 아이디를 이용하면 HTML 요소의 접근을 통해 Web에서 활용 가능한 기능들을 직접 만들어 낼 수 있습니다.
- [이벤트](https://docs.flextudio.com/flextudio/scenario/dev-mode/event.md): 사용자의 행동에 반응하여 앱이 동작하도록 주요 기능을 개발합니다. 이벤트에서는 화면을 제어하거나 서비스를 통한 데이터 처리가 가능하고 Javascript를 활용해서 높은 자유도로 원하는 기능을 직접 구현할 수 있습니다.
- [이벤트 서비스 스크립트 API 액션 추가](https://docs.flextudio.com/flextudio/scenario/dev-mode/event/add_script_action.md)
- [API 호출](https://docs.flextudio.com/flextudio/scenario/dev-mode/event/api.md)
- [함수 자동 생성](https://docs.flextudio.com/flextudio/scenario/dev-mode/event/automatic_function_generation.md): 함수 자동 생성을 이용해 푸시 알림, GPS와 같은 복잡한 기능을 간편하게 구현할 수 있습니다.
- [스크립트 에디터](https://docs.flextudio.com/flextudio/scenario/dev-mode/event/script-editor.md): 이벤트 탭에서는 스크립트를 활용하여 좀 더 유연한 개발을 할 수 있습니다. 이벤트 스크립트 작성법을 모르거나 스크립트 도우미에 대한 정보가 필요하다면 해당 페이지가 도움이 될 수 있습니다.
- [서비스](https://docs.flextudio.com/flextudio/scenario/dev-mode/service.md): 서버, DB API 에서 데이터를 가져오거나 전달하기 위해서 서비스를 등록합니다. 등록한 서비스는 이벤트(Event)나 데이터소스(DataSource)에서 연결하여 사용할 수 있습니다.
- [FlexSQL](https://docs.flextudio.com/flextudio/scenario/dev-mode/service/flexsql.md)
- [FlexAutoQuery](https://docs.flextudio.com/flextudio/scenario/dev-mode/service/flexautoquery.md)
- [Firestore](https://docs.flextudio.com/flextudio/scenario/dev-mode/service/firestore.md)
- [GoogleSheet](https://docs.flextudio.com/flextudio/scenario/dev-mode/service/googlesheet.md)
- [Flextudio API - User](https://docs.flextudio.com/flextudio/scenario/dev-mode/service/flextudio-api-user.md)
- [데이터소스](https://docs.flextudio.com/flextudio/scenario/dev-mode/datasource.md): 데이터소스(DataSource)는 컴포넌트에서 선택지나 검색으로 활용할 데이터들을 연결하는 방식입니다. 직접 데이터를 입력한 후 고정해서 활용하거나 서비스에 연결해 필요할 때마다 데이터를 가져오도록 할 수 있습니다.
- [Etc](https://docs.flextudio.com/flextudio/scenario/dev-mode/etc.md): Etc는 프로그램의 핵심 동작에 영향을 주지는 않지만,  보조적인 추가 설정이 필요한 내용을 모아 둔 탭입니다.
- [Collections](https://docs.flextudio.com/flextudio/scenario/dev-mode/etc/collections.md): 서비스를 통해 외부에 보내고 받는 데이터의 데이터형을 고정시킬 수 있습니다.
- [Language](https://docs.flextudio.com/flextudio/scenario/dev-mode/etc/language.md): 대체 텍스트를 사용하여 다국어 지원을 위한 언어별 텍스트를 설정할 수 있습니다.
- [Scenario](https://docs.flextudio.com/flextudio/scenario/dev-mode/etc/scenario.md): 앱의 상단에 시나리오별로 원하는 제목을 설정할 수 있습니다.
- [컴포넌트](https://docs.flextudio.com/flextudio/scenario/component.md): 시나리오를 구성하는 요소인 컴포넌트에 대해 알아보겠습니다.
- [스텝](https://docs.flextudio.com/flextudio/scenario/component/step.md): 시나리오를 구성하는 단위이며 여러 스텝이 연결되면 하나의 시나리오가 됩니다. 모바일에서는 각각의 뷰로 보입니다.
- [그룹](https://docs.flextudio.com/flextudio/scenario/component/group.md): 그룹은 그룹과 컨트롤을 감싸는 컴포넌트 입니다. 스텝의 최상위 컨텐츠나 그룹 하위의 컨텐츠로 존재할 수 있습니다.
- [컨트롤](https://docs.flextudio.com/flextudio/scenario/component/control.md): Flextudio에서 제공하는 컨트롤을 컴포넌트와 함께 사용할 수 있습니다.
- [Approval](https://docs.flextudio.com/flextudio/scenario/component/control/approval.md): Approval 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Button](https://docs.flextudio.com/flextudio/scenario/component/control/button.md): Button컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [CalendarNavigator](https://docs.flextudio.com/flextudio/scenario/component/control/calendarnavigator.md): 날짜를 직관적으로 보여주고 손쉽게 날짜를 선택하는 기능이 필요하다면 이 페이지가 도움이 될 수 있습니다.
- [Calendar Schedule](https://docs.flextudio.com/flextudio/scenario/component/control/calendar-schedule.md): 일정을 관리 하거나, 날짜와 관련된 데이터를 관리하고 싶을 때 Calendar Schedular를 사용하세요.
- [Checkbox](https://docs.flextudio.com/flextudio/scenario/component/control/checkbox.md): 클릭 이벤트로  '선택'또는 '선택 해제'하는 옵션을 사용할 경우 해당 컨트롤이 도움이 될 수 있습니다.
- [ComboBox](https://docs.flextudio.com/flextudio/scenario/component/control/combobox.md): 콤보 상자를 사용하여 여러 옵션들을 드랍다운 형식으로 선택하고 싶은 경우 해당 컨트롤이 도움이 될 수 있습니다.
- [DatePicker](https://docs.flextudio.com/flextudio/scenario/component/control/datepicker.md): 날짜(년, 월, 일)를 지정하거나 특정일 또는 기간을 선택할 수 있는 기능을 구현하고 싶다면 해당 컨트롤을 활용할 수 있습니다. DatePicker 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Embed](https://docs.flextudio.com/flextudio/scenario/component/control/embed.md): 원하는 HTML 태그를 직접 삽입하고 싶으시면 Embed 컨트롤이 도움이 될 수 있습니다.
- [FileUpload](https://docs.flextudio.com/flextudio/scenario/component/control/fileupload.md): FileUpload(파일업로드) 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Image](https://docs.flextudio.com/flextudio/scenario/component/control/image.md): Image(이미지) 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [InputDate](https://docs.flextudio.com/flextudio/scenario/component/control/inputdate.md): 주어진 데이터 목록 내에서 검색하는 기능을 구현하려면 해당 컨트롤을 활용할 수 있습니다. InputDate 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [InputMask](https://docs.flextudio.com/flextudio/scenario/component/control/inputmask.md): InputMask컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [InputNumber](https://docs.flextudio.com/flextudio/scenario/component/control/inputnumber.md): InputNumber 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [InputSearch](https://docs.flextudio.com/flextudio/scenario/component/control/inputsearch.md): 주어진 데이터 목록 내에서 검색하는 기능을 구현하려면 해당 컨트롤을 활용할 수 있습니다. InputSearch 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [InputText](https://docs.flextudio.com/flextudio/scenario/component/control/inputtext.md): InputText 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Line](https://docs.flextudio.com/flextudio/scenario/component/control/line.md): Line 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [MultiInputBox](https://docs.flextudio.com/flextudio/scenario/component/control/multiinputbox.md): MultiInputBox 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Radio](https://docs.flextudio.com/flextudio/scenario/component/control/radio.md): 사용자가 여러 개의 옵션 중에서 1개의 옵션만 선택할 수 있는 버튼 컨트롤 입니다.
- [Sheet (Beta)](https://docs.flextudio.com/flextudio/scenario/component/control/sheet-beta.md): Sheet 컨트롤의 사용법이나 개념, 동작방식이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Signature](https://docs.flextudio.com/flextudio/scenario/component/control/signature.md): 전자 서명이나, 단순한 그리기에 활용할 수 있는 Canvas 기능이 필요하다면 이 페이지가 도움이 될 수 있습니다.
- [Tab](https://docs.flextudio.com/flextudio/scenario/component/control/tab.md): Tab 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [Text](https://docs.flextudio.com/flextudio/scenario/component/control/text.md): Text 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [TimeTable](https://docs.flextudio.com/flextudio/scenario/component/control/timetable.md): 타임라인순서로 예약하는 기능이 필요하다면 TimeTable을 사용할 수 있습니다.
- [Tree](https://docs.flextudio.com/flextudio/scenario/component/control/tree.md): Tree(트리) 구조의 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.
- [스텝 버튼](https://docs.flextudio.com/flextudio/scenario/component/step-button.md): 스텝의 하단에 위치한 버튼으로 화면이 이동하기 전에 저장, 취소와 같은 이벤트를 연결시켜 처리할 수 있습니다.
- [디버거 인터페이스](https://docs.flextudio.com/flextudio/debugger/interface.md): 디버거 UI를 설명하는 페이지입니다.
- [실행 내역 확인하기](https://docs.flextudio.com/flextudio/debugger/contents.md): 디버거 화면의 실행 내역 확인하기 영역 설명입니다. 디버깅 시 Step별로 실행되는 이벤트, 서비스등의 흐름을 파악하고 싶다면 해당 기능이 도움이 됩니다. 또한 해당 영역의 에러, 알림 문구들을 통해 개발 시 도움을 받을 수 있습니다.
- [콘솔](https://docs.flextudio.com/flextudio/debugger/console.md): 콘솔(console) 탭에 대한 설명입니다.
- [데이터 상태 확인하기](https://docs.flextudio.com/flextudio/debugger/data.md): 카테고리, 컬렉션 탭에 대한 설명입니다. 디버깅 시 컬렉션의 데이터 상황을 파악하고 싶다면 해당 기능이 도움이 됩니다.
- [서비스 테스트](https://docs.flextudio.com/flextudio/debugger/service-test.md): 디버거에서 Service 테스트를 할 수 있는 기능입니다. 디버깅 시 FlexSQL과 API 호출 테스트가 필요하다면 해당 기능이 도움이 됩니다.
- [Test-API](https://docs.flextudio.com/flextudio/debugger/service-test/test-api.md): Test-API는 워크스페이스의 \[API 연동] 메뉴에서 생성한 내용을 테스트 할 수 있습니다.
- [Test-SQL](https://docs.flextudio.com/flextudio/debugger/service-test/test-sql.md): Test-SQL은 디버거에서 쿼리 스크립트를 실행시켜볼 수 있는 테스트 공간입니다. 쿼리 스크립트의 실행 결과는 디버거의 결과 영역에 표기되지만 시나리오의 데이터나 동작에 영향을 주지 않습니다.
- [스크립트 실행 중 디버깅 하기](https://docs.flextudio.com/flextudio/debugger/undefined.md): 스크립트가 중간에 중단점을 걸어서 실행중인 값을 확인하는 방법입니다.
- [FAQ](https://docs.flextudio.com/flextudio/reference/faq.md)
- [단어집](https://docs.flextudio.com/flextudio/reference/voca.md)
- [권한키 (AuthKey)](https://docs.flextudio.com/flextudio/reference/voca/authkey.md)
- [이너블럭](https://docs.flextudio.com/flextudio/reference/voca/innerblock.md)
- [컬렉션 키](https://docs.flextudio.com/flextudio/reference/voca/collectionkey.md)
- [FlexDB](https://docs.flextudio.com/flextudio/reference/voca/flexdb.md)
- [공개앱(오픈앱)](https://docs.flextudio.com/flextudio/reference/voca/undefined.md)
- [ParamBlock/ResultBlock](https://docs.flextudio.com/flextudio/reference/voca/paramblock-resultblock.md)
- [\_SUID(suid)](https://docs.flextudio.com/flextudio/reference/voca/_suid-suid.md): Sector Unique Identifier
- [단축키](https://docs.flextudio.com/flextudio/reference/shortcut.md): 플렉스튜디오에서 사용 가능한 단축키 설명입니다
- [개발 예제](https://docs.flextudio.com/flextudio/reference/undefined.md)
- [스크롤 페이징 샘플](https://docs.flextudio.com/flextudio/reference/undefined/undefined.md): 스크롤이 끝날 때 추가로 데이터를 로드하는 스크롤 페이징 기능을 구현한 샘플입니다.
- [심화 실습](https://docs.flextudio.com/flextudio/reference/advanced-practice.md)
- [Google Map 그려주기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map.md)
- [1. Google Map 생성영역 생성](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map/1.md): Google Map 생성을 위한 HTML 영역을 생성하는 방법에 대해 알아보겠습니다.
- [2. 이벤트 구성하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map/2.md): Google Maps 라이브러리를 활용하여 사용자의 현재 위치를 기준으로 지도를 그리는 방법에 대해 알아보겠습니다.
- [3. 이벤트 연결하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map/3.md)
- [Naver Map 그려주기](https://docs.flextudio.com/flextudio/reference/advanced-practice/naver-map.md)
- [1. Naver Map 생성영역 생성](https://docs.flextudio.com/flextudio/reference/advanced-practice/naver-map/1.md): Naver Map 생성을 위한 HTML 영역을 생성하는 방법에 대해 알아보겠습니다.
- [2. 이벤트 구성하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/naver-map/2.md): Naver Maps 라이브러리를 활용하여 사용자의 현재 위치를 기준으로 지도를 그리는 방법에 대해 알아보겠습니다.
- [3. 이벤트 연결하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/naver-map/3.md)
- [QR코드 생성하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/qr.md)
- [1. 화면구성하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/qr/1.md): 생성한 QR코드를 보여줄 화면을 구성해 주도록 하겠습니다
- [2. 이벤트 구성하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/qr/2.md): QRCode 라이브러리를 활용하여 QR코드를 생성하고보여주는 방법에 대해 알아보겠습니다.
- [3. 이벤트 연결하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/qr/3.md)
- [목적지 경로 거리 및 시간 Google Map](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map-distance.md)
- [1. Google Map Distance Matrix API 추가하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map-distance/1.md): Distance Matrix API를 사용하기 위해 API연동에 모듈을 추가하는 방법에 대해 알아보겠습니다.
- [2. 화면 구성하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map-distance/2.md): 검색할 주소입력 영역과 결과를 보여줄 화면을 구성해 주도록 하겠습니다.
- [3. 이벤트 구성 및 연결하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map-distance/4.md): API연동에 추가한 distancematrix모듈을 이벤트로 구성하여 검색버튼에 연결하도록 하겠습니다.
- [4. API 호출 결과 후처리하기](https://docs.flextudio.com/flextudio/reference/advanced-practice/google-map-distance/5.md): API연동 기능을 사용할 때 원하는 형태로 변환하여 반환받도록 하겠습니다.
- [데이터 연동 방법](https://docs.flextudio.com/flextudio/reference/data-connection.md)
- [자사 API 백엔드 시스템](https://docs.flextudio.com/flextudio/reference/data-connection/api.md): Flextudio는 API를 통한 자사 백엔드 시스템과의 연동을 지원합니다. API연동을 위해서는 별도의 연동설정이 필요합니다.
- [외부 DB 연동](https://docs.flextudio.com/flextudio/reference/data-connection/db.md): Flextudio는 MySQL, MSSQL, Azure MSSQL 또는 Oracle에 대한 외부 DB 연동을 지원합니다. 외부 DB는 고객이 자체적으로 데이터베이스를 가지고 있을 경우 그것을 활용할 수 있는 방안 중 하나로 '외부'라는 단어는 플렉스튜디오 입장에서 지칭합니다.  외부 DB 연동을 위해서는 별도의 연동 설정이 필요합니다.
- [Firestore 연동](https://docs.flextudio.com/flextudio/reference/data-connection/firestore.md): Flextudio는 NoSQL DB인 Google의 Firestore와의 연동을 지원합니다. Firestore 연동을 하기 위해서는 Firebase 프로젝트의 서비스계정 비공개키가 필요합니다.
- [GoogleSheet 연동](https://docs.flextudio.com/flextudio/reference/data-connection/googlesheet.md): Flextudio는 Google의 spreadsheets와의 연동을 지원합니다. spreadsheets 연동을 하기 위해서는 Google Cloud 프로젝트의 사용자인증 정보가 필요합니다.
- [K-System 연동](https://docs.flextudio.com/flextudio/reference/data-connection/k-system.md): 영림원소프트랩의 K-System과 연동하여 ERP 내부 데이터를 연동해서 Flextudio 에서 개발 할 수 있습니다. K-System연동은 고객별로 개별 설정을 하게 되며, 같은 앱을 사용하는 고객 들이더라도 각 고객별로 설정(연동)된 K-System으로 동작하게 됩니다.
- [Airtable 연동](https://docs.flextudio.com/flextudio/reference/data-connection/airtable.md): Flextudio는 NoSQL DB인 Airtable과의 API를 통한 연동을 지원합니다. Airtable 연동을 하기 위해서는 Airtable 토큰과 테이블의 baseID가 필요합니다.
- [앱 출시하기 (SDK)](https://docs.flextudio.com/flextudio/reference/sdk.md): 이 가이드는 플렉스튜디오에서 앱을 배포한 후, 사용자가 실제로 이용할 수 있도록 각 플랫폼의 앱 스토어에 제출하고 심사 과정을 거쳐 공개하는 단계를 상세히 안내합니다. 앱 개발 경험이 없어도 쉽게 앱을 빌드하고 출시할 수 있습니다.
- [Android SDK](https://docs.flextudio.com/flextudio/reference/sdk/android-sdk.md): 안드로이드 앱 출시에 필요한 과정을 순서대로 따라하며 진행해보세요.
- [iOS SDK](https://docs.flextudio.com/flextudio/reference/sdk/ios-sdk.md): iOS 앱 출시에 필요한 과정을 순서대로 따라하며 진행해보세요.
- [Microsoft Entra SSO(Single Sign-On)](https://docs.flextudio.com/flextudio/reference/microsoft-entra-sso-single-sign-on.md): Microsoft의 Azure Entra ID(구 Azure Active Directory) 시스템을 샤용중인 고객이라면 Azure Entra SSO(Single Sign-On)를 이용하여 Microsoft 자격 증명을 Flextudio와 통합하여 로그인 할 수 있습니다.
- [Microsoft Azure Entra(구 AD) SSO](https://docs.flextudio.com/flextudio/reference/microsoft-azure-entra-ad-sso.md): Microsoft의 Azure Entra ID(구 Azure Active Directory) 시스템을 사용중인 고객이라면  Azure Entra에 oAuth 방식으로 Microsoft 자격 증명을 Flextudio와 연동할 수 있습니다. 자격증명을 연동하면 SSO로그인 뿐 아니라 Teams 와 아웃룩 기능을 함께 사용할 수도 있습니다.
- [Microsoft Teams, Outlook 연동](https://docs.flextudio.com/flextudio/reference/microsoft-teams-outlook.md): Microsoft의 Temas 메세지 보내기와, Outlook 일정 보내기 기능을 함께 사용할 수 있습니다. .


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on a page URL with the `ask` query parameter:
```
GET https://docs.flextudio.com/flextudio/starter/getting-started.md?ask=<question>
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.