# SAP Fiori 디자인 시스템

## SAP Fiori 디자인 시스템 인터페이스 미리보기

요청서를 수정하고 수량을 검증한 뒤, 밀도를 변경하고 페이지 안에서 요약을 준비하세요.

## SAP Fiori 디자인 시스템 디자인 참고 자료

Morning Horizon(sap_horizon) 소스 매개변수와 최신 UI5 Web Components 문서를 바탕으로 합니다. 아래의 @sap 이름이 붙은 Less 변수는 소스 매개변수이며, 브라우저 스타일에서는 이에 해당하는 --sap 사용자 지정 속성을 사용합니다. 보호된 치수는 관찰된 값이지, 재정의를 권장하는 지점이 아닙니다.

### Horizon 색상 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @sapBrandColor | #0070f2 | 기본 브랜드 역할. |
| @sapBackgroundColor | #f5f6f7 | 페이지 배경. |
| @sapBaseColor | #ffffff | 기본 표면입니다. |
| @sapTextColor | #131e29 | 기본 텍스트. |
| @sapNegativeColor | #aa0808 | 부정 상태입니다. |
| @sapCriticalColor | #e76500 | 중요 역할이며, 텍스트에는 별도로 파생된 역할이 있습니다. |
| @sapPositiveColor | #256f3a | 긍정 상태입니다. |
| @sapInformationBackground | #e1f4ff | 정보 메시지 표면입니다. |
| @sapWarningBackground | #fff8d6 | 중요 메시지 표면입니다. |
### 타이포그래피와 기하 구조

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | 공개된 글꼴 스택입니다. |
| @sapFontSize | 0.875rem | 기본 크기입니다. |
| @sapContent_LineHeight | 1.5 | 콘텐츠 행 높이 배수입니다. |
| @sapElement_Height | 2.25rem | 보호된 기본 치수입니다. |
| @sapElement_Compact_Height | 1.625rem | 보호된 컴팩트 치수입니다. |
| @sapElement_LineHeight | 2.75rem | 보호된 기본 행 상자입니다. |
| @sapElement_Compact_LineHeight | 2rem | 보호된 컴팩트 행 상자입니다. |
| @sapButton_BorderCornerRadius | 0.5rem | 버튼 모서리 매개변수입니다. |
| @sapContent_FocusWidth | 0.125rem | 포커스 너비입니다. |
| @sapContent_FocusColor | #0032a5 | 포커스 색상입니다. |
### 테마 및 밀도 설정

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| sap_horizon | Morning Horizon | 구성 요소에 기본 제공되는 기본 테마입니다. |
| sap_horizon_dark | Evening Horizon | 추가 테마에는 에셋이 필요합니다. |
| sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | 별도로 지원되는 고대비 테마입니다. |
| Assets.js | One import per component library used | 추가 테마 에셋을 등록합니다. |
| setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | 공개 API를 통해 테마를 변경합니다. |
### Select 사용 규칙

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| ui5-select value | Matches option value or text | option의 selected 플래그와 함께 사용하지 마세요. |
| selectedOption | Read-only IOption | 선택된 option 객체를 읽습니다. |
| change | event.detail.selectedOption | 확정된 선택 변경입니다. |
| live-change | Navigation preview | 이를 확정된 업무상 선택으로 간주하지 마세요. |
| accessible-name-ref | ID of visible labeling element | 화면에 표시되는 텍스트를 컨트롤에 연결합니다. |
### 입력 및 피드백

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| value | String | 숫자 입력은 명시적으로 변환합니다. |
| input | Each keystroke | 실시간 예상 합계에 사용합니다. |
| change | Enter or focusout | 키 입력마다 처리하는 방식과는 다릅니다. |
| value-state | None / Negative / Critical / Information / Positive | 현재 API의 상태 이름입니다. |
| slot="valueStateMessage" | One root element | 특정 필드에 대한 설명입니다. |
### 메시지 스트립

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| design | Information / Positive / Critical / Negative | 의미가 명확한 앱 메시지입니다. |
| hide-close-button | Boolean attribute | 필수 설명은 계속 표시되도록 유지합니다. |
| default slot | Prefer text content | 스트립이 복잡한 패널처럼 되지 않도록 하세요. |
## SAP Fiori 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## SAP Fiori 디자인 시스템의 디자인과 UI5 구현은 범위가 다릅니다

### 구체적인 시작점

