UI 디자이너 개요

애플리케이션이 성공적으로 생성되면 UI 디자이너 탭으로 이동됩니다.

AppMaster의 UI 디자이너는 사용자 친화적으로 설계되어 멋진 웹 앱 페이지를 쉽게 만들 수 있습니다.

직관적인 드래그 앤 드롭 인터페이스를 통해 웹 페이지를 디자인하고 콘텐츠로 원활하게 채울 수 있으므로 고급 코딩 기술이 필요하지 않습니다.

UI 디자이너는 사용자가 상호 작용할 수 있는 네 가지 기본 섹션으로 구분됩니다.

1. 왼쪽 도구 모음
2. 상단 패널
3. 하단 패널
4. 캔버스 영역
5. 속성 패널

왼쪽 도구 모음

왼쪽의 도구 모음은 웹사이트 구성을 위한 도구를 제공합니다. 이 사이드바 상단에 있는 아이콘을 클릭하면 다음 패널이 표시됩니다.

• UI 요소 목록
• 요소 트리
• 페이지 트리
• 레이아웃 트리
• 자산 관리자

UI 요소 목록(바로가기: 1 )

UI 요소 목록은 패널에서 드래그하여 캔버스 영역에 추가할 수 있는 모든 요소를 ​​제공합니다.

UI 요소는 목적에 따라 카테고리로 구성되어 있어 앱에 적합한 위젯을 더 쉽게 탐색하고 찾을 수 있습니다.

해당 요소로 빠르게 이동하려면 패널 상단에 있는 검색 표시줄을 사용하세요.

요소 트리(바로가기: 2 )

요소 트리 에서는 웹 앱의 선택한 페이지에 배치된 모든 구성 요소를 관리하고 구성할 수 있습니다.

여기에서 다음 요소와 상호 작용할 수 있습니다.

• 드래그하여 트리 간에 항목을 이동합니다.
• 구성 요소 이름 바꾸기,
• 캔버스에 있는 요소의 가시성 상태를 변경합니다(숨기기/표시).

트리에서 요소를 빠르게 검색하려면 패널 상단에 있는 검색 표시줄을 사용하세요.

페이지 트리(바로가기: 3 )

페이지 트리를 사용 하면 사이트 페이지를 구성하고 관리할 수 있습니다. 여기에서 새 페이지나 폴더를 만들 수 있습니다.

페이지 트리에서는 페이지나 폴더를 복제하거나 삭제할 수 있습니다.

패널 상단의 검색 표시줄을 사용하면 트리에서 페이지나 폴더를 빠르게 검색할 수 있습니다.

레이아웃 목록(바로가기: 4 )

레이아웃 트리는 페이지 레이아웃을 관리하는 데 도움이 됩니다. 페이지 트리에서와 마찬가지로 레이아웃을 복제하거나 삭제할 수 있습니다.

트리에서 빠른 검색 레이아웃을 보려면 패널 상단에 있는 검색 표시줄을 사용하세요.

자산 관리자(바로가기: 5 )

자산 관리자는 웹 사이트에서 사용할 자산(예: 문서, 이미지, 애니메이션)의 업로드 및 구성을 용이하게 합니다.

개발 중에 업로드하는 모든 자산은 자산 관리자에 보관되며 다시 업로드하지 않고도 재사용할 수 있습니다.

더 이상 필요하지 않은 자산을 제거할 수도 있습니다.

상단바

상단 표시줄은 추가 보기 설정 세트를 제공합니다. 왼쪽부터 시작하여 메뉴 버튼 옆, 오른쪽으로 확장하면 다음과 같은 도구 세트가 있습니다.

• 현재 문서: 현재 작업 중인 페이지나 레이아웃을 표시합니다.
• 중단점: 중단점 아이콘을 사용하면 여러 중단점 사이를 전환하여 다양한 장치 크기에서 사이트가 표시되는 방식을 미리 보고 수정할 수 있습니다.
• 실행 취소 및 다시 실행: 실행 취소 및 다시 실행 버튼을 사용하면 스타일 적용, 요소 제거 등 디자이너에서 수행한 작업을 되돌리거나 다시 적용할 수 있습니다. 또한 단축키도 사용할 수 있습니다. 작업 실행 취소 - CRTL/⌘+Z 및 작업 다시 실행 - CTRL/⌘+SHIFT+Z .

하단 바

하단 패널을 사용하면 페이지 보기를 확대/축소하거나 크기를 조정할 수 있습니다.

패널 왼쪽에서는 캔버스의 높이와 너비를 설정하여 사용자 정의 페이지 해상도를 설정할 수 있습니다.

오른쪽에서는 배율을 제어할 수 있습니다.

• 확대 또는 축소
• 비율을 백분율로 설정
• 실제 크기 설정
• 현재 창을 보이는 영역에 맞춥니다.

캔버스

캔버스는 대화형 작업 공간입니다. 여기에서 페이지 구성 요소를 사용할 수 있습니다. 페이지에서 직접 요소를 선택하고, 위치를 변경하고, 콘텐츠를 편집할 수 있습니다.

또한 페이지와 애플리케이션 간에 요소를 복사( CRTL/⌘+C )하고 붙여넣거나( CRTL/⌘+V ) 현재 페이지 내에서 요소를 복제할 수 있습니다( CRTL/⌘+D ).

속성 패널

디자이너 오른쪽에 있는 속성 패널을 사용 하면 선택한 요소, 레이아웃 또는 페이지의 시각적 모양과 동작을 사용자 지정할 수 있습니다.

속성 패널은 4개의 기본 패널로 구성됩니다.

• 모양 패널
• 추가 옵션 패널(선택 사항)
• 미디어 쿼리 패널
• 비즈니스 로직 패널

패널 헤더에서 항목 이름을 클릭하여 선택한 항목의 이름을 바꾸거나, 설명을 읽거나, 휴지통 아이콘을 클릭하여 항목을 삭제할 수 있습니다.

외관 패널

모양 패널을 사용 하면 선택한 요소의 표시된 정적 콘텐츠 및 속성에 액세스할 수 있습니다. 해당 필드에 이러한 값을 입력하거나 선택할 수 있으며 스타일은 캔버스의 요소에 즉시 적용됩니다.

캔버스에서 요소를 선택하지 않으면 이 패널에 현재 페이지 또는 레이아웃의 설정이 표시됩니다.

추가 옵션 패널

추가 옵션 패널은 추가 설정 데이터나 옵션이 필요한 요소를 위한 것입니다.

선택한 구성 요소에 따라 데이터 소스를 설정하거나 수동으로 옵션을 입력할 수 있습니다.

미디어 쿼리 패널

미디어 쿼리 패널을 사용 하면 정의된 각 중단점에 대한 항목 속성을 재정의할 수 있습니다.

비즈니스 로직 패널

비즈니스 논리 패널은 요소에 대한 모든 트리거를 제공하며 트리거가 실행될 때 요소 상호 작용을 설정할 수 있도록 합니다.