# Preline UI 디자인 시스템

## Preline UI 디자인 시스템 인터페이스 미리보기

오리지널 창작 세션 세 가지를 비교하고, 그룹 인원을 변경한 뒤 로컬에서만 계산되는 재료비 예상액을 저장하세요.

## Preline UI 디자인 시스템 디자인 참고 자료

Preline npm 4.2.0과 Tailwind CSS 4.3.3을 사용하며, 설치된 패키지의 기본 테마를 적용합니다. 마케팅 및 문서 사이트에는 최신 버전 배너가 표시될 수 있으므로, 실행 가능한 예제는 사용할 버전을 명시적으로 고정했습니다. 테마 별칭은 그대로 유지하며, 근거 없이 16진수 색상값으로 변환하지 않습니다.

### 기본 라이트 시맨틱 테마

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --background | var(--color-white) | 기본 배경 역할. |
| --foreground | var(--color-gray-800) | 본문 텍스트 역할. |
| --border | var(--color-gray-200) | 공통 테두리 역할. |
| --primary | var(--color-primary-600) | 활성 탭 및 주요 동작. |
| --primary-foreground | var(--color-white) | 기본 색상 위의 텍스트입니다. |
| --primary-hover | var(--color-primary-700) | 마우스 오버 상태입니다. |
| --primary-focus | var(--color-primary-700) | 포커스 상태. |
| --primary-active | var(--color-primary-700) | 활성 상태. |
| --layer | var(--color-white) | 수량 컨트롤 표면. |
| --layer-line | var(--color-gray-200) | 수량 컨트롤 경계. |
| --layer-hover | var(--color-gray-50) | 호버 표면. |
| --card | var(--color-white) | 세션 및 그룹 카드. |
| --card-line | var(--color-gray-200) | 카드 경계. |
| --muted-foreground-1 | var(--color-gray-500) | 보조 텍스트. |
### 실제로 사용하는 Tailwind 스케일

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| p-2 / gap-2 | 0.5rem | 수량 입력 영역 및 탭 간격. |
| px-3 / gap-3 | 0.75rem | 탭 패딩 및 숫자 컨트롤 간격. |
| p-5 | 1.25rem | 카드 및 기본 페이지 여백. |
| sm:p-8 | 2rem from 640px | 소형 중단점에서의 페이지 여백. |
| mt-7 | 1.75rem | 플래너 위쪽 간격. |
| text-xs | 0.75rem / 1rem | 보조 레이블. |
| text-sm | 0.875rem / 1.25rem | 컨트롤 및 설명 문구. |
| text-lg | 1.125rem / 1.75rem | 그룹 제목 |
| text-2xl | 1.5rem / 2rem | 세션 제목. |
| text-3xl | 1.875rem / 2.25rem | 페이지 제목 및 합계. |
| rounded-lg / rounded-xl | 0.5rem / 0.75rem | 컨트롤 / 카드; Tailwind 기본 모서리 반경 값. |
### 오리지널 애플리케이션 및 플러그인 제약 사항

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Group size | min 1 / max 6 / step 1 | HSInputNumber 데이터 옵션과 HTML 입력 제약 조건이 일치합니다. |
| Print studio allowance | $12 per participant | 가상의 재료비 예상액. |
| Clay workshop allowance | $18 per participant | 가상의 재료비 예상액. |
| Drawing walk allowance | $5 per participant | 가상의 재료비 예상액. |
| Layout | Flexible session + 280px group card; stack at 760px | 오리지널 반응형 구성. |
| Theme mapping | bg-primary → --color-primary → --primary | 시맨틱 Tailwind 유틸리티는 Preline 별칭을 통해 실제 값으로 확인됩니다. |
## Preline UI 디자인 시스템 전체 가이드

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

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

## Preline UI 디자인 시스템: Preline은 유틸리티 마크업과 동작 플러그인을 결합합니다

