83.3K+다운로드
리테일 이커머스 · 새 리소스

Adeo Mozaic 디자인 시스템.

Mozaic의 16px 매직 유닛, 48px로 맞춘 컨트롤, 실제 SCSS 임포트와 BEM 클래스로 실용적인 수량 컨트롤 구성을 만들어 보세요. 선반 플래너는 경계값과 타입 지정 오류, 로컬 자재 요약을 눈으로 확인할 수 있게 해줍니다.

OpenDesign 다운로드 DESIGN.md 다운로드
OpenDesign 가이드8개 챕터36개 레퍼런스 항목독자적 적용 가이드
01

Adeo Mozaic 디자인 시스템 인터페이스 미리보기

수량을 입력하거나 단계별로 조정하고, 한계를 시험하며 로컬 자재 목록을 준비하세요.

선반 자재 플래너전체 예시 열기
Mozaic의 매직 유닛과 중간 크기 수량 컨트롤을 독자적으로 오프라인에서 해석한 HTML/CSS 구현입니다. 원본 일러스트와 애플리케이션 팔레트를 사용했으며, 네이티브 라이브러리 CSS가 아닙니다. · 구현 레퍼런스
02

Adeo Mozaic 디자인 시스템 디자인 레퍼런스

Mozaic SCSS/BEM 문서: 기초 및 설치 페이지는 v1.85.0을, 수량 코드 레퍼런스는 v1.76.0을 명시합니다. 이는 문서화된 레퍼런스 계약이며, 모든 페이지가 하나의 최신 패키지 버전을 추종한다는 주장이 아닙니다.

매직 유닛 레퍼런스

출처
이름 / 규칙값 / 구성용도
mu0254pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu0508pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu07512pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu10016pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu12520pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu15024pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu17528pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu20032pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu25040pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu30048pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu35056pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu40064pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu50080pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu60096pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.
mu700112pxrem 기반 간격 레퍼런스이며, 픽셀 환산값은 문서에 명시된 16px 기준을 전제로 합니다.

버튼 크기

출처
이름 / 규칙값 / 구성용도
Small height32px / 2mu컴팩트한 컨트롤.
Medium height48px / 3mu모바일 수량 구성에 사용합니다.
Large height56px / 3.5mu강조도가 높은 대형 액션.
Text + icon, small / medium24px icon아이콘과 레이블의 균형을 유지합니다.
Text + icon, large32px icon대형 버튼.
Icon-only, medium / large32px icon정사각형 컨트롤.

본문 위계

출처
이름 / 규칙값 / 구성용도
mt-body-m16px regular기본 본문.
Small body14px여러 줄 본문의 최소 권장 크기.
Large body18px단락의 권장 최대 크기.

수량 컴포넌트 구조

출처
이름 / 규칙값 / 구성용도
mc-quantity-selectorWrapper두 개의 컨트롤과 입력 필드를 담습니다.
mc-quantity-selector__inputInput elementmc-text-input도 함께 적용하세요.
mc-quantity-selector__button-leftDecrement elementmc-button--square와 --bordered도 함께 적용하세요.
mc-quantity-selector__button-rightIncrement elementmc-button--square와 --bordered도 함께 적용하세요.
Small compositionmc-text-input--s + mc-button--s전체 그룹을 한꺼번에 변경하세요.
is-disabledVisual state class실제 동작에는 네이티브 disabled를 함께 사용하세요.

빌드와 커스터마이징

출처
이름 / 규칙값 / 구성용도
postcssPluginConfig@mozaic-ds/css-dev-tools/postcssPluginConfig필수 플러그인 목록.
Parserpostcss-scssSCSS 소스를 확인하세요.
Production environmentMOZAIC_ENV=production프로덕션 플러그인 구성을 활성화합니다.

간격 유틸리티

출처
이름 / 규칙값 / 구성용도
mu-mb-10016px bottom margin컴포넌트 사이의 간격.
mu-pl-0508px left padding유틸리티 간격.
make-space-util(m, t, 075)Top margin at mu075선택한 유틸리티를 생성합니다.
03

