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로 연결됩니다.
열기와 닫기 동작은 네이티브 런타임에 맡기기
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는 필요하지 않습니다.
제공된 파일 세 개를 모두 같은 폴더에 저장합니다.
호환되는 OUDS 패키지 두 개를 모두 설치합니다.
폴더를 서버에서 제공하고 각 카드를 확인합니다.
Escape, 포커스 복귀, 로컬 선택 지우기, 두 가지 모양을 테스트합니다.
코드와 에셋의 릴리스 버전을 일치시키기
버전을 변경하는 경우 버튼 변형, data API 네임스페이스, 이벤트 이름, 테마 변수를 함께 확인합니다. 서로 다른 릴리스의 CSS와 스크립트는 상호작용할 때 불일치가 드러나기 전까지는 정상처럼 보일 수 있습니다. 제공된 버전은 테스트를 거친 구체적인 참고 자료이며, 앞으로 나올 모든 패키지 조합이 동일하게 동작한다고 보장하지는 않습니다.
Orange OUDS Web 디자인 시스템 컴포넌트 예제
orange-index.html
완전한 마크업과 네이티브 CSS/JavaScript 가져오기 구문.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">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.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
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'});
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# 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 대체 글꼴을 사용합니다. 번들의 콘텐츠는 모두 가상으로 유지하고 선택은 로컬에서만 처리합니다.
05
Orange OUDS Web 디자인 시스템 출처 및 범위
실제 OUDS Web CSS 및 Offcanvas 런타임과 원본 OpenDesign 가상 번들, 로컬 선택 기능을 사용합니다. Arial 대체 글꼴을 명시적으로 지정하며, 상업적 제안이나 주문을 나타내지 않습니다.
