brunch

You can make anything
by writing

C.S.Lewis

by 나한선 Jul 17. 2023

2030을 위한 ERP 이야기

5. 차세대 UI/UX구현을 위한 SAP Fiori 기술 이해 및 적용

2000년대 초반 LA의 한 미국 회사를 방문한 적이 있다. Receiption Desk에 앉아 있던 나이 지긋한 미국 숙녀분이 우리의 방문 목적이 SAP 관련 일인 것을 알고 본인도 SAP 사용자라면서 친근함을 표시했던 기억이 있다. 그렇게 SAP는 글로벌하게 회사 업무 프로세스와 시스템의 표준처럼 되어 갔다.

그러나 많은 사용자들이 SAP의 GUI 경험에 대하여는 부정적인 의견을 공유하고 있었다. 물론 SAP R/3 제품이 출시되던 1990년대 초반에는 기존의 텍스트 기반 UI에서 GUI로 바뀐 혁신적인 변화였고 많은 사용자들이 좋아하였을 것이다. 그러나 2000년 닷컴 붐과 함께 다양한 Web UI를 경험한 사용자들에게 SAP GUI는 너무 불편하고 힘든 사용자 경험이 되어 갔다.

기업의 시스템이 일반 웹 시스템과 같을 수는 없다. 기업 시스템에서 처리해야 하는 정보의 양과 유형이 일반 웹과는 다른 특성을 가지고 있어 복잡성을 가질 수밖에 없다. 그러나 SAP GUI에서는 너무 많은 탭 화면, 예를 들어 문서 개요 tab들, 문서 헤더 상세 tab들, 문서 아이템 상세 tab들 등 화면 자체가 많았고, 각 tab 화면에서 다양한 데이터의 섹션에 많은 필드들이 표시되었다. 다양한 사업의 다양한 기능 요구를 만족시켜야 하는 패키지 벤더의 입장에서는 이러한 화면 구성이 어쩔 수 없었을 것이다. 일부 설정(Configuration)을 통하여 화면을 재구성하는 기능을 제공하는 모듈들이 일부 있기는 했으나 대세를 바꾸지는 못했다.

이러한 구성의 문제점은 사용자 입장에서는 그 많은 화면과 필드들이 업무에 필요하지 않은 것이고 실제로 의미 있게 데이터를 가지고 있지 않은 경우도 많이 있었다. 따라서 극단적으로 하나의 필드 데이터를 확인하거나 입력하기 위하여 특정 tab 화면으로 이동하고 다시 다른 tab으로 이동해야 하는 등의 불편함을 감수해야 했다.

단순히 화면이 많고 필드가 많은 것만이 문제는 아니었다. 전체적인 업무 흐름 과정에서 화면들의 이동(navigation)도 그렇게 원활하지 않았다. 일부 메뉴나 아이콘 등을 통하여 관련 업무로의 이동이 제공되기도 하였으나 사용자의 전체적인 직무 역할 수행을 위해 필요한 업무 흐름 관점의 UI/UX 경험이라는 관점의 부족이 기능 중심의 T-Code 실행을 통한 navigation을 하게 만들었다.

SAP도 사용자 경험을 위한 다양한 시도들을 물론 해 왔다. R/3 4.6 버전으로 기억하는데 EnjoySAP라는 initiative를 통하여 GUI화면을 사용자 친화적으로 만들기 위한 대대적인 노력이 있었다. 또한 Window GUI의 개선과 함께 Web UI/UX에 대응하려는 다양한 시도들도 있었다.

세기가 바뀐 2000년도에 SAP CRM 솔루션의 Web Shop 기능을 이용하여 B2B 건축자재 Shopping Mall을 구축하는 프로젝트를 수행한 적이 있다. B2B Shopping Mall이었지만 수천 명을 대상으로 하는 site였기에 일반 Shopping Mall의 기능과 같이 만들어야 하는 과제를 수행했다. 이때 이 솔루션이 가지고 있던 Web 기술이 Business HTML이라는 것이었던 것으로 기억한다. SAP 전용의 Web 기술 기반이었는데 이 도구를 가지고 ABAP의 로직을 개발하는 그룹과 JAVA의 Web frontend를 개발하는 사람들 간의 어려웠던 소통과정을 겪으면서 고생했던 기억이 생생하다. 그래도 어쨌든 훌륭한 site를 만들기는 했다.

이 Web UI 기술 이후에도 정말 다양한 SAP의 Web UI 기술이 도입되고 진화되어 왔다. 현재 어쨌든 적용되고 있는 SAP의 UI 기술만 해도 SAP GUI for Windows, SAP GUI for HTML, Web Dynpro ABAP, Floor Plan Manger, Web Client, SAP UI5 Free Style App, SAP Fiori Element App 등 다양하다.

S/4HANA의 진화와 함께 SAP는 S/4HANA의 미래지향 UI/UX 기반은 SAP의 Fiori로 천명하였고 다른 모든 SAP의 LOB 솔루션들의 UI/UX도 SAP Fiori로 통일되어 가고 있다고 볼 수 있다. 따라서 변화하는 사용자 그룹의 사용자 경험을 강화하고 SAP 솔루션의 미래지향적인 UI/UX 전략 및 기술에 대하여 검토하고 차세대 ERP의 사용자 경험을 설계하는 것은 필수적이며 프로세스, 데이터 설계에 중요한 영향을 미치고 제반 기술 Architecture를 설계하는 작업에 적지 않은 영향을 미치게 된다.

이번 장에서는 S/4HANA의 차세대 UI/UX 표준인 Fiori에 대하여 살펴보고 차세대 ERP 구축을 위해 확보해야 할 기술적 기반과 프로젝트 참여자들의 역량 및 프로젝트에서 정립해야 할 정책에 대하여 정리해 보고자 한다

5.1 Fiori 개요

SAP Fiori는 SAP의 UI/UX를 위한 Framework으로서 모든 LOB 사용자, 모든 Device, 모든 Deployment option에서 일관되고 전체적인 사용자 경험을 제공하기 위한 개념, 디자인 원칙과 이를 구현하기 위한 기술을 통칭하는 Brand명이다. Fiori concept은 직무 역할 기반, adaptive, simple, coherent, delightful 등의 현대 디자인 원칙에 근거하여 사용자의 경험 단순화에 근거한다. Fiori 디자인은 Fiori 디자인 가이드에서 제시된 visual design, Inforamtion architecture, 색상, interaction 유형등을 담고 있다. Firoi 기술은 Fiori App을 구축하고 실행하기 위한 모든 아키텍처, 기술, 인프라스트럭쳐 및 프로그래밍 모델과 앱을 실행하고 앱 간 내비게이션을 할 수 있도록 하는 사용자의 Single Entry Point로서의 Fiori Launchpad을 포함한다.