### Preline은 유틸리티 마크업과 동작 플러그인을 결합합니다

> 이 플래너는 기본 Preline 플러그인 두 가지를 사용합니다. HSTabs는 세션 패널을 선택하고, HSInputNumber는 값의 범위가 제한된 증가 및 감소 컨트롤을 관리합니다. 시각적 스타일 대부분은 Tailwind 클래스가 제공합니다. 오리지널 세션 일러스트와 예산 계산은 애플리케이션 자체의 기능이며, 모든 기능이 포함된 예약 컴포넌트가 제공되는 것은 아닙니다.

예제를 복사할 때는 이 차이를 이해해야 합니다. JavaScript 패키지만 설치해도 유틸리티 클래스가 컴파일되거나 애플리케이션 마크업이 제공되는 것은 아닙니다. 반대로 플러그인을 초기화하지 않고 HTML만 복사하면 탭과 숫자 입력 동작이 완성되지 않습니다. 아래 전체 통합 예제에서는 필요한 각 요소를 명시적으로 제공합니다.

지원 사양 읽기

## Preline UI 디자인 시스템: 시맨틱 별칭을 팔레트 역할까지 추적해 확인하세요

### 시맨틱 별칭을 팔레트 역할까지 추적해 확인하세요

패키지 기본 라이트 테마에서 --primary는 --color-primary-600을 참조하며, 기본 primary 색상 단계는 파란색입니다. primary 전경색은 흰색으로 지정되고, 호버·포커스·활성 상태에는 700 역할이 사용됩니다. 선택된 탭과 저장 동작은 시맨틱 유틸리티 클래스를 통해 같은 계열을 공유합니다.

카드에는 --card와 --card-line을 사용하고, 수량 입력 필드에는 --layer와 --layer-line을 사용합니다. 이러한 역할을 분리하면 곳곳에 흰색과 회색을 직접 지정하는 것보다 이후 테마 변경을 예측하기 쉽습니다. 아래 표에서는 공식 별칭을 그대로 유지해 계산으로 추정한 값을 소스 토큰인 것처럼 표시하지 않습니다.

지원 사양 읽기

## Preline UI 디자인 시스템: Tailwind의 실제 스케일을 사용하고 오리지널 예외를 표시하세요

### Tailwind의 실제 스케일을 사용하고 오리지널 예외를 표시하세요

페이지 제목과 예상 금액에는 text-3xl, 세션 제목에는 text-2xl, 폼 설명에는 text-sm을 사용합니다. 카드 패딩 p-5는 기본 간격 단위 기준 1.25rem입니다. 페이지 여백이 sm:p-8로 넓어지는 기준은 Tailwind의 640px 소형 중단점이며, 오리지널 그리드는 760px에서 한 열로 전환됩니다.

로컬 스타일시트는 system-ui를 사용하며 Preline 테마 파일에 지정된 선택 글꼴은 불러오지 않습니다. 화면 너비가 280px일 때는 탭이 두 줄로 배치되고 그룹 카드가 세션 아래로 이동합니다. 이는 오리지널 애플리케이션 구성에 따른 선택이며, 모든 Preline 레이아웃이 이와 같은 형태라는 뜻은 아닙니다.

지원 사양 읽기

## Preline UI 디자인 시스템: 안정적인 ID로 탭 컨트롤과 패널을 연결하세요

### 안정적인 ID로 탭 컨트롤과 패널을 연결하세요

각 탭의 data-hs-tab은 고유한 패널 하나를 가리킵니다. 보조 기술에서도 관계를 확인할 수 있도록 탭의 aria-controls와 패널의 aria-labelledby에 같은 연결 정보를 지정합니다. 처음에는 탭 하나에만 active와 aria-selected=true를 설정하고, 나머지 패널은 숨김 상태로 둡니다. HSTabs가 사용자의 탐색에 따라 해당 상태를 업데이트합니다.