> SAP Fiori는 기업용 사용자 경험을 설명합니다. 이 참고 자료에서는 구현 가능한 구매 요청 예시로 UI5 Web Components를 선택했습니다. 이 구성 요소를 설치한다고 해서 SAPUI5 애플리케이션, Fiori elements 플로어플랜 또는 승인된 SAP 업무 트랜잭션이 만들어지는 것은 아닙니다.

기본 구성 요소 패키지는 Input, Select 및 Button을 제공합니다. 상위 수준의 Fiori 구성 요소는 별도 패키지에 포함되어 있습니다. 이 예시에서 사용하는 모듈만 가져오면 시작점이 명확해지고, 지원되지 않는 전체 구성 요소 CDN을 사용하는 듯한 인상을 피할 수 있습니다.

지원 사양 읽기

## SAP Fiori 디자인 시스템: 일반적인 파란색 팔레트 대신 이름이 지정된 Horizon 매개변수를 사용하세요

### 표면 및 상태 역할

Morning Horizon은 페이지 배경에 밝은 회색 표면을 적용하고 기본 표면에는 흰색을 사용합니다. 브랜드 파란색과 텍스트 색상은 서로 다른 매개변수입니다. 부정, 중요, 긍정, 정보 역할은 의미를 나타내며, 카드마다 바꿔 사용할 장식용 색상 목록이 아닙니다.

이 미리보기에서는 준비된 요약을 정보 스트립으로 표시합니다. 페이지 안에서 요약을 준비하는 것은 구매 승인과 다르기 때문입니다. 항목 가격, 코스트 센터 및 승인 관련 설명은 자체적으로 만든 샘플 데이터이며, SAP에서 제공하는 업무 규칙으로 해석해서는 안 됩니다.

지원 사양 읽기

## SAP Fiori 디자인 시스템: 컴팩트는 구성 요소 설정이지, 스크린샷을 축소하는 기능이 아닙니다

### 의미 있는 영역에 밀도를 적용하세요

UI5에서는 루트, 본문, 영역 또는 구성 요소에 컴팩트 마커를 적용할 수 있습니다. data-ui5-compact-size 속성과 ui5-content-density-compact 클래스는 공개된 방식입니다. 마커를 동적으로 변경해도 별도의 밀도 API는 필요하지 않습니다.

데스크톱의 정보 밀도가 높은 작업에는 상호작용에 적합한 경우에만 컴팩트 컨트롤을 사용하세요. 포함된 해석에서는 컨트롤 간격과 행 간격을 줄이되 정보는 동일하게 유지합니다. 좁은 레이아웃에서는 모든 레이블과 버튼을 축소하는 대신 영역을 세로로 배치합니다.

```
<section data-ui5-compact-size>
  <ui5-input accessible-name="Request title"></ui5-input>
</section>
```

코드 참조

지원 사양 읽기

## SAP Fiori 디자인 시스템: 72 글꼴 패밀리와 글꼴 로딩 동작

### 글꼴 사용 가능 여부도 설정의 일부입니다

Horizon 테마는 대체 글꼴보다 72와 72full을 우선 지정합니다. UI5 문서에는 기본 글꼴 로딩을 비활성화하는 방법과 글꼴을 로컬에서 호스팅하는 방법이 설명되어 있습니다. 편의용 FontFace.css 항목은 실험적 기능으로 표시되어 있으므로, 이 방식을 선택할 때는 경로를 고정하고 다시 확인하세요.

독립형 미리보기는 오프라인에서 사용할 명시적 대체 글꼴로 Arial을 사용합니다. 기본 UI5 예시는 공개된 font-family 변수를 사용합니다. 이 차이를 통해 시각적으로 비슷한 대체 글꼴 스크린샷을 SAP 글꼴 에셋이 로드되었다는 증거로 오해하지 않도록 합니다.

지원 사양 읽기

## SAP Fiori 디자인 시스템: Select에는 확정된 변경과 임시 변경이 있습니다

### 일관된 선택 전략을 하나만 사용하세요

Select의 value는 Option의 value 또는 text와 일치합니다. Select의 value와 Option의 selected 플래그를 함께 사용하는 것은 권장되지 않으며, 존재하지 않는 값을 지정하면 선택된 option이 없습니다. 이 예시에서는 실제 코스트 센터 option을 초기화하고, 결과를 준비할 때 Select의 value를 읽습니다.

change 이벤트에는 선택된 option이 전달됩니다. 옵션을 이동하거나 Escape 키로 되돌리는 동안에도 live-change가 발생합니다. 업무 데이터에는 확정된 선택을 사용하고, 임시 변경은 미리보기에만 사용하세요.

