Panel

Panel은 화면 우측에 위치하며, 현재 선택된 위젯의 상세 속성과 기능을 실시간으로 수정할 수 있는 패널입니다.

Canvas에서 선택한 위젯의 컬러, 폰트, 크기, 애니메이션, 이벤트, 데이터 바인딩 등 다양한 속성을 직관적으로 설정하고 수정할 수 있습니다.

작업 모드(Design Mode / Animation Mode)에 따라 Panel에서 설정할 수 있는 기능이 달라집니다.

구분	Design Mode	Animation Mode
주요 목표	앱의 기능, 구조, 데이터 연동을 정의	앱의 상호작용 및 시각적 효과를 정의
핵심 탭	Property, Style, Data Set, Provider Instance, Variable	Action, Detect Transition, State Transition
핵심 역할	위젯에 무엇을 보여주고, 어떤 데이터를 사용할지 설정	위젯에 어떤 일이 일어날 때, 어떻게 움직이게 할지 설정

---

Design Mode에서의 Panel 기능

Design Mode는 UI 배치, 데이터 연동, 변수 관리 등 앱의 기능과 구조를 개발하는 기본 작업 모드입니다.

이 모드에서 Panel은 **8개의 메뉴(Property, Style, State, Data Set, Variables, Provider Instance, i18n(다국어), Local History)**로 구성됩니다.

1. Property (속성) 탭

선택된 위젯의 기본적인 기능 및 동작 방식을 설정하는 영역입니다.

• 기본 속성 설정: 위젯의 이름, 표시 여부(Visibility), 위치 제어, 정렬(Alignment) 등 위젯의 고유 속성을 설정합니다.
• 위젯별 상세 설정: Page, Form, Row, Image 등 선택된 위젯의 종류에 따라 페이지 생성, 데이터 바인딩, 레이아웃 정렬 등 고유한 속성을 설정합니다.

2. Style (스타일) 탭

위젯의 시각적인 디자인 요소를 설정하는 영역입니다.

• 배경 및 외곽 설정: 배경색, 테두리(Border), 모서리 곱률(Radius), 박스 그림자(Box Shadow) 등을 설정합니다.
• 변환 (Transform): 위젯의 크기, 회전, 위치 등을 변환(Transform) 기능을 사용하여 조정합니다.
• 제스처 인식 (Gesture Detector): 위젯에 탭(Tap), 드래그(Drag) 등 사용자의 터치 제스처에 반응하는 이벤트를 설정할 수 있습니다.
• 꾸미기 (DecoratedBox): 위젯에 Box Decoration을 적용하여 복잡한 배경 디자인을 구현합니다.

3. Data Set (데이터 세트) 탭

위젯에 바인딩할 데이터의 구조 및 정의를 설정하는 영역입니다.

DataSet과 ProviderInstance 관계
Data Set은 UI에 바인딩하기 위한 구조화 데이터 컨테이너, Provider Instance는 외부 데이터 호출 담당입니다.

• Data Set 생성: 사용자 정의 Data Set을 생성하여 사용할 데이터의 항목(Group/Item)과 구조를 정의합니다.
• Provider Instance 연동: 이미 정의된 Provider Instance에 연결하여 데이터 구조를 가져와 Data Set에 정의할 수 있습니다.
• Data Binding: Contents Data Set을 활용하여 위젯에 데이터를 연결(바인딩)합니다.

4. Provider Instance (프로바이더 인스턴스) 탭

**외부 데이터 소스(API)**와의 통신을 정의하고 설정하는 영역입니다. 서버와의 데이터 송수신 로직을 관리합니다.

• Instance 생성: 사용할 데이터 Provider를 검색하고 선택하여 Instance를 생성합니다.
• Call 탭 설정: API 호출 시 필요한 파라미터를 설정하고 상수 값 또는 다른 위젯의 속성 값과 연결(바인딩)합니다.
• Response 탭 설정: API 호출 결과로 받는 응답 데이터 구조를 정의하고, 필요한 데이터만 추출하여 사용할 수 있도록 매핑합니다.

5. Variable (변수) 탭

앱 내에서 데이터를 임시로 저장하고 조작하기 위한 변수를 생성하고 관리하는 영역입니다.

• 변수 유형: 변수는 페이지 전체에서 유효한 Page Variable 또는 폼(Form) 내에서 유효한 Form Variable로 구분하여 생성할 수 있습니다.
• 복합 변수: Simple (단순) 변수나 항목을 가진 Complex (복합) 변수를 생성할 수 있습니다.
• Grid Variable: Grid 형태의 위젯에 사용될 변수를 생성하고 관리합니다.

6. State (상태) 탭

위젯이 hover, pressed, focused, disabled, selected 같은 상태일 때 속성값을 다르게 지정할 수 있는 영역입니다. (예: 버튼 배경색을 기본은 파랑, hover 시는 하늘색으로)