현재 시각 스타일은 hs-tab-active:bg-primary와 hs-tab-active:text-primary-foreground를 사용합니다. 이 변형은 Preline의 variants.css에서 제공되므로 해당 파일을 가져오지 않으면 JavaScript가 클래스를 올바르게 변경해도 선택 상태가 모호하게 보일 수 있습니다. 애플리케이션은 선택 변경을 감지해 인접한 요약을 새로 고칩니다.

1. Clay workshop을 선택하고 제목, 재료, 소요 시간을 확인하세요.

2. Participants를 두 명에서 세 명으로 늘리고 예상 금액이 $54인지 확인하세요.

3. 로컬 계획을 저장한 다음 탭을 변경해 이전 확인 메시지를 지우세요.

지원 사양 읽기

## Preline UI 디자인 시스템의 플러그인 옵션과 입력 제약 조건을 일치시키세요

### 플러그인 옵션과 입력 제약 조건을 일치시키세요

수량 래퍼는 data-hs-input-number에서 최소값 1, 최대값 6, 증가 단위 1을 설정합니다. 기본 숫자 입력에도 같은 제약 조건을 지정합니다. 이렇게 하면 플러그인 버튼과 브라우저 유효성 검사에 동일한 허용 범위가 적용되어, 버튼 핸들러에만 있는 제한을 직접 입력한 숫자로 우회할 수 없습니다.

요약은 input, change, 플러그인의 change 콜백을 감지합니다. 직접 입력한 값이 유효하지 않으면 합계 대신 긴 대시를 표시하고 저장을 비활성화합니다. 저장 핸들러도 값을 읽기 전에 reportValidity를 호출합니다. 6명 제한은 계획 예시의 제약 조건이며 실제 예약 가능 인원을 의미하지 않습니다.

지원 사양 읽기

## Preline UI 디자인 시스템: 오래된 레이블이 아닌 활성 패널을 기준으로 계산하세요

### 오래된 레이블이 아닌 활성 패널을 기준으로 계산하세요

각 패널에는 세션 이름, 가격, 소요 시간을 안정적인 데이터 속성으로 저장합니다. 업데이트 함수는 현재 표시되는 패널을 읽고, 유효한 참가자 수에 재료비를 곱합니다. 따라서 Print studio, Clay workshop, Drawing walk는 같은 자리 표시자 카드만 보여 주는 탭이 아니라 실제로 서로 다른 선택지가 됩니다.

표시되는 예상 금액에는 재료비만 포함됩니다. 원래 설명에 비용에 포함되는 항목을 명시하고, 이 페이지가 예약을 진행하지 않는다는 점도 분명히 밝힙니다. 금액과 연결된 결제, 재고 확인, 외부 일정 기능은 없습니다. 실제 예약 흐름을 구현하려면 이러한 별도 시스템과 서버 측 유효성 검사가 필요합니다.

지원 사양 읽기

## Preline UI 디자인 시스템: 이 패키지 버전에서 내보내는 수동 초기화 항목을 사용하세요

### 이 패키지 버전에서 내보내는 수동 입력 컴포넌트를 사용하세요

검증된 4.2.0 패키지는 preline/non-auto에서 이름이 지정된 HSTabs 및 HSInputNumber 내보내기를 제공합니다. 예제는 이를 가져온 뒤 마크업이 준비되면 autoInit 메서드를 호출합니다. 이름과 달리 여기서 autoInit은 애플리케이션이 명시적으로 호출하는 스캔 함수이지, 페이지 로드 시 패키지 전체를 암묵적으로 초기화하는 훅이 아닙니다.

검증 과정에서 플러그인별 .mjs 경로는 기본 클래스를 내보내지 않았으며, 패키지의 부수 효과 메타데이터 때문에 해당 경로에서 직접 가져온 항목이 제거될 수 있었습니다. 내보내는 수동 초기화 항목을 사용해 실제 빌드 문제를 해결했습니다. 따라서 설정에는 검증되지 않은 일반 플러그인 가져오기 방식이 아니라, 해당 버전에서 작동하는 가져오기 방식이 제시되어 있습니다.

