SAP Fiori 디자인 Figma 툴로 SAPUI5 화면 설계하는법

Web-UI-Kit-Compact-cozy-fig-import-complete

SAPUI5 앱을 만들기전, UX 설계를 위하여 Figma를 활용하여, SAP Fiori 디자인 을 적용하여 화면 설계하는 방법을 알아보도록 하겠습니다. 우리가 프로젝트에 투입되어 앱을 개발하고자 할 때 SAPUI5 개발자와, 혹은 디자이너와 협업하고자 할 때 화면 설계서가 필요합니다. 전통이라는 이유로 엑셀과 워드로 된 구시대의 스펙 사양서에 적기도 하고, 적당히 말로 때우기도 하며, 혹은 개발자의 재량에 맡기는 경우도 있고, … Read more

SAPUI5 Icon Explorer 아이콘 설정 – 영화 api 활용

SAPUI5 Icon 은 임베디드 폰트 내에 포함되어 사용이 가능합니다. 어떤 Icon이 있고 어떤 코드로 사용할 수 있는가는 SAP Icon Explorer를 통해 확인이 가능합니다. 폰트 기반의 icon을 활용하므로 쉽게 컬러 변경이 가능하며 CSS를 통해 다양한 효과를 적용할 수 있습니다. SAPUI5 Icon Explorer 기본적으로 SAPUI5 의 아이콘은 SAP Icon Explorer를 통해서 적용할 수 있습니다. 어떠한 아이콘이 제공되고 … Read more

SAPUI5 FlexBox 기본 개념 – 영화 정보 api 서비스

CSS에서 Flexbox란, 행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 방법인데, SAPUI5 에서는 SAPUI5 Flexbox 클래스로 해당 플렉스박스 css를 제공하고 있습니다. 일반 CSS Flexbox와 마찬가지로 SAPUI5 Flexbox 컨테이너내의 아이템들은 부족한 공간을 처리하기 위해 여분의 공간으로 채우거나 축소되며 변형됩니다. 오늘은 SAPUI5 Flexbox 레이아웃에 대하여 이해해 보도록 하겠습니다. CSS Flexbox의 기본적인 속성 기본적으로 부모 객체인 Container에 Flex 속성을 … Read more