# Tabler 디자인 시스템

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

설계 선택과 표지 연구를 살펴보고, 검증된 체크포인트를 추가한 뒤 네이티브 색상 모드를 전환하세요.

## Tabler 디자인 시스템 디자인 참조

Tabler 1.6.1 컴파일 버전 CSS 변수. 이 릴리스는 원시 색상에 OKLCH를 사용하고, 시맨틱 역할에는 light-dark()/color-mix()를 사용합니다. 이전의 헥스 기반 Tabler 예제를 같은 테마로 간주해서는 안 됩니다. 아래 값은 실제 설치 기본값입니다.

### 기본 상태 및 동작 색상

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --tblr-primary | oklch(54.6% 0.1724 254.2deg) | 주요 동작 역할. |
| --tblr-secondary | oklch(55.55% 0 0deg) | 보조 역할입니다. |
| --tblr-success | oklch(67.38% 0.1885 145.43deg) | 성공 역할. |
| --tblr-info | oklch(66.26% 0.1358 246.81deg) | 정보 역할입니다. |
| --tblr-warning | oklch(77.02% 0.1658 71.02deg) | 경고 역할입니다. |
| --tblr-danger | oklch(58.29% 0.1941 25.59deg) | 위험 역할입니다. |
| --tblr-purple | oklch(57.83% 0.2186 319.15deg) | 이 애플리케이션의 프로토타입 범주 색상. |
| --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | 텍스트 색상은 현재 색 구성표에 맞춰 조정됩니다. |
| --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | 페이지 배경은 색 구성표에 맞춰 조정됩니다. |
| --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | 카드/표면 배경 역할. |
### 본문 글꼴 및 모서리 크기 단계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | 설치된 릴리스의 시스템 산세리프 글꼴 스택. |
| --tblr-body-font-size | 0.875rem | 브라우저 기본 글꼴 크기 16px에서 기본값은 14px에 해당합니다. |
| --tblr-body-font-weight | 400 | 일반 본문 굵기입니다. |
| --tblr-body-line-height | 1.4285714286 | 기본 본문 크기에서 약 20px. |
| --tblr-border-radius | 6px | 기본 모서리 둥글기 6px. |
| --tblr-border-radius-sm | 4px | 작은 모서리 반경 4px입니다. |
| --tblr-border-radius-lg | 8px | 큰 모서리 둥글기 8px. |
| --tblr-border-radius-xl | 1rem | 특대 모서리 둥글기 1rem. |
| --tblr-border-radius-pill | 100rem | 알약 모양 모서리 둥글기. |
### 간격 및 네이티브 타임라인 기하 구조

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --tblr-spacer-0 | 0 | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-spacer-1 | 0.25rem | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-spacer-2 | 0.5rem | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-spacer-3 | 1rem | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-spacer-4 | 1.5rem | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-spacer-5 | 2rem | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-spacer-6 | 2.5rem | 네이티브에서 이름을 지정한 간격 값. |
| --tblr-page-padding | var(--tblr-spacer-3) | 페이지/타임라인 간격 변수. 반응형 재정의에 따라 값이 바뀔 수 있습니다. |
| --tblr-card-spacer-x | 1.25rem | 카드 본문 기본 가로 패딩. |
| --tblr-card-spacer-y | 1.25rem | 카드 본문 기본 세로 패딩. |
| --tblr-timeline-icon-size | 2.5rem | 기본 루트 크기 16px에서 아이콘 노드 크기 40px. |
### 원본 프로젝트 기록의 스타일 선택

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Project layout | col-lg-8 + col-lg-4 | 네이티브 그리드. lg 중단점부터 두 열로 표시됩니다. |
| Page padding | 32px; 24px 14px below 650px | 원본 애플리케이션 내부 여백입니다. |
| Journal title | 32px / 1.2; 27px on mobile | 원본 페이지 제목 재정의. |
| Cover studies | 155px tall; 120px on mobile | 원본 장식용 CSS 아트워크. |
## Tabler 디자인 시스템 전체 가이드

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

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

## Tabler 디자인 시스템: Tabler 릴리스에 맞는 테마 사용하기

### Tabler 릴리스에 맞는 테마 사용하기

> 프로젝트 기록은 Tabler 1.6.1로 빌드되었습니다. 컴파일된 팔레트는 OKLCH 색상을 사용하고, 시맨틱 변수는 light-dark와 color-mix를 사용합니다. 따라서 이 참조 자료에는 이전 Bootstrap 또는 Tabler 가이드의 16진수 값을 옮겨 적는 대신 실제 표현식을 표시했습니다. 주요 동작, 상태 배지, 표면 역할은 모두 설치된 릴리스에서 가져옵니다.