[그림 5-1] Fiori Overview

1) Fiori Launchpad : 사용자가 S/4HANA의 여러 App들을 실행할 수 있는 Single Entry Point 역할하는 도구로서 메뉴 역할을 하는 Space-Page-Section-Tile의 구조를 가짐

2) Tile : 사용자가 Fiori App을 실행할 수 있도록 해주는 기능 수행하며 단순히 App을 실행시키는 역할만 하는 Launcher tile과 특정 정보(KPI)를 보여 주면서 App을 실행할 수 있는 KPI Tile로 구분할 수 있음

3) Fiori App : Fiori 개념을 가지고 Fiori Design 원칙에 따라 Fiori 기술(UI5등)로 구현되어 특정 업무 기능을 수행하는 Web Application

4) UI5 : Fiori 개발 언어로 HTML5에 기반하고 있으며 XML Annotation과 Java Scripts로 Front End Web을 개발할 수 있도록 함

5) Fiori Elemet : UI5로 Fiori App을 만들 수 있도록 미리 준비된 Building Block으로 Fiori App의 사용자 경험 일관성과 개발 생산성을 높일 수 있도록 제공되며 주로 XML Annotation으로도 주요 App을 개발할 수 있음

6) Free Style UI5 App : 사용자의 요구 사항이 Fiori Element App의 준비된 Building Block만으로만 구현하기 어려운 경우 UI5 기술로 자유롭게 개발하는 Fiori App. 최근에는 Fiori Element의 장점과 UI5 Free Style App의 장점을 결합할 수 있는 Flexible Programming Model 등장으로 개발 생산성과 사용자 요구 사항 대응력을 강화할 수 있게 하고 있음

7) Fiori Tool : Fiori Element App 및 Free Style App을 개발할 수 있도록 지원하는 도구로 개발 생산성 향상을 위한 여러 지원 도구를 제공함

8) BAS(Business Application Studio) : VS code와 함께 Fiori 개발자들이 Fiori App을 개발할 수 있도록 해주는 통합 개발환경(Integrated Development Environmen: IDE). VS Code는 개발자 개인 PC에서 활용할 수 있으나 BAS는 SAP BTP에서 서비스되는 개발 도구임

9) Adaptation Project : BAS상의 Visual Editor를 활용하여 S/4HANA의 표준 Fiori App의 화면을 표준 수정 없이 Enhance 할 수 있도록 하는 도구

5.2 Fiori Element App

사용자가 느끼는 S/4HANA와 SAP R/3 ECC의 가장 큰 차이는 UI/UX의 변화이다. SAP R/3 ECC는 전용 Application인 SAP GUI를 통하여 Easy Access 메뉴를 통하여 Transaction(T-Code)를 실행한다.

[그림 5-2] SAP GUI Easy Access Menu

SAP가 표준으로 제공하는 메뉴 트리와 함께 사용자 역할에 따라 부여된 권한에 따른 메뉴가 제공되었다. 또한 시스템 메뉴 자체도 각 회사의 요구에 따라 재구성하여 설정할 수도 있다. 이 외에 Favarite 기능, T-Code 직접 입력 실행 기능 등 다양한 사용자 편의 기능을 제공하였으나 기본적으로 사용자가 실행해야 할 업무(해당 Transaction)를 찾아 실행해야 했고 업무 간의 연계 지원도 부족하였다.

S/4HANA의 기본 사용자 접근 통로는 Fiori Launchpad이다. Fiori Launchpad에는 사용자의 직무 역할과 권한에 따라 메뉴에 해당하는 Space-Page가 제시되고 Page내의 Section별로 구분된 Fiori App의 실행 Icon인 Tile들이 표시되고 Tile을 클릭하여 실행하게 된다. Fiori Launchpad에 대하여는 다음 절에서 조금 더 자세히 살펴보겠다.

[그림 5-3] Fiori Launchpad에서의 App 실행

S/4HANA에는 다양한 유형의 App들이 제공되고 있으며 기존의 SAP GUI App을 빠르게 대체해 나가고 있다. 그중 많은 App들이 Fiori Element App이라는 유형으로써 Fiori 개념 및 디자인 원칙/요소에 근거하여 UI5 기술로 미리 정의해 둔 Framework에 기반하여 만들어진 App이다. Fiori Element는 App 디자인의 일관성을 유지하고 개발의 생산성을 높이기 위하여 공통적으로 많이 사용되는 Floorplan에 기반하여 제공된다. 현재 5가지 Fiori Element 유형이 제공되며 표준 App들의 상당 부분도 이들 유형으로 만들어져 있다. Fiori Element로 충족할 수 없는 복잡한 구성의 App은 Free Style UI5 App으로 자유롭게 구성하여 만들 수 있으며 요즘은 2가지 방식의 장점을 활용한 Flexible Programming Model의 도입으로 일관성/생산성과 사용자 요구 대응이라는 상충된 목표를 달성하려고 하고 있다.

S/4HANA OP 2022 기준 List Report, Object Page, Analytical List Pate, Overview Page, Worklist 등 5가지 Fiori Element 유형의 App이 제공된다. 이들 Fiori Element App들은 다음 그림과 같은 Navigation Flow로 활용될 수 있다.

[그림 5-4] Fiori Element App 유형과 App Navigation

1) List Report

필터(검색 조건)와 함께 그 결과를 리스트 형태로 보여주는 가장 기본적인 Fiori Element App이다. 기존 GUI에서의 선택 조건 화면과 결과 리스트 화면을 하나의 화면으로 결합한 형태로 이해하면 된다. 새로운 Object(혹은 문서)를 생성하거나 리스트 된 대상 Object를 변경/조회할 수 있다. 대부분의 경우 상세 화면 이동으로 개별 Object를 조회할 수 있으며 이때에는 다음에 설명할 Object Page 유형의 Fiori Element App으로 보여 준다. 리스트 화면에서 여러 가지 Action 수행을 통하여 해당 Object를 변경할 수도 있다. 예를 들어 오더 block 처리를 한다던지 특정 항목들을 복수 선택하여 변경하다던지 하는 기능을 수행할 수 있다.

[그림 5-5] List Report Fiori Element App

샘플 App List :

- Manage Sales Order V2(F3893)

- Manage Purchase Orders V2(F0842A)

- Manage Planned Orders(F4170)

- Manage Cost Centers V2(F1443A)

2) Object Page

개별 업무 개체(영업 오더, 구매 오더, 생산 오더, 회계 전표 등)에 대한 상세 정보를 표시하거나 분류하여 제공하는 Fiori Element App 유형이다. 분류된 컨텐츠는 Anchor 또는 Tab Navigation을 사용하여 빠르게 조회할 수 있으며 사용자는 편집 모드로 전환하여 해당 문서의 변경도 가능하다.