Adeo Mozaic 디자인 시스템 완전 가이드

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

DESIGN-adeo-mozaic.md

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

가이드 다운로드

구성 가능한 리테일 아이덴티티를 갖춘 Adeo Mozaic 디자인 시스템 SCSS 컴포넌트

ADEO는 조직이며 기본 프리셋이 아닙니다

Mozaic은 소스 스타일과 토큰을 폰트 및 SVG 아이콘과 별도로 제공합니다. 기본 토큰 테마는 Leroy Merlin이며, ADEO는 명시적으로 지정하는 프리셋입니다. 따라서 녹색의 독자적 미리보기는 공식 ADEO 기업 색상의 증거가 아닙니다.

이 OpenDesign 가이드에서

ADEO 프리셋을 사용하려면 preset: "adeo"와 tokens.localTokensExportPath를 지정한 mozaic.config.js를 만들고 npx mozaic-tokens-build를 실행하세요. 사용자 정의 토큰 디렉터리는 관련 없는 값을 대체하지 않고 해당 JSON 경로를 깊게 병합합니다. 테마 생성과 컴포넌트 스타일링은 별개의 빌드 단계입니다.

  • styles는 SCSS 컴포넌트를 제공합니다.
  • tokens는 소스 및 생성된 토큰 형식을 제공합니다.
  • web-fonts와 icons는 별도의 에셋을 제공합니다.
  • css-dev-tools는 빌드 및 린트 구성을 제공합니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템 텍스트 컨테이너를 고정하지 않고 매직 유닛 사용하기

rem 기반 16px 레퍼런스

Mozaic 스케일의 작은 쪽은 1/4 유닛 증분을, 중간은 0.5 유닛을, 더 큰 거리는 정수 유닛을 사용합니다. 레퍼런스 표를 보면 별도의 두 번째 간격 체계를 만들어내지 않고도 실제로 명명된 단계를 그대로 활용할 수 있습니다.

플래너는 16px 간격, 24px 내부 여백, 48px 컨트롤 높이를 사용합니다. 이 선택 덕분에 컴포넌트는 같은 리듬 위에 놓이면서 주변 카드와 텍스트는 커질 수 있습니다. 번역되거나 확대된 레이블을 고정 높이 콘텐츠 박스에 잘라 넣기보다는 최소 컨트롤 높이를 두는 편이 낫습니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템 밀집된 컨트롤 옆에서도 본문 가독성 유지

세 가지 실용적인 본문 크기

문서화된 본문 스케일은 16px 레귤러를 중심으로 합니다. 여러 줄 텍스트에는 14px이 하한 권장치이고, 18px은 단락의 상한 권장치입니다. 미리보기는 시스템 폰트 폴백을 사용하며 Mozaic의 웹폰트 패키지를 함께 제공하는 것처럼 꾸미지 않습니다.

더 큰 제목은 프로젝트 이름을, 본문 텍스트는 계산 과정을 설명하고, 더 작은 보조 줄은 예시의 범위를 밝히는 데 사용하세요. 자재 값은 선반 일러스트에 그려 넣은 텍스트가 아니라 실제 텍스트로 유지됩니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템 하나의 컴포넌트, 세 가지 조화된 요소

래퍼는 애플리케이션 상태를 제공하지 않습니다

수량 선택기는 테두리가 있는 정사각형 감소 버튼, 숫자 입력 필드, 그리고 이에 맞는 증가 버튼을 결합합니다. 텍스트 입력과 버튼을 포함한 세 컴포넌트 스타일을 모두 임포트하세요. quantity-selector만 임포트하는 것은 문서화된 구성에 해당하지 않습니다.

