본문으로 건너뛰기

Canvas

Canvas는 위젯을 드래그&드롭으로 배치하여 UI를 설계하는 메인 작업 공간입니다. 실시간 미리보기를 통해 결과를 즉시 확인할 수 있으며, 반응형 레이아웃을 손쉽게 구현할 수 있습니다.

Canvas 개요

Page Tab​

  • 현재 열린 페이지를 확인할 수 있습니다.

Docking (분할 보기)​

Docking 예시

  • 캔버스를 여러 영역(pane)으로 나눠 여러 페이지를 나란히 보며 편집할 수 있는 기능입니다.
  • 페이지 탭을 드래그해 원하는 위치에 놓으면 캔버스가 그 방향으로 분할되고, 해당 페이지가 새 영역에 열립니다.
  • 나뉘어진 영역 사이의 경계선을 드래그해 각 영역의 크기를 조절합니다.
  • 페이지 탭을 다른 영역으로 드래그해 이동·재배치하거나 다시 합칠 수 있습니다.

Artboard​

  • UI를 설계할 수 있는 기기 화면의 캔버스입니다.
  • 위젯 팔레트에서 드래그 앤 드롭 방식으로 위젯을 추가하고, 속성 패널에 있는 속성을 적용하여 UI를 제작합니다.

Zoom Control​

  • 아트보드의 크기를 확대/축소하여 조절할 수 있습니다.

Device Setting​

  • 기기 선택: 디바이스의 크기에 맞게 아트보드의 사이즈를 설정할 수 있습니다.
  • 가로/세로모드: 가로모드, 세로모드에 맞게 변환할 수 있습니다.
  • 커스텀 사이즈: 아트보드의 너비와 높이를 원하는 크기로 설정할 수 있습니다.

Code Editor​

  • 코드 에디터: 코드 에디터 탭을 열어 화면의 코드를 확인하고 수정할 수 있습니다.
  • 코드 테마 설정: 코드의 폰트, 굵기, 크기, 색상 등의 테마를 설정할 수 있습니다.

Floating Widget Plate​

  • Floating Widget Plate를 사용하면 캔버스에서 바로 위젯에 빠르게 접근할 수 있습니다.
  • Plate에서 위젯 탭을 열지 않고도 아트보드에 위젯을 빠르게 추가할 수 있습니다.

Theme Setting​

  • 테마 관리
    • 사전에 설정된 테마를 모든 위젯에 일괄 적용하여 앱 전체를 일관된 디자인으로 관리할 수 있습니다.
    • 밝은 테마(Light Mode)와 어두운 테마(Dark Mode)를 모두 설정할 수 있으며, 다양한 복수 테마 구성이 가능합니다.
    • Color Theme 설정은 Lucy Studio의 Plate 좌측 하단 메뉴 → Style → Color Themes에서 접근할 수 있습니다.

Status bar​

  • Status bar는 Canvas 화면의 최하단에 위치하며, 현재 프로젝트의 실행 상태 및 기타 정보를 표시합니다.
  • 상태 표시: 현재 프로젝트의 빌드 상태, 연결 상태(Run/Stop), 오류 발생 여부 등의 실시간 상태를 표시합니다.
  • 로그 및 디버깅 접근: Status Bar를 통해 로그(Log) 또는 **디버깅 콘솔(Debug Console)**에 빠르게 접근할 수 있는 버튼을 제공합니다.