보통의 경우 List Report와 조합하여 사용되며 리스트 된 결과의 상세 내용 조회 및 변경에 활용된다.

[그림 5-6] Object Page Fiori Element App

샘플 App은 앞의 List Report 유형의 App들을 실행하여 상세 Page로 이동하여 확인할 수 있다.

3) Analytical List Page

Visual filter와 Chart Content를 리스트 테이블과 함께 사용하여 처리 대상 이슈 영역을 쉽게 탐색할 수 있도록 하는 Fiori Element App 유형이다. List Report의 특별한 형태로도 이해할 수 있으며 다양한 방식의 검색을 통하여 처리 대상 영역/항목을 빠르게 찾아 처리하기 위한 목적으로 설계된 Fiori Element App 유형이다.

[그림 5-7] Analytical List Page Fiori Element App

Analytical List Page App의 Header 영역에서는 Global KPI Tag를 표시할 수 있으며 tag 클릭 시 KPI의 상세 내용을 표시할 수 있다. 또한 Dynamic page header 기능을 통하여 Header 영역의 Filter 부분을 감출 수 있으며(Collapased header) Filter를 표시하는 Expanded header에서도 visual filter bar를 표시하거나 Compact filter를 표시하게 선택할 수 있다.

[그림 5-8] Analytical List Page Fiori Element App의 Header 영역

Content 영역에서는 Chart와 Table 시각화를 동시에 적용하는 Hybrid View 형태로 활용하거나 Chart ony view 혹은 Table only view 형태로 활용할 수도 있다.

[그림 5-9] Analytical List Page Fiori Element App의 Content 영역

샘플 App List :

- Sales Order Fullfilment Issue(F0029A)

- Monitor Purchase Order Item(F2358)

- Reconcile GR/IR Accounts(F3302)

- Supervise Collections Worklist(F2375)

- Analyze Costs by Work Center/Operation(F3331)

4) Overview Page

업무 영역 혹은 직무(Role) 단위로 요약된 정보를 집약 제공하여 업무 현황 파악을 용이하게 하고 후속 처리가 필요한 영역으로 이동할 수 있도록 해 주는 Fiori Element App 유형이다. Global Filter의 Header 영역과 Card들의 조합으로 구성되는 Content 영역으로 구성된다.

[그림 5-10] Overview Page Fiori Element App

Overview Page의 정보들은 다양한 형태의 Card로 표현되는데 특히 Analytical Card type을 사용하여 다양하게 요약 정보를 제공할 수 있다

[그림 5-11] Overview Page App의 Card 유형

앞에서 Fiori Element App 간의 Navigation을 설명하는 그림을 잘 보았다면 Fiori Launchpad를 통해서도 List Report 등의 list형태 App으로 이동할 수 있고 Fiori Launchpad에서 Overview Page를 실행한 후 Overview Page에서도 여러 List 형태의 App으로 이동할 수 있는 것을 확인할 수 있었을 것이다.

이러한 기능 때문에 Overview Page를 Launchpad처럼 사용하려고 시도한 프로젝트들이 있었다. 그러나 이렇게 되면 모든 사용자가 정보량이 많은 Overview Page를 접속하여 다른 App으로 이동하게 되기 때문에 응답 속도 저하라는 성능상의 이슈에 직면하게 되었다. 따라서 아래 각 기능들의 특징을 잘 이해하고 거기에 맞게 적절한 Navigation을 설계하는 것이 중요하다. Overview Page가 상세 App으로 이동하는 메인 페이지 기능을 하는 면에서 FLP Home과 유사하나 Overview Page를 Single Entry Point로 사용하지 말고 Fiori Launchpad Home에서 Overview 페이지로 이동하는 것을 권고한다.

[그림 5-12] Fiori Launchpad와 Overview Page의 Navigation 관점 차이

샘플 App List :

- Sales Management Overview(F2601)

- My Sales Overview(F2200)

- Customers Overview(F4645)

- Procurement Overview Page(F1990)

- Overview Inventory Management(F2769)

- Inventory Analysis Overview(F3366)

- Planner Overview(F2832)

- General Ledger Overivew(F2445)

- Asset Accounting Overview(F3096)

- Accounts Receivable Overview(F3242)

- Accounts Payable Overview(F2917)

- Order-to-Cash Performance - Overview(F2242)

5) Worklist

사용자가 처리해야 하는 항목 모음을 표시한다. 일반적으로 항목의 세부 정보를 검토하고 조치를 취하는 항목들이 표시된다.

[그림 5-13] Worklist Fiori Element App

화면의 구성에 따라 단순한 Worklist, 여러 개의 Tap으로 구성된 Worklist, KPI를 표시하는 Worklist 등으로 활용될 수 있다.

[그림 5-14] Worklist 유형들

샘플 App List :

- Process Collections Worklist(F0380)

5.3 Fiori Floor Plan, Layout, UI element

Fiori Floor Plan은 Use case별 사전 정의된 Page Layout이다. Page Layout은 Page 구성 방식으로 화면의 구성요소와 UI Element들이 어떻게 배치될지를 정의한다.

1) Fiori Floor Plan

현재 7개의 Fiori Floor Plan이 제공되며 Initial Page와 Wizard Page를 제외하고는 Fiori Element에 사용되고 있고 이름도 Fiori Element 명과 동일하다. 여기서는 Fiori Element에 사용되지 않는 Initial Page와 Wizard Page에 대하여 설명한다.

(1) Initial Page

Initial Page Floor Plan은 단일 Object를 조회 편집할 수 있게 하는 floorplan으로 사용자가 단일 입력 필드에 대상 Object를 입력하여 실행한다. Dynamic page header와 content area를 가진 Object page 유형에 기초하여 만들어져 있다.

[그림 5-15] Initial Page Fiori Floor Plan

샘플 App List :

- Post Goods Receipt for Production Order(F3110)

(2) Wizard

Wizard Floor Plan은 여러 단계/익숙하지 않은 단계를 처리할 수 있게 해주는 floorplan으로 task들이 순차적으로 section으로 표시되고 마지막에 Summary page에서 확인하여 마지막 처리를 할 수 있도록 하게 구성되어 있다.

[그림 5-16] Wizard Fiori Floor Plan

샘플 App List :

- Track Sales Order(F2577)

- Track Supplier Invoices(F0217)

2) Page Layout

Fiori Layout은 Page 구성 방식으로 현재 6가지가 제공되고 있으며, 표준 Page Layout은 Header, Content, Footer Toolbar로 구성된다. Full Screen Layout으로 한 화면에 하나의 Page를 보여주거나, 한 화면에 여러 Page 구성으로 List-Detail 관계를 표현할 수도 있다.