Tabler은 Bootstrap 컴포넌트 어휘를 확장하고 고유한 레이아웃 및 정보 표시 패턴을 제공합니다. 이 예제는 익숙한 카드, 양식, Modal과 함께 네이티브 타임라인, 페이지 헤더, datagrid, 아바타 클래스를 사용합니다. 이러한 요소를 통해 단순히 로고만 바꾼 일반적인 카드 그리드가 아닌 Tabler 스타일의 구성을 구현합니다.

지원 사양 읽기

## Tabler 디자인 시스템: 색상 모드를 바꾸면 텍스트뿐 아니라 표면도 바뀝니다

### 색상 모드를 바꾸면 텍스트뿐 아니라 표면도 바뀝니다

테마 컨트롤은 html 요소의 data-bs-theme을 변경하고, 자체 눌림 상태와 동작 레이블도 업데이트합니다. 그러면 Tabler의 시맨틱 표현식이 밝은 값 또는 어두운 값을 선택합니다. 두 가지 상태만 있는 이 간단한 예제에는 별도의 JavaScript 테마 관리자가 필요하지 않으며, 페이지 밖에 설정을 저장하지도 않습니다.

Decision, Prototype, Review에는 기본 파란색, 보라색, 녹색 색조 클래스가 사용됩니다. 텍스트 레이블만으로도 의미를 파악할 수 있어 색상에만 의존하지 않습니다. 표지 시안의 아트워크는 두 모드 모두 원래의 종이 같은 색상 팔레트를 유지하며, 주변 카드와 페이지, 텍스트에는 실제 구성 요소 테마가 적용됩니다.

지원 사양 읽기

## Tabler 디자인 시스템 페이지 계층 구조를 분리해 본문을 간결하게 구성하기

### 간결한 본문 글꼴과 별도의 페이지 계층 구조

기본 본문 글꼴 크기는 0.875rem이고 줄 높이는 약 1.4286으로, 루트 크기가 16픽셀일 때 대략 14픽셀의 텍스트를 표시합니다. 설치된 글꼴 스택은 시스템 산세리프이므로 이 미리 보기에는 원격 글꼴이 필요하지 않습니다. 카드 제목과 메타데이터에는 기본 클래스를 유지하고, 페이지 제목에는 별도로 32픽셀 크기를 적용합니다.

기본 여백 값은 0, 0.25, 0.5, 1, 1.5, 2, 2.5rem 순으로 늘어납니다. 이는 설치된 CSS에 정의된 변수이며, 임의로 추정한 배율이 아닙니다. 기본 카드 본문 패딩은 가로와 세로 모두 1.25rem입니다. 타임라인 노드는 2.5rem이고, 연결선은 페이지 패딩 변수를 사용해 항목 사이를 이어 줍니다.

지원 사양 읽기

## Tabler 디자인 시스템 타임라인은 세로 테두리 그 이상입니다

### 타임라인은 세로 테두리 그 이상입니다

각 체크포인트는 timeline-event 목록 항목이며, timeline-event-icon과 timeline-event-card를 포함합니다. 기본 CSS는 노드 위치를 정하고, 마지막 항목을 제외한 항목 사이에 연결선을 그리며, 노드 너비에 페이지 패딩을 더한 만큼 콘텐츠 카드를 띄웁니다. 이 예시에서는 배경 이미지로 선을 흉내 내거나 모든 카드에 절대 위치를 지정하지 않습니다.

카드마다 콘텐츠가 다릅니다. 하나는 구조적 결정을 기록하고, 하나는 실제 표지 시안 세 가지를 담으며, 하나는 참고 자료 검토 내용을 기록합니다. 프로젝트 맥락은 형식과 현재 중점이 날짜가 있는 이벤트가 아니라 계속 유지되는 속성이므로 순서 목록 바깥에 배치합니다. 작은 화면에서는 사이드바가 문서 순서에 따라 타임라인 다음에 표시됩니다.

지원 사양 읽기

## Tabler 디자인 시스템 레이블과 값의 소규모 그룹에는 datagrid 사용하기

### 작은 레이블-값 그룹에는 Datagrid 사용하기

