01 Backbase 디자인 시스템 인터페이스 미리보기 받는 계좌와 금액을 변경하고, 확인한 뒤 검토하고 초기화하세요. 실제 송금은 이루어지지 않습니다.
공개된 기본 버튼 색상을 사용해 독립적으로 반응형 HTML를 구현했습니다. 양식과 레이아웃은 애플리케이션별 설정을 적용했습니다. Backbase Angular 런타임이 아닙니다. ·
구현 레퍼런스 02
Backbase 디자인 시스템 디자인 참조 공개된 Backbase 최신 문서입니다. 웹 코드는 @backbase/ui-ang을 대상으로 합니다. 네이티브 값은 명시적으로 분리되어 있으며 Angular CSS 변수로 취급해서는 안 됩니다. 맞춤 고객 테마를 적용하면 기본값을 대체할 수 있습니다.
이름 / 규칙 값 / 구성 용도 Selectorbutton[bbButton]Backbase 스타일이 적용된 네이티브 버튼 의미 체계입니다. buttonSizesm | md; default md문서에 명시된 크기를 선택하세요. colorprimary | secondary | tertiary | link-text | success | danger | neutral | dark시각 및 의미 변형입니다. typebutton by default양식 안에서 submit을 명시적으로 설정하세요. blockfalsetrue로 설정하면 부모 너비를 채웁니다. circlefalse텍스트 없는 아이콘에만 사용하세요.
이름 / 규칙 값 / 구성 용도 titlestring기본 h2 제목입니다. secondaryTitlestring맥락을 설명하는 문구입니다. reverseTitleOrdertrue제목 순서를 제어합니다. showCloseButtontrue페이지 헤더를 고정 표시하려면 false로 설정하세요. closeButtonAriaLabelstring닫기 동작의 이름을 지정하세요. closeEventEmitter<void>실제 종료 핸들러에 연결하세요. mode-header-utility-areaProjected content맥락에 맞는 작업을 헤더에 배치하세요.
이름 / 규칙 값 / 구성 용도 primary / default background#295eff 문서에 명시된 기본 팔레트이며 모든 고객 브랜드에 적용되는 것은 아닙니다. primary / hovered background#2049c6 마우스 오버 상태입니다. primary / pressed background#152f80 누른 상태입니다. primary / foreground#ffffff 기본 색상 위의 텍스트입니다. secondary / default backgroundtransparent브랜드 테두리와 전경색입니다. secondary / pressed background#dee2ff 은은한 표면색입니다. danger / default background#bf2310 파괴적 작업을 나타내며 검토용이 아닙니다. disabled / background#ccd5df 비활성화 동작과 함께 사용하세요.
이름 / 규칙 값 / 구성 용도 theme.radius.button.default99UIKit 토큰 표의 알약 모양입니다. theme.height.button.sm32네이티브 소형 높이입니다. theme.height.button.md44네이티브 중형 높이입니다. theme.padding-x.button.sm16네이티브 가로 안쪽 여백입니다. theme.padding-x.button.md24네이티브 가로 안쪽 여백입니다. theme.border-width.button.default1네이티브 테두리 두께입니다. Button typefacepreferredFont(.body, .semibold)네이티브 글꼴 시스템을 사용합니다.
이름 / 규칙 값 / 구성 용도 Theme sourceVisualizer exportweb/default를 프로젝트 스타일에 복사하세요. Font family sourcestyles/default/variables/_font-family.scss@font-face의 글꼴 패밀리 이름을 일치시키세요. Root sizing16px optimal; supported up to 32pxrem 단위 테마 치수입니다. Logo variantslight/dark × small/big필요한 에셋을 각각 제공하세요. 로고 하나를 늘려서 사용하지 마세요.
03 Backbase 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.
DESIGN-backbase.md 완전한 안내와 구현 시작점, 소스 링크.
가이드 다운로드 Backbase 디자인 시스템 고객 브랜드를 적용한 뱅킹 시스템 개별 버튼이 아닌 사용자 여정에 테마를 적용하세요 Backbase의 Visualizer는 지원되는 브랜드 기본 요소를 제공하며 웹, iOS, Android용 테마를 내보냅니다. 고객은 제목과 본문 글꼴 패밀리를 변경하고 구성요소와 사용자 여정 스타일 전반에 브랜드를 적용할 수 있습니다.
이 예시는 내부 계좌 간 이체 검토 흐름입니다. 계좌 식별 정보와 금액은 모두 가상입니다. 시각 구조는 편집 가능한 초안 필드와 최종 로컬 검토 단계를 명확히 구분해, 클릭만으로 송금이 이루어진다는 인상을 주지 않습니다.
지원 사양 읽기
Backbase 디자인 시스템 각 플랫폼에 고객 테마를 올바르게 적용해야 합니다 Visualizer 내보내기는 브랜드 색상 코드만 제공하는 것이 아닙니다 Visualizer는 웹, iOS, Android용 출력을 각각 생성합니다. 웹의 경우 내보낸 기본 디렉터리에 Sass 디자인 토큰이 포함되고, logos 디렉터리에 브랜드 에셋이 포함됩니다. 네이티브 JSON 치수를 Angular 재정의에 복사하지 말고, 프로젝트 스타일시트를 통해 웹 출력을 적용하세요.
웹 테마 설정 안내에 따르면 작은 크기와 큰 크기 각각에 대해 라이트 및 다크 로고가 필요합니다. 글꼴 파일은 별도로 제공해야 하며, @font-face의 family 이름은 내보낸 font-family 설정과 일치해야 합니다. 이렇게 하면 뱅킹 여정의 제목, 컨트롤, 브랜딩에 동일한 고객 테마가 적용됩니다.
검토 예시는 의도적으로 애플리케이션이 관리하는 초안 상태에서 멈춥니다. 목적지나 금액을 변경하면 이전 결과가 지워집니다. 이 동작은 테마 내보내기와 별개이며, 결제 실행이나 특정 은행의 유효성 검사 정책을 의미하지 않습니다.
지원 사양 읽기
Backbase 디자인 시스템 내보낸 시맨틱 테마 따르기 플랫폼별 값은 별도의 컨텍스트에서 관리 참조 표에는 기본 버튼 색상과 별도의 UIKit 치수 그룹이 포함되어 있습니다. 네이티브 theme.height.button.md 값은 Angular 앱에 붙여 넣을 CSS 변수가 아닙니다. 웹 구현에서는 내보낸 스타일이나 설치된 SCSS를 사용해야 합니다.
미리보기에는 문서에 명시된 기본 프라이머리 블루와 세컨더리 틴트가 적용됩니다. 전체 패널 여백, 요약 일러스트, 반응형 2단 구성은 애플리케이션에서 정한 사항이며 공식 토큰과 명확히 구분됩니다.
지원 사양 읽기
Backbase 디자인 시스템 선택한 브랜드 글꼴 불러오기 패밀리 이름만으로는 글꼴 파일이 제공되지 않습니다 웹 테마 설정 안내에 따르면 글꼴 파일은 별도로 제공해야 합니다. @font-face의 family는 내보낸 $font-family 설정과 일치해야 합니다. 문서의 예시 글꼴은 Backbase 전체에서 반드시 사용해야 하는 서체가 아닙니다.
테마는 rem 단위를 사용하며 최적의 루트 크기는 16 px, 지원 범위는 최대 32 px로 안내되어 있습니다. 확대된 텍스트 크기에서도 전체 검토 화면을 테스트하세요. 독립형 브라우저 예시는 시스템 글꼴을 사용하며, 고객 글꼴을 사용할 수 있는 것처럼 보이지 않도록 합니다.
지원 사양 읽기
Backbase 디자인 시스템 모드 헤더와 버튼 바 구성 실제 동작을 컨텍스트 헤더에 배치 ModeHeaderModule은 보조 문구와 닫기 컨트롤을 선택적으로 포함하는 컨텍스트 제목을 제공합니다. 예시에서는 닫을 외부 경로가 없으므로 showCloseButton을 false로 설정합니다. 초기화 버튼은 mode-header-utility-area 프로젝션 슬롯을 사용합니다.
ButtonModule은 bbButton을 통해 기본 버튼을 확장합니다. color에는 문서화된 역할을 지정하고 buttonSize에는 sm 또는 md를 사용하세요. 원형 버튼은 아이콘만 있는 컨트롤용이므로 텍스트가 있는 검토 작업에는 적합하지 않습니다.
하나뿐인 로컬 검토 작업에는 primary를 사용하세요. 되돌릴 수 있는 초기화 작업에는 secondary를 사용하세요. 계좌 이름과 금액은 장식용 버튼 레이블이 아니라 정의 목록에 표시하세요. 지원 사양 읽기
Backbase 디자인 시스템 좁은 화면에서도 유지되는 요약 읽기 순서 유지 원본 일러스트에는 방향을 나타내는 경로로 연결된 두 개의 계좌 표면이 표시되어 있습니다. 이 일러스트는 두 번째 동작처럼 보이지 않으면서 이체 관계를 설명합니다. 작은 화면에서는 장식용 계좌 다이어그램을 숨기되 모든 계좌 텍스트는 계속 표시합니다.
DOM 순서상 편집기가 검토 결과보다 먼저 나옵니다. 기본 레이블, 필드 오류, 상태 영역은 키보드 및 스크린 리더 사용자도 이용할 수 있습니다. 금액이나 목적지를 이해하는 데 마우스오버만으로 확인할 수 있는 세부 정보가 필요하지 않습니다.
지원 사양 읽기
Backbase 디자인 시스템 승인된 Angular 환경에 연결 스타일과 모듈을 함께 설치 공식 웹 설정에는 저장소 액세스와 전역 Backbase SCSS의 별도 가져오기가 필요합니다. ButtonModule만 가져와서는 전체 시각적 환경이 제공되지 않습니다. 패키지와 스타일을 설정한 기존 Angular 애플리케이션에 독립형 예시를 추가할 수 있습니다.
승인된 repo.backbase.com 계정과 선택한 릴리스에 필요한 Angular/Node 조합을 사용하세요. @backbase/ui-ang을 설치하고 angular.json에 이미 설정된 스타일시트에 전역 SCSS를 추가하세요. 사용하는 컴포넌트에서 ButtonModule과 ModeHeaderModule을 가져온 다음 전체 예시를 추가하고 초기화 및 검토 흐름을 확인하세요. 지원 사양 읽기
Backbase 디자인 시스템 컴포넌트 예시 완전한 독립형 인터랙티브 예제 전체 문서를 index.html로 저장한 후 브라우저에서 여세요. 게시된 기본 버튼 색상을 사용한 독립형 반응형 HTML 구현이며, 폼과 레이아웃은 애플리케이션별로 구성되어 있습니다. Backbase Angular 런타임은 사용하지 않습니다.
html 코드 복사
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Transfer review</title><style>*{box-sizing:border-box}body{margin:0;color:#172b4d;background:#f3f5fa;font:16px/1.5 system-ui}header{background:white;border-bottom:1px solid #dce2ee;padding:24px 5%;display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:28px;margin:0}small{color:#566781}button{border:0;border-radius:99px;background:#295eff;color:white;min-height:44px;padding:10px 24px;font:600 15px system-ui;cursor:pointer}button:hover{background:#2049c6}button:active{background:#152f80}.secondary{background:white;border:1px solid #295eff;color:#295eff}.secondary:hover{background:#dee2ff}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #152f80;outline-offset:3px}main{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;padding:36px 5%}.panel{background:white;border:1px solid #dce2ee;border-radius:16px;padding:28px}h2{font-size:20px;margin:0 0 20px}label{display:block;font-weight:600;font-size:14px;margin:20px 0 8px}input,select{width:100%;min-height:48px;border:1px solid #8090aa;border-radius:8px;padding:10px 12px;color:inherit;font:16px system-ui;background:white}p{font-size:14px;color:#566781}.from{padding:16px;background:#f3f5fa;border-radius:8px;font-size:14px}.from strong{display:block;font-size:17px}.review{width:100%;margin-top:18px}#error{color:#bf2310;margin:8px 0;min-height:21px}#result{padding:18px;border-left:4px solid #295eff;background:#edf2ff;margin-top:22px}#result:empty{display:none}svg{width:100%;max-height:200px}aside{padding:20px 10px}aside h2{font-size:24px;margin-top:24px}footer{padding:0 5% 22px;font-size:11px;color:#566781}@media(max-width:650px){header{align-items:flex-start;padding:20px;flex-wrap:wrap}h1{font-size:25px}main{grid-template-columns:1fr;padding:20px;gap:0}.panel{padding:20px}aside{padding:24px 0}svg{display:none}}</style><header><div><small>Accounts / Internal transfer</small><h1>Review your transfer</h1></div><button class="secondary" id="reset">Reset draft</button></header><main><section class="panel"><h2>Transfer details</h2><div class="from">From<strong>Everyday account · 2048</strong>Fictional account</div><form novalidate><label for="destination">To account</label><select id="destination"><option>Travel savings · 9012</option><option>Emergency savings · 3046</option></select><label for="amount">Amount in USD</label><input id="amount" value="120.00" inputmode="decimal" aria-describedby="error" autocomplete="off"><div id="error" role="alert"></div><button class="review" type="submit">Review details</button></form><div id="result" role="status"></div></section><aside><svg viewBox="0 0 360 190" aria-hidden="true"><rect x="10" y="15" width="205" height="120" rx="16" fill="#295eff"/><path d="M35 48H80M35 72H145" stroke="white" stroke-width="8" opacity=".7"/><rect x="143" y="76" width="205" height="110" rx="16" fill="#dee2ff" stroke="#295eff"/><path d="M168 106H213M168 130H278" stroke="#295eff" stroke-width="8"/><circle cx="254" cy="40" r="24" fill="white" stroke="#295eff"/><path d="M244 40H264M256 32L264 40L256 48" fill="none" stroke="#295eff" stroke-width="3"/></svg><h2>A clear check before<br>the next step.</h2><p>Review the destination and amount together. Editing either detail clears the previous review.</p><p><strong>Local demonstration.</strong> No account connection, balance check or payment submission takes place.</p></aside></main><footer>Independent Backbase interpretation · default button palette · system font fallback</footer><script>const form=document.querySelector('form'),amount=document.querySelector('#amount'),destination=document.querySelector('#destination'),error=document.querySelector('#error'),result=document.querySelector('#result');function clear(){result.textContent='';error.textContent='';amount.removeAttribute('aria-invalid')}form.oninput=clear;form.onchange=clear;form.onsubmit=e=>{e.preventDefault();clear();const s=amount.value.trim();if(!/^\d+(\.\d{1,2})?$/.test(s)||Number(s)<=0||!Number.isFinite(Number(s))){error.textContent='Enter a positive amount with up to two decimal places.';amount.setAttribute('aria-invalid','true');amount.focus();return}result.textContent='Reviewed locally: '+new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(Number(s))+' to '+destination.value+'. No transfer submitted.'};document.querySelector('#reset').onclick=()=>{form.reset();clear()};</script></html>
코드 참조
금액과 목적지는 가상의 값입니다. 이 HTML 폼은 뱅킹 시스템과 연결되어 있지 않습니다. Angular ModeHeader 및 bbButton 예시를 사용하려면 승인된 Backbase 패키지에 액세스해야 합니다. 모드 헤더와 로컬 검토 작업 실제 Backbase 모듈 두 개와 프로젝션된 초기화 작업, 명시적 로컬 상태를 사용하는 독립형 Angular 컴포넌트입니다.
타입스크립트 코드 복사
// transfer-review.component.ts — in an authorized Backbase Angular application
import { Component } from '@angular/core';
import { ButtonModule } from '@backbase/ui-ang/button';
import { ModeHeaderModule } from '@backbase/ui-ang/mode-header';
@Component({
selector: 'app-transfer-review',
standalone: true,
imports: [ButtonModule, ModeHeaderModule],
template: `
<bb-mode-header-ui title="Review transfer" secondaryTitle="Local demonstration"
[showCloseButton]="false">
<button bbButton color="secondary" mode-header-utility-area
(click)="reviewed = false">Reset review</button>
</bb-mode-header-ui>
<dl><dt>From</dt><dd>Everyday account · 2048</dd>
<dt>To</dt><dd>Travel savings · 9012</dd>
<dt>Amount</dt><dd>USD 120.00</dd></dl>
<p>No money is moved by this example.</p>
<div class="bb-button-bar">
<button bbButton class="bb-button-bar__button" [disabled]="reviewed"
(click)="reviewed = true">Mark as reviewed</button>
</div>
<p role="status">{{ reviewed ? 'Reviewed locally. No transfer submitted.' : 'Check the account details.' }}</p>
`
})
export class TransferReviewComponent { reviewed = false; }
코드 참조
설치된 Backbase 패키지와 전역 SCSS가 필요하며, 공개 npm 액세스만으로는 사용할 수 없습니다. button[bbButton]이 지시자를 제공합니다. ModeHeaderModule은 bb-mode-header-ui를 제공합니다. 검토 플래그는 결제에 영향을 주지 않습니다. 실제 이체 흐름에서는 제출을 별도의 확인된 애플리케이션 작업으로 구현해야 합니다. 04
Backbase 디자인 시스템 에이전트 설정 구현 시작점 라이선스가 있는 프로젝트에 필요한 릴리스 호환 버전을 사용하세요. angular.json에 전역 스타일시트가 포함되어 있는지 확인하세요. 이전 Angular 17 / ui-ang 11 설정에는 esbuild 제한 사항이 문서화되어 있으며, ui-ang 12 이상에서는 esbuild를 지원합니다. 이 안내에서는 레지스트리 인증 정보를 제공하지 않습니다.
bash / scss 예제 복사
# First obtain authorized npm access to repo.backbase.com.
# The linked installation guide specifies Node 20.11.1 and Angular 18+.
npm install --save @backbase/ui-ang
// At the top of the Angular application global styles.scss:
@import "@backbase/ui-ang/scss/main"; 프로젝트를 위한 프롬프트 에이전트 프롬프트 프롬프트 복사
실제 ButtonModule과 ModeHeaderModule을 가져와 Backbase Angular 이체 검토 화면을 구성하세요. 승인된 패키지 스타일과 고객 테마를 불러오세요. 플랫폼별 토큰은 분리해 관리하세요. 애플리케이션 데이터를 검증하고, 편집 시 오래된 검토 결과를 지우며, 로컬 예시를 제출된 결제로 표시하지 마세요. 05
Backbase 디자인 시스템 출처 및 범위 Backbase 패키지에 액세스하려면 승인된 저장소 계정이 필요합니다. 브라우저 미리보기는 독립형 HTML 구현이며 Backbase Angular가 아닙니다. 파란색 팔레트는 게시된 기본 버튼 색상을 따르고, 패널 간격과 일러스트는 애플리케이션에서 정한 사항입니다. 아래 네이티브 치수에는 플랫폼이 표시되어 있습니다.