[그림 5-17] Page Layout 유형

(1) Dynamic Page Layout

Fiori의 기본 Page Layout으로 Header, Content, Footer Toolbar로 구성된다.

- 모든 Page의 기본 형식으로, 이를 다양하게 활용하여 평면도 및 Case를 설계할 수 있음
- Header와 Footer bar 사이즈는 대/중/소의 스크린 사이즈에 따라 유연하게 자동 조정됨
- 여러 열을 가진 레이아웃 화면에서, 각 열에 서로 다른 Dynamic Page를 다양하게 적용 가능

[그림 5-18] Dynamic Page Layout

(2) Comparison Pattern

List 중 여러 item을 선택하고 해당 특성들을 비교할 수 있는 Layout이다.

[그림 5-19] Comparison Pattern Layout

(3) Semantic page

Dynamic page의 기본 기능에 Header toolbar와 footer toolbar에 title, global action, finalizing action 같은 사전 정의된 Content element를 추가할 수 있어 Freestyle App 기본 Layout으로 권장된다.

[그림 5-20] Semantic Page Layout

(4) Flexible layout

Flexible layout은 한 Page에 여러 Floorplan(최대 3개 Column)을 표시할 수 있어서 일반적인 Page 간 이동 탐색보다 더 빠른 탐색이 가능하다.

[그림 5-21] Flexible Layout

(5) Letterboxing

Letterbox 기능을 활용하면 화면 크기가 달라져도 인터페이스 가로세로 비율이 고정되기 때문에 콘텐츠의 왜곡이 없게 된다.

[그림 5-22] Letterboxing Layout

(6) Multi-Instance Layout

한 페이지에 여러 Object를 표시하고 구성할 수 있어 여러 개체를 동시에 열고 편집해야 하는 경우 사용할 수 있다. 예를 들어, List Report에서 개체를 여러 개 선택하여 열면 각 개체가 별도의 탭에 나타난다.

[그림 5-23] Multi-Instance Layout

3) UI Element

UI Element는 Fiori UI에서 다양한 컨트롤 기능을 지원한다. 단일 Control 또는 여러 Control이 복합된 Complex Control도 활용할 수 있다.

[그림 5-24] Fiori UI Element 유형과 예제

5.4 Fiori Launchpad - Fiori App and tile

Fiori App(WebGUI App 포함)을 활용하는 기본 관문 혹은 Platform은 Fiori Launchpad(FLP)이다. SAP Fiori Launchpad는 모바일 및 데스크톱 장치(Web)에서 SAP Fiori 앱의 실행을 위한 진입점으로서, User의 업무 역할 기반으로 기본 화면이 구성된다. User 개인화 세팅이 가능하며 다음과 같이 특징을 요약할 수 있다.

[그림 5-25] S4HAHA 활용 시작점으로서의 Fiori Launchpad

- Access 편리성 : 멀티 디바이스 지원 UI 환경 (웹 브라우저), Fiori App 실행을 위한 최초/단일 진입점
(FLP에서 메뉴, App으로 이동)

- Role & User 특화 : User의 Biz. Role 설정에 따라 FLP 구성(메뉴 및 타일), User별 화면 레이아웃/기능 개인화

- Fiori Apps + Classic UI(GUI for HTML(WebGUI), WDA) 모두 사용

- 분석, 알림, 통합 App/Object 검색, 향상된 App 내외 탐색

1) Fiori Launchpad 구성

Fiori Launchpad에는 사용자 Role에 따라 실행할 수 있는 Fiori App이 표시된다. Launchpad는 Space > Page > Section 영역으로 구분되며 Section 내 Fiori App Tile을 클릭하여 App의 기능을 실행할 수 있다.

[그림 5-26] Fiori Launchpad 구성

(1) Space : Page들의 모음으로 User의 Role에 따른 진입점. Role 별 하나 혹은 여러 개의 Space로 구성되어 있다.

(2) Page : Space를 구성하며 Page는 Section으로 구성된다. Space의 하위 메뉴로 표현된다.

(3) Section : Page 하위 내용을 작업 주제별로 Grouping 한 것이다.

(4) Tile : Section 내에 배치된 타일을 클릭하여 Fiori App으로 이동한다. 다양한 타일 크기, 유형 선택 가능하다. Basic Launch Tile, Monitoring Tile, KPI Tile, Comparison Tile, Link Tile 등이 있다.

사용자 설정에서 Sapce 사용을 Default로 설정해야 한다. 이전 버전에서 사용하던 Group - Page 방식의 Navigation의 성능 등 이슈를 해결하기 위하여 Space - Page 방식으로 변경되어 이 방식이 기본이 되었는데 S/4HANA 2022 기준으로 사용자의 기본 설정은 Group 방식으로 되어 있어 이 설정을 바꾸지 않고 사용할 경우 여러 이슈에 직면하게 된다. 사용자 설정 변경은 곧 다룰 예정이며 아래와 같이 설정을 변경할 수 있다.

[그림 5-27] Space Page 기본 설정

2) Fiori Launchpad(FLP) 구성 요소 간 작동 방식

FLP는 Space – Page – Section – Tile로 구성되고, User는 Tile을 클릭하여 App으로 이동하여 실행할 수 있다. 사용자 직무 역할에 맞는 Biz. Role과 Space를 Mapping 하여 User 권한과 메뉴를 설정할 수 있다. 직무 역할(Business Role)에 Space, Catalog 및 하위 App의 사용 권한을 설정한다. Catalog는 Tile들로 구성되며 Tile의 Action, Visual 등이 설정된다. 사용자는 FLP의 Tile을 통하여 App을 실행한다. FLP 구성 요소들의 설정에 대하여는 다시 자세히 설명하도록 하겠다.

[그림 5-28] FLP 구성 요소 간 작동 방식

3) Fiori Launchpad(FLP) Tile

Tile은 FLP에서 App을 나타내는 컨테이너로 이를 클릭하여 App을 실행한다. App의 Data를 활용하여 다양한 유형의 Tile 생성 가능이 가능하다.

[그림 5-29] Fiori Launchpad Tile

4) User Action 메뉴

Fiori Launchpad의 우측 최상단 사용자 profile 아이콘(사용자 이미지나 사용자명 이니셜로 표시됨)을 클릭하여 User Action 메뉴를 실행할 수 있으며 사용자 설정 변경, App 찾기, Page를 개인화할 수 있는 현 Page 편집, My Home 구성 등을 수행할 수 있다.

(1) 사용자 설정 변경(Settings)

FLP 상단 Shell Bar의 User Action Menu에서 검색 및 설정 등을 할 수 있고, 특히 Settings에서 사용자별 화면 구성 및 조회, 알림, 검색에 대한 설정을 할 수 있다.

