이 리딩 데스크는 @skeletonlabs/skeleton 5.0.1과 해당 Tailwind CSS 유틸리티, 기본 제공 테마 세 가지를 사용합니다. skeleton-svelte나 skeleton-react는 불러오지 않습니다. 버튼, 배지, 칩, 카드, 펼침 영역은 실제 CSS 유틸리티로 표현하며, 테마 선택기와 저장 상태 로직은 독자적으로 구현한 JavaScript입니다. 이러한 경계를 지키면 프레임워크 컴포넌트 런타임을 사용하는 것처럼 오해하게 하지 않으면서도, 작은 Vite 페이지에서 전체 예제를 실행할 수 있습니다.
원본 CSS을 브라우저에 불러오는 대신 유틸리티를 컴파일하세요
Skeleton의 소스에는 @utility와 @variant 같은 Tailwind 지시문이 들어 있습니다. 제공된 Vite 설정에는 @tailwindcss/vite가 포함되어 있고, 스타일시트에서는 Skeleton과 선택한 테마보다 먼저 Tailwind를 불러옵니다. 소스 패키지를 그대로 링크하면 컴파일된 스타일이 재현되지 않습니다. 숨겨진 생성 CSS에 의존하지 않도록 전체 빌드 소스를 포함했습니다.
Tailwind CSS을 불러옵니다.
Skeleton 유틸리티를 불러옵니다.
선택하려는 각 테마를 불러옵니다.
Tailwind Vite 플러그인으로 스타일시트를 컴파일합니다.
Skeleton 디자인 시스템의 테마 선택과 실제 값
사용할 수 있는 테마를 각각 명시적으로 불러옵니다
Cerberus, Mint, Rose는 모두 패키지의 themes 경로에서 각각 불러옵니다. 이름을 선택하면 루트의 data-theme 값이 바뀌고, 이에 따라 해당 변수 선언이 적용됩니다. 참고 항목에는 각 테마의 실제 기본 팔레트 샘플, 표면 색상의 최댓값과 최솟값, 간격, 모서리 반경, 글꼴 선언이 나와 있습니다. 이 값은 강조색 하나를 바꿔 만들어 낸 것이 아니라, 고정된 버전의 파일에서 확인한 값입니다.
처음에는 Cerberus 테마가 적용됩니다.
Mint와 Rose는 실제로 각각 별도 불러오는 테마입니다.
테마를 선택하면 복제한 콘텐츠 트리가 아니라 data-theme 값이 바뀝니다.
테마를 비교할 때 전체 콘텐츠를 동일하게 유지합니다
테마를 바꿔도 리딩 카드, 체크리스트, 저장 상태는 그대로 유지됩니다. 측면 패널은 선택할 때마다 루트에서 계산된 변수를 읽어 브라우저에 실제로 적용된 값을 보여 줍니다. 덕분에 독자는 동일한 콘텐츠와 상태를 바탕으로 글꼴, 형태, 색상 팔레트의 차이를 비교할 수 있습니다.
Skeleton 디자인 시스템의 다크 모드와 color-scheme
다크 모드 변형을 실제 컨트롤에 연결합니다
스타일시트는 루트나 그 하위 요소에 .dark 클래스가 있을 때 적용되는 클래스 기반 다크 모드 변형을 정의합니다. Skeleton의 전역 규칙은 이 변형을 사용해 color-scheme을 설정합니다. 따라서 화면 모드 버튼을 누르면 light-dark() 표면 색상 조합의 적용 조건도 바뀝니다. 클래스를 바꾸면서 Tailwind 기본 미디어 기반 변형은 그대로 두면, 실제 표면은 밝은 상태인데 다크 모드로 표시될 수 있습니다.
가독성을 유지하는 프리셋을 사용합니다
화면 모드 전환에는 preset-tonal-primary를, 읽기 동작에는 preset-filled-primary-500을 사용합니다. 프리셋은 표면과 전경색의 관계를 조정하며, 색상 토큰 하나만으로는 충분한 대비를 보장하지 않습니다. 클래스를 성공적으로 바꿨다고 해서 시각적으로도 올바르다고 가정하지 않고, Rose로 전환한 뒤 컨트롤 텍스트와 펼침 영역을 포함해 실제 다크 모드 화면을 확인했습니다.
Skeleton 디자인 시스템의 타이포그래피, 형태, 레이아웃
테마 선언과 독자적인 정보 위계를 구분합니다
Cerberus는 시스템 글꼴을 선언하고 Rose는 다른 대체 글꼴 스택을 포함합니다. 이 사례에서는 원격 글꼴을 가져오지 않으며, 브라우저는 선택한 스택에서 사용할 수 있는 글꼴을 사용합니다. 독자적으로 구성한 레이아웃에서는 페이지 제목을 36px, 리딩 제목을 28px로 명시합니다. 이러한 구성상의 선택은 테마 자체의 글꼴 종류 및 굵기 선언과 별개입니다.
모서리 반경과 간격은 테마에서 가져옵니다
Skeleton 디자인 시스템의 읽기 상태와 화면 초기화
저장은 페이지 내에서만 처리하고 언제든 되돌릴 수 있게 합니다
읽기 동작은 aria-pressed 값을 전환하고, 레이블을 바꾸며, 읽기 쉬운 상태 메시지를 업데이트합니다. 이 페이지에서는 메모리에 불리언 값만 저장합니다. 계정이나 영구 저장 기능, 네트워크 요청은 없습니다. 테마를 바꿔도 같은 상태가 유지되므로 독자는 서로 다른 색상 팔레트에서 활성 상태를 비교할 수 있습니다.
읽기 상태는 유지한 채 화면 표시만 초기화합니다
화면 표시를 초기화하면 테마는 Cerberus로, 화면 모드는 밝게 돌아가지만 저장된 불리언 값은 그대로 유지됩니다. 레이블에도 이러한 범위가 명시되어 있습니다. 리딩 카드를 데스크에서 삭제하는 동작은 별도로 제공할 수 있습니다. 이 두 동작을 혼동하면 단순한 화면 초기화로 사용자의 현재 선택이 예기치 않게 사라질 수 있습니다.
Skeleton 디자인 시스템의 네이티브 펼침 영역과 실제 콘텐츠
브라우저의 details 요소를 사용합니다
보충 설명은 펼침 영역 유틸리티를 적용한 실제 details/summary 구조입니다. 브라우저가 키보드와 포인터를 통한 열기를 지원하고, Skeleton은 표시 방식을 제공합니다. 이는 Skeleton의 Svelte Accordion 컴포넌트가 아니며, 컴포넌트 API이나 이벤트를 만들어 내지 않습니다. 단락에는 무엇이 바뀌고 무엇이 그대로 유지되는지 구체적으로 설명되어 있습니다.
전환이 끝난 뒤 열린 상태를 확인합니다
스타일시트는 펼침 영역의 크기에 애니메이션을 적용할 수 있습니다. 열린 상태를 캡처하기 전에 시각적 검사가 전환이 끝날 때까지 기다리므로, 즉시 스크린샷을 찍으면 콘텐츠가 펼쳐지는 중간 상태가 잡힐 수 있습니다. 레이아웃 검증에는 펼쳐진 단락과 계산된 긴 글꼴 스택도 포함됩니다. 따라서 측면 패널이 많은 콘텐츠를 숨긴 상태에서만 검증을 통과하는 일을 막을 수 있습니다.
Skeleton 디자인 시스템의 반응형 테마 검사
좁은 화면에서도 값을 읽기 쉽게 유지합니다
작업 영역은 너비 720px 미만에서 세로로 배치되고 바깥쪽 여백은 16px로 줄어듭니다. 계산된 각 토큰 이름과 값은 각각 한 줄씩 차지하므로, 긴 글꼴 스택과 OKLCH 문자열도 가로로 스크롤하지 않고 줄바꿈됩니다. 다섯 가지 색상 샘플은 촘촘한 그리드에 계속 표시되고 테마 컨트롤은 여러 줄로 배치됩니다.
테마와 상태 조합을 테스트하세요
브라우저 테스트에서는 읽기 카드를 저장하고, Mint와 Rose 테마를 차례로 전환한 다음 어두운 화면 모드를 켜고 상세 내용을 펼친 후 표시 설정을 초기화합니다. 이 과정 내내 저장 상태가 유지되어야 합니다. 280px 너비까지 확인했으므로, 초기 테마 화면 하나만 보는 대신 실제로 긴 값과 펼쳐진 콘텐츠까지 테스트합니다.
Skeleton 디자인 시스템의 완성형 Vite 소스
소스 파일 네 개를 모두 저장하세요
예제에는 index.html, style.css, main.js, vite.config.mjs가 포함됩니다. 고정 버전의 Skeleton, Tailwind 및 Vite 종속 항목을 설치한 다음 해당 디렉터리에서 Vite를 실행하세요. 명시적으로 지정한 @source는 유틸리티 클래스가 포함된 HTML을 가리키므로, 컴파일 결과에 읽기 데스크에서 사용하는 클래스가 포함됩니다. 필요한 프레임워크 스캐폴드가 빠진 것은 아닙니다.
필요에 따라 프레임워크 컴포넌트를 별도로 선택하세요
Skeleton 디자인 시스템 컴포넌트 예제
index.html
완성된 읽기 콘텐츠, 네이티브 CSS 컴포넌트, 기존 컨트롤.
html
<!doctype html><html lang="en" data-theme="cerberus"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Theme reading desk</title></head><body><main><header><div><p class="text-sm font-bold">SKELETON / THEME READING DESK</p><h1>The same content, three themes.</h1><p class="intro">Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.</p></div><span class="badge preset-tonal-primary">Original OpenDesign study</span></header><div class="controls"><label for="theme">Theme<select id="theme" class="select"><option value="cerberus">Cerberus</option><option value="mint">Mint</option><option value="rose">Rose</option></select></label><button id="mode" class="btn preset-tonal-primary">Use dark appearance</button><button id="reset" class="btn preset-tonal-surface">Reset presentation</button></div><div class="workbench"><article class="card preset-outlined-surface-200-800 reading"><span class="chip preset-tonal-primary">Reading / 4 minutes</span><h2 class="mt-6">Make the next step easier to see</h2><p>A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.</p><ul><li>Keep the heading clear in both appearances.</li><li>Use a supporting surface to group related information.</li><li>Repeat an important state in text, not color alone.</li></ul><button id="bookmark" class="btn preset-filled-primary-500 bookmark" aria-pressed="false">Save to this reading desk</button><p id="message" role="status">This reading card is not saved.</p></article><aside class="card preset-tonal-surface side"><h2 class="text-xl font-bold">Current theme values</h2><div class="palette" aria-label="Primary palette samples"><div class="swatch" style="background:var(--color-primary-100)"></div><div class="swatch" style="background:var(--color-primary-300)"></div><div class="swatch" style="background:var(--color-primary-500)"></div><div class="swatch" style="background:var(--color-primary-700)"></div><div class="swatch" style="background:var(--color-primary-900)"></div></div><dl class="tokens" id="tokens"></dl><details class="disclosure mt-6"><summary class="preset-tonal-primary">What changes with the theme?</summary><p>The imported theme changes palette, typography declarations and shape variables. The reading text and local saved state stay the same. Dark appearance changes surface pairings; it is not a second copy of the content.</p></details></aside></div><p class="scope">Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.</p></main><script type="module" src="./main.js"></script></body></html>
import './style.css';
const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect();
실제 CSS 유틸리티와 Cerberus/Mint/Rose 테마 가져오기를 사용해 Skeleton 5.0.1 읽기 데스크를 완성하세요. 클래스 기반 다크 색상 구성, 읽기 쉬운 계산 토큰 행, 전체 콘텐츠, 로컬 저장 상태, 해당 상태를 삭제하지 않는 표시 설정 초기화를 유지하세요. CSS 계층과 프레임워크 컴포넌트 API를 구분하세요.
05
Skeleton 디자인 시스템 소스 및 범위
실제 Skeleton Tailwind CSS 유틸리티와 제공 테마, 그리고 기존의 일반 JavaScript 페이지 동작을 사용합니다. Skeleton Svelte 또는 React 런타임은 로드되지 않습니다.
