스타일 및 레이아웃 적용

SAP Build Apps를 사용하면 기능적인 사용자 인터페이스를 빠르게 빌드할 수 있을 뿐만 아니라 보기 좋고 사용자 친화적이며 개별 컴포넌트를 사용자와 회사의 요구사항에 맞게 시각적으로 조정할 수 있는 어플리케이션도 생성할 수 있습니다. 테마는 여기에서 중요한 역할을 하며 앱의 디자인과 처리를 결정하는 데 사용됩니다. 많은 스타일 속성은 응용 프로그램의 모양을 변경하기 위해 메뉴에서 쉽게 사용할 수 있습니다.

테마의 장점은 서로 다른 컬렉션이 있는 다양한 스타일, 색상 또는 글꼴을 한 손에 가져와서 디자인이 항상 일관되게 나타나도록 한다는 것입니다. 한편 이는 개발자들이 테마로 빠른 조정과 구성 덕분에 시간을 절약하고 개발에 더 집중할 수 있다는 장점이 있다.

테마 편집기를 사용하여 디자인 작업을 수행하고 앱의 모양을 변경할 수 있습니다. 등록 카드의 상단에서 테마 편집기에 액세스할 수 있습니다. 여기서 다양한 색상표를 찾아 이미 사용 가능한 색상표를 선택하거나 필요에 맞는 색상표를 만들 수 있습니다(예: 회사의 회사 디자인).

SAP Build Apps는 스마트 색상의 이점을 제공합니다. 사용자 경험을 최적화하는 데 사용할 수 있습니다. 스마트 컨텐트 색을 구성하면 컴포넌트가 자동으로 배경색으로 조정됩니다(예: 밝은 배경에서 어두운 배경으로 변경된 경우).

테마 변수를 사용하여 디자인을 색상과 구분하여 앱의 모든 요소를 선택한 설정으로 조정할 수도 있습니다. 예를 들어, 제공된 옵션을 사용하여 텍스트 크기, 테두리, 그림자, 간격 및 글꼴에 대한 구성을 설정할 수 있습니다. 새 테마 변수를 쉽게 설정할 수도 있습니다. 큰 장점은 바인딩 옵션을 사용하여 여기서 모든 변수를 동적으로 만들 수도 있다는 것입니다.

기본 테마를 사용하려는 경우 현재 두 개의 테마 그룹(공통 테마와 SAP Fiori 테마)을 사용할 수 있으며 다양한 디자인 기능을 통해 필요에 맞게 앱 디자인을 조정할 수 있습니다.

컴포넌트를 사용할 때는 해당 속성이 있는 UI 요소와 스타일과 관련하여 컴포넌트를 조달하는 방식을 구분해야 합니다. 구성 요소의 스타일과 모양은 이 구성 요소의 기능에 영향을 미치지 않습니다. 그러나 원하는 앱 사용성과 사용 동작을 조정하는 것이 중요합니다.

버튼 구성 요소의 예에서는 버튼을 터치할 때 설명 및 트리거 액션을 포함할 수 있지만 색상, 모양, 크기가 동일한 버튼이 다를 수 있습니다. 그 후 디자인은 특정 상황에서 의의를 별도로 언급한다. 예를 들어, 오더 프로세스의 상태에 따라 버튼이 빨간색이나 녹색으로 표시될 수 있습니다. 모든 정보가 사용 가능한지 그리고 버튼을 선택할 수 있는지 표시합니다. 또는 중간 조정을 위해 작업을 계속하는 데 중요한 주요 버튼인지 또는 작은 버튼인지를 나타내는 크기가 다른 가능성입니다.

구성 요소의 유형에 따라 함께 제공되는 스타일 설정이 다릅니다. 그러나 초점은 스타일 클래스에 있습니다. 기본적으로 항상 완전히 정의되어 있으며 기본, 보조, 3차, 위험 및 성공과 같이 직접 선택할 수 있으므로 이미 많은 사용 케이스에 적합한 스타일을 가지고 있습니다.

스타일 클래스는 컴포넌트의 모든 스타일 속성에 대한 값을 정의하므로 다른 스타일 클래스로 전환하면 컴포넌트의 모양이 완전히 변경됩니다.

스타일 클래스를 편집하고 직접 생성할 수도 있습니다. 이렇게 하면 구성 요소를 모서리에서 둥글게 만들거나 그림자가 있거나 글꼴 유형이 조정되도록 할 것인지, 다른 스타일 설정을 여러 개 설정할 가능성을 통해 더욱 정확하게 조정할 수 있다는 장점이 있습니다. 수많은 가능성이 있습니다. 각 설정마다 구속을 통해 훨씬 더 역동성을 도입할 수 있다는 장점이 있다.

구성 요소 외에도 페이지 자체는 스타일 탭에서도 변경할 수 있습니다. 따라서 앱 배경색을 조정하거나 안쪽 여백을 설정하여 배경을 더 매력적으로 만들 수 있습니다. 하지만 페이지 스크롤을 비활성화하는 등의 고급 옵션도 있습니다.

그러나 배경에 색을 지정하는 대신 자산 또는 바인딩 등에서 선택할 수 있는 페이지의 배경 이미지를 선택할 수도 있습니다. 여기서는 테두리를 피하기 위해 컨테이너(레이아웃 자체를 여백과 관련하여 변경할 수 있음)가 사용됩니다.

레이아웃 탭을 사용하여 구성 요소의 레이아웃과 선택한 페이지 또는 구성 요소의 레이아웃을 구성할 수 있습니다. 여유 영역에서 공간을 선택하여 페이지 레이아웃을 설정할 수 있습니다. 이렇게 하면 이 페이지의 모든 구성 요소 정렬을 동시에 변경할 수 있으며, 동시에 왼쪽, 가운데 또는 오른쪽으로 정렬됩니다.

레이아웃 탭의 다른 중요한 범주는 위치와 너비 및 높이와 관련된 구성요소의 설정입니다. Z 인덱스를 사용하여 컨텐트를 조작하여 사용자 경험을 개선할 수도 있습니다. Z 인덱스는 페이지에서 요소의 순서를 제어할 수 있는 속성입니다. 각 요소에 숫자 값(z-index)을 할당한 다음 이 숫자를 사용하여 다른 요소 앞이나 뒤에 표시할 요소를 결정합니다. Z 인덱스가 높을수록 요소가 뷰어에 더 가깝게 표시됩니다.

구성 요소를 선택하면 레이아웃 탭에 추가 옵션이 나타납니다. 이 옵션은 컴포넌트 간 공간 개념의 영향을 받습니다. 마진을 사용하는 대신 구성품목 갭의 개념을 소개합니다. 구성 요소 갭은 구성 요소 사이의 간격을 결정하며, 기본적으로 구성 요소 사이의 "간격"으로 작용합니다. 이 접근 방식은 구성 요소 간격에 대한 직관적인 워크플로를 크게 개선하는 동시에 필요에 따라 모든 측면을 사용자 지정할 수 있는 기능을 유지합니다. 또한 구성 요소 갭은 레이아웃이 수직인지 수평인지에 관계없이 일관되게 작동합니다. 이 통합된 접근 방식을 통해 컴포넌트 간격을 관리하는 데 원활한 경험을 제공할 수 있습니다.