AI 튜토리얼

Solid Glass shadcn/ui 테마로 산업용 AI 인터페이스 구축하기

Solid Glass를 설치하고, 단일 스타일시트를 shadcn/ui 프로젝트에 적용하며, 에이전트 중심 컴포넌트를 사용하는 방법을 알아보세요. 또한 쇼케이스 사이트를 로컬에서 실행하고, 머티리얼을 조정하며, 시각적 규칙을 따르는 새 컴포넌트를 만드는 방법도 살펴봅니다.

2026년 10월 12일약 9분 소요

Solid Glass shadcn/ui 테마로 산업용 AI 인터페이스 구축하기

Solid Glass의 기능

Solid Glass는 산업용 AI 패널, 운영자 콘솔, 대시보드를 위해 설계된 shadcn/ui용 시각 테마입니다. 멀리서 보면 단단해 보이고 가장자리에서 주로 유리 특성이 드러나는 두껍고 스모키한 패널을 인터페이스에 적용합니다.

Liquid Glass 효과와 달리 Solid Glass는 배경이 텍스트와 경쟁하도록 만들지 않습니다. 표면에는 배경 콘텐츠의 색을 받거나 휘거나 흐르지 않는 중성 회색을 사용합니다. 마감은 상단의 밝은 선, 얇은 테두리, 표면 아래의 그림자로 완성됩니다.

이 프로젝트에는 shadcn/ui 컴포넌트 세트와 AI 에이전트가 작업하는 인터페이스를 위한 컴포넌트 모음이 포함되어 있습니다. 공식 Solid Glass 사이트에서는 사용 가능한 컴포넌트 전반에 적용된 머티리얼을 확인할 수 있으며, 시각적 변수를 조정하는 Create 페이지도 제공합니다.

한 패널의 세 가지 방식: 플랫, Solid Glass, liquid glass

주요 기능 및 컴포넌트

단일 스타일시트가 기존 data-slot 속성과 클래스를 사용해 shadcn/ui 컴포넌트에 테마를 적용합니다.
테마는 세 가지 유리 두께, 색상, 모션, 단일 시각 상태를 포함한 shadcn/ui의 변수 이름을 정의합니다.
다크 모드가 기본 머티리얼 디자인이며, 라이트 테마도 제공됩니다.
Create 페이지에서 두께, 색조, 차트 색상, 유형, 모서리 반경, 림, 블러를 조정한 뒤 결과 CSS를 복사할 수 있습니다.
레지스트리는 shadcn CLI를 통해 설치 가능한 Solid Glass 컴포넌트를 제공합니다.

Solid Glass 자체의 컴포넌트에는 status-glyph, panel, tag, dot-loader가 포함됩니다. 에이전트 중심 컴포넌트로는 turn-status, composer, tool-steps, diff-view, ask-card, context-ring, task-notice, reasoning이 있습니다.

테마 설치

1. shadcn/ui 프로젝트로 시작하기

React 19, Tailwind CSS 4, Base UI 컴포넌트를 기반으로 하는 shadcn/ui 프로젝트를 사용하세요. 처음부터 시작한다면 다음 명령으로 초기화합니다.

npx shadcn@latest init

다크 테마의 컴포넌트

2. Solid Glass 스타일시트 추가하기

호스팅된 레지스트리 또는 저장소에서 직접 스타일시트를 설치할 수 있습니다.

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/solid-glass.json
npx shadcn@latest add deeplethe/solid-glass/solid-glass

3. 기존 스타일 다음에 가져오기

Tailwind와 shadcn/ui 스타일시트 다음에 Solid Glass를 가져오세요. 테마는 shadcn init이 생성하는 것과 동일한 색상 변수 이름을 정의하므로, 가져오기를 추가하기 전에 생성된 :root 및 .dark 색상 변수 블록을 제거하세요.

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";

이 가져오기를 적용하면 기존 shadcn/ui 컴포넌트를 수정하지 않고도 머티리얼을 사용할 수 있습니다. 전체 설치 안내는 Solid Glass 설치 페이지를 참조하세요.

Solid Glass 컴포넌트 설치

Solid Glass 자체의 컴포넌트도 동일한 shadcn 레지스트리 워크플로를 사용합니다. 예를 들어 상태 표시기를 다음 명령으로 설치하세요.

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/status-glyph.json

다른 컴포넌트를 설치하려면 해당 컴포넌트의 레지스트리 URL로 명령을 반복하세요. 사용 가능한 레지스트리 항목에는 상태 표시, 패널, 레이블, 로딩 표시기, 에이전트 턴 정보, 작성 영역, 도구 단계, diff, 질문, 컨텍스트 사용량, 작업 알림, 추론 뷰가 포함됩니다.

라이트 테마의 컴포넌트

프로젝트를 로컬에서 실행하기