- 태그를 렌더링하기 전에 Select 및 Option 등록을 가져옵니다.

- accessibility-name-ref를 사용해 화면에 표시되는 코스트 센터 레이블을 연결합니다.

- 이 예시에서는 value를 유일한 선택 전략으로 유지합니다.

지원 사양 읽기

## SAP Fiori 디자인 시스템: 숫자 입력에는 여전히 애플리케이션 유효성 검사가 필요합니다

### 값 상태와 메시지는 함께 사용해야 합니다

입력 유형이 Number여도 Input 값은 문자열입니다. 값을 숫자로 변환한 뒤, 곱셈 전에 유한한 정수 범위인지 확인하세요. 빈 값이 0으로 처리되어 유효한 값으로 받아들여져서는 안 됩니다. 현재 의미상 오류 상태는 Negative이며, 임의로 Error 열거형을 만들어서는 안 됩니다.

valueStateMessage 슬롯에는 구체적인 설명을 담은 루트 요소 하나를 넣습니다. 실시간 합계는 입력 이벤트를 수신하고, 준비된 요약은 사용자가 동작을 실행할 때만 갱신됩니다.

1. 각 컴포넌트에서 제목과 숫자 문자열을 읽어 오세요.

2. 이 예제에서는 제목이 있어야 하며 수량은 1~20 사이의 정수여야 합니다.

3. 영향을 받는 컨트롤을 Negative 상태로 표시하고 입력된 값은 유지하세요.

4. 두 조건을 모두 충족한 뒤에만 요약을 준비하세요.

지원 사양 읽기

## SAP Fiori 디자인 시스템: 결과를 명확하고 해당 화면에 맞게 설명하기

### 간결한 결과에는 스트립을 사용하세요

MessageStrip은 의미에 맞는 디자인과 닫기 컨트롤을 지원합니다. 필수 설명은 계속 표시되도록 닫기 버튼을 숨길 수 있습니다. 기본 슬롯에는 폼이나 대시보드로 확장하기보다 텍스트를 넣는 것이 적절합니다.

요약에는 제목, 수량, 예상 합계와 코스트 센터가 포함됩니다. 마지막 문장에서는 아무것도 제출되지 않았음을 설명합니다. 실제 서비스에서는 이 로컬 단계를 권한이 있는 요청 및 실제 백엔드 상태를 전달하는 응답으로 대체해야 합니다.

지원 사양 읽기

## SAP Fiori 디자인 시스템: 테마 에셋과 모듈 등록

### 테마 선택에는 해당 리소스가 필요합니다

Morning Horizon은 문서화된 기본 테마이며 컴포넌트에 내장되어 있습니다. 추가 테마를 사용하려면 사용하는 각 라이브러리의 Assets.js 모듈이 필요합니다. 그런 다음 setTheme으로 Evening Horizon 또는 고대비 변형 중 하나를 선택할 수 있습니다. 로드된 리소스를 확인하지 않고 어두운 테마 이름을 선택하는 것만으로는 통합이 완료되지 않습니다.

제공된 진입점은 마크업을 만들기 전에 각 사용자 지정 요소를 등록합니다. Vite는 동적 ES 모듈 import와 JSON 리소스를 처리합니다. 오프라인 HTML 예제와 별도로 네이티브 프로젝트를 컴파일하고 글꼴, 테마 로딩, 키보드 동작을 확인하세요.

지원 사양 읽기

## SAP Fiori 디자인 시스템: 컴포넌트 예제

### 완전한 독립형 인터랙티브 예제

