본문으로 건너뛰기

Hello, Lucy (Quick Start | 10 - 15min)

Welcome to Lucy Studio!
이 가이드는 Lucy Studio를 처음 사용하는 분들을 위해 준비했습니다.
간단한 Welcome 화면을 직접 만들면서 Lucy Studio의 핵심을 배워보세요.

아래와 같은 완성물을 만들게 됩니다:

완성된 Welcome 화면

인터랙티브 튜토리얼 사용법

각 단계의 프레임에서 화살표·강조 영역·툴팁을 따라 진행하세요. 펄스 지점을 클릭하거나 하단 점(dot)으로 스텝을 이동할 수 있습니다.

What you'll learn​

  • Form Container로 레이아웃 만들기 - UI의 기본 구조 이해
  • Text를 배치하고 정렬하기 - 타이포그래피와 계층 구조
  • Image와 Button 추가하기 - Interactive 요소 다루기
  • 완성된 디자인을 보기 - Lucy Studio의 결과물 확인

필요한 것: 설치 완료된 Lucy Studio

이 가이드를 시작하기 전에​

✅ Lucy Studio가 설치되어 있나요?

아직이라면 설치 가이드를 먼저 읽고 오세요. (2-3분)

1단계: 튜토리얼 프로젝트를 클론 받고 파일 열기​

목표: Lucy Studio를 열어 Tutorial을 클론 받고, 튜토리얼 파일을 엽니다.

  1. Lucy Studio를 열어 클론받은 프로젝트 폴더를 엽니다.
  2. 폴더 내에서, tutorials > quick_start_tutorial 파일을 찾아 클릭합니다.
  3. 클릭하면 아래와 같은 스크린이 뜹니다. 오른쪽의 빈 공간에서 튜토리얼을 따라해 보세요.

튜토리얼 시작 화면

2단계: Column과 Form Container 추가하기​

목표: Column과 그 안에 Form Container를 추가해 레이아웃의 뼈대를 잡습니다.

  1. 왼쪽 Plate에서 Column을 캔버스에 추가합니다.
  2. 왼쪽 Plate에서 Form Container(Form 위젯)를 추가합니다.
  3. Form 위젯을 선택하고 Style Panel에서 SizedBox를 추가한 뒤, 가로는 무한대(∞), 세로는 200px로 지정합니다.
  4. Property Panel에서 formId(불러올 form lfp의 경로)를 입력합니다.
  5. Style Panel에서 ClipRRect를 추가해 borderRadius를 지정합니다.
  6. Column을 선택하고 Style Panel에서 Padding을 추가합니다.
  7. Style Panel에서 DecoratedBox를 추가해 Color·Border·BorderRadius를 지정합니다.
    • 제공된 예시를 클릭해보면, style panel에 color와 border, 그리고 border radius가 적용된 것을 확인 할 수 있어요. 예시에 적용된 컬러와 굵기를 보고, 똑같이 따라 적용해보세요!
STEP 2
Panel에서 Column Widget을 캔버스에 드래그 앤 드랍

3단계: Text 위젯 추가하기​

목표: Column 안에 제목과 부제목 텍스트를 배치합니다.

제목 텍스트 추가​

  1. 왼쪽 Widget Tree Plate의 Column에서 마우스 우클릭 후 Add a child to this widget을 선택해 Text Widget을 추가합니다.
  2. 추가된 Text Widget을 선택하고 Property Panel에서 Text·FontSize·FontWeight·Color를 지정합니다.
  3. 텍스트를 **"Welcome to Lucy Studio"**로 변경합니다.

부제목 텍스트 추가​

목표: 제목 아래에 설명 텍스트를 추가합니다. 같은 방법으로 Column에 Text Widget을 하나 더 추가합니다.

  1. 추가된 Text Widget을 선택하고 Property Panel에서 아래 텍스트를 지정합니다:

    Design. Develop.
    All in One Studio.

💡 중요: 이 텍스트는 2줄로 표현되어야 합니다.

STEP 3
왼쪽 Widget Tree Plate의 Column에서 마우스 우클릭 후 “Add a child to this widget을 선택해 Text Widget 추가

4단계: 이미지 추가하기​

목표: 이미지를 추가하며 시각적 요소를 더해봅니다.

  1. 왼쪽 Widget Tree Plate의 Column에서 마우스 우클릭 후 Add a child to this widget을 선택해 Row Widget을 추가합니다.
  2. 왼쪽 Image Panel에서 Image Widget을 캔버스에 드래그 앤 드롭합니다.
  3. Image Widget을 선택하고 Property Panel에서 Size를 지정합니다.

💡 팁: 이미지 크기를 조정하려면 이미지를 선택한 후 우측 패널에서 width/height를 설정하세요.

STEP 4
왼쪽 Widget Tree Plate의 Column에서 마우스 우클릭 후 “Add a child to this widget을 선택해 Row Widget 추가

5단계: "Get Started!" 버튼 추가하기​

목표: Interactive 요소를 추가해 완성도를 올립니다.

  1. 왼쪽 Widget Tree Plate의 Column에 Button Widget을 추가합니다.

  2. Button을 선택하고 Property Panel에서 Size·Radius·FillColor·Text·TextStyle을 지정합니다. (텍스트는 "Get Started!", 색상은 보라색 계열)

  3. Button을 인터렉티브 하게 만들기 위해, 해당 Button에 ID를 지정합니다.

  4. 스크립트 윈도우를 열고, 아래의 간단한 코드를 붙여넣습니다.

    btn_get_started.onClick = function () {
      btn_get_started.setProperty('text', 'Welcome to Lucy Studio!');
    };

  5. 마지막으로 Column을 선택하고 Style Panel에서 Padding을 추가해 전체 여백을 정리합니다.

STEP 5
Widget Tree Plate에서 Column에 Button Widget 추가

완성했어요! 🎉​

당신이 직접 만든 Welcome 화면입니다!

이제 직접 만든 결과물을 디바이스나 Lucy Player로 띄워보고, 버튼을 탭해보세요!

배운 것들:

  • ✓ Form Container로 레이아웃 구조 이해
  • ✓ Text의 배치와 정렬 경험
  • ✓ Image 등 여러 위젯 다루기
  • ✓ 간단한 Script 작성으로 인터렉티브한 Button 만들기
  • ✓ Lucy Studio의 핵심 워크플로우 체험

다음은?

  • Build your first CRUD App : 30-40min Tutorial (준비 중)