2. 핵심 개념

Projects, Pages, and Widgets Intro (프로젝트, 페이지, 위젯 소개)

Project

• 독립적으로 완결된 앱입니다 — 애플리케이션을 구성하는 모든 파일이 assets 폴더 아래에 정리되어 있습니다(pages, scripts, providers, theme 등). 새 프로젝트를 만들면 이 파일들이 자동으로 생성됩니다.
• 프로젝트를 만들고 관리하는 방법을 더 알아보려면 Manage Projects in Lucy Team Cloud 문서를 참고하세요.

Page

• Page는 앱의 화면 한 장이며, 화면 사이를 이동하는 단위입니다 — 내비게이션 레이어라고 생각하면 됩니다.
• 각 Page 안에는 실제로 동작하는 인터랙티브 콘텐츠를 담는 Form이 있습니다 — 인터랙션 레이어입니다.
• Form은 페이지의 위젯 트리, 스크립트, 데이터를 담고 있습니다.
• 참고: 여기서 말하는 Form은 FormContainer 위젯과는 다릅니다 — FormContainer 위젯은 하나의 Form 안에 다른 Form을 끼워 넣을 수 있게 해주는 위젯입니다.
• 페이지를 만들고 관리하는 방법을 더 알아보려면 Layout and Screen Design 문서를 참고하세요.

Widget

• Widget은 Form 안에 배치되는 시각적 구성 요소입니다.

Layout Concepts (레이아웃 개념)

• 레이아웃 위젯은 Lucy Studio에서 디자인을 이루는 가장 기본적인 구성 요소입니다. 페이지에 구조를 부여하고, 그 안에 담긴 위젯들을 정렬할 수 있게 해줍니다. Lucy Studio에서는 모든 레이아웃 위젯이 하나의 섹션으로 묶여 있지만, 개념적으로는 Basic, List, Area 세 그룹으로 나눠 생각할 수 있습니다.
• 아래는 이 위젯들에 대한 간단한 소개입니다. 개별 레이아웃 위젯과 그 속성, 더 깊이 있는 레이아웃 개념을 알아보려면 Layout and Screen Design과 Work with Widgets 문서를 참고하세요.

Basic Layout Widgets

레이아웃 위젯은 다른 위젯을 그 안에 담습니다. 레이아웃 안에 배치된 위젯은 그 레이아웃의 child(자식)이고, 레이아웃은 그 child의 parent(부모, 한 단계 위)입니다. 같은 parent를 공유하는 위젯들은 서로 sibling(형제, 같은 레벨)입니다. 이런 parent → child → sibling 구조를 위젯 트리(widget tree)라고 부릅니다.

• Column vs Row:

  • Column: 자식들을 위에서 아래로 배치합니다.
  • Row: 자식들을 왼쪽에서 오른쪽으로 배치합니다.

  

• Stack: 자식들을 서로 겹쳐서 쌓습니다 (팬케이크를 쌓은 모습을 떠올리면 됩니다).

  

• Wrap: 자식들을 한 줄로 배치하다가, 공간이 부족해지면 남는 것들을 다음 줄로 넘깁니다.

  

• Main-Axis vs Cross-Axis:

  • Column — Column은 자식을 위에서 아래로 배치하므로, main-axis(주축)는 세로 방향이고 cross-axis(교차축)는 가로 방향입니다.

  

  • Row — Row는 자식을 왼쪽에서 오른쪽으로 배치하므로, main-axis(주축)는 가로 방향이고 cross-axis(교차축)는 세로 방향입니다.

  

List Layout Widgets

• ListView: 1차원으로 스크롤되는 리스트
• GridView: 2차원 그리드 레이아웃
• MasonryGrid: 고정된 컬럼 안에 높이가 제각각인 카드를 배치

Area Layout Widgets

• SafeArea: 모바일 기기의 노치, 내비게이션 바, 홈 인디케이터와 겹치지 않도록 자동으로 여백을 추가합니다.
• Card: 그룹화된 콘텐츠를 담는 Material 스타일 카드 컨테이너
• PageView: 페이지 단위로 스크롤되는 뷰
• VSplit: 페이지 영역을 수직으로 분할
• HSplit: 페이지 영역을 수평으로 분할

Applying Style to Widgets (위젯에 스타일 적용하기)

모든 위젯은 위젯 스타일이라는 내부 데코레이터로 감쌀 수 있습니다. 다른 위젯을 담는 레이아웃 위젯과 달리, 위젯 스타일은 하나의 위젯을 감싸서 그 위젯 주변의 위젯 트리 구조는 바꾸지 않으면서 보이는 모습이나 동작 방식만 바꿉니다. 같은 위젯에 여러 스타일을 겹쳐 적용할 수 있으며, 가장 바깥쪽부터 안쪽 순서로 적용됩니다.

이 스타일들을 적용하고 사용하는 방법을 더 알아보려면 Styles 문서를 참고하세요.

Design System & Components (디자인 시스템 & 컴포넌트)

Design System

Lucy의 디자인 시스템은 Styles 대화상자에서 관리하는 재사용 가능한 스타일 모음입니다 — Text Styles, Color Themes, Icon Sets. 한 번 정의해두면 앱 전체에서 재사용할 수 있고, 정의를 바꾸면 그것을 쓰는 모든 곳이 자동으로 갱신됩니다. 덕분에 모든 화면이 일관된 모습을 유지할 수 있습니다.