컴팩트 변형을 사용하려면 버튼과 입력 필드의 크기를 함께 변경하세요. 사용 지침에서는 작은 화면에서도 중간 크기를 사용하도록 안내하므로, 휴대전화에서 모든 요소를 줄이는 것은 적절한 최적화가 아닙니다. 미리보기에서는 컨트롤을 48px로 유지하고 주변 구성을 세로로 배치합니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템의 경계 스타일은 실제 동작과 일치해야 합니다

직접 입력에는 더하기와 빼기 외에도 다양한 상태가 있습니다

원래 예제에서는 1부터 12까지의 정수를 검증합니다. 값이 1이면 감소 버튼이 실제로 비활성화되고, 12이면 증가 버튼이 비활성화됩니다. is-disabled 클래스만으로는 키보드 활성화를 막을 수 없습니다. 네이티브 disabled 속성과 시각적 클래스가 동기화됩니다.

비어 있거나 소수인 입력값을 그럴듯한 자재 목록으로 임의 변환하지 않습니다. 제출하면 허용되는 범위를 안내하고 입력 필드에 포커스를 둡니다. 이후 값을 수정하면 이전 수량을 기준으로 한 결과이므로, 기존에 준비된 결과를 지웁니다. 선반 계산은 허구의 예시 데이터이며 구조나 구매에 관한 조언이 아닙니다.

  1. 빈 문자열을 0으로 처리하지 않고 입력값을 읽습니다.
  2. 예시 수량을 계산하기 전에 정수인지, 허용 범위 안에 있는지 확인합니다.
  3. 경계 버튼과 접근성 오류 상태를 모두 업데이트합니다.
  4. 검증을 통과한 뒤에만 로컬 스냅샷을 생성합니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템: 프로젝트 결과를 위한 단일 솔리드 액션 사용

단계별 값 변경과 준비 작업 구분하기

스테퍼는 입력값을 변경하므로 절제된 테두리 사각형 컨트롤을 사용합니다. 솔리드 스타일의 ‘자재 목록 준비’ 버튼은 전체 양식에 작업을 수행합니다. 같은 색상의 솔리드 액션 두 개를 나란히 배치하면 이러한 차이가 불분명해집니다.

결과 메시지에는 아무것도 주문되지 않았다는 점을 명확히 표시합니다. 가짜 로딩 상태나 결제 절차, 네트워크 제출은 없습니다. 값과 액션의 관계를 보여 주기에는 구체적인 요약만으로 충분합니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템: Mozaic 파이프라인에서 문서화된 import 컴파일하기

설정을 먼저, 컴포넌트 출력을 다음에

전체 설정을 불러오는 import는 변수, 함수, 믹스인을 제공하지만, 그 자체로 컴포넌트 CSS를 출력하지는 않습니다. 제공된 번들에서는 그 뒤에 text-input, button, quantity-selector를 불러옵니다. 제공된 플러그인 설정은 Mozaic import 경로를 확인하고 필요한 변환을 실행합니다.

플러그인 패키지에 CLI 실행기가 포함되어 있지 않으므로, 설정에는 PostCSS CLI 실행기가 필요합니다. 프로덕션 환경에서는 MOZAIC_ENV에 따라 플러그인 설정이 달라집니다. 설치 페이지에서는 이제 Node 20+를 요구하고 Dart Sass를 권장합니다. Node Sass를 설명하는 오래된 문구를 deprecated 컴파일러 설치의 근거로 삼지 마세요.

지원 사양 읽기

Adeo Mozaic 디자인 시스템: 컴포넌트 내부에서 유틸리티 간격을 분리하세요

컴포넌트가 레이아웃을 담당하는 곳에는 스케일 값을 사용하세요

Mozaic의 margin 및 padding 유틸리티는 컴포넌트 사이의 간격을 위한 것입니다. 새 컴포넌트 내부에서는 SCSS 매직 유닛 변수를 사용해 컴포넌트가 독립적으로 유지되도록 하세요. 목표 치수를 유지하려면 테두리 크기를 빼야 할 수 있습니다. 예를 들어 calc($mu025 - 1px)을 사용하면 의도한 리듬을 유지할 수 있습니다.