지원 사양 읽기

## Preline UI 디자인 시스템: 계획이 변경되면 확인 메시지를 만료시키세요

### 계획이 변경되면 확인 메시지를 만료시키세요

Save local plan을 누르면 정확한 세션명, 인원수, 재료비 합계가 포함된 상태 문구가 표시된 뒤 버튼이 비활성화됩니다. 수량을 편집하거나 선택한 탭을 변경하면 update가 호출되어 기본 안내 문구로 돌아가고 저장 가능 여부를 다시 계산합니다. 이전에 저장한 문구가 새 계획에 그대로 남지 않습니다.

로컬 테스트에서 Clay workshop을 선택하고 인원수를 3명으로 늘린 다음, 결과 상태에 $54가 표시되는지 확인했습니다. 또한 280px 너비에서 실제 렌더링된 페이지를 살펴봤습니다. 고정된 합계나 버튼 레이블만 바꾸는 버튼으로는 기본 플러그인 두 개와 애플리케이션 상태가 연결되었음을 증명할 수 없습니다.

- 정확한 로컬 결과를 상태 영역에 표시하세요.

- 유효하지 않은 값이 합계 계산에 포함되지 않도록 하세요.

- 마크업을 수정할 때 안정적인 탭 및 패널 ID를 유지하세요.

지원 사양 읽기

## Preline UI 디자인 시스템: 테마, 변형, 실제 소스 마크업을 함께 컴파일하세요

### 테마, 변형 및 실제 소스 마크업을 함께 컴파일하세요

스타일시트는 먼저 Tailwind를 가져온 다음 Preline 변형과 패키지의 기본 테마를 가져옵니다. 명시적인 소스 경로에는 로컬 HTML, 애플리케이션 JavaScript, Preline 배포 파일이 포함되므로 상태에 따라 달라지는 유틸리티를 생성된 CSS에서 사용할 수 있습니다. 기존 레이아웃 스타일시트는 이러한 가져오기 뒤에 배치합니다.

독립 실행형 미리보기는 컴파일된 CSS과 번들로 묶인 JavaScript을 인라인으로 포함하며 CDN에 요청을 보내지 않습니다. 프로덕션 프로젝트에서는 같은 결과물을 별도 파일로 제공할 수 있습니다. 파일 경로는 실제 CSS 항목을 기준으로 지정하세요. 아래의 재현 가능한 예제에서는 숨겨진 임시 작업 공간에 의존하지 않도록 모든 소스 파일을 프로젝트 루트에 둡니다.

지원 사양 읽기

## Preline UI 디자인 시스템 컴포넌트 예제

### 완전한 시맨틱 플래너 마크업

탭 ID, 패널 연결 관계, 숫자 입력 훅, 명시적인 로컬 상태 영역을 포함합니다.