프로젝트 맥락 카드에는 datagrid-item, datagrid-title, datagrid-content 쌍이 사용됩니다. 형식, 팀, 체크포인트, 현재 중점은 서로 나란히 비교할 속성이므로, 중복된 행 제목이 있는 표 대신 기본 datagrid에 간결하게 표시합니다. 아바타에는 텍스트 이니셜을 사용하므로 원격 이미지 에셋이 필요하지 않습니다.

이 예시에서 변경되는 맥락 값은 체크포인트 수뿐입니다. 로컬 항목을 추가하면 원래 프로젝트 설명은 그대로 둔 채 체크포인트 수가 3에서 4로 바뀝니다. 표시된 목록 항목 수와 직접 대응하므로 대시보드 지표를 임의로 만들어 내지 않습니다.

지원 사양 읽기

## Tabler 디자인 시스템 표시 상태와 포커스는 번들 모달이 관리합니다

### 표시 여부와 포커스는 기본 제공 Modal이 관리합니다

Add checkpoint는 data-bs-toggle과 data-bs-target을 통해 기본 모달을 엽니다. 번들로 제공되는 Tabler JavaScript가 모달 구현을 담당합니다. shown.bs.modal 리스너는 전환이 끝나 입력 필드가 실제로 표시된 뒤 제목 필드에 포커스를 맞춥니다. 닫기와 취소에는 data-bs-dismiss를 사용해 동일한 구성 요소 생명주기를 따릅니다.

모달에는 실제 양식이 들어 있습니다. 필수 입력 및 길이 제약 조건은 제출 핸들러가 실행되기 전에 입력이 누락된 필드를 거부합니다. 핸들러에서는 앞뒤 공백을 제거한 뒤 길이도 확인합니다. 공백만 입력한 문자열은 유효한 제목이나 사유가 아니기 때문입니다. 유효성 검사를 해도 수정할 수 있도록 입력한 텍스트는 그대로 남으며, 항목이 성공적으로 추가된 뒤에만 양식이 초기화됩니다.

1. 모달을 열고 필드를 비운 채 제출해 첫 번째 유효하지 않은 컨트롤을 확인하세요.

2. 제목을 입력하고 체크포인트 종류를 선택한 다음 사유를 설명하세요.

3. 제출한 뒤 새 항목과 맥락 카드의 수가 함께 업데이트되는지 확인하세요.

지원 사양 읽기

## Tabler 디자인 시스템 안전한 텍스트를 추가하고 로컬 경계를 명확히 표시하기

### 안전한 텍스트를 추가하고 로컬 경계를 표시하기

애플리케이션은 정해진 카드 구조를 만들고 제목과 사유를 textContent로 삽입합니다. 선택 메뉴의 세 가지 종류에 고정 매핑을 적용해 색조 클래스만 선택합니다. 사용자가 입력한 텍스트는 카드 HTML에 절대 문자열 보간으로 삽입하지 않습니다. 새 항목은 조작된 서버 타임스탬프 대신 명확한 로컬 항목 레이블과 함께 목록 맨 앞에 추가됩니다.

항목을 삽입한 뒤 기존 모달 인스턴스를 닫고 새 체크포인트의 이름을 알리는 상태 알림을 표시합니다. 이 알림에는 프로젝트 서비스가 업데이트되지 않았다는 점도 명시됩니다. 실제 협업 저널에는 지속성, 작성자 식별, 순서 보장이 필요합니다. 로컬 DOM에 항목을 추가하는 것만으로는 이러한 기능이 제공되지 않습니다.

지원 사양 읽기

## Tabler 디자인 시스템 좁은 타임라인에서도 복잡한 콘텐츠를 읽기 쉽게 유지하기

### 좁은 타임라인에서도 빽빽한 콘텐츠를 읽기 쉽게 유지하기

기본 그리드에는 col-lg-8과 col-lg-4를 사용합니다. 기본 큰 화면 중단점보다 작아지면 프로젝트 맥락이 저널 아래로 이동합니다. 원래의 작은 화면용 스타일시트는 타임라인의 측면 간격을 줄이고, 제목과 배지 그룹이 줄바꿈되도록 하며, 표지 시안 크기를 조정합니다. 텍스트와 동작은 그대로 유지됩니다.

아이콘 열과 카드 패딩, 긴 제목이 같은 너비를 놓고 경쟁하면 타임라인이 비좁아질 수 있습니다. 모바일 예시에서는 노드를 안정적인 안내 요소로 유지하면서 오프셋을 줄였습니다. 원래의 표지 시안 세 가지는 서로의 관계가 중요하므로 작은 비교 이미지로 유지합니다. 각 캡션은 인접한 설명 문단을 보완하는 역할을 합니다.

