# Orange OUDS Web 디자인 시스템 ## Orange OUDS Web 디자인 시스템 인터페이스 미리보기 각 네이티브 드로어를 살펴보고, 선택을 로컬에 저장한 뒤 화면 모양을 전환하세요. ## Orange OUDS Web 디자인 시스템 디자인 레퍼런스 고정된 @ouds/web-orange 및 @ouds/web-common 1.4.0 소스를 바탕으로 하며, 원본 레이아웃 결정은 별도로 표시했습니다. ### 밝은 테마의 시맨틱 색상 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --bs-color-action-enabled | #000 | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-action-selected | #f15e00 | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-action-hover | rgba(0, 0, 0, 0.68) | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-action-pressed | #f15e00 | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-bg-primary | #fff | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-bg-secondary | #f4f4f4 | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-border-default | rgba(0, 0, 0, 0.2) | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-always-black | #000 | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | | --bs-color-always-white | #fff | Orange 1.4 프리셋의 첫 번째, 즉 밝은 테마 선언입니다. 어두운 테마는 이 표의 색상을 그대로 사용하는 대신 data-bs-theme를 통해 자체 값을 적용합니다. | ### 간격 스케일 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --bs-space-scaled-none | 0px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-3xsmall | 2px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-2xsmall | 4px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-xsmall | 8px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-small | 12px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-medium | 16px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-large | 24px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-xlarge | 32px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-2xlarge | 40px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | | --bs-space-scaled-3xlarge | 48px | 실제로 내보내는 간격 스케일입니다. 원본 비교 구성에서는 이 값을 바탕으로 24px 간격을 선택합니다. | ### 타이포그래피 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --bs-font-sans-serif | "HelvNeueOrange", "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-size-display-large | 2.5rem | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-size-heading-large | 1.5rem | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-size-body-large | 1rem | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-size-body-medium | 0.875rem | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-size-body-small | 0.75rem | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-line-height-body-large | 1.5 | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | | --bs-font-line-height-body-medium | 1.4285714286 | 공개된 글꼴 및 타이포그래피 선언입니다. 삽입된 연구 예제는 브랜드 글꼴 파일 HelvNeueOrange 대신 Arial 대체 글꼴을 명시적으로 사용합니다. | ### Offcanvas 기본값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | 네이티브 구성요소의 기본값입니다. 원본 드로어는 너비를 440px로 재정의하며, 네이티브 최대 너비 규칙에 따라 뷰포트 안에 표시됩니다. | | --bs-offcanvas-width | 400px | 네이티브 구성요소의 기본값입니다. 원본 드로어는 너비를 440px로 재정의하며, 네이티브 최대 너비 규칙에 따라 뷰포트 안에 표시됩니다. | | --bs-offcanvas-height | 30vh | 네이티브 구성요소의 기본값입니다. 원본 드로어는 너비를 440px로 재정의하며, 네이티브 최대 너비 규칙에 따라 뷰포트 안에 표시됩니다. | | --bs-offcanvas-transition | transform 0.3s ease-in-out | 네이티브 구성요소의 기본값입니다. 원본 드로어는 너비를 440px로 재정의하며, 네이티브 최대 너비 규칙에 따라 뷰포트 안에 표시됩니다. | ### 네이티브 드로어 및 버튼 규약 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Brand action | .btn.btn-brand | 실제 Orange 변형입니다. 상위 Bootstrap의 .btn-primary가 같은 의미라고 가정하지 마세요. | | Default action | .btn.btn-default | 화면 모양 변경과 로컬 선택 지우기에 실제로 사용되는 보조/기본 스타일입니다. | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | 네이티브 data API가 각 원본 요금제 버튼에서 공용 드로어를 엽니다. | | Content event | show.bs.offcanvas / event.relatedTarget | 드로어 콘텐츠를 렌더링하기 전에 트리거에서 클릭한 요금제를 읽습니다. | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | 로컬 선택을 마친 뒤 기존 네이티브 인스턴스를 닫습니다. | | Theme | data-bs-theme="light" or "dark" | 비교 상태를 다시 만들지 않고 실제 테마 변수를 변경합니다. | ## Orange OUDS Web 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Orange OUDS Web 디자인 시스템: Orange OUDS 패키지 및 테마 구조 ### 공통 패키지와 Orange 패키지를 함께 설치 > OUDS Web 1.4.0은 공통 동작과 브랜드 테마를 분리합니다. 이 예제에서는 @ouds/web-common과 @ouds/web-orange을 같은 버전으로 설치합니다. Orange 패키지는 컴파일된 CSS을 제공하고, 공통 패키지는 번들 브라우저 JavaScript을 제공합니다. 루트 문서에서 두 개의 명시적 경로를 모두 가져오므로, 패키지 설치 명령만 제시하고 스타일이 적용되지 않은 정적 페이지를 남겨두지 않습니다. - @ouds/web-orange은 Orange 테마 CSS을 제공합니다. - @ouds/web-common은 공통 JavaScript을 제공합니다. - 이 예제에서는 두 패키지를 모두 1.4.0으로 고정합니다. ### OUDS 고유의 구성요소 규약을 준수합니다 OUDS는 Bootstrap을 기반으로 하지만, 그렇다고 모든 상위 클래스가 그대로 대체해 사용할 수 있는 것은 아닙니다. 이 버전은 btn-brand, btn-default 및 기타 명명된 변형을 사용합니다. 예제 비교에서는 실제 클래스와 네이티브 Offcanvas 데이터 속성을 사용합니다. 마이그레이션할 때는 스타일시트 URL만 바꾸지 말고 마크업과 테마 값을 모두 비교해야 합니다. ## Orange OUDS Web 디자인 시스템: Orange OUDS 시맨틱 색상 및 타이포그래피 역할 ### 설치된 시맨틱 변수 사용 원본 카드에는 color-bg-primary와 color-border-default를 사용합니다. 좁은 헤더 강조색은 color-action-selected를 따르며, 밝은 테마 선언에서는 #f15e00으로 적용됩니다. 어두운 테마에서는 루트의 data-bs-theme를 통해 이러한 역할의 값이 달라집니다. 따라서 이 가이드는 범위를 명시해 밝은 테마 값을 기록하고, 하나의 주황색 16진수 코드가 디자인 시스템 전체를 대표하는 것처럼 설명하지 않고 런타임이 적절한 화면 모양을 선택하도록 합니다. ### 타이포그래피를 명확히 지정 패키지의 글꼴 스택에서는 HelvNeueOrange을 가장 먼저 지정합니다. 이 로컬 삽입 연구에서는 사용하지 않는 font-face 선언을 제거하고 Arial을 대체 글꼴로 명시했습니다. 표에는 실제로 공개된 글꼴 패밀리와 본문 역할이 설명되어 있습니다. 구성요소 CSS을 불러왔다고 브랜드 서체까지 로드된 것은 아닙니다. 해당 서체를 도입하는 프로젝트는 글꼴 에셋을 별도로 신중하게 처리해야 합니다. ## Orange OUDS Web 디자인 시스템: Orange OUDS 비교 카드 및 콘텐츠 ### 비교에 명확한 의사결정 구조 적용 세 개의 카드에 가상의 데이터 제공량, 간략한 사용 설명, 상세 보기 동작을 표시합니다. 각 카드에는 자리표시자 행의 스크린샷 대신 완전한 텍스트 콘텐츠가 들어갑니다. 이 콘텐츠는 연구 목적으로 작성한 것으로, 현재 Orange 제품이나 가격 또는 계약이 아닙니다. 이 디자인 작업에서 가격을 제외해 구매 가능한 상품이나 결제 절차가 있는 것처럼 보이지 않도록 합니다. ### 반복되는 카드의 기준선을 일관되게 유지 데스크톱 구성은 동일한 너비의 그리드 트랙 3개와 세로 방향 플렉스 카드로 이루어져 있어, 자세히 보기 버튼이 카드 하단에 정렬됩니다. 720px 이하에서는 자연스러운 높이의 단일 열로 바뀝니다. 실제 동작 상태는 네이티브 버튼 클래스가 제공하며, 주변 그리드와 24px 패딩, 콘텐츠 순서는 제공된 CSS에서 확인할 수 있는 애플리케이션 고유의 결정 사항입니다. ## Orange OUDS Web 디자인 시스템 Orange OUDS 네이티브 오프캔버스 구성 ### 트리거에서 드로어 콘텐츠 채우기 각 자세히 보기 버튼은 동일한 #details Offcanvas를 가리키며, 작은 data-plan 인덱스를 포함합니다. show.bs.offcanvas 이벤트에서 relatedTarget을 확인해 드로어가 표시되기 전에 해당하는 제목, 설명, 기능 목록을 선택합니다. 목록은 textContent와 실제 목록 항목으로 구성해 데이터를 마크업과 분리합니다. 드로어 제목은 aria-labelledby로 연결됩니다. ### 열기와 닫기 동작은 네이티브 런타임에 맡기기 data API가 열기, 백드롭, Escape, 포커스 동작을 처리합니다. 사용자가 로컬 선택을 하면 핸들러는 oudsWeb.Offcanvas.getInstance(drawer).hide()를 사용해 기존 인스턴스를 닫습니다. CSS 클래스를 제거한 뒤 포커스 트랩이나 백드롭을 남겨 두지 않습니다. 비동기 닫기는 컴포넌트 계약의 일부이므로, 테스트에서는 전환이 끝날 때까지 기다린 다음 포커스가 돌아오는지 확인합니다. ## Orange OUDS Web 디자인 시스템 Orange OUDS 로컬 선택 및 복구 ### 실제로 실행된 작업을 설명하기 이 로컬 선택 기능은 어떤 가상 요금제를 선택했는지만 저장하고, 카드 아래에 해당 선택을 표시합니다. 주문이 접수되지 않았다는 점을 메시지에 명확히 안내합니다. 새로 선택하면 이전 선택을 대체하며, 선택을 지우면 메시지가 숨겨지고 첫 번째 자세히 보기 버튼으로 포커스가 돌아갑니다. 계정, 장바구니, 결제 서비스로 전송되는 정보는 없습니다. ### 모양과 선택 상태 분리하기 밝게/어둡게 전환 동작은 루트 테마 속성과 해당 버튼의 레이블만 바꿉니다. 현재 로컬 선택과 세 카드의 콘텐츠는 유지됩니다. 테마를 테스트할 때 시각적 변화가 사용자의 현재 비교 상태를 조용히 초기화하지 않도록 하는 것이 중요합니다. 이 예시에서는 두 가지 모드 모두 네이티브 CSS를 사용하며, 바깥쪽 구성만 애플리케이션에서 제공합니다. ## Orange OUDS Web 디자인 시스템 Orange OUDS 키보드 및 좁은 화면 동작 ### 닫기 및 자세히 보기 동작에 이름 지정하기 각 카드의 동작에는 요금제 이름이 포함되며, 아이콘만 있는 네이티브 닫기 버튼에는 명시적인 Close details 접근성 레이블이 지정되어 있습니다. 포커스 관리를 네이티브 구현에서 처리할 수 있도록 드로어에 tabindex와 제목 레이블을 설정합니다. 테스트에서는 Explore 드로어를 열고 Escape로 닫은 다음, 다른 카드로 이동하기 전에 포커스가 드로어를 연 버튼으로 돌아오는지 확인합니다. ### 드로어를 실제 뷰포트 안에 유지하기 애플리케이션에서 드로어 너비를 440px로 설정하지만, 네이티브 Offcanvas의 max-width 규칙으로 좁은 뷰포트 안에 표시됩니다. 작은 화면에서는 카드가 세로로 쌓이고 바깥쪽 패딩이 줄어듭니다. 예시를 초기 상태뿐 아니라 요금제를 선택하고 모양을 전환한 뒤에도 280px, 390px, 태블릿, 데스크톱 너비에서 확인했습니다. ## Orange OUDS Web 디자인 시스템 Orange OUDS 전체 정적 통합 ### 세 파일로 구성된 완전한 예제 사용하기 orange-index.html을 index.html로 저장하고 orange.css와 orange-app.js를 같은 폴더에 둡니다. 버전이 고정된 두 패키지를 설치한 다음 해당 폴더를 서버에서 제공합니다. HTML에는 네이티브 에셋 경로 두 개, 모든 카드 콘텐츠, 드로어 구조, 애플리케이션 스크립트가 포함되어 있습니다. 브라우저 구성을 재현하는 데 React 래퍼나 누락된 스캐폴드, 임의로 만든 SDK는 필요하지 않습니다. 1. 제공된 파일 세 개를 모두 같은 폴더에 저장합니다. 2. 호환되는 OUDS 패키지 두 개를 모두 설치합니다. 3. 폴더를 서버에서 제공하고 각 카드를 확인합니다. 4. Escape, 포커스 복귀, 로컬 선택 지우기, 두 가지 모양을 테스트합니다. ### 코드와 에셋의 릴리스 버전을 일치시키기 버전을 변경하는 경우 버튼 변형, data API 네임스페이스, 이벤트 이름, 테마 변수를 함께 확인합니다. 서로 다른 릴리스의 CSS와 스크립트는 상호작용할 때 불일치가 드러나기 전까지는 정상처럼 보일 수 있습니다. 제공된 버전은 테스트를 거친 구체적인 참고 자료이며, 앞으로 나올 모든 패키지 조합이 동일하게 동작한다고 보장하지는 않습니다. ## Orange OUDS Web 디자인 시스템 컴포넌트 예제 ### orange-index.html 완전한 마크업과 네이티브 CSS/JavaScript 가져오기 구문. ``` Bundle comparison study

