구성요소의 기본 사항 살펴보기

앱에서 사용자 인터페이스(UI)는 어떤 역할을 합니까?

UI에는 앱에서 확인하고 수행할 수 있는 작업이 포함됩니다. UI는 볼 수 있는 요소를 정의할 뿐만 아니라 앱의 기본 상호작용 중 일부를 정의합니다. 로우 코드 개발 환경에는 일반적으로 UI 생성을 위한 툴 세트가 갖추어져 있습니다.

SAP Build Apps에서 구성요소는 회사의 가장 다양한 요구사항을 충족하고 작업 프로세스를 강화하는 앱을 쉽고 빠르게 빌드할 수 있는 강력한 비결입니다. 컴포넌트에 대한 간단한 설명은 사전 구성된 코드 조각으로, UI를 디자인하고 브리지에서 로직을 사용할 수 있도록 사전 정의된 기능이 있는 빌딩 블록으로 사용할 수 있다는 것입니다.

구성 요소는 버튼, 입력 필드, 텍스트 영역 또는 이미지와 같은 모든 유형의 요소에서 발생할 수 있습니다. 큰 또는 작은 구성 요소가 될 수있는 고정 된 제한이 없습니다. 가장 작은 구성요소는 개별 아이콘 또는 구분선과 같을 수 있습니다. 가장 큰 구성 요소는 지리적 위치 또는 비디오 플레이어의 지도 구성 요소일 수 있습니다. 사전 제작함으로써 시각적 개발 분야에서 직관적인 경험을 촉진하고, 제공된 기능을 통해 많은 개발 가능성을 다룰 수 있습니다. 그러나 특정 추가 요구사항이 필요한 경우 모양과 기능에 따라 구성요소를 조정하고 빌드할 수도 있습니다.

SAP Build Apps의 컴포넌트는 왼쪽에 있는 여러 섹션으로 나뉩니다. 맨 위에는 앱의 가장 기본적인 빌딩 블록을 추가할 수 있는 ESSENTIALS 구성 요소가 있습니다. 제목 및 텍스트 구성 요소는 정보를 잘 준비하기 위해 항상 서로 다른 스타일로 존재하고 결합됩니다. 카드 구성요소는 텍스트와 제목을 결합하며 컴포넌트의 형식으로 강조표시됩니다.

주로 스타일에서 이미지와 아이콘 구성 요소를 사용하여 앱을 사용자 친화적이거나 더 많은 정보를 대상으로 설계할 수 있습니다. 버튼 구성요소는 상호작용을 촉진하고 로직 프로세스를 시작하도록 사전 정의되어 있습니다. 다음 연습문제에 나와 있는 예시 앱은 서식 컴포넌트와 함께 대부분의 컴포넌트가 자주 발생하며, 이들 컴포넌트가 서로 결합하여 직관적이고 동적인 앱 사용자 인터페이스의 기반이 되는 경우가 많다는 것을 보여 줍니다.

서식 구성요소를 사용하여 앱에 유용한 모양을 삽입할 수 있습니다. 이는 특히 사용자 정보를 활용하고 상호 작용을 가능하게 하는 데 유용합니다. 사용자가 단순하고 복잡한 작업을 트리거할 수 있습니다. 가장 자주 사용되는 컴포넌트는 다른 컴포넌트가 로직에 연결되어 있고 액션을 선택하여 트리거할 수 있는 경우에도 선택하여 액션을 트리거하기 위해 사전 정의된 버튼 컴포넌트입니다.

사용자가 추가로 처리할 수 있는 정보(예: 사용자를 저장, 표시 또는 인증하기 위해)를 입력하려면 입력 필드와 비밀번호 필드가 반드시 필요합니다.

또한 체크박스, 드롭다운 필드, 슬라이더는 사용자가 이러한 컴포넌트에서 사전 정의된 값을 선택할 수 있는 빠르고 직관적인 방법을 제공합니다. 그러면 앱에서 이 정보를 추가로 처리할 수도 있습니다.

리스트 컴포넌트를 사용하여 리스트를 생성하는 것은 SAP Build Apps에 대해 중요하고 자주 사용되는 접근법입니다. 리스트를 사용하여 특정 정보를 표시하기 위해 리스트 컴포넌트는 일반적으로 저장된 데이터가 있는 데이터베이스(소스)에 연결됩니다. 앱의 임시 정보가 사용자 입력 또는 기능 및 서식에서 발생한 신규 정보와 결합되어 모두 나열될 수 있습니다. 그러나 다른 옵션으로는 인터넷 또는 기타 SAP 또는 서드 파티 솔루션의 데이터/정보에 대한 인터페이스를 통한 연결이 있습니다. 컴포넌트의 표시 유형은 다양합니다. 둘 이상의 정보가 연결된 일반 리스트를 사용하거나 이미지 및 아이콘도 표시됩니다. 특히 리스트를 사용하면 속성 컴포넌트를 사용하는 것이 중요합니다. 속성 컴포넌트는 동적 표시 또는 대상 표시를 위해 다음 소단원에서 자세히 설명합니다.

기본적으로 SAP Build Apps는 UI 레이아웃과 구조 요소에 대한 추가 옵션을 설계할 수 있는 세 가지 레이아웃 컴포넌트 를 제공합니다. 구성품목을 그룹화하거나 더 복잡한 액션을 수행할 수 있습니다(예: 구성품목을 그룹으로 묶어서 표시 또는 트리거 후 표시). 이러한 방식으로 레이아웃 구성 요소는 앱을 디자인할 때 다음과 같은 추가적인 이점을 제공합니다.

• 더욱 명료함(특히 레이아웃 트리 사용)
• 컨텐트 섹션을 나란히 표시합니다.
• 컨텐트와 컴포넌트를 쉽게 비례하고 그룹화할 수 있습니다.
• 여러 개의 구성품목을 그룹으로 한 번에 입력합니다.
• 정의된 영역에서 스크롤하여 직관적으로 표시할 수 있습니다.

동영상을 재생하여 레이아웃 트리의 개요를 확인하고 SAP Build Apps의 레이아웃 트리 오퍼링을 사용하는 방법을 알아보십시오.

레이아웃 컴포넌트는 명확한 구조를 생성하는 데 유용할 뿐만 아니라, 특히 이러한 컴포넌트와 함께 오른쪽 하단에서 볼 수 있고 명확한 개요를 제공하는 트리 뷰도 유용합니다.

트리 뷰에는 페이지 레이아웃을 표시하기 위해 사용된 컨테이너가 순서대로 나열됩니다. 이렇게 하면 컴포넌트를 지정할 수 있는 이름도 트리 뷰에 표시되므로 트리 뷰에서 컴포넌트를 직접 선택하는 것이 유리합니다.

또 다른 유용한 방법은 표시되는 헬퍼 라인을 지원하면서 끌어서 놓기를 사용하여 컴포넌트를 이동하고 재구성할 수 있다는 것입니다.

레이아웃 구성요소가 사용되는 경우 트리 뷰에도 표시됩니다. 그러나 레이아웃 구성요소에 종속되어 있고 뷰에서 펼치거나 접을 수 있는 다른 구성요소를 사용할 수 있다는 장점이 있습니다.