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

SAPUI5 앱을 만들기전, UX 설계를 위하여 Figma를 활용하여, SAP Fiori 디자인 을 적용하여 화면 설계하는 방법을 알아보도록 하겠습니다.

우리가 프로젝트에 투입되어 앱을 개발하고자 할 때 SAPUI5 개발자와, 혹은 디자이너와 협업하고자 할 때 화면 설계서가 필요합니다.

전통이라는 이유로 엑셀과 워드로 된 구시대의 스펙 사양서에 적기도 하고, 적당히 말로 때우기도 하며, 혹은 개발자의 재량에 맡기는 경우도 있고, 결국 내가 요구한 사항과 전혀 다른 화면이 나오기도 합니다.

일반적으로 SAPUI5앱을 개발할 때에는 SAP Fiori 디자인을 준수하고자 권고되는데요, SAP Fiori란 기업용 어플리케이션에 통일되고, 지속적인 사용자 경험을 제공하기 위한 디자인 언어입니다.

SAP가 만든 디자인 컨셉이라고 할 수 있습니다.

SAP-Fiori-Design-가이드라인
SAP-Fiori-Design-가이드라인

다양한 앱이 존재하지만 항상 비슷한 패턴으로 오퍼레이션을 할 수 있으며, 아이콘/버튼 등의 배치만 보더라도 한눈에 어떻게 사용해야하는 지를 알 수 있도록 사용자에서 지속된 경험을 제공해 줄 수 있습니다.

마치 마이크로소프트 앱들의 경험과 같은데요, 엑셀에서 썼던 단축키, 메뉴 배열, 전체적인 사용 경험은, 워드, 파워포인트, 아웃룩 등에서도 똑같이 적용해보면 거의 대부분 그대로 사용할 수 있습니다.

그리고 SAP에서 권고하는 피오리 디자인 가이드는 아래에서 확인할 수 있습니다.

SAP 피오리 디자인 가이드 : https://experience.sap.com/fiori-design/

하지만, 이를 엑셀이나 워드, 파워포인트 등의 전통적인 화면 설계서에 표현하기는 쉽지 않습니다.

최근에는 Figma, Sketch, Adobe Tool 등 다양한 화면 설계 혹은 Mockup 툴이 나오고 있는데요, 오늘은 가장 많이 사용하는 디자인 툴인 Figma를 활용하여 SAPUI5 앱에 Fiori 디자인을 입혀 화면 설계를 어떻게 할 것인가에 대해 이야기 해보고자 하니다.

참고로 최근 트렌드는, 본격적으로 SAP의 구린 GUI도, 점차 예쁘디 예쁜 Fiori 디자인을 입은 UI5로 넘어가는 것 같습니다. :- )


그리고, Oracle Netsuite, MS dynamic 365 등 다양한 기업 업무 어플리케이션 들이 있는데, 그 기능은 둘째 치더라도 디자인에서도 단연 SAP의 Fiori 디자인이 사용자 친화적이고 예쁜 것 같습니다.

디자인 툴 Figma 설치하기

아직 SAP분야는 낯설긴 하지만, 현재 UI 디자인 분야에서는 스케치(Sketch), 피그마(Figma) 등이 강세를 보이고 있습니다. 디자이너가 많이 쓰는 맥용 App에는 역사적으로 스케치가 앞섰으나, 최근 스케치의 홈페이지에서 아래와 같이 따로 페이지를 판것을 보니, 피그마 역시 대세로 보여집니다.

Sketch-and-Figma
Sketch-and-Figma

우리는 Figma를 통해 SAP Fiori 디자인을 적용할 예정이므로 Figma 홈페이지로 이동합니다.

공식 홈페이지 : https://www.figma.com/downloads/

본인의 운영체제에 맞도록 선택하여 설치를 진행합니다.

-Figma-Install
Figma-Install

SAP Fiori 디자인 Stencils 설치하기

Stencil이란, 글자나 문자, 모양을 오려낸 뒤, 물감등을 흘려서 딱 그 모양대로 떠서 디자인하는 기법을 이야기합니다.

공식 홈페이지 : https://experience.sap.com/fiori-design-web/downloads/

스텐실 세트에는 그림자 수준, 격자, 색상 등과 같은 기초 주제에 대한 패턴, 페이지 유형 ( Floor Plan ), 컨트롤, 현재 사양 및 구현에 따라 앱을 빌드하기위한 각종 도구들이 포함되어 있습니다.

글을 내려가다보면 설치 링크가 나오며, 1.106 버전(오늘 글쓰는 기준) 까지 나와있습니다. 클릭하여 설치를 진행합니다.

SAP-UI5-Figma-stencils-install
SAP-UI5-Figma-stencils-install

링크를 타고 들어간 후 Stencils를 설치합니다.

Download-Design-Stencils-SAPUI5-SAP-Fiori-Design
Download-Design-Stencils-SAPUI5-SAP-Fiori-Design