```
<main class="max-w-5xl mx-auto p-5 sm:p-8"><header><p class="text-xs font-semibold tracking-widest text-muted-foreground-1">STUDIO SATURDAY · SAMPLE PROGRAM</p><h1 class="text-3xl font-semibold tracking-tight mt-3">Choose a different kind of afternoon.</h1><p class="text-sm text-muted-foreground-1 leading-6 mt-3 max-w-2xl">Explore three creative sessions and calculate a sample materials budget for your group. This planner does not book a place.</p></header><div class="planner-grid mt-7"><section class="min-w-0"><nav class="flex flex-wrap gap-2 mb-5" role="tablist" aria-label="Creative sessions"><button type="button" id="tab-print" data-hs-tab="#panel-print" role="tab" aria-controls="panel-print" aria-selected="true" class="active hs-tab-active:bg-primary hs-tab-active:text-primary-foreground py-2 px-3 text-sm rounded-lg border border-border text-foreground hover:bg-layer-hover focus-visible:outline-2 focus-visible:outline-primary">Print studio</button><button type="button" id="tab-ceramics" data-hs-tab="#panel-ceramics" role="tab" aria-controls="panel-ceramics" aria-selected="false" class=" hs-tab-active:bg-primary hs-tab-active:text-primary-foreground py-2 px-3 text-sm rounded-lg border border-border text-foreground hover:bg-layer-hover focus-visible:outline-2 focus-visible:outline-primary">Clay workshop</button><button type="button" id="tab-drawing" data-hs-tab="#panel-drawing" role="tab" aria-controls="panel-drawing" aria-selected="false" class=" hs-tab-active:bg-primary hs-tab-active:text-primary-foreground py-2 px-3 text-sm rounded-lg border border-border text-foreground hover:bg-layer-hover focus-visible:outline-2 focus-visible:outline-primary">Drawing walk</button></nav><div id="panel-print" role="tabpanel" aria-labelledby="tab-print" class="" data-name="Print studio" data-price="12" data-duration="90 minutes"><div class="session-art print" aria-hidden="true"><i></i><b></b><span></span></div><div class="p-5 bg-card rounded-b-xl border border-card-line border-t-0"><p class="text-xs text-muted-foreground-1 font-medium">09:30–11:00 · 90 minutes</p><h2 class="text-2xl mt-3 font-semibold">Ink, paper, repeat.</h2><p class="text-sm leading-6 mt-3 text-muted-foreground-1">Make a two-color print from a simple cut-paper composition.</p><h3 class="text-sm font-semibold mt-5">Materials included in the estimate</h3><ul class="mt-3 space-y-2 text-sm"><li class="flex gap-2"><span aria-hidden="true">↗</span>Cobalt ink</li><li class="flex gap-2"><span aria-hidden="true">↗</span>Warm white stock</li><li class="flex gap-2"><span aria-hidden="true">↗</span>Registration guide</li></ul><p class="mt-5 text-sm font-medium">Sample materials allowance: $12 per person</p></div></div><div id="panel-ceramics" role="tabpanel" aria-labelledby="tab-ceramics" class="hidden" data-name="Clay workshop" data-price="18" data-duration="120 minutes"><div class="session-art ceramics" aria-hidden="true"><i></i><b></b><span></span></div><div class="p-5 bg-card rounded-b-xl border border-card-line border-t-0"><p class="text-xs text-muted-foreground-1 font-medium">13:00–15:00 · 120 minutes</p><h2 class="text-2xl mt-3 font-semibold">A shape held by hand.</h2><p class="text-sm leading-6 mt-3 text-muted-foreground-1">Build a small pinch vessel and explore three surface textures.</p><h3 class="text-sm font-semibold mt-5">Materials included in the estimate</h3><ul class="mt-3 space-y-2 text-sm"><li class="flex gap-2"><span aria-hidden="true">↗</span>Stoneware clay</li><li class="flex gap-2"><span aria-hidden="true">↗</span>Wooden modeling tool</li><li class="flex gap-2"><span aria-hidden="true">↗</span>Texture samples</li></ul><p class="mt-5 text-sm font-medium">Sample materials allowance: $18 per person</p></div></div><div id="panel-drawing" role="tabpanel" aria-labelledby="tab-drawing" class="hidden" data-name="Drawing walk" data-price="5" data-duration="60 minutes"><div class="session-art drawing" aria-hidden="true"><i></i><b></b><span></span></div><div class="p-5 bg-card rounded-b-xl border border-card-line border-t-0"><p class="text-xs text-muted-foreground-1 font-medium">16:00–17:00 · 60 minutes</p><h2 class="text-2xl mt-3 font-semibold">Notice the edges.</h2><p class="text-sm leading-6 mt-3 text-muted-foreground-1">Make a sequence of quick drawings along an original sample walking route.</p><h3 class="text-sm font-semibold mt-5">Materials included in the estimate</h3><ul class="mt-3 space-y-2 text-sm"><li class="flex gap-2"><span aria-hidden="true">↗</span>Pocket sketchbook</li><li class="flex gap-2"><span aria-hidden="true">↗</span>Soft graphite pencil</li><li class="flex gap-2"><span aria-hidden="true">↗</span>Portable drawing board</li></ul><p class="mt-5 text-sm font-medium">Sample materials allowance: $5 per person</p></div></div></section><aside class="bg-card border border-card-line rounded-xl p-5 self-start"><h2 class="text-lg font-semibold">Your group</h2><label for="people" class="block text-sm mt-5 mb-2">Participants</label><div id="quantity" data-hs-input-number='{"min":1,"max":6,"step":1}' class="flex items-center gap-3 border border-layer-line rounded-lg p-2 bg-layer"><button type="button" data-hs-input-number-decrement aria-label="Decrease participants" class="size-9 shrink-0 rounded-md border border-border disabled:opacity-40">−</button><input id="people" type="number" value="2" min="1" max="6" step="1" data-hs-input-number-input class="w-full min-w-0 text-center bg-transparent"/><button type="button" data-hs-input-number-increment aria-label="Increase participants" class="size-9 shrink-0 rounded-md border border-border disabled:opacity-40">+</button></div><p class="text-xs text-muted-foreground-1 mt-2">1–6 participants · sample planning limit</p><dl class="mt-6 space-y-3 text-sm"><div><dt class="text-muted-foreground-1">Selected session</dt><dd id="selected-name" class="font-semibold mt-1"></dd></div><div><dt class="text-muted-foreground-1">Duration</dt><dd id="selected-duration" class="font-semibold mt-1"></dd></div><div class="pt-4 border-t border-border"><dt class="text-muted-foreground-1">Materials estimate</dt><dd id="total" class="text-3xl font-semibold mt-1"></dd></div></dl><button id="save" class="mt-6 w-full py-3 px-4 bg-primary text-primary-foreground rounded-lg font-medium text-sm hover:bg-primary-hover disabled:opacity-50" type="button">Save local plan</button><p id="feedback" role="status" class="text-xs leading-5 mt-3 text-muted-foreground-1">No booking or payment is created.</p></aside></div></main>
```