- UI 테마 설정 : SAP 표준 테마 혹은 Custom 테마 설정

- Default 값 설정 : App 실행 시에 사용되는 기본 값 설정

- Space, Page 설정, My Home 설정 등

- 사용 언어 및 Region 설정

[그림 5-30] User Action Menu - Settings

(2) App 찾기(App Finder)

App Finder에서 App을 검색하고 Page에 추가하거나 직접 App을 실행할 수 있다. 아쉬운 것은 App ID로의 검색 기능은 지원하지 않는다. App ID로 App을 찾고 싶으면 Fiori Reference Library에서 찾을 수 있다. 다음 Verion에서는 App ID 검색 기능도 지원되기를 기대해 본다.

[그림 5-31] User Action Menu - App Finder

App Finder에서는 Fiori App뿐만 아니라 WebGUI App도 검색이 가능한데 GUI의 SAP Menu 혹은 권한 설정에 따른 사용자 Menu를 조회하고 확인할 수 있다. 검색된 App은 + 버튼을 실행하여 원하는 Space의 Page에 추가하거나 직접 App을 실행할 수도 있다.

(3) User Action Menu – Page 개인화(Edit Current Page)

현재 Page의 Section/Tile을 재정렬하거나 Section이나 Tile 추가, Section 이름 변경, Tile Size 변경, Tile 이동 등 현재 사용하고 있는 Page를 사용자의 필요에 의하여 Personalization 할 수 있다.

[그림 5-32] User Action Menu - Page 개인화

(4) User Action Menu – My Home 구성

FLP의 My Home은 로그인 후 보이는 첫 번째 페이지로 개인화된 Homepage의 개념이다. Setting과 Edit Current Page 기능을 활용하여 Page 개인화와 동일하게 타일/Section을 Personalization 할 수 있다.

먼저 Settings 설정을 통하여 My Home 기능을 사용할 것인지를 설정하고 Edit Current Page를 기능을 통하여 다른 Page와 동일하게 Page 구성을 개인화할 수 있다.

[그림 5-33] User Action Menu - My Home Page 설정

5) Fiori Launchpad Shellbar 기능

FLP Shellbar는 Fiori Launchpad 최상단 영역으로 Navigation 메뉴 및 Logo 이미지를 활용한 Home Page로의 이동, 검색, 도움말, Notification, User Action 메뉴 등을 실행할 수 있다.

(1) FLP Shell Bar – Enterprise Search (통합 Search)

Shell Bar의 Enterprise Search에서 모든 Fiori App/Biz. Object들을 통합 검색 가능하며, 검색 필터를 설정하여 카테고리별 검색을 수행할 수 있다.

[그림 5-34] Fiori Launchpad Shell Bar - Enterprise Search

검색 대상은 App, 사용자 설정(User Action Menu의 Setting)에서 설정한 favorites 및 설정된 Object 각각으로 설정할 수도 있고 All로 모든 대상을 검색할 수도 있다. 검색 대상의 기본 값을 All, My Favorites, App 중에 선택하여 설정할 수도 있다. 물론 시스템 관리자의 역할이다. 물론 기본 값과 달리 사용자가 변경하여 검색을 실행할 수 있다.

검색된 App은 Tile의 형태로 표시되고 클릭하여 실행할 수도 있다.

Object ID, 예를 들어 판매오더 번호, 구매 오더 번호, 자재 마스터 번호 등을 Key Word로 하여 검색을 실행하며 해당 Object들이 검색되고 이를 집적 상세 내용을 조회할 수도 있다. 따라서 각 Object의 리스트/조회 기능을 수행할 수도 있는 것이다.

검색 결과 화면에서는 결과가 많은 경우 Filter 기능을 사용하여 다시 검색을 분류하여 확인할 수도 있다. 검색 결과는 저장, 공유할 수도 있다.

Enterprise Search의 검색 대상 설정은 사용자의 Role/권한 설정과 별도로 설정되고 부여되어야 한다. 따라서 검색 성능, 사용자의 권한 등을 고려하여 적절하게 설정되어야 한다.

(2) FLP Shell Bar – Notification

Shell Bar의 Notification 버튼을 클릭하여 조치나 주의가 필요한 사항의 알림 받을 수 있다. 알림 목록에는 편지함 또는 채팅 알림과 같은 다양한 소스에서 생성된 알림이 표시되나. 이 기능을 사용하기 위해서는 S/4HANA의 Workflow 구성이 필요하다.

[그림 5-35] FLP Shell Bar - Notification

(3) FLP Shell Bar – Help

사용자는 Shell Bar의 Help 아이콘을 선택하여 현재 사용 중인 UI에 사전 정의된 도움말 및 Tutorial을 활용할 수 있다. 사전 정의된 컨텐츠의 수정 및 고객 맞춤 구현을 위해서는 SAP Enable Now 라이선스가 필요하다.

[그림 5-36] FLP Shell Bar - Help

6) Fiori Launchpad에서의 신규 Tile 및 메뉴 구성

새로운 App을 FLP에서 실행할 수 있도록 하기 위하여는 Tile을 생성하고 이 Tile이 Space-Page 상의 Section에 표시되어 사용자가 실행할 수 있도록 해야 한다. 이 절차와 방법에 대하여 알아본다. 간단하게 요약하면 Catalog을 생성하여(혹은 기존 Catalog을 활용하여) 생성된 Tile에 대하여 시각적 이미지 및 탐색 속성을 정의하고 Target Mapping을 설정하여 특정 App을 실행하는 연결 속성을 정의한다. 이는 Tile의 탐색 속성과 App URL 등을 맵핑하는 것이다. 또한 생성된 Tile은 Section에 배치되어 Page에 지정되어야 하고 Page는 Space에 지정되어야 한다. 마지막은 Business Role에 Space와 Catalog를 지정한 후 사용자에게 Role을 지정하면 된다.

[그림 5-37] FLP에서 신규 Tile 및 메뉴 구성 절차

(1) Catalog 생성

Catalog란 Tile로 형상화/실행되는 App의 묶음으로, Tile의 이미지와 클릭 시 수행하는 속성 등이 정의된다. 추후 Role에 할당된 Catalog에 따라 사용자는 Catalog/App 탐색, 실행, Launchpad에서 개인화할 수 있다.

[그림 5-38] Catalog 생성

(2) Tile 생성

Catalog 내 Tile들을 생성하고 Tile의 Template 유형 및 속성을 정의한다. Launchpad Designer App을 사용한다.

- 해당 Catalog의 Tile 탭에서 Tile을 생성을 실행한다.

