SAPUI5 프롤로그: SAPUI5 시작하기
1. 개요
SAPUI5는 SAP에서 제공하는 엔터프라이즈 웹 애플리케이션 개발 프레임워크이다. HTML, CSS, JavaScript를 기반으로 하며 SAP Fiori 디자인 시스템을 적용한 비즈니스 애플리케이션을 개발할 수 있다.
일반적인 프론트엔드 프레임워크인 React, Vue, Angular가 범용 웹 개발을 목표로 한다면 SAPUI5는 SAP ERP, SAP S/4HANA, SAP BTP와 같은 SAP 생태계에 최적화되어 있다.
SAPUI5를 사용하면 다음과 같은 기능을 쉽게 구현할 수 있다.
- 반응형 UI
- 데이터 바인딩
- MVC 아키텍처
- OData 연동
- 국제화(i18n)
- 라우팅 및 네비게이션
- SAP Fiori UX 적용
SAP의 대부분의 Fiori 애플리케이션은 SAPUI5 기반으로 개발된다.
2. SAPUI5와 OpenUI5의 차이
UI5를 처음 접하면 SAPUI5와 OpenUI5를 혼동하는 경우가 많다.
구분SAPUI5OpenUI5
| 제공 주체 | SAP | SAP |
| 라이선스 | SAP License | Open Source |
| 사용 대상 | SAP 고객사 | 누구나 사용 가능 |
| 컨트롤 수 | 더 많음 | 일부 제공 |
| SAP 서비스 연동 | 최적화 | 제한적 |
간단히 말하면 OpenUI5는 SAPUI5의 오픈소스 버전이라고 이해하면 된다.
실무에서는 대부분 SAPUI5를 사용하지만 개인 학습이나 사이드 프로젝트는 OpenUI5로도 충분하다.
3. SAPUI5를 배우기 전에 알아야 할 것
SAPUI5는 웹 프레임워크이므로 다음 기술에 대한 기본 이해가 필요하다.
필수 선행 지식
- HTML5
- CSS3
- JavaScript ES6+
- JSON
- XML
있으면 좋은 지식
- REST API
- OData
- SAP ABAP
- SAP Fiori
특히 XML View와 데이터 바인딩을 많이 사용하기 때문에 JavaScript와 XML 문법은 반드시 익혀두는 것이 좋다.
4. SAPUI5 개발 환경
현재 SAPUI5 개발은 주로 다음 환경에서 진행된다.
SAP Business Application Studio
SAP에서 공식적으로 제공하는 클라우드 기반 개발 환경이다.
장점
- SAP 공식 지원
- SAP BTP 연동
- Fiori 프로젝트 생성 지원
- OData 서비스 연결 편리
실무에서는 가장 많이 사용된다.
UI5 CLI
로컬 환경에서 개발할 경우 UI5 CLI를 사용할 수 있다.
설치
npm install --global @ui5/cli
버전 확인
ui5 --help
프로젝트 실행
ui5 serve
빌드
ui5 build --all
UI5 CLI는 Node.js 기반으로 동작하며 로컬 개발 시 매우 유용하다.
5. SAPUI5 애플리케이션 구조
SAPUI5 프로젝트는 일반적으로 다음과 같은 구조를 가진다.
webapp
├── controller
│ └── Main.controller.js
├── view
│ └── Main.view.xml
├── model
├── i18n
├── css
├── Component.js
├── manifest.json
└── index.html
각 파일의 역할은 다음과 같다.
index.html
애플리케이션 시작점
Component.js
애플리케이션 설정 및 초기화
manifest.json
라우팅, 모델, 리소스 설정
View
UI 정의
Controller
이벤트 처리 및 비즈니스 로직
SAPUI5는 MVC(Model-View-Controller) 패턴을 기본 구조로 사용한다.
6. 첫 번째 XML View 예제
아래는 가장 간단한 XML View 예제이다.
<mvc:View
controllerName="demo.controller.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="Hello SAPUI5">
<content>
<Text text="Hello World"/>
</content>
</Page>
</mvc:View>
실행하면 SAP Fiori 스타일이 적용된 페이지가 표시된다.
7. SAPUI5 학습 로드맵
처음부터 모든 기능을 공부하려고 하면 어렵게 느껴질 수 있다.
추천 학습 순서는 다음과 같다.
1단계
- UI5 개념 이해
- MVC 구조 이해
- XML View
2단계
- Controls
- Layout
- Event Handling
3단계
- Model
- Data Binding
- JSON Model
4단계
- OData
- SAP Gateway 연동
5단계
- Routing
- Navigation
6단계
- Fragment
- Dialog
- Reusable Component
7단계
- Fiori Elements
- CAP
- SAP BTP 배포
SAP 공식 Walkthrough 튜토리얼은 총 38단계로 구성되어 있으며 입문자가 따라 하기 가장 좋은 학습 자료 중 하나이다.
8. SAPUI5를 배워야 하는 이유
SAPUI5는 일반 웹 프레임워크보다 학습 난이도가 높다.
하지만 SAP ERP, SAP S/4HANA, SAP BTP 환경에서는 사실상 표준 프레임워크라고 볼 수 있다.
SAPUI5를 익히면 다음과 같은 업무를 수행할 수 있다.
- SAP Fiori 개발
- SAP BTP 애플리케이션 개발
- OData 기반 시스템 구축
- SAP 확장 애플리케이션 개발
- 엔터프라이즈 웹 애플리케이션 개발
특히 SAP 프로젝트에서는 UI5 개발자의 수요가 꾸준히 존재한다.
마무리
SAPUI5는 단순한 UI 프레임워크가 아니라 SAP 생태계 전반을 연결하는 핵심 기술이다.
처음에는 XML View, MVC 구조, 데이터 바인딩 등 생소한 개념 때문에 어렵게 느껴질 수 있지만, 공식 Walkthrough를 따라가면서 단계별로 학습하면 빠르게 적응할 수 있다.
다음 글에서는 SAPUI5 프로젝트 생성 방법과 기본 애플리케이션 구조를 실제 예제와 함께 살펴보겠다.
참고 자료
'Front > SAPUI5' 카테고리의 다른 글
| SAPUI5 XML View 가이드 (0) | 2026.06.04 |
|---|---|
| SAPUI5 MVC 구조 이해하기 (0) | 2026.06.04 |
