앱 구축

애플리케이션을 구축하려면 레이아웃, 페이지를 생성하고 콘텐츠로 채우고 웹 앱 상호 작용을 설정해야 합니다.

레이아웃

앞서 우리는 레이아웃 개념을 소개했습니다. 레이아웃 생성을 시작하려면 먼저 애플리케이션의 구조를 개략적으로 설명하고 활용할 페이지 템플릿을 식별해야 합니다.

뭔가를 놓치더라도 걱정하지 마세요. 필요한 경우 레이아웃 목록을 늘릴 수 있습니다.

레이아웃 목록

레이아웃 목록은 웹 애플리케이션의 모든 레이아웃을 제공합니다. 여기에서 다양한 작업을 수행하고 레이아웃을 관리할 수 있습니다.

레이아웃 목록에 접근하려면 UI 디자이너 탭의 왼쪽 도구 모음에서 4번째 탭을 선택하거나 단축키 4 사용하세요. 모든 애플리케이션 레이아웃이 여기에 표시됩니다.

모든 애플리케이션에는 최소한 하나의 레이아웃이 있어야 합니다. 새 애플리케이션을 생성하면 선택한 애플리케이션 템플릿에 따라 하나 이상의 레이아웃이 자동으로 생성됩니다. 그 중 하나가 **기본값**으로 표시되어 있습니다.

레이아웃 목록에서는 레이아웃에 대해 다음 작업을 수행할 수 있습니다.

• 선택하다,
• 새로운 걸 더하다,
• 이름 바꾸기,
• 복제하다,
• 삭제.

기본 레이아웃

기본 레이아웃은 새 페이지를 생성할 때 레이아웃 목록에서 자동 선택됩니다. 그러나 필요한 경우 다른 레이아웃으로 대체할 수 있습니다.

기본 레이아웃을 사용하면 개발 속도가 빨라지므로 가장 자주 사용하는 레이아웃을 기본으로 사용하는 것이 좋습니다. 한 번에 하나의 레이아웃만 기본값으로 설정할 수 있습니다. 기본 레이아웃을 재정의하면 초기 레이아웃이 삭제되지 않는 한 기존 페이지에 영향을 주지 않습니다.

기본 레이아웃은 레이아웃 목록에서 파란색 별 아이콘으로 표시됩니다.

새 레이아웃 만들기

다양한 페이지 유형에 대해 다양한 레이아웃을 디자인할 수 있습니다. 새 레이아웃을 만들려면 다음 단계를 따르세요.

• CTRL/⌘+L 누르거나 UI 디자이너의 왼쪽 도구 모음에서 레이아웃 목록(바로가기 4 )을 열고 패널 헤더에 있는 더하기 버튼을 클릭합니다.
• 표시되는 모달에 레이아웃 이름을 제공합니다. 페이지에 레이아웃을 할당할 때 빠른 식별을 위해 레이아웃 구조를 반영하는 읽기 쉬운 제목을 사용하는 것이 좋습니다.
• 레이아웃 템플릿 선택:
  • 기본: 추가 요소가 없는 빈 템플릿으로 인증 또는 오류 페이지와 같이 탐색이 없는 페이지에 적합합니다.
  • 사이드바 왼쪽: 사이드바 메뉴가 있는 템플릿으로 관리 패널, CMS, ERP 등에 적합합니다.
  • 상단 메뉴: 상단 메뉴가 포함된 템플릿으로 웹사이트나 랜딩 페이지에 적합합니다.
• 이 레이아웃을 기본값으로 설정하려면 기본 레이아웃 설정을 활성화합니다.
• 만들기 버튼을 클릭합니다.

만들 수 있는 레이아웃 수에는 제한이 없습니다.

레이아웃 이름 바꾸기

레이아웃 이름을 바꾸려면 레이아웃 이름을 두 번 클릭하고 필요한 사항을 변경한 후 Enter 눌러 저장하거나 Esc 눌러 변경 사항을 되돌리세요.

레이아웃 복제

콘텐츠 및 설정과 함께 레이아웃을 복제하려면:

1. 복제하려는 레이아웃 위로 마우스를 가져갑니다.
2. 복제 아이콘을 클릭합니다.

복제된 레이아웃은 이름에 색인이 추가되어 목록에 자동으로 나타납니다. 레이아웃 세트를 기본값으로 복제하는 경우 소스 레이아웃은 새로 생성된 레이아웃으로 재정의되지 않습니다.

레이아웃 삭제

레이아웃을 제거하려면:

1. 삭제하려는 레이아웃 위로 마우스를 가져갑니다.
2. 휴지통 아이콘을 클릭하세요.
3. 삭제를 확인하세요.