- Tile Template을 선택한다. App Launcher-Static(App 실행용 Tile), App Launcher-Dynamic(App 실행용 + Tile에 App의 변동성 정보 표시(Odata 서비스를 사용하여 Backend 시스템에서 가져옴)), News Tile(기사 URL을 통해 News를 보여 주는 Tile)

- Tile Configuration 수행 : Template 유형에 따라 필요한 설정 수행, 예를 들어 App Launcher-Dynamic의 경우 General 속성 정의, Dynamic Data 정의, Navigation 속성 정의, Tile Action 속성 정의 등을 수행한다.

[그림 5-39] Tile 생성

Fiori App 이외에 WebGUI App도 Tile을 생성할 수 있다. S/4HANA에서는 주요 필요한 WebGUI는 Tile을 구성하여 표준 Catalog에 구성한 후 Role에 지정되어 있다. 그러나 모든 GUI 화면을 Tile로 만들어 제공하지는 않기 때문에 이런 경우 WebGUI Tile을 별도로 만들어야 한다. 또한 Custom 개발한 Transaction 들도 별도로 Tile로 만들어야 App으로 실행할 수 있다.

[그림 5-39A] WebGUI App Tile 생성

(3) Target Mapping

Target Mapping을 통하여 Tile의 탐색 속성(Intent-Semantic Object, Action)과 Tile의 탐색 Target인 App 속성을 연결한다.

- Tile 탐색 속성 정의

- Tile의 탐색 Target인 App 속성 정의

- 수행 Device 유형 정의

- Parameter 정의

[그림 5-40] Target Mapping

(4) Page 생성

Page는 Space에 포함되는 화면 단위로 신규 생성하거나 또는 기존 Page를 Copy 하여 생성 가능하다.

[그림 5-40] Page 생성

(5) Page 내 Section 정의

Page 내 주제별 Section들을 구성하고 Tile을 배치한다.

[그림 5-42] Page 내 Section 정의

(6) Tile 추가

Page의 Section 영역 내에 Tile을 추가한다.

[그림 5-43] Page Section에 Tile 추가

(7) Page를 Space에 지정

생성한 Page를 포함할 Space를 선택하여 지정한다. 이 Page는 Space의 하위 메뉴를 구성한다.

Manage Launchpad Pages App에서 Page에 Space를 지정하거나 Manage Launchpad Space App의 Space Detail에서 Page를 지정할 수도 있다. Page를 지정할 Space가 아직 만들어지지 않은 경우에는 신규 Space 생성해서 지정하면 된다.

[그림 5-44] Page를 Space에 지정

(8) Space 생성

Space는 Launchpad의 첫 진입점으로 화면 단위인 Page들의 모음이다. 화면의 상단 메뉴 탭과 유사하며, Space는 추후 Role에 매핑되어 User에게 조회된다.

[그림 5-45] Space 생성

Manage Launchpad Space App을 실행한 후 Create 버튼을 클릭하여 Space를 생성하며 Space 정보를 입력한다. Space Title 필드에는 UI 화면에 보이는 Space 이름을 입력한다. 해당 Space 하위의 Page도 동시에 생성하려면 ‘Also create a page’ 체크박스를 클릭하고 Page 정보를 입력하면 된다.

다른 방법으로는 기존 Space를 복사하여 생성할 수도 있다.

(9) Role에 Space/Catalog 지정

사용자는 Role에 기반하여 FLP를 사용할 수 있다. 따라서 Role에 Space와 Catalog를 추가하고, Role을 User에 지정해야 한다.

[그림 5-46] Role에 Space Catalog 지정

5.5 S/4HANA 표준 Fiori App의 확장(UI enhancement)

Fiori App은 다양한 Enhancement 방법을 통하여 기존 GUI App 대비 표준에서 제공하는 Fiori Element App을 다양하고 유연하게 사용자 요구에 맞춰 확장, 조정할 수 있다. layering 개념에 의하여 표준 수정 없이 대응 가능하다. 각 사용자 Level에서의 변경/확장은 Runtime 환경에서 Combine 되어 적용된다. SAP UI5 Flexibility는 표준 Fiori UI Extension을 제공하는 기술적 기반이며 아래 그림의 오른쪽 상단과 같은 프로그램 설정이 있으면 Flexibility 적용 가능하다. SAP UI5 Flexibility는 사용자 Persona에 따라 표준 확장(extension, Enhancement) 기능을 제공한다

[그림 5-47] Layering 개념 기반의 표준 Fiori App의 확장

과거 R/3 ECC에서의 GUI에도 UI의 Enhancement 기능이 일부 제공되었으나 아주 제한적이었다. 실제 Task 단위의 업무의 흐름이 시스템 화면의 구성과 흐름에 반영되어 있었다면 SAP 가 제공하는 기존의 UI 구성은 복잡하고 산만하여 집약적으로 빠르게 업무 처리하고자 하는 한국 사용자들의 업무 형태에 부합되지 않는 경우가 많았다. 이러한 이유 때문에 개발이 늘어나게 된 측면도 많다.

그러나 이제는 이러한 다양한 UI Enhancement 기능을 통하여 사용자의 업무 처리 흐름에 부합하는 UI 구성 및 흐름을 설계하고 구성할 수 있게 되었다. 특히 표준 Fiori App의 UI를 다양하게 확장하여 사용하거나 Backend의 표준 로직에 기반하여(Odata Servie) UI만 재구성하는 방법도 가능하게 되었다. 물론 기능상의 Gap도 존재하고 이 것이 또 다른 추가 개발의 이유가 되기도 하는데 기능을 확장하는 다양한 방법 또한 제공한다. 이 부분에 대하여도 이후 설명하도록 하겠다.

표준 UI는 사용자의 기술적 역량 차이에 따라 사용자 개인화 수준의 일반 사용자 Personalization, Key User의 UI Adaptation(User Action Menu의 Adapt UI 기능을 통해, 권한 필요), 개발자의 SAPUI5 Flexbility 기반의 표준 확장 등이 제공된다.

1) 표준 Fiori App 확장(Extension or Adaptation)의 기술적 구조

Key User Adaptation과 Developer Adaptation(Adaptation Project)는 Extension Point 필요 없이 표준 App을 확장할 수 있게 해 주는 도구들로서 SAPUI5 Flexbility 기술에 기반하고 있다.

[그림 5-48] UI Adaptation(In-App Extensibility) 기술적 구조

- Key User Adaptation(Adapt UI) : Key user가 runtime에 User Actions Menu를 통하여 표준 UI Adaptation 가능

- Developer Adaptation(Adaptation Project) : Fiori UI5 개발자가 Design time에 BAS(Business Application Studio)의 Visual Editor를 사용하여 통하여 표준 UI Adaptation 가능

2) Key User Adaptation(Adapt UI)

Fiori Launchpad 기능으로 다양한 표준 UI 조정 기능 수행 가능하다.