코드 참조

- 세션 3개와 가격은 예시용으로 새로 만든 데이터입니다.

- 기본 입력에 플러그인과 동일한 제약 조건을 적용합니다.

### 플러그인 초기화와 계산 전체 코드

내보내는 non-auto 항목을 사용해 수동으로 초기화하고, 선택 항목과 수량을 하나의 계산된 요약에 반영합니다.

```
import {HSTabs,HSInputNumber} from 'preline/non-auto';
HSTabs.autoInit();HSInputNumber.autoInit();
const quantity=document.querySelector('#people'),save=document.querySelector('#save'),feedback=document.querySelector('#feedback');
function selected(){return document.querySelector('[role=tabpanel]:not(.hidden)')}
function update(){const panel=selected(),count=Number(quantity.value);document.querySelector('#selected-name').textContent=panel.dataset.name;document.querySelector('#selected-duration').textContent=panel.dataset.duration;document.querySelector('#total').textContent=quantity.checkValidity()&&count>=1?'$'+count*Number(panel.dataset.price):'—';save.disabled=!quantity.checkValidity()||count<1;feedback.textContent='No booking or payment is created.'}
document.querySelectorAll('[data-hs-tab]').forEach(button=>button.addEventListener('click',()=>queueMicrotask(update)));
new MutationObserver(update).observe(document.querySelector('nav'),{subtree:true,attributes:true,attributeFilter:['aria-selected']});
quantity.addEventListener('input',update);quantity.addEventListener('change',update);
const instance=HSInputNumber.getInstance('#quantity');instance.on('change',update);
save.addEventListener('click',()=>{if(!quantity.reportValidity())return;const panel=selected();feedback.textContent=`Saved locally: ${panel.dataset.name}, ${quantity.value} people, $${Number(quantity.value)*Number(panel.dataset.price)} materials estimate.`;save.disabled=true});update();
```