OUDS WEB / ORIGINAL COMPARISON STUDY

Choose room for your day

Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.

Everyday

8 GB

For messages, maps and occasional listening.

Explore

25 GB

More room for podcasts and a longer journey.

Create

60 GB

A larger sample allowance for sharing on the move.

OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.

``` 코드 참조 - orange-index.html을 index.html로 저장하고 나머지 두 파일 이름은 그대로 유지합니다. ### orange.css 원본 반응형 카드 배치와 명시적인 글꼴 대체 설정. ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--bs-color-action-selected);padding-bottom:24px}h1{font-size:36px;line-height:1.15;margin:12px 0}.scope{font-size:14px;line-height:1.6;max-width:75ch}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.plan{display:flex;flex-direction:column;border:1px solid var(--bs-color-border-default);padding:24px;background:var(--bs-color-bg-primary)}.plan h2{font-size:24px}.amount{font-size:40px;font-weight:700;line-height:1.2;margin:24px 0}.plan p{line-height:1.6}.plan .btn{margin-top:auto}.fine{font-size:13px;line-height:1.6;margin-top:24px}.offcanvas{--bs-offcanvas-width:440px}.offcanvas-header,.offcanvas-body{padding:24px}.offcanvas-header{gap:16px}.offcanvas-title{font-size:24px}.offcanvas-body p,.offcanvas-body li{line-height:1.6}.offcanvas-body ul{padding-left:24px}.offcanvas-body li{margin:12px 0}#selected{padding:24px;border:1px solid var(--bs-color-border-default);margin-top:24px}#selected p{margin:0}#selected .btn{margin-top:16px}@media(max-width:720px){main{padding:16px}.plans{grid-template-columns:1fr}.plan{padding:24px}.amount{margin:16px 0}.plan .btn{margin-top:16px}}[hidden]{display:none!important} ``` 코드 참조 - orange-index.html을 index.html로 저장하고 나머지 두 파일 이름은 그대로 유지합니다. ### orange-app.js 네이티브 드로어 이벤트 처리와 로컬 선택/테마 상태. ``` const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'}); ``` 코드 참조 - orange-index.html을 index.html로 저장하고 나머지 두 파일 이름은 그대로 유지합니다. ## Orange OUDS Web 디자인 시스템 에이전트 설정 ### 구현 시작점 http://localhost:8000/을 엽니다. 컴파일된 네이티브 에셋을 사용하므로 Sass 빌드가 필요하지 않습니다. ``` npm init -y npm install @ouds/web-common@1.4.0 @ouds/web-orange@1.4.0 # Save index.html, orange.css and orange-app.js from the supplied examples. python3 -m http.server 8000 ``` ### 프로젝트를 위한 프롬프트 ``` 공통 패키지와 Orange 패키지가 서로 일치하는 OUDS Web 1.4 비교 예제를 완성합니다. 실제 btn-brand 및 btn-default 변형, 네이티브 Offcanvas 이벤트와 API, 밝은/어두운 테마 토큰 해석, 명시적인 Arial 대체 글꼴을 사용합니다. 번들의 콘텐츠는 모두 가상으로 유지하고 선택은 로컬에서만 처리합니다. ``` ## Orange OUDS Web 디자인 시스템 출처 및 범위 실제 OUDS Web CSS 및 Offcanvas 런타임과 원본 OpenDesign 가상 번들, 로컬 선택 기능을 사용합니다. Arial 대체 글꼴을 명시적으로 지정하며, 상업적 제안이나 주문을 나타내지 않습니다. - 설치 공통 패키지와 테마 패키지가 서로 일치하도록 설정합니다. - 오프캔버스 드로어 구조, 이벤트 및 API. - 버튼 OUDS 전용 변형 및 상태. - JavaScript 런타임 동작 및 통합 경계. ## Orange OUDS Web 디자인 시스템 관련 리소스 ### Palantir Blueprint Blueprint로 밀도 높은 데이터 작업 공간을 구축하세요. 검증된 타이포그래피 및 의도 토큰, 선택 가능한 데이터 세트 테이블, 검토 인스펙터와 전체 React 소스가 포함됩니다. ### Pega Bolt Bolt의 Pega 브랜드 콘텐츠 시스템을 살펴보세요. 유동적인 타이포그래피, 가로·세로 간격의 분리, 편집형 리소스 페이지를 위한 Twig 아코디언 구성을 확인할 수 있습니다. ### Porsche 디자인 시스템 유동적인 간격, CSS 색상 구성, Porsche Next 타이포그래피, 두 가지 선택이 가능한 구성 도구를 통해 Porsche Design System v4를 살펴보세요. 실제 토큰 표현식과 최신 세그먼트 컨트롤 이벤트를 사용하는 완전한 Vite 엔트리 파일이 포함되어 있습니다. - [구현 레퍼런스](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [출처](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [출처](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [코드 참조](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [설치 공통 패키지와 테마 패키지가 서로 일치하도록 설정합니다.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [오프캔버스 드로어 구조, 이벤트 및 API.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [버튼 OUDS 전용 변형 및 상태.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript 런타임 동작 및 통합 경계.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)