[Step 1] Adapt 이 필요한 App 실행 후 사용자 Action Menu 클릭 후 Adapt UI 실행

[Step 2] UI Adaptation Mode에서 필요한 UI 조정 수행

[그림 5-49] Key User Adaptation(Adapt UI)

표준 Adapt UI Fiori App UI Enhancement에 대하여는 이후 표준 확장을 설명하는 장에서 더 상세히 다루겠다.

3) Developer Extension(Adaptation Project) – Using SAPUI5 Visual Editor

SAPUI5 Visual Editor의 Canvas 혹은 Outline Pane에서 대상 UI Element(Control)을 선택한 후 Add Fragment, Extend with Controller Extension, Add Fragment into Extension Point 등 표준 UI의 Extension을 수행할 수 있다.

[그림 5-50] Adaptation Project에서의 UI Enhancement 가능 영역 예시

SAP UI5 Visual Editor에서는 선택된 UI Element 별로 가능한 Extension Option들이 보여 진다.

이를 통해

- Add Fragment

- Extend with Controller

- Add Fragment in Extension Point

- Filter Setting

- Add Content

- 다른 이름으로 뷰 저장 등이 가능하다.

[그림 5-51] Adaptation Project에서의 Extension Option

동일한 Extension Option도 해당 UI Element에서 수행(추가)할 수 있는 Target Aggregation이 다양하게 존재한다. 추가된 Fragement별로 XML 파일이 생성되고 여기에 UI 로직을 추가할 수 다. 또한 각 Extend with Controller에 적용하는 로직은 Javascript로 작성되며 이는 .js 파일에 저장된다.

[그림 5-52] Adaptation Project UI Element Extension Option의 Target Aggregation

이러한 Extension Option들을 활용하여 표준 UI를 확장할 수 있는 기능도 각 Fiori element 유형별로 가능한 Extension이 조금씩 다르다.

[그림 5-53] Fiori Element 유형별 가능한 Extension 기능들

추가되는 표준 확장 항목들의 변경 이력이 Component Structure에 표시되며 Outline Pane옆의 Changes에서 변경 이력을 볼 수 있다. Extension을 삭제할 때에는 여기서 삭제 가능하다. 별도로 삭제 시에는 변경 이력 파일 먼저 삭제 후 Extension 항목 삭제 해야 한다.

[그림 5-54] Adaptation Project Extension 이력 관리

(1) Adaptation Project – Extend View with XML Fragment

UI 요소를 추가하고 Controller를 추가하기 위하여 XML Fragment를 추가한다. XML Fragment는 XML View와 유사한 SAPUI5 Control로서 Fragment는 code를 파일 단위로 분리하여 UI5 페이지 특정 영역에서 call 하여 최종 UI 결과를 도출하는 기술이다. <name>.fragment.xml 형태의 이름을 가진다.

[그림 5-55] Extend View with XML Fragment

(2) Adaptation Project - Using SAPUI5 Flexibility for Controller Extensions

Controller extension은 표준 App에 기능(Functionality)을 추가할 수 있게 해 준다. 추가한 Fragment에 기능을 추가하거나 기존의 Controller(base method) 기능을 override 할 수 있다.

[그림 5-56] Using SAPUI5 Flexibility for Controller Extension

(3) Adaptation Project : configuring the adaptation project manifest

Adaptation Project에서는 표준 app의 Manifest Configuration을 통하여 표준 UI를 확장할 수도 있다.

[그림 5-57] configuring the adaptation project manifest.

(4) Adaptation Project : Adding App Descriptor changes

Adaptation Project에서는 tool 지원 없이 4가지 추가적인 Application Variant 수정 방법을 제공한다.

- Adding Annotation Files(Custom Annotation)

- Adding OData Service and New SAPUI5 Model

- Adding SAPUI5 Component Usages Mannually

- Replace OData Service

[그림 5-58] Adding App Descriptor changes

(5) Extending Apps Using a Canvas Page

Canvas Page는 Fiori Element 기반 App의 empty custom Page이며 Content는 embedded implementation component(reuse component)로 제공되어야 한다.

[그림 5-59] Extending Apps Using a Canvas Page.

(6) Extending Apps Using Component Configuration

[그림 5-60] Extending Apps Using Component Configuration

SAPUI5 flexibility 이외의 방법으로서 Controller Extension의 이전 방식이고 standard controller와 custom controller를 JavaScript object level에서 merge 하는 Variant이다.

이 Enhancement 방법은 더 이상 권고 하지 않는다.

5.6 Fiori App 개발 방법 : Fiori Tool 활용 Fiori Element App 중심

Fiori App은 HTML 기반의 SAP Web 개발 기술인 UI5로 개발한다. UI5 Fiori App 개발 기술을 근간으로 UI/UX 일관성과 생산성을 높이기 위하여 Fiori Element 기반 개발 방법이 발전하고 있다. 물론 사용자의 복잡한 요구 사항에 대응하기 위하여 UI5 Free Style Fiori App 개발도 활용된다. 최근에는 두 프로그램 방식의 장점을 결합한 Flexible Programming Model으로 진화하고 있다.

Fiori App은 Fiori Tool로 개발한다. Fiori Tool은 BAS(Business Application Studio)나 VS Code의 extension으로 Fiori Element App 또는 Free Strle Fiori App을 개발하기 위한 다양한 기능을 제공한다.

Fiori App은 Fiori Tool이 제공하는 다양한 Fiori Template 기반으로 개발된다. Fiori Element App용 5개의 Template 이외에 Free Style App 개발을 위한 Basic Template, Flexible Programming Model용 Custom Page Template도 제공한다. Flexible Programming Model은 Fiori Element building block과 UI5 Control의 장점을 결합할 수 있도록 하는 새로운 프로그램 방식이다.

[그림 5-61] Fiori App Template 유형

Fiori Tool은 BAS나 VS Code의 plug-in으로 Fiori Element나 Free Style 방식으로 Fiori App을 개발할 때 생산성을 높여주는 기능을 제공한다. Fiori Element 개발 시 Metadata driven 방식을 권장하고 개발 Task에 대하여 step-by-step Guide를 제공한다.

Fiori Tool의 주요 기능은 다음과 같다.

- Application Wizard : Application 생성

- Service Modeler : Data Model 조회 및 관리

- XML Annotation Lanauage Server : Annotation을 처리하기 위한 XML 및 form based editor

- Application Modeler: SAP UI5 flexibility 세팅을 정할 수 있는 Application page structure 관리

- Guided Development : 권고하는 절차에 대한 기능을 구현할 수 있도록 도와주는 도구

[그림 5-62] Fiori Tool의 주요 기능