코드 참조

- preline/non-auto에서 이름이 지정된 내보내기 항목을 사용하세요.

- 버전이 지정된 플러그인 하위 경로의 .mjs 파일은 기본 클래스를 내보내지 않습니다.

- 입력 변경 이벤트와 플러그인 변경 콜백 모두 요약을 업데이트합니다.

### 완전한 오리지널 반응형 구성

기본 탭 및 숫자 입력 플러그인 주위에 배치한 프린트, 클레이, 드로잉 테마의 장식 일러스트입니다.

```
html,body{margin:0;height:auto;min-height:0}body{background:#f7f8fb;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--foreground)}button{cursor:pointer}button:disabled{cursor:default}.planner-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.session-art{height:200px;position:relative;overflow:hidden;border-radius:12px 12px 0 0}.session-art i,.session-art b,.session-art span{display:block;position:absolute}.print{background:#e2e9f4}.print i{width:160px;height:140px;left:15%;top:45px;background:#2456a7;transform:rotate(-13deg)}.print b{width:150px;height:150px;right:14%;top:30px;background:#f0a979;border-radius:50%;mix-blend-mode:multiply}.print span{width:180px;height:8px;left:20%;top:160px;background:#f9f8ef;transform:rotate(-13deg)}.ceramics{background:#e8d9c8}.ceramics i{width:150px;height:100px;left:25%;top:65px;border-radius:15% 15% 50% 50%;background:#a87862}.ceramics b{width:150px;height:32px;border-radius:50%;left:25%;top:53px;background:#704a3d;box-shadow:inset 0 0 0 10px #bd8f78}.ceramics span{width:150px;height:12px;left:25%;top:171px;background:#c7b39e;border-radius:50%}.drawing{background:#e2e8de}.drawing i{width:160px;height:145px;left:23%;top:25px;background:#fffdf4;transform:rotate(8deg);border:1px solid #d6d8cb}.drawing b{height:90px;width:80px;left:33%;top:49px;border:2px solid #4d655b;transform:rotate(-18deg);border-radius:50% 50% 10% 10%}.drawing span{width:130px;height:7px;background:#ad754c;left:45%;top:145px;transform:rotate(-33deg)}@media(max-width:760px){.planner-grid{grid-template-columns:minmax(0,1fr)}.session-art{height:170px}}@media(max-width:360px){main{padding:14px!important}.session-art i,.session-art b,.session-art span{transform:scale(.8)}.session-art{height:150px}h1{font-size:26px!important}}
```

코드 참조

- 아트워크는 오리지널 CSS이며 aria-hidden 처리되어 있습니다.

- 이 스타일시트는 Tailwind 및 Preline 가져오기 뒤에 배치합니다.

## Preline UI 디자인 시스템 AI 에이전트 설정

### 구현 시작점

기본 Preline 4.2.0을 사용하고 검증했습니다. 전체 마크업, 로직, CSS은 위에 제공되어 있습니다. input.css의 소스 경로는 네 개의 소스 파일이 모두 프로젝트 루트에 있다고 가정합니다.

```
# Create an empty directory and run:
npm init -y
npm install preline@4.2.0 tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
```

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

```
preline/non-auto에서 이름이 지정된 HSTabs 및 HSInputNumber를 가져오는 Preline 4.2.0을 사용하고 두 플러그인을 명시적으로 초기화하세요. Studio Saturday 워크숍 세 곳, 수량 범위 1~6, 선택한 워크숍의 재료비를 유지하세요. 활성 패널과 수량을 기준으로 합계를 계산하고, 둘 중 하나가 변경되면 저장된 계획을 무효화하며, 로컬에 저장하기 전에 숫자 범위를 검증하세요. 제공된 Tailwind 테마 및 변형 설정과 오리지널 레이아웃을 포함하세요. 로컬 스튜디오 계획을 예약 또는 결제 확인으로 바꾸지 마세요.
```