페이지에 연결된 레이아웃을 삭제하려면 삭제하기 전에 연결된 페이지에 대한 레이아웃을 다시 할당해야 합니다. 이는 확인 모달을 통해 수행하거나 각 페이지에 대해 수동으로 수행할 수 있습니다.

기본 레이아웃을 삭제하려면 다른 레이아웃을 기본 레이아웃으로 설정해야 합니다.

❗️ 중요: 레이아웃 삭제 작업은 실행 취소할 수 없습니다.

레이아웃 설정

레이아웃 목록에서 대상 레이아웃을 클릭하면 왼쪽 설정 사이드바에서 해당 설정에 액세스할 수 있습니다.

설정 사이드바 헤더에서 이름을 클릭하여 선택한 레이아웃의 이름을 바꾸거나 삭제할 수 있습니다.

선택한 레이아웃을 기본값으로 설정하고 여기에서 연결된 모든 페이지를 볼 수 있습니다. 링크된 페이지를 편집하려면 목록에서 해당 페이지를 클릭하세요.

또한 레이아웃에 대한 일부 비즈니스 논리를 구축할 수 있습니다.

레이아웃 비즈니스 로직

비즈니스 로직 탭에서 트리거를 선택하여 작업을 설정하세요. 그러면 선택한 트리거에 초점을 맞춘 비즈니스 프로세스 편집기가 열립니다.

여기에서 탐색 구현, 조건부 속성 변경, 가시성 전환, 데이터 전송 등과 같은 하나 이상의 트리거에 대한 작업 흐름을 생성할 수 있습니다. 자세한 내용은 비즈니스 프로세스 구축에 대한 가이드를 참조하세요.

🔔 최적의 애플리케이션 성능을 위해 백엔드 측에서 복잡한 비즈니스 프로세스를 구축하세요.

레이아웃 편집

전역 구성 요소 및 페이지 템플릿인 레이아웃은 링크된 모든 페이지에 모든 수정 사항을 자동으로 적용합니다.

레이아웃을 편집하려면 레이아웃 목록에서 대상 항목을 선택하고 UI 요소 패널에서 필요한 구성요소를 캔버스 영역으로 드래그 앤 드롭하여 추가하세요.

레이아웃을 편집하는 동안 템플릿에는 변경할 수 없는 페이지 컨테이너 구성 요소가 포함되어 있다는 점을 기억하세요. 이에 따라 템플릿 내 페이지 콘텐츠의 위치가 결정됩니다. 페이지 컨테이너는 녹색으로 강조 표시되며 레이아웃 편집 모드에서는 내부 구성 요소를 포함할 수 없습니다. 콘텐츠는 페이지에서 직접 정의되며 페이지 컨테이너 크기는 상위 구성 요소에 따라 결정됩니다.

페이지

필요한 레이아웃을 생성한 후 웹 앱 페이지 생성을 시작하기에 가장 좋은 시기입니다. 필요한 레이아웃을 생성한 후 웹 앱 페이지 생성을 시작하기에 가장 좋은 시기입니다. 각 웹 애플리케이션 페이지는 대상 URL을 통해 사용자의 웹 브라우저에 표시되는 콘텐츠를 제공합니다.

페이지 트리

페이지 트리는 웹 사이트의 구조, 즉 사이트 페이지와 해당 페이지가 들어 있는 폴더를 보여줍니다. 여기에서 다양한 작업을 수행하고 페이지와 폴더를 구성할 수 있습니다.

페이지 트리를 열려면 UI 디자이너의 왼쪽 도구 모음에서 세 번째 탭을 선택하거나 3을 누릅니다. 여기에 모든 애플리케이션 페이지가 표시됩니다.

모든 애플리케이션에는 최소한 한 페이지가 있어야 합니다. 새 애플리케이션을 생성하면 선택한 애플리케이션 템플릿에 따라 하나 또는 여러 페이지가 이미 생성됩니다.

페이지 및 폴더에 대해 다음 작업을 수행할 수 있습니다.

• 선택하다,
• 새 페이지나 폴더를 추가하고,
• 이름 바꾸기,
• 페이지와 폴더를 폴더 안팎으로 이동하고,
• 복제하다,
• 삭제.

인덱스 페이지

인덱스 페이지는 애플리케이션의 초기 페이지입니다. 애플리케이션이 실행될 때 리디렉션을 만들지 않은 경우 이 페이지가 먼저 렌더링됩니다.

색인 페이지는 페이지 트리에 집 아이콘으로 표시되며 다른 페이지로 전환할 수 없습니다. 기본적으로 이 페이지는 자동으로 생성된 기본 레이아웃과 연결되어 있지만 페이지 설정에서 변경할 수 있습니다.