Fiori Tool은 Fiori App 개발의 전 life cycle 동안 필요한 기능을 제공한다.

1) Application Generator : Wizard을 통한 Application 생성

[그림 5-64] Application Generator

2) Service Modeler

Service Modeler를 통해 Service Metadata(metadata.xml)를 시각적으로 확인할 수 있다.

복잡한 서비스를 쉽게 browse 할 수 있고 서비스 내의 entity, projection, property 및 association을 확인할 수 있음

entity, projection, property와 associated 된 annotation을 확인할 수 있음

Fiori element app에 필요한 서비스를 관리할 수 있음: 프로세스에 서비스 추가, 기존 서비스 최신화 위해 Sync

Fiori element project의 서로 다른 OData 서비스에 associated 된 local annotation 관리

[그림 5-65] Service Modeler

Service Modeler를 활용하여 annotation을 찾고, Target를 변경하고, 편집 및 삭제할 수 있다.

Fiori tool – Service modeler로 backend annotation를 조회할 수 있음

Annotation은 projection, entity 및 property에 associate 되고 entity 및 projection 상세 패널이나 node의 Annotation icon으로 확인

List View에서는 Backend 및 local annotation file에 있는 target entity에 associated 된 Annotation 확인 가능

[그림 5-66] Service Modeler - Service Manage & Annotation File Manager

Local annotation이 backend annotation을 override 할 수 있으며 XML code editor로 (복사하여) 편집 가능하다. 이를 통하여 App을 extend 하거나 Customize 할 수 있다.

복사 시 Annotation 파일이 하나이면 자동으로 복사되고 여러 개이면 대상을 선정해 주어야 한다. Local annotation을 local annotation으로도 복사가능하다.

하나 이상의 annotation 파일이 필요하면 Annotation File Manger(Manifest Manager)에서 생성 가능하다.

3) Application Modeler – Page Map & Page Editor

Page Map을 통하여 Application 구조 정의 할 수 있다. avigation 및 page 추가, page 삭제, page editor 실행, Global Setting 설정 등이 가능하다.

[그림 5-67] Application Modeler - Page Map

Page Editor에서 manifest.json이나 SAPUI5 flexibility changes(OData v2)를 설정할 수 있다. Column 추가, Section 추가, Action 추가, View 추가, Controller extension 추가, 필터 필드 추가, Header Section 추가, Sub Section 추가, 필드 추가 등이 가능하다.

[그림 5-68] Application Modeler - Page Editor

Application Information Page를 통해 가용한 manifest와 UI5 flexibility property 개요를 확인할 수 있다.

[그림 5-69] Application Modeler - Application Information

또한 Configuration Document에서 각 페이지 유형별 설정 가능한 속성들을 확인할 수 있다.

[그림 5-70] Application Modeler - Configuration Document

4) Guided Development 기반 Feature Guide 사용 개발

Guided Development extension을 통하여 특정 기능 구현을 위한 How To Guide/Tutorial을 참조하고 제시한 단계별로 개발을 진행할 수 있다. (2023.02 현재 총 59개 Guide가 있으며 OData 버전, Annotation 유형(XML, CDS, ABAP CDS) 따라 적용 가능 여부 다름)

(1) Guided Development 진행할 Project 선택(Project의 Entity, Data Model, Page, Annotation 기반 guide 제공)

(2) Group by : Category(Page 유형, OData 버전, Application artifact(manifest change, flex change, and annotations))별로 guide 조회

(3) 해당 Project(floorplan, OData version, UI5 version) 적용되는 guide 혹은 전체 Guide 선택

(4) Local vs CDS Annotation

(5) How-to Guide/Tutorial

(6) Steps

(7) Start Guide 하면 단계별 개발 절차 시작

(8) 단계별 할 일을 설명대로 처리

(9) 예제에서는 Entity 선택하고 filter field를 추가(2개)하는 것임

(10) 위 단계를 수행할 때 Annotation 창에 로직이 추가됨

(11) Insert snipper를 실행하면 해당 code가 해당 파일(Annotation.xml)에 추가됨

[그림 5-71] Guided Development - 1

[그림 5-72] Guided Development - 2

5) XLM Annotation Language Server(LSP)

Fiori Tool의 XML Language Server extension을 사용하여 annotation.xml 파일(/webapp/annotations/ <filename>.xml) 의 OData annotation을 관리할 수 있다.

(1) XLM Language Server 주요 기능

Code completion 제안을 통한 Input help

Validation Check 및 quick fix

참조 annotation 및 property로 navigation

Vocabulary 정의 Quick view

Quick fix 통한 Internationalization 지원

Annotation의 where-used look-up

(2) XLM Language Server 사용을 위해 필요한 항목

OData Service: service metadata의 local copy

Local Annotation File: < /edmx:DataServices/Schema> node 포함하고 metadata를 참조하는 하나 이상의 annotation XLM 파일

Manifest.json :

 Uri and localUri of the OData service

 List of OData annotation sources

 @i18n model with the uri to the i18n.properties file

6) Application Preview

App generation 후 다양한 방법으로 Preview 할 수 있다.

[그림 5-73] Application Preview

7) Flexible Programming Model

Fiori Element의 Extension Point에 UI5 coding을 자유롭게 쓸 수 있는 것 외에 Building Block을 활용하여 UI5 coding을 최소화하면서 App을 개발 및 Adapt 할 수 있다. 또한 UI5 Free Style App에도 Building block 사용 가능하다.

[그림 5-74] Flexible Programming Model

8) 표준 App Enhancement with Adaptation Project

BAS에서는 Fiori Tool 이외에도 Adaptation Project를 활용하여 앞에서 설명했듯이 S/4HANA 표준 Fiori App을 Enhancement 할 수 있다. 표준 App UI Enhancement에 대하여는 이후 자세히 다루겠다.

[그림 5-75] 표준 App Enhancement with Adaptation Project

5.7 S/4HANA 표준 App 탐색

S/4HANA Fiori App UI에서는 모든 App을 체계적으로 조회할 수 있는 방법이 특별하게 없다. 기본적으로 Role(직무역할) 별 사용자 메뉴 구성을 기본으로 하고 있기 때문이고 엄청나게 많은 App을 일관되게 메뉴 체계로 만들기도 쉽기 않기 때문일 것이다.

최종 사용자 입장에서는 자신의 Role과 권한에 맞게 주어진 App들만 활용 하면 되기 때문에 특별한 이슈가 되지는 않겠지만 시스템 관리자나 Key User처럼 최종 사용자를 위해 App을 구성해 주어야 하는 사람에게는 어떤 App들이 존재하고 이를 어떻게 활용할 수 있는지 확인하는 방법이 필요하다.

그중의 하나가 SAP가 제공하는 Fiori App Reference Library(https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/)이다.