- 줄바꿈이 발생해도 제목과 체크포인트 종류를 읽기 쉽게 유지하세요.

- 모든 타임라인 항목의 사유 텍스트를 자르지 말고 그대로 표시하세요.

- 모바일에서는 주요 읽기 순서가 끝난 뒤 맥락 카드를 배치하세요.

지원 사양 읽기

## Tabler 디자인 시스템 호환되는 CSS 및 JavaScript 조합 하나 불러오기

### 서로 호환되는 CSS과 JavaScript 조합 하나 불러오기

설정에서는 @tabler/core 1.6.1을 사용하고 dist 에셋을 로컬 공개 디렉터리에 복사합니다. tabler.min.css는 애플리케이션 스타일시트보다 먼저 불러오고, tabler.min.js는 로컬 상호작용 코드보다 먼저 불러옵니다. 관련 없는 Bootstrap 번들을 하나 더 추가하면 동일한 데이터 속성이 두 번 초기화될 수 있습니다. 이 예시에서는 호환되는 Tabler 번들만 사용합니다.

현재 스타일시트에서는 최신 색상 함수를 사용합니다. 오래된 브라우저 지원이 필요한 제품에 적용할 때는 Tabler의 브라우저 지원 지침을 확인하세요. 로컬 예시는 Chromium에서 기본 모달 유효성 검사, 타임라인 항목 추가, 다크 모드, 390px 레이아웃을 확인했습니다. 이는 프로덕션 배포가 아니며 가능한 모든 브라우저에서의 동작을 보장하지 않습니다.

지원 사양 읽기

## Tabler 디자인 시스템 구성 요소 예시

### 타임라인, 맥락 카드, 항목 모달

기본 타임라인 이벤트, 카드, datagrid, 배지, 모달 구조.

```
<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>
```

코드 참조

- 타임라인은 읽기 순서를 따르는 실제 목록입니다.

- 프로젝트 맥락에는 datagrid의 제목과 콘텐츠 쌍을 사용합니다.

- 모달 트리거는 번들에 포함된 Bootstrap 호환 데이터 API을 사용합니다.

### 유효성 검사를 거친 체크포인트를 로컬에 추가합니다

모달 수명 주기, 안전한 텍스트 삽입, 개수 동기화 및 색상 모드입니다.

```
const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3;
modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus());
q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';};
q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`<div class="timeline-event-icon bg-${color}-lt" aria-hidden="true">YOU</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1"></h2><span class="badge bg-${color}-lt"></span></div><div class="text-secondary small mb-3">You · LOCAL ENTRY</div><p class="mb-0"></p></div></div>`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity(''));
```

코드 참조

- 사용자가 입력한 문자열은 textContent로 할당합니다.

- 유효한 항목을 추가한 뒤에만 모달을 초기화합니다.

- 알림에 프로젝트 서비스는 업데이트되지 않았다고 명시합니다.

### 기존 저널 레이아웃 및 표지 시안

기본 Tabler 구성 요소에 맞춘 반응형 조정입니다.

```
html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}}
```

코드 참조

- 표지 아트워크는 가상의 디자인 시안 세 가지를 표현합니다.

- 문서 높이를 콘텐츠에 맞춰 임베드합니다.

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

### 구현 시작점

Tabler 1.6.1을 확인했습니다. 함께 제공된 레이아웃 및 애플리케이션 모듈을 style.css와 app.js로 저장하세요. 기본 모달 데이터 API을 사용합니다. HTML 래퍼에는 전체 본문 마크업이 포함되어 있습니다. 제공된 상호작용 예제와 CSS 예제는 여기에 표시된 파일 이름으로 저장하세요.

```
<!-- npm install @tabler/core@1.6.1 -->
<!-- Copy node_modules/@tabler/core/dist to public/vendor/tabler. -->
<html lang="en" data-bs-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/tabler/css/tabler.min.css">
<link rel="stylesheet" href="style.css">
<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>