Solid Glass 쇼케이스를 작업하거나 소스 코드를 확인하려면 저장소를 복제하고, 종속성을 설치한 뒤 개발 서버를 시작하세요.

npm install
npm run dev

개발 사이트는 http://localhost:5191에서 실행됩니다. 프로덕션 및 검증 명령은 다음과 같습니다.

npm run build
npm run typecheck

빌드 결과물은 dist/에 생성됩니다.

개발 도구 살펴보기

저장소에는 테마와 예제를 확인하는 데 도움이 되는 개발 전용 경로가 포함되어 있습니다.

/dev/banner는 프로젝트에서 사용하는 개발 배너를 표시합니다.
/dev/examples는 모든 예제를 마운트하고 실패한 예제를 보고합니다.
/dev/examples?q=button,card는 표시할 예제를 필터링합니다.
/dev/examples?theme=light는 라이트 테마로 예제를 미리 봅니다.
/dev/examples?hover=<selector>는 일치하는 요소 위에 포인터가 있는 것처럼 표시합니다.
/dev/examples?click=<selector>는 일치하는 요소를 눌러 열리는 내용을 확인할 수 있게 합니다.

저장소의 기본 GitHub Pages 위치가 아닌 곳에 사이트를 배포할 때는 사이트가 제공되는 주소를 SOLID_GLASS_ORIGIN에, 경로를 SOLID_GLASS_BASE에 설정하세요. Solid Glass 컴포넌트는 서로를 참조할 때 origin을 사용합니다.

프로젝트 구조 이해하기

하나의 패널, 세 가지 방식: 평면, Solid Glass, Liquid Glass

가장 중요한 파일과 디렉터리는 다음과 같습니다.

src/solid-glass.css에는 전체 머티리얼 테마가 들어 있습니다.
registry.json은 shadcn CLI가 설치하는 항목을 설명합니다. 레지스트리 빌드는 사이트용 public/r/도 생성합니다.
src/components/ui/에는 화면에 표시되는 shadcn/ui 및 Solid Glass 컴포넌트가 들어 있습니다.
src/create/와 src/pages/create.tsx는 머티리얼 커스터마이징 페이지를 구현합니다.
src/examples/에는 예제마다 하나의 작은 파일이 들어 있습니다.
content/에는 컴포넌트 및 프로젝트 문서가 저장됩니다.
scripts/build-docs.mjs는 문서를 src/docs/generated.json으로 변환합니다.

Solid Glass 컴포넌트 만들기

직접 컴포넌트를 추가하려면 프로젝트에서 사용하는 동일한 구성을 따르세요.

src/components/ui/<name>.tsx를 만드세요. shadcn/ui 컴포넌트처럼 작성하고, 함수형 컴포넌트를 사용하며, 모든 부분에 data-slot을 추가하고, @/lib/utils의 cn()을 사용하세요.
src/examples/<name>-demo.tsx를 추가하고, 추가 예제마다 파일을 하나씩 만드세요.
content/solid/<name>.mdx를 만드세요. 제목과 설명이 포함된 프런트 매터, 컴포넌트 미리 보기, 설치 방법, 사용 방법, 각 예제의 제목을 포함하세요.

다음 네 가지 디자인 규칙에 따라 머티리얼의 일관성을 유지하세요. 마감은 가장자리에 있어야 하고, 표면은 가볍기보다 묵직하게 느껴져야 하며, 깊이는 두께로 표현되고, 인터페이스는 하나의 상태를 사용해야 합니다.

Create 페이지를 통한 고급 커스터마이징

Create 페이지를 열어 머티리얼을 인터랙티브하게 조정하세요. 미리 보기가 업데이트되는 동안 두께, 색조, 차트 색상, 유형, 반경, 테두리, 블러를 조정할 수 있습니다. 결과가 인터페이스에 적합하면 작은 CSS 출력을 복사하고 프로젝트 스타일시트의 관련 변수를 조정하세요.

사용 가능한 선택 항목은 src/create/options.ts에 정의되어 있으며, 미리 보기 카드는 shadcn/ui 컴포넌트를 사용합니다. 따라서 이 페이지는 디자인 도구이자 테마 변수가 머티리얼에 미치는 영향을 확인할 수 있는 참고 자료로 활용할 수 있습니다.

결론

Solid Glass는 기존 shadcn/ui 애플리케이션에 견고하고 읽기 쉬운 글래스 미학을 손쉽게 더하는 방법입니다. 일반 테마 파일 다음에 스타일시트를 설치하고, 필요할 때 레지스트리에서 에이전트 중심 컴포넌트를 추가하며, 로컬 예제나 Create 페이지를 사용해 결과를 다듬으세요. 이 프로젝트는 MIT 라이선스로 배포되며, shadcn/ui에서 비롯된 컴포넌트와 문서는 NOTICE.md에 명시된 대로 해당 작성자의 MIT 라이선스를 따릅니다.