오프라인 예제는 네이티브 Mozaic CSS 실행을 주장하지 않습니다. 문서화된 치수와 수량 구성을 독자적인 색상, CSS 선반 일러스트레이션, 로컬 전용 상호작용으로 해석합니다. 별도의 코드 블록이 실제 라이브러리 클래스와 빌드 연결을 제공합니다.

지원 사양 읽기

Adeo Mozaic 디자인 시스템 컴포넌트 예제

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

전체 문서를 index.html로 저장하고 브라우저에서 여십시오. Mozaic의 매직 유닛과 medium 수량 컨트롤을 독자적으로 오프라인 해석한 HTML/CSS이며, 네이티브 라이브러리 CSS이 아닌 독자적 일러스트레이션과 애플리케이션 팔레트를 사용합니다.

html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Shelf materials planner</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#242920;font:16px/1.5 Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #23682c;outline-offset:4px}header{border-bottom:1px solid #d9ddd1;padding:16px 32px;display:flex;justify-content:space-between;gap:16px}header b{font-size:18px}header span,.note{font-size:14px;color:#5a6154}main{max-width:1056px;margin:auto;padding:32px}h1{font-size:36px;line-height:1.1;letter-spacing:-1px;margin:8px 0 16px}p{margin:0 0 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#23682c;font-weight:bold}.layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.art{background:#e5eadc;border-radius:4px;min-height:350px;display:grid;place-items:center;position:relative;overflow:hidden}.wall{width:78%;height:220px;background:linear-gradient(90deg,transparent 49.6%,#d8dfcf 50%,transparent 50.4%);position:relative}.board{position:absolute;left:0;right:0;top:130px;height:18px;background:repeating-linear-gradient(0deg,#bd9b6e 0 3px,#c6a477 3px 7px);box-shadow:0 10px 12px #26341b20;transform:skewY(-3deg)}.bracket{position:absolute;top:148px;width:12px;height:62px;background:#727867;transform:skewY(-3deg)}.bracket.a{left:15%}.bracket.b{right:15%}.pot{position:absolute;left:23%;top:58px;width:47px;height:72px;background:#c88462;border-radius:3px 3px 15px 15px}.leaf{position:absolute;width:52px;height:34px;background:#3d6e38;left:4px;top:-22px;border-radius:100% 0 100% 0;transform:rotate(-25deg)}.leaf:after{content:'';position:absolute;width:45px;height:30px;background:#638a47;left:20px;top:-15px;border-radius:0 100% 0 100%;transform:rotate(45deg)}.books{position:absolute;top:48px;right:20%;height:80px;display:flex;gap:4px;align-items:end}.books i{width:18px;height:76px;background:#f4efe4;display:block;border-top:6px solid #7f9673}.books i:nth-child(2){height:88px;background:#d3b795}.books i:nth-child(3){height:68px;background:#718268;transform:rotate(-10deg)}.art small{position:absolute;bottom:16px;left:24px;color:#526448}.panel{background:#fff;padding:24px;border:1px solid #d9ddd1;border-radius:4px}h2{font-size:24px;line-height:1.25;margin:0 0 8px}label{display:block;font-weight:bold;margin:24px 0 8px}.quantity{display:flex;max-width:240px;margin-bottom:8px}.quantity button,.quantity input{height:48px;border:1px solid #727a6a;background:#fff}.quantity button{width:48px;color:#23682c;font-size:24px;flex-shrink:0}.quantity button:first-child{border-radius:4px 0 0 4px}.quantity button:last-child{border-radius:0 4px 4px 0}.quantity input{width:96px;min-width:0;border-left:0;border-right:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}button:disabled{color:#a2a69b;background:#f1f2ed;cursor:default}.materials{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #d9ddd1;padding:16px 0}.materials strong{font-size:24px;display:block}.materials span{font-size:14px;color:#62695c}.primary{min-height:48px;padding:12px 24px;background:#23682c;color:#fff;border:0;border-radius:4px;width:100%;font-weight:bold}.error{color:#ac2323;margin:8px 0;font-size:14px}.result{margin-top:16px;background:#eaf3e2;padding:16px;border-left:4px solid #23682c}.result:empty{display:none}footer{padding-top:24px;font-size:14px;color:#62695c}@media(max-width:650px){header{padding:16px}header span{max-width:140px}main{padding:24px 16px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:16px}.art{min-height:260px}.panel{padding:24px}.materials{gap:12px}}
</style><header><b>PROJECT WORKSHOP</b><span>Original Mozaic interpretation</span></header><main><p class="eyebrow">SMALL PROJECT · BIG DIFFERENCE</p><h1>Make room for what matters.</h1><p>Plan a simple shelf arrangement and prepare its sample materials list.</p><div class="layout"><div class="art" role="img" aria-label="Original illustration of a wooden shelf with books and a potted plant"><div class="wall"><div class="board"></div><div class="bracket a"></div><div class="bracket b"></div><div class="pot"><div class="leaf"></div></div><div class="books"><i></i><i></i><i></i></div></div><small>Original shelf illustration</small></div><form class="panel" id="planner" novalidate><h2>Your shelf project</h2><p class="note">Each sample shelf uses one board, two brackets and four screws.</p><label for="quantity">Number of shelves</label><div class="quantity"><button id="minus" type="button" aria-label="Remove one shelf" aria-controls="quantity">−</button><input id="quantity" type="number" min="1" max="12" step="1" required value="2" aria-describedby="hint error"><button id="plus" type="button" aria-label="Add one shelf" aria-controls="quantity">+</button></div><p class="note" id="hint">Choose a whole number from 1 to 12.</p><p class="error" id="error" role="alert"></p><div class="materials" aria-live="polite"><div><strong id="boards">2</strong><span>Boards</span></div><div><strong id="brackets">4</strong><span>Brackets</span></div><div><strong id="screws">8</strong><span>Screws</span></div></div><button type="submit" class="primary">Prepare materials list</button><div id="result" class="result" role="status"></div></form></div><footer>Local interaction example. No order is placed. Sample quantities are illustrative, not structural guidance.</footer></main><script>const input=document.querySelector('#quantity'),minus=document.querySelector('#minus'),plus=document.querySelector('#plus'),error=document.querySelector('#error'),result=document.querySelector('#result');function number(){return input.value.trim()===''?NaN:Number(input.value)}function valid(n){return Number.isInteger(n)&&n>=1&&n<=12}function update(show=false){const n=number(),ok=valid(n);result.textContent='';minus.disabled=ok&&n===1;plus.disabled=ok&&n===12;input.setAttribute('aria-invalid',String(!ok&&show));error.textContent=!ok&&show?'Enter a whole number from 1 to 12.':'';document.querySelector('#boards').textContent=ok?n:'—';document.querySelector('#brackets').textContent=ok?n*2:'—';document.querySelector('#screws').textContent=ok?n*4:'—';return ok}minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update()};plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update()};input.oninput=()=>update();document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`};update();</script></html>

코드 참조

  • 선반 수량은 주문서가 아니라 자재 목록을 만들어 냅니다. 네이티브 마크업에는 문서화된 Mozaic PostCSS 출력이 필요하며, 이 독립형 문서에는 자체 해석 스타일이 포함되어 있습니다.

범위가 제한된 선반 수량과 그에서 산출된 자재 목록

실제 Mozaic 클래스가 네이티브 숫자 입력을 감쌉니다. 독자적인 JavaScript가 정수 검증, 경계값 비활성화, 로컬 전용 요약을 제공합니다.

html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./mozaic.css"><title>Shelf materials</title>
<main><h1>Plan a shelf project</h1>
<form id="planner" novalidate>
<label for="quantity">Number of shelves</label>
<p id="hint">Choose 1 to 12. Each sample shelf needs two brackets and four screws.</p>
<div class="mc-quantity-selector">
<button type="button" id="minus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left" aria-controls="quantity" aria-label="Remove one shelf">−</button>
<input id="quantity" name="quantity" class="mc-text-input mc-quantity-selector__input" type="number" min="1" max="12" step="1" value="2" required aria-describedby="hint error">
<button type="button" id="plus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right" aria-controls="quantity" aria-label="Add one shelf">+</button>
</div>
<p id="error" role="alert"></p><p id="counts" aria-live="polite"></p>
<button type="submit" class="mc-button">Prepare materials list</button>
<p id="result" role="status"></p></form></main>
<script>
const input=document.querySelector('#quantity'), minus=document.querySelector('#minus'), plus=document.querySelector('#plus');
const error=document.querySelector('#error'), counts=document.querySelector('#counts'), result=document.querySelector('#result');
function number(){return input.value.trim()===''?NaN:Number(input.value);}
function valid(n){return Number.isInteger(n)&&n>=1&&n<=12;}
function update(showError=false){
 const n=number(),ok=valid(n); result.textContent='';
 minus.disabled=ok&&n===1; plus.disabled=ok&&n===12;
 minus.classList.toggle('is-disabled',minus.disabled);plus.classList.toggle('is-disabled',plus.disabled);
 input.setAttribute('aria-invalid',String(!ok&&showError));
 error.textContent=!ok&&showError?'Enter a whole number from 1 to 12.':'';
 counts.textContent=ok?`${n} boards · ${n*2} brackets · ${n*4} screws`:'Enter a quantity to calculate materials.';
 return ok;
}
minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update();};
plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update();};
input.oninput=()=>update();
document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return;}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`;};
update();
</script></html>