다운로드를 완료한 후, 압축을 해제하면 다음과 같습니다.

-SAP-UI5-Figma-stencils-install-Decomressed
SAP-UI5-Figma-stencils-install-Decomressed

SAP 폰트 설치

Font72 >> 72_Desktop 폴더로 이동하여

SAP-Fiori-design-Font72-install
SAP-Fiori-design-Font72-install

각각의 ttf를 “더블클릭”하여 설치를 진행합니다.(모두 다 하시는 것이 마음 편합니다.)

SAP-Fiori-design-Font72-install-2
SAP-Fiori-design-Font72-install-2

더블클릭하면 아래와 같이 설치 버튼이 있습니다.

SAP-Fiori-design-Font72-install-3
SAP-Fiori-design-Font72-install-3

혹은 모든 파일을 선택한 후, c:\windows\fonts에 모든 파일을 복사해도 됩니다.

전체선택해서-윈도우즈-fonts에-설치
전체선택해서-윈도우즈-fonts에-설치

SAP Icon 설치

그다음으로 sap icon을 설치합니다.

 sap icon을 설치
sap icon을 설치

동일하게 더블클릭을 하거나 c:\windows\fonts에 모든 파일을 복사하면 됩니다.

전체선택해서-윈도우즈-fonts에-설치-sap-icons
전체선택해서-윈도우즈-fonts에-설치-sap-icons

피그마에서 SAP Fiori 디자인 스텐실 활용하기

피그마를 실행한 후, 메인 화면에서 Import file을 선택합니다.

import-file-to-figma-sapui5-design-stencils
import-file-to-figma-sapui5-design-stencils

아까 받은 SAP Fiori 디자인 파일에서 [Compact, Cozy] 두개의 파일을 Import 합니다.

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

다음과 같이 일정시간 Figma Design이 반영됩니다.

Web-UI-Kit-Compact-cozy-fig-import-sap-firoi-design-stencils-imporing
Web-UI-Kit-Compact-cozy-fig-import-sap-firoi-design-stencils-imporing

SAP 피오리 디자인 fig 파일 적용이 완료되면 다음과 같이, Compact 버전과 Cozy 버전이 설치가 됩니다.

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

SAP Hana Web UI Kit Cozy와 Compact를 Favorite 해두면 추후 사용이 편리합니다.

sap-fiori-design-stencils-favorites
sap-fiori-design-stencils-favorites

등록된 SAP 피오리 Cozy, Compact FIG 파일을 열어보면, SAPUI5 앱을 디자인할 때 필요한 대부분의 디자인이 포함되어 있는 것을 알 수 있습니다.

좌측 메뉴를 통해 다양한 컨트롤 디자인을 선택하여 피오리 디자인을 화면 설계 할 수 있습니다.

out-of-the-box-SAPUI5-APP-design
out-of-the-box-SAPUI5-APP-design

UI5 앱에서 디자인할 수 있는 다양한 Combo 박스도 있고

sapui5-app-combo-box
sapui5-app-combo-box

ALV 디자인도 적용해서 화면 설계를 할 수도 있으며,

sap-fiori-design-analytical-table
sap-fiori-design-analytical-table

메세지 스트립 등의 디자인도 적용할 수 있습니다.

sap-fiori-message-strip
sap-fiori-message-strip

Figma에서 SAPUI5 앱 디자인 예시 – SAP Firoi 디자인 Stencils 적용

Figma를 통해 SAPUI5 앱을 디자인 해보았습니다. 상단에 Shell Navigation, 좌측에는 트리메뉴, 우측에는 UI Table, 하단에는 메모 디자인, 그리고 Footer 를 등록하여 정의해 보았습니다.

화면설계서-샘플-for-sap-fiori-figma-활용
화면설계서-샘플-for-sap-fiori-figma-활용

컨셉만 정해진다면 이렇게 그리는데 3분이 채 걸리지 않았습니다. 물론 여기에서 필드 텍스트 변경이나 세부적인 정의로 인해 더 많은 시간이 필요하겠지만, SAPUI5 개발자나 UX 디자이너와 협업하는데에는 아주 효율적이라 생각됩니다.

특히, Figma의 URL 공유 기능을 활용하면 협업이 훨씬 더 효과적입니다.

Figma  공유 버튼을 통해 SAPUI5 앱 피오리 디자인 화면 설계 공유
Figma 공유 버튼을 통해 SAPUI5 앱 피오리 디자인 화면 설계 공유

SAP 피오리 디자인을 적용한 SAPUI5 앱을 개발하고자 하시는 분들은 Figma를 적극 활용해 보시기 바랍니다.

SAP 피오리 디자인시에 참고할 아이콘은 다음 글에서 참고할 수 있습니다.

SAPUI5 Icon Explorer 아이콘 설정

CSS의 기본인 Flexbox에서 대해서는 아래의 글을 참고하시면 도움이 될 것으로 생각됩니다.

SAPUI5 Flexbox의 기본 개념