새 페이지 만들기

웹 애플리케이션에 페이지를 추가하려면:

1. CTRL/⌘+P 누르거나 UI 디자이너의 왼쪽 도구 모음에서 페이지 트리(바로가기 3 )를 열고 패널 헤더에 있는 더하기 버튼을 클릭합니다.
2. 표시되는 모달에 페이지 URL을 제공하세요.
3. 페이지의 상위 폴더를 선택하거나 필드를 비워 두어 페이지를 루트에 배치합니다.
4. 페이지 레이아웃 을 선택합니다.
5. 생성 버튼을 클릭합니다.

💡 폴더를 생성하지 않고 중첩된 경로를 구축하려면 페이지 URL 필드에 대상 페이지의 전체 경로(예: 설정/프로필)를 제공하세요. 이 경우 페이지 프로필은 설정 폴더에 중첩되어 생성됩니다.

웹 애플리케이션에 대한 페이지와 폴더를 무제한으로 만들 수 있습니다.

🔔 AppMaster Studio로 구축된 웹 앱은 페이지 URL별로 앱 라우팅을 생성하므로 페이지 생성 양식에서는 페이지 URL을 올바른 형식으로 사용하고, 가장 잘 이해할 수 있도록 친숙한 URL을 사용합니다.

새 폴더 만들기

폴더를 생성하여 탐색을 구성하고 페이지에 적합한 라우터를 구축할 수 있습니다. 새 폴더를 생성하려면:

• CTRL/⌘+SHIFT+P 누르거나 UI 디자이너의 왼쪽 도구 모음에서 페이지 트리(바로가기 3)를 열고 패널 헤더에 있는 폴더 버튼을 클릭합니다.
• 나타나는 모달에 폴더 이름을 제공하십시오.
• 중첩된 라우터를 만들기 위해 필요한 경우 상위 폴더를 선택하십시오.
• 생성 버튼을 클릭합니다.

UI 요소

앱의 사용자 인터페이스는 각각 특정 목적을 수행하는 입력 필드, 버튼, 이미지, 확인란, 달력, 이미지, 아이콘 등의 요소로 구성됩니다.

AppMaster는 코드를 작성하고 즉시 미리 보는 대신 페이지에서 직접 요소를 선택하고 배치할 수 있는 드래그 앤 드롭 시각적 편집기를 제공합니다.

요소 추가

캔버스에 요소를 추가하려면:

1. UI 요소 목록이 포함된 UI 요소 패널 을 엽니다(바로가기 1 ).
2. 필요한 요소를 선택하거나 검색창을 사용하세요.
3. 선택한 요소를 페이지 또는 레이아웃 캔버스로 드래그합니다.

드래그 요소를 대상 내부에 배치하려면 대상 요소 위에 요소를 놓습니다.

요소 앞이나 뒤에 요소를 추가하려면 구분 기호가 나타날 때까지 대상 테두리 위로 요소를 드래그합니다.

구분선은 상위 컨테이너 방향에 따라 다릅니다.

• 상위 컨테이너 방향이 수직 인 경우 요소는 위쪽 또는 아래쪽에서 추가됩니다.
• 상위 컨테이너 방향이 수평 인 경우 요소는 왼쪽이나 오른쪽에서 추가됩니다.

요소 사용자 정의

캔버스에 추가하는 모든 구성 요소에는 포괄적인 사용자 정의 가능한 설정 세트가 부여됩니다. 요소 속성을 사용하면 요소 모양과 표시될 데이터를 모두 관리할 수 있습니다.

요소를 구성하려면:

• 캔버스에서 대상 구성 요소를 선택합니다.
• 오른쪽 사이드바의 첫 번째 탭인 모양 패널로 이동합니다.
• 패널 내에서 수정하려는 특정 설정 항목을 선택합니다.
• 지정된 필드에 원하는 값을 입력하세요.

캔버스는 실시간으로 반응하여 조정 사항을 즉시 보여줍니다.

추가 지침이 필요한 경우 마우스 커서를 설정 위에 잠시 올려놓으면 해당 설정 기능에 대한 간략한 설명을 제공하는 도구 설명이 나타납니다.

이러한 대화형 기능 외에도 AppMaster는 특별한 비즈니스 프로세스 블록인 속성 설정 및 데이터 설정을 통해 사용자 정의 기능을 향상시킵니다. 이러한 블록은 고급 액세스 수준을 제공하므로 웹 애플리케이션에서 프로그래밍 방식으로 각 구성 요소의 설정을 변경할 수 있습니다.