전체 문서를 index.html로 저장하고 브라우저에서 여세요. Morning Horizon 매개변수와 UI5 폼 구성에 대한 오프라인 HTML 해석입니다. 네이티브 패키지 예제는 별도로 제공됩니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Fiori purchase request</title><style>
*{box-sizing:border-box}body{margin:0;color:#131e29;background:#f5f6f7;font:14px/1.5 Arial,sans-serif}header{background:white;padding:12px 24px;display:flex;gap:16px;align-items:center;border-bottom:1px solid #d5dadd}.symbol{width:32px;height:32px;display:grid;place-items:center;background:#0070f2;color:white;border-radius:8px;font-weight:bold}header strong{font-size:16px}header span:last-child{margin-left:auto;color:#556b82;font-size:12px}main{max-width:1100px;margin:auto;padding:24px}.objecthead{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:24px}h1{font-size:28px;line-height:36px;margin:0 0 6px}h2{font-size:18px;margin:0 0 16px}.subtitle{color:#556b82;margin:0}.draft{background:#e1f4ff;color:#0032a5;padding:6px 12px;border-radius:6px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.panel{background:white;border-radius:12px;padding:24px;border:1px solid #d5dadd}label{display:block;margin-bottom:6px;color:#556b82}input,select{width:100%;height:44px;border:1px solid #758ca4;border-radius:8px;padding:8px 12px;background:#fff;font:inherit;color:inherit}input:focus,select:focus,button:focus-visible{outline:2px solid #0032a5;outline-offset:3px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.fields>div:first-child{grid-column:1/-1}.line{border-top:1px solid #d5dadd;padding-top:20px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}.monitor{background:#e1f4ff;border:2px solid #556b82;height:42px;border-radius:4px;position:relative;margin-bottom:12px}.monitor:after{content:'';position:absolute;bottom:-12px;left:25%;width:50%;height:10px;border-bottom:3px solid #556b82;border-left:8px solid transparent;border-right:8px solid transparent}.line strong{display:block}.line small{color:#556b82}.money{font-size:24px;font-weight:600;white-space:nowrap}.unit{font-size:12px;color:#556b82}.total{display:flex;justify-content:space-between;padding-top:24px;font-weight:600}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}button{border:1px solid #0070f2;background:white;color:#0057b8;padding:10px 16px;border-radius:8px;font:600 14px/20px Arial;cursor:pointer}button.primary{background:#0070f2;color:white}button:hover{filter:brightness(.95)}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;padding:0 0 24px 36px;color:#556b82}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;border:1px solid #758ca4;border-radius:50%;width:24px;height:24px;text-align:center;background:white}.steps strong{display:block;color:#131e29}.steps li:first-child:before{background:#e1f4ff;color:#0057b8;border-color:#0070f2}.strip{margin-top:24px;background:#e1f4ff;border:1px solid #0070f2;padding:12px 16px;border-radius:8px}.strip.error{background:#ffeaf4;border-color:#aa0808;color:#aa0808}.foot{font-size:12px;color:#556b82;margin-top:24px}.compact input,.compact select{height:32px;padding:4px 8px}.compact .fields{gap:12px}.compact .panel{padding:16px}.compact .line{padding-top:12px}.compact button{padding:6px 12px}.hint{font-size:12px;color:#556b82;margin:6px 0 0}@media(max-width:700px){main{padding:20px 16px}.layout{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.objecthead{display:block}.draft{display:inline-block;margin-top:12px}.line{grid-template-columns:48px minmax(0,1fr)}.line>.money{grid-column:2}.panel{padding:20px}header{padding:12px 16px}}
</style><header><span class="symbol">P</span><strong>Procurement workspace</strong><span>Sample environment</span></header><main><div class="objecthead"><div><h1>Purchase request</h1><p class="subtitle">PR-DRAFT · Workplace equipment</p></div><span class="draft">Draft · not submitted</span></div><div class="layout"><section class="panel"><h2>Request details</h2><form id="form" novalidate><div class="fields"><div><label for="title">Request title</label><input id="title" placeholder="e.g. Studio display upgrade" aria-describedby="notice"></div><div><label for="team">Cost center</label><select id="team"><option value="Design · CC-240">Design · CC-240</option><option value="Research · CC-360">Research · CC-360</option></select></div><div><label for="qty">Monitor quantity</label><input id="qty" type="number" min="1" max="20" step="1" value="2" aria-describedby="qty-help notice"><p id="qty-help" class="hint">Whole number from 1 to 20.</p></div></div><div class="line"><div class="monitor" aria-hidden="true"></div><div><strong>27-inch studio monitor</strong><small>Equipment · Item 100240</small></div><div class="money">€320 <span class="unit">/ unit</span></div></div><div class="total"><span>Estimated line total</span><output id="total">€640</output></div><div class="controls"><button class="primary">Prepare summary</button><button type="button" id="density" aria-pressed="false">Compact controls</button></div></form></section><aside class="panel"><h2>Request path</h2><ol class="steps"><li><strong>Prepare draft</strong>Check quantities and cost center.</li><li><strong>Review summary</strong>Confirm the local request details.</li><li><strong>Submit to service</strong>Not connected in this preview.</li></ol><p class="hint">The review path and price are illustrative application data.</p></aside></div><div class="strip" id="notice" role="status">Complete the draft before preparing the summary.</div><p class="foot">HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created</p></main><script>
const $=id=>document.getElementById(id);function amount(){const n=Number($('qty').value);return Number.isInteger(n)&&n>=1&&n<=20?n:null}$('qty').oninput=()=>{$('total').textContent=amount()===null?'Invalid quantity':'€'+amount()*320};$('density').onclick=()=>{const active=document.body.classList.toggle('compact');$('density').setAttribute('aria-pressed',String(active));$('density').textContent=active?'Cozy controls':'Compact controls'};$('form').onsubmit=e=>{e.preventDefault();const title=$('title').value.trim(),n=amount();$('title').setAttribute('aria-invalid',String(!title));$('qty').setAttribute('aria-invalid',String(n===null));$('notice').classList.toggle('error',!title||n===null);if(!title||n===null){$('notice').textContent=!title?'Enter a title for this request.':'Use a whole quantity from 1 to 20.';(!title?$('title'):$('qty')).focus();return}$('notice').textContent='Local summary: '+title+' · '+n+' monitors · €'+n*320+' · '+$('team').value+'. Nothing submitted.'};
</script></html>
```

코드 참조

- 이 HTML 문서의 밀도 전환은 해석에 해당합니다. UI5 진입점에서는 실제 컴팩트 마커, 등록된 사용자 지정 요소와 Horizon 에셋을 보여 줍니다.

### 수량을 검증하는 Horizon 구매 요청

Input, Select/Option, Button과 MessageStrip으로 로컬 구매 요청 요약을 구성합니다. 키 입력마다 갱신되는 합계는 준비된 결과와 별도로 유지됩니다.

```
// main.js in a Vite vanilla project. index.html contains <div id="app"></div>.
import '@ui5/webcomponents/dist/Button.js';
import '@ui5/webcomponents/dist/Input.js';
import '@ui5/webcomponents/dist/Select.js';
import '@ui5/webcomponents/dist/Option.js';
import '@ui5/webcomponents/dist/MessageStrip.js';
import '@ui5/webcomponents/dist/Assets.js';
import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme.js';
setTheme('sap_horizon');
document.querySelector('#app').innerHTML = `
  <main style="max-width:800px;margin:auto;padding:24px;font-family:var(--sapFontFamily)">
    <h1>Purchase request</h1>
    <p>Prepare a local requisition summary. No SAP transaction is created.</p>
    <p id="request-label">Request title</p>
    <ui5-input id="title" accessible-name-ref="request-label" required>
      <span slot="valueStateMessage">Enter a title for this request.</span>
    </ui5-input>
    <p id="team-label">Cost center</p>
    <ui5-select id="team" accessible-name-ref="team-label" value="design">
      <ui5-option value="design">Design · CC-240</ui5-option>
      <ui5-option value="research">Research · CC-360</ui5-option>
    </ui5-select>
    <p id="qty-label">Monitor quantity</p>
    <ui5-input id="qty" type="Number" accessible-name-ref="qty-label" value="2">
      <span slot="valueStateMessage">Use a whole number from 1 to 20.</span>
    </ui5-input>
    <p id="total">Estimated line total: €640</p>
    <ui5-button id="prepare" design="Emphasized">Prepare summary</ui5-button>
    <ui5-button id="density">Toggle compact controls</ui5-button>
    <ui5-message-strip id="notice" design="Information" hide-close-button style="display:block;margin-top:24px">
      Complete the draft before preparing the summary.
    </ui5-message-strip>
  </main>`;
const title=document.querySelector('#title'),qty=document.querySelector('#qty');
qty.addEventListener('input',()=>{
  const n=Number(qty.value);
  document.querySelector('#total').textContent=Number.isInteger(n)&&n>=1&&n<=20
    ? `Estimated line total: €${n*320}` : 'Enter a valid quantity to calculate the total.';
});
document.querySelector('#prepare').addEventListener('click',()=>{
  const n=Number(qty.value), validTitle=!!title.value.trim(), validQty=Number.isInteger(n)&&n>=1&&n<=20;
  title.valueState=validTitle?'None':'Negative';qty.valueState=validQty?'None':'Negative';
  const notice=document.querySelector('#notice');
  if(!validTitle||!validQty){notice.design='Negative';notice.textContent='Correct the request title or quantity before continuing.';return;}
  notice.design='Information';
  notice.textContent=`Local summary: ${title.value.trim()}, ${n} monitors, €${n*320}, ${document.querySelector('#team').value}. Nothing submitted.`;
});
document.querySelector('#density').addEventListener('click',()=>document.body.toggleAttribute('data-ui5-compact-size'));
```

코드 참조

- 수량 규칙, 품목 가격 €320, 코스트 센터는 예시용 애플리케이션 데이터이며 SAP 정책이 아닙니다.

- UI5 Web Components는 Fiori 패턴을 구현하는 한 가지 방법입니다. 완전한 SAPUI5 애플리케이션이나 Fiori elements 플로어플랜은 아닙니다.

- SAP 트랜잭션은 생성되지 않습니다. 오프라인 미리 보기 검증이 네이티브 종속성 컴파일을 의미하지는 않습니다.

## SAP Fiori 디자인 시스템: 에이전트 설정

### 구현 시작점

Vite의 main.js를 전체 예제로 바꾸세요. UI5 문서에서는 ES 모듈 번들러를 요구하며, 모든 컴포넌트를 제공하는 공식 CDN은 없습니다.

```
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev
```

### 프로젝트를 위한 프롬프트

```
UI5 Web Components의 Input, Select, Button, MessageStrip과 Horizon 테마를 사용해 Fiori 구매 요청을 구성하세요. 숫자 검증, 올바른 Negative 값 상태, 명시적인 컴팩트 밀도, 정확한 로컬 요약 동작을 유지하세요.
```

## SAP Fiori 디자인 시스템: 출처와 범위

독립적인 OpenDesign 참고 자료입니다. UI5 Web Components 예제이며, 배포된 SAP 트랜잭션이나 완전한 Fiori elements 애플리케이션은 아닙니다.

- 시작하기 공식 패키지 및 번들러 설정.

- Horizon 출처 테마 매개변수 스냅샷.

- 설정 테마 이름과 에셋 로딩.

- 밀도 컴팩트 마커와 RTL.

- 글꼴 72 로딩 및 로컬 글꼴 안내.

- 입력 값 상태와 입력 이벤트.

- Select 선택 전략과 이벤트.

- MessageStrip 의미에 따른 메시지 구성.

- 버튼 출처 네이티브 버튼 구현.

## SAP Fiori 디자인 시스템: 관련 리소스

### SEEK Braid

독창적인 구직 화면 구성을 통해 Braid를 살펴보세요. 테마 범위가 지정된 변수, 네 가지 실제 중단점, 맥락에 맞는 텍스트, 서로 구별되는 버튼 톤, 동작을 비활성화하는 대신 유효성 검사 이유를 설명하는 제어된 필드를 확인할 수 있습니다.

### Segment Evergreen

실제 테마 값, 제어 가능한 태그 입력, 실시간 규칙 매칭, 빈 상태에서의 복구 경로, 네이티브 검토 대화상자가 포함된 Evergreen 참조 자료입니다.

### Semi Design

Semi에서 권장하는 기본 Steps, 제어형 Input과 Switch, 실제 테마 토큰, 명시적인 React 18 또는 React 19 패키지 선택을 사용해 순차적인 워크스페이스 설정을 구성하세요.


- [구현 레퍼런스](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [출처](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [출처](https://ui5.github.io/webcomponents/docs/advanced/configuration/)
- [출처](https://ui5.github.io/webcomponents/components/Select/)
- [출처](https://ui5.github.io/webcomponents/components/Input/)
- [출처](https://ui5.github.io/webcomponents/components/MessageStrip/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/)
- [지원 사양 읽기](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [코드 참조](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/docs/advanced/fonts/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/components/Select/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/components/Input/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/components/MessageStrip/)
- [지원 사양 읽기](https://ui5.github.io/webcomponents/docs/advanced/configuration/)
- [코드 참조](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [코드 참조](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/)
- [시작하기 공식 패키지 및 번들러 설정.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/)
- [Horizon 출처 테마 매개변수 스냅샷.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [설정 테마 이름과 에셋 로딩.](https://ui5.github.io/webcomponents/docs/advanced/configuration/)
- [밀도 컴팩트 마커와 RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/)
- [글꼴 72 로딩 및 로컬 글꼴 안내.](https://ui5.github.io/webcomponents/docs/advanced/fonts/)
- [입력 값 상태와 입력 이벤트.](https://ui5.github.io/webcomponents/components/Input/)
- [Select 선택 전략과 이벤트.](https://ui5.github.io/webcomponents/components/Select/)
- [MessageStrip 의미에 따른 메시지 구성.](https://ui5.github.io/webcomponents/components/MessageStrip/)
- [버튼 출처 네이티브 버튼 구현.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)