페이지 편집기 기본사항

App Maker의 페이지 편집기를 사용하면 쉽고 시각적인 방법으로 앱 인터페이스를 제작할 수 있습니다. 위젯을 캔버스로 드래그하고 데이터에 결합하면 UI가 만들어집니다.

페이지 편집기는 UI를 구성하는 캔버스, 필요한 모든 UI 요소가 포함된 위젯 팔레트, 세부정보를 제어하는 데 사용할 수 있는 오른쪽 사이드바를 포함한 3가지 주요 부분으로 구성됩니다.

캔버스

캔버스를 사용하면 앱의 UI를 구성하는 위젯이라는 구성요소를 배치하고 조정할 수 있습니다. 캔버스는 WYSIWYG('what you see is what you get') 방식입니다. 단, 앱을 게시하거나 미리보기 전까지 자리표시자로 렌더링되는 데이터 결합 위젯 속성은 예외입니다.

캔버스에 위젯을 추가할 때 캔버스의 크기를 조절하여 다양한 화면 크기에서 앱이 어떻게 표시되는지 확인할 수 있습니다. 자세한 내용은 다양한 화면 크기에 맞게 스타일 지정을 참조하세요.

위젯 팔레트

위젯 팔레트의 위젯을 캔버스로 드래그합니다. 일부 위젯에는 데이터를 결합하는 데 도움이 되는 마법사가 있습니다. 페이지의 기본 데이터 소스가 설정된 경우 일부 데이터 결합이 자동으로 수행됩니다.

오른쪽 사이드바에는 UI를 제작하는 데 필요한 3가지 도구가 있습니다.

도구설명
속성 편집기선택된 위젯이 데이터와 상호작용하는 방식, 이벤트에 응답하는 방식, 페이지에서 로드되는 방식 등을 결정하는 속성 목록
스타일 편집기캔버스에서 위젯의 모양을 제어하는 패널. 기본 제공 테마를 선택하고 CSS로 자신만의 스타일을 만듭니다.
윤곽선 표시페이지의 위젯 간의 관계를 표시하고 위젯을 숨기고 제자리에 고정하는 데 사용되는 목록

속성 편집기를 사용하여 데이터 결합

속성 편집기를 사용하면 배치된 위치, 표시되는 위치, 동작 방법까지 위젯의 대부분을 제어하는 속성을 수정할 수 있습니다. 예를 들어 라벨 위젯에는 표시되는 텍스트를 결정하는 text 속성이 있습니다.

속성을 설정하는 방법은 3가지가 있습니다. 속성을 여러 가지 방법으로 설정할 수 있는 경우 드롭다운 목록 아이콘 을 클릭하여 속성을 설정하는 방법을 선택하세요.

  • 정적 값 (동일) - 정적 값은 개발자가 직접 입력할 수 있으며, 사용자가 앱과 상호작용할 때 변경되지 않으므로 편리합니다.

  • 결합 표현식(결합) - 결합 표현식은 UI를 데이터 모델에 연결하여 데이터가 입력되거나 수정될 때 데이터 모델이 동적으로 응답하도록 하는 강력한 기능을 제공합니다.

  • 선택() - 미리 설정된 옵션 중에서 선택하거나 하나 이상의 옵션을 정의하고 선택합니다. 예를 들어 페이지의 데이터 소스를 선택하거나 클래스 이름 목록을 styles 속성에 추가합니다.

캔버스에 관한 간단한 팁

다음은 캔버스를 사용할 때 유용한 정보입니다.

  • Shift 키를 누른 상태에서 마우스를 드래그하면 여러 위젯을 선택할 수 있습니다.

  • 여러 위젯을 선택한 후 그룹 이동, 공유 속성 수정 등의 작업을 수행할 수 있습니다.

  • 위젯이나 캔버스를 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 메뉴가 나타납니다.

  • 위젯을 재정렬할 때 Ctrl 키를 길게 누르면 캔버스 맞추기 정렬 지침이 일시적으로 사용 중지됩니다.

  • 위젯을 한 번에 한 픽셀씩 이동하려면 화살표 키를 사용합니다.

추가 자료

  • App Maker의 여러 위젯에 대해 자세히 알아보세요.

  • 스타일로 앱의 모양과 느낌을 맞춤설정하는 방법을 알아보세요.

  • 고급 레이아웃에서 페이지를 제작하는 방법에 대한 지침을 확인하세요.