• 상태 등록: hover/pressed/focused처럼 마우스 진입·클릭 등으로 자동 감지되는 상태 외에, disabled/selected나 직접 정의한 커스텀 상태를 추가할 수 있습니다. 커스텀 상태는 스크립트나 바인딩으로 직접 켜고 끕니다.
• 속성 오버라이드: 상태별로 바꿀 속성과 값을 지정합니다.
• 전환 시간(Transition): 상태가 바뀌는 순간 값이 즉시 바뀌지 않고 지정한 시간(ms) 동안 부드럽게 바뀌도록 설정할 수 있습니다.
• Propagate to children: 하위 위젯에도 같은 상태를 함께 적용할지 설정할 수 있습니다.

7. i18n (다국어) 탭

위젯의 텍스트 등의 번역 가능한 문구를 언어별로 관리하는 영역입니다.

정보

이 탭은 Free 플랜에서 잠겨 있으며, Pro·Enterprise 플랜에서 사용할 수 있습니다.

• 자동 번역: [Auto Translate] 클릭하여 검색된 대상 TEXT를 한번에 자동 번역할 수 있습니다.
• 프로젝트의 지원 언어·기본 언어·자동 번역 서비스 설정은 별도 프로젝트 설정에서 관리합니다.

8. Local History (로컬 히스토리) 탭

작업 중인 내용을 정해진 간격마다 자동으로 기록해두는 로컬 전용 안전망 기능입니다. 실수로 저장을 놓쳐 작업 내용을 잃어버렸을 때, 이전 시점으로 되돌릴 수 있습니다.

• Auto Save(자동 저장): 편집 중일 때 정해진 간격(기본 30초, 설정에서 10초~5분으로 조절 가능)마다 현재 상태가 자동으로 기록됩니다.
• Manual Save(수동 저장): 원하는 시점에 설명(코멘트)을 남기며 직접 저장할 수 있습니다.
• Milestone(마일스톤): 저장된 버전 중 중요한 시점은 마일스톤으로 지정해 오래 보호할 수 있습니다.
• Compare(비교): 목록에서 두 시점을 선택해 무엇이 달라졌는지 비교해볼 수 있습니다.
• Restore(복원): 전체 또는 원하는 항목(스크립트, 화면 구성, 변수 등)만 선택해 이전 상태로 되돌릴 수 있습니다. 복원 전 현재 상태는 자동으로 백업됩니다.

경고

Local History는 내 PC에만 저장되는 로컬 전용 기록입니다. 프로젝트를 다른 컴퓨터로 옮기거나 팀원과 공유해도 히스토리 자체는 함께 옮겨지지 않습니다.

---

Animation Mode에서의 Panel 기능

Animation Mode는 위젯과 페이지 간의 애니메이션 및 인터랙션을 설정하는 작업 모드입니다.

이 모드에서 Panel은 **3개의 탭(Action, Detect Transition, State Transition)**으로 구성됩니다.

1. Action (액션) 탭

사용자의 특정 동작에 반응하여 실행될 로직을 설정하는 영역입니다. (예: 버튼 터치 시 페이지 이동)

• 이벤트 정의: 위젯에서 발생하는 **이벤트(Event)**를 선택하고, 해당 이벤트 발생 시 실행할 **액션(Action)**을 지정합니다.
• 순차적 실행: 여러 액션은 병렬(동시) 또는 순차적으로 실행할 수 있어 작업 흐름을 자유롭게 구성할 수 있습니다.
• 조건 설정: 특정 조건이 만족될 때만 액션이 실행되도록 설정할 수 있어 복잡한 로직을 구현할 수 있습니다.

2. Detect Transition (전환 감지) 탭

Lucy Studio에서 변수나 컨트롤의 속성값 변화를 관찰하다가, 설정한 조건이 달성되면 등록된 Event Response를 자동으로 실행하는 기능입니다.

• 실시간 상태 변화 감지 및 자동 이벤트 실행에 최적화된 기능입니다.
• 간단한 UI 조작만으로 원하는 조건과 반응을 손쉽게 등록, 수정할 수 있습니다.

3. State Transition (상태 전환) 탭

위젯이 **서로 다른 상태(State)**로 변경될 때 나타나는 미세한 애니메이션 효과를 설정하는 영역입니다. (예: 버튼 색상 변화)

• 트랜지션 타입: 타입의 종류로는 Layout, Action, Condition, Link가 있습니다.
  • Layout: 위젯에 있는 스타일을 포함한 프로퍼티의 수치를 Interval 동안 변경할 수 있습니다.
  • Action: 액션을 실행시킬 수 있습니다.
  • Condition: Condition이 참이면 해당 트랜지션 그룹을 실행시킬 수 있습니다.
  • Link: 해당 트랜지션 그룹을 실행시킬 수 있습니다.

Design Mode의 State(6번 탭)와는 다른 기능입니다.
State Transition은 특정 트리거가 발생했을 때 재생되는 타임라인 애니메이션이고, State는 "지금 이 상태인지 아닌지"에 따라 속성을 전환하는 기능입니다.