## Preline UI 디자인 시스템의 출처와 범위

Preline 네이티브 npm 4.2.0과 Tailwind CSS 4.3.3. 세션 설명과 일러스트, 가상의 재료비는 원본 그대로입니다. 저장하면 페이지의 로컬 상태만 저장되며, 예약이나 결제 또는 외부 메시지는 발생하지 않습니다.

- 테마 시맨틱 역할 매핑 및 테마 사용자 지정.

- 탭 플러그인 대상 관계, 초기화 및 동작.

- 숫자 입력 경계, 훅, 메서드 및 변경 콜백.

- 탭 마크업 탭 목록과 패널 구성.

- JavaScript 통합 초기화 범위 및 프레임워크 수명 주기.

- 타이포그래피 유틸리티 기반 텍스트 계층 구조.

- 설치 Tailwind 컴파일 및 패키지 설정.

## Preline UI 디자인 시스템 관련 리소스

### Prime UI

Prime UI 생태계를 버전으로 고정해 구현한 PrimeVue 예제입니다. 실제 프리셋 참조, 제어된 확장, 필터링, 선택, 로컬 고정 기능을 갖춘 Aura 테마 문서 트리입니다.

### Pure CSS

Pure CSS는 위젯 런타임 없이 그리드, 양식, 버튼, 메뉴 및 표를 구성하는 모듈형 스타일시트입니다. 이 가이드에서는 선택적으로 사용하는 반응형 그리드 모듈과 기본 제공 시맨틱 요소를 필터링 가능한 장비 카탈로그에 적용하고, 정렬 및 선택 기능은 명시적으로 구현하는 방법을 보여줍니다.

### Quasar

실제 브랜드 및 간격 값을 적용한 네이티브 Quasar 안내 워크플로입니다. QForm 유효성 검사, 3단계 브리프 작성기, 라디오 형식 선택, 실시간 45분 일정이 포함됩니다.


- [구현 레퍼런스](https://preline.co/plugins/tabs.html)
- [출처](https://preline.co/docs/themes.html)
- [출처](https://preline.co/docs/typography.html)
- [출처](https://preline.co/plugins/input-number.html)
- [지원 사양 읽기](https://preline.co/docs/index.html)
- [지원 사양 읽기](https://preline.co/docs/themes.html)
- [지원 사양 읽기](https://preline.co/docs/typography.html)
- [지원 사양 읽기](https://preline.co/plugins/tabs.html)
- [지원 사양 읽기](https://preline.co/plugins/input-number.html)
- [지원 사양 읽기](https://preline.co/docs/components/tabs.html)
- [지원 사양 읽기](https://preline.co/docs/preline-javascript.html)
- [코드 참조](https://preline.co/docs/components/tabs.html)
- [코드 참조](https://preline.co/plugins/input-number.html)
- [코드 참조](https://preline.co/docs/themes.html)
- [테마 시맨틱 역할 매핑 및 테마 사용자 지정.](https://preline.co/docs/themes.html)
- [탭 플러그인 대상 관계, 초기화 및 동작.](https://preline.co/plugins/tabs.html)
- [숫자 입력 경계, 훅, 메서드 및 변경 콜백.](https://preline.co/plugins/input-number.html)
- [탭 마크업 탭 목록과 패널 구성.](https://preline.co/docs/components/tabs.html)
- [JavaScript 통합 초기화 범위 및 프레임워크 수명 주기.](https://preline.co/docs/preline-javascript.html)
- [타이포그래피 유틸리티 기반 텍스트 계층 구조.](https://preline.co/docs/typography.html)
- [설치 Tailwind 컴파일 및 패키지 설정.](https://preline.co/docs/index.html)