<script src="/vendor/tabler/js/tabler.min.js"></script>
<script src="app.js"></script>
<!-- The bundle exposes tabler.Modal; no second Bootstrap bundle is needed. -->
</html>
```

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

```
Tabler 1.6.1을 사용해 타임라인, 컨텍스트 카드, 데이터그리드 및 기본 Modal을 포함한 Atlas 프로젝트 저널을 재현하세요. 유효성 검사를 거친 체크포인트 양식은 확정된 타임라인과 분리하세요. 취소하면 저널이 그대로 유지되고, 유효한 내용을 제출하면 입력한 체크포인트가 로컬 기록에 추가됩니다. data-bs 속성, 이에 맞는 Tabler 번들 및 테마 처리를 유지하세요. 기존 표지 시안은 장식용으로 두고, 좁은 화면에서도 체크포인트 텍스트를 읽기 쉽게 표시하세요. 인프라 목록을 제공하거나 외부에 게시한다고 암시하지 마세요.
```

## Tabler 디자인 시스템의 출처 및 범위

Tabler 1.6.1. 실제 테마 변수와 기본 구성 요소를 기존 프로젝트 콘텐츠 및 표지 아트워크와 구분합니다. 새 체크포인트는 로컬에만 저장됩니다.

- 설치 패키지 에셋을 일치시켰습니다.

- 색상 테마 역할 참조입니다.

- 타이포그래피 기본 타이포그래피 스타일입니다.

- 타임라인 노드, 연결선 및 이벤트 카드의 구조입니다.

- 데이터그리드 프로젝트 속성을 간결하게 표시합니다.

- 모달 기본 모달 설정입니다.

- 색상 모드 밝은 테마와 어두운 테마를 제어합니다.

## Tabler 디자인 시스템 관련 자료

### Tamagui

검증, 진행 상황, 빈 상태 복구 기능이 포함된 기본 컴포넌트 기반 습관 관리 보드에서 Tamagui의 실제 v5 토큰 범주와 라이트/다크 블루 테마를 살펴보세요.

### UIkit

UIkit은 CSS 프레임워크, Less 사용자 지정, 속성 기반 JavaScript 컴포넌트를 결합합니다. 아래 워크숍 일정 도구에서는 Switcher, Accordion, 반응형 그리드가 함께 동작하며, 네이티브 컴포넌트의 동작 범위와 애플리케이션의 선택 상태가 시작되는 지점을 보여 줍니다.

### Vant

Vant 4를 사용해 만든 모바일 주소 선택 흐름입니다. 실제 CSS 변수, 주소 식별 정보 관리, 필드 유효성 검사, 테마 전환, 로컬에만 저장한다는 명시적 안내를 포함합니다.


- [구현 레퍼런스](https://docs.tabler.io/ui/components/timeline)
- [출처](https://docs.tabler.io/ui/base/colors)
- [출처](https://docs.tabler.io/ui/base/typography)
- [출처](https://docs.tabler.io/ui/components/timeline)
- [출처](https://docs.tabler.io/ui/components/card)
- [지원 사양 읽기](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6)
- [지원 사양 읽기](https://docs.tabler.io/ui/getting-started/color-modes)
- [지원 사양 읽기](https://docs.tabler.io/ui/base/typography)
- [지원 사양 읽기](https://docs.tabler.io/ui/components/timeline)
- [지원 사양 읽기](https://docs.tabler.io/ui/components/data-grid)
- [지원 사양 읽기](https://docs.tabler.io/ui/components/modal)
- [지원 사양 읽기](https://docs.tabler.io/ui/layout/page-layouts)
- [지원 사양 읽기](https://docs.tabler.io/ui/getting-started/installation)
- [코드 참조](https://docs.tabler.io/ui/components/timeline)
- [코드 참조](https://docs.tabler.io/ui/components/modal)
- [코드 참조](https://docs.tabler.io/ui/layout/page-layouts)
- [설치 패키지 에셋을 일치시켰습니다.](https://docs.tabler.io/ui/getting-started/installation)
- [색상 테마 역할 참조입니다.](https://docs.tabler.io/ui/base/colors)
- [타이포그래피 기본 타이포그래피 스타일입니다.](https://docs.tabler.io/ui/base/typography)
- [타임라인 노드, 연결선 및 이벤트 카드의 구조입니다.](https://docs.tabler.io/ui/components/timeline)
- [데이터그리드 프로젝트 속성을 간결하게 표시합니다.](https://docs.tabler.io/ui/components/data-grid)
- [모달 기본 모달 설정입니다.](https://docs.tabler.io/ui/components/modal)
- [색상 모드 밝은 테마와 어두운 테마를 제어합니다.](https://docs.tabler.io/ui/getting-started/color-modes)