코드 참조

  • 두 개의 스테퍼 버튼은 type="button"을 사용하므로 양식을 제출하지 않습니다.
  • 네이티브 min/max/step은 그대로 의미를 가지며, 사용자 정의 검증이 빈 값과 소수점 입력을 처리합니다.
  • 수량을 변경하면 이전에 준비된 스냅샷이 무효화됩니다.
04

Adeo Mozaic 디자인 시스템 AI 에이전트 설정

구현 시작점

문서화된 PostCSS 구성을 사용하는 공개 SCSS 워크플로입니다. HTML 예제는 public/index.html 아래에 저장하십시오. 여기서는 네이티브 패키지 빌드를 실행하지 않았으며, 오프라인 미리보기는 독자적인 해석입니다. 현재 설치 안내는 Dart Sass를 사용하며, 이는 예전 PostCSS 페이지의 Node Sass 표기를 대체합니다.

text
# Node 20+. Use a CommonJS project for this configuration.
npm install @mozaic-ds/styles sass
npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss
# Save the configuration and SCSS below, then build:
npx postcss src/bundle.scss --output public/mozaic.css
# Production build on a POSIX shell:
MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css

// postcss.config.js
module.exports = {
  syntax: require('postcss-scss'),
  plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig')
};

// src/bundle.scss — settings must precede components.
@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.button';
@import 'components/c.quantity-selector';

프로젝트를 위한 프롬프트

에이전트 프롬프트
settings-tools/all-settings를 사용해 text-input, button, quantity-selector보다 먼저 Mozaic SCSS 구성을 만드십시오. 작은 화면에서는 48px medium 컨트롤을 맞추고, 경계값 버튼은 네이티브로 비활성화하며, 입력된 정수를 검증하고 로컬 전용 요약을 만드십시오. 문서화된 PostCSS 파이프라인을 사용하고 기본 Leroy Merlin 테마와 ADEO 프리셋을 구분하십시오.
05

Adeo Mozaic 디자인 시스템 출처와 범위

Mozaic에 대한 독자적인 OpenDesign 레퍼런스입니다. 이 샘플은 ADEO나 Leroy Merlin 스토어프런트도, 실제 주문도, 구조적 안내도 아닙니다. 문서 스냅샷마다 버전 표기가 다릅니다.