• Text Styles: 이름이 붙은, 재사용 가능한 타이포그래피
• Color Themes: 이름이 붙은 색상으로, 라이트/다크 테마 변형을 가집니다. Color Theme는 테마를 인식하므로 하나의 색상이 라이트/다크에 따라 서로 다른 값을 가질 수 있고, 앱은 실행 중에 테마를 전환할 수 있습니다($app.changeTheme).
• Icon Sets: 재사용 가능한 아이콘 모음

Components

Lucy Studio의 Component는 한 번 만들어두고 앱 전체에서 재사용할 수 있는 위젯 그룹입니다. 마스터를 변경하면 앱 전체에 있는 그 인스턴스들이 함께 갱신됩니다. Lucy Studio에서 컴포넌트를 사용하는 방법을 더 자세히 알아보려면 Work with Widgets 문서를 참고하세요.

• Component vs. page — page는 이동 가능한 화면이고, component는 페이지 안에 끼워 넣는 재사용 가능한 조각입니다.
• Master vs. instance — 마스터 정의는 하나이고, 그것을 사용하는 각 위치가 인스턴스입니다. 인스턴스는 자신만의 값(인스턴스별 속성, 변수)으로 재정의할 수 있습니다.

Data Binding (데이터 바인딩)

Data Binding은 위젯 속성의 값이 어디서 오는지를 미리 정해두는 방법입니다. 위젯의 Properties 패널에서 속성을 고를 때, 이미 값을 담고 있는 사전 정의된 Data Set에 그 속성을 연결할 수 있습니다.

한 번 연결해두면, 연결된 소스가 바뀔 때마다 Lucy Studio가 자동으로 위젯을 최신 상태로 유지합니다. 스크립트로 값을 직접 설정하는 것과 다른 점이 바로 이 부분입니다 — 스크립트는 그 순간에 딱 한 번만 값을 밀어넣지만, 바인딩은 소스를 계속 지켜보다가 바뀔 때마다 반응합니다.

각 연결 대상에 대한 자세한 내용은 Data and State Management 문서를 참고하세요.

Script (스크립트)

Lucy Studio는 표준 JavaScript와 플랫폼 API를 결합해서 복잡한 로직과 동적인 동작을 구현할 수 있게 해줍니다. 예를 들어 사용자 이벤트에 실시간으로 반응하거나, 실행 중에 위젯 속성을 동적으로 바꾸거나, 서버에 데이터를 요청해서 화면에 반영하거나, 페이지 간 이동 같은 앱의 흐름을 제어할 수 있습니다.

화면에 배치된 위젯은 자동으로 스크립트 전역 객체로 등록되므로, 스크립트에서 위젯의 ID로 바로 그 위젯을 참조할 수 있습니다(예: button1.visible = false).

스크립트 작성 방법과 사용 가능한 전역 객체·함수에 대한 자세한 내용은 Logic and Scripting 문서를 참고하세요.

Animation Mode

Animation Mode는 코드를 작성하지 않고도 화면에서 바로 위젯의 동작 조건과 실행 로직을 구성할 수 있는 NoCode 로직 도구입니다. UI에서 조건과 반응을 선택하고 연결하는 것만으로 복잡한 인터랙션을 만들 수 있어서, 스크립트 없이도 빠르고 직관적으로 로직을 구성할 수 있습니다. 크게 세 가지 기능으로 구성됩니다.

• Detect Transition 변수나 위젯 속성 값의 변화를 감지해서, 설정해둔 조건이 충족되면 등록해둔 반응을 자동으로 실행합니다.
• State Transition 위젯이 다른 상태로 바뀔 때 재생되는 애니메이션 효과를 설정합니다. (예: 버튼의 색상이 다른 색으로 서서히 바뀌는 것)
• Action 특정 사용자 동작(이벤트)에 반응해서 실행할 로직을 설정합니다. (예: 버튼을 탭했을 때 다른 페이지로 이동) 여러 Action을 순차적으로 또는 동시에 실행할 수 있고, 조건에 따라 실행 여부를 제어할 수 있습니다.

자세한 내용은 Studio Interface 섹션을 참고하세요.

Workflow: Build in Studio, Preview in Player (워크플로우: 스튜디오에서 제작, 플레이어에서 미리보기)

What Lucy Player Is (Lucy Player란)

Lucy Player를 사용하면 Lucy Studio에서 만든 디자인을 실시간으로 테스트해볼 수 있습니다. iOS, Android, Windows, macOS에서 실행되므로 실제 기기에서 화면을 미리 볼 수 있습니다.

How Studio & Player Connect (Studio와 Player의 연결 방식)

Lucy Player와 Lucy Studio 사이의 연결은 환경에 따라 몇 가지 방식으로 이루어집니다.

• 같은 네트워크에 연결되어 있으면 Lucy Studio가 Lucy Player를 자동으로 찾습니다.
• 같은 컴퓨터에서 실행 중이면 Lucy Player가 즉시 감지되어 연결됩니다.
• 서로 다른 네트워크에 연결되어 있는 경우(예: 셀룰러 데이터를 사용 중인 경우)에는 Lucy Studio가 생성한 QR 코드를 스캔해야 합니다.

Live Preview (실시간 미리보기)

캔버스에서 페이지를 편집한 뒤에는 바로 실제 기기에서 그 편집 내용을 확인하며 디자인이 실제로 어떻게 보일지 볼 수 있습니다. Lucy Player와 연결하고, 화면을 보낼 기기를 선택한 뒤 Lucy Studio의 Action bar에서 재생 버튼을 누르기만 하면 됩니다. Lucy Player를 설정하고 Lucy Studio와 연결하는 더 자세한 단계는 Test and Debug 문서를 참고하세요.