🎨 Design System Studio
Webzine SaaS AI WebService — Component Styleguide
1. Color Palette
Primary Accent (Brand Spectrum)
--color-primary-50
--color-primary
--color-primary-dark
--color-accent-500
Surface & Semantic Colors
--color-surface-alt
--color-bg-alt
#22c55e
#f59e0b
한국어 색상 사용 예시
주요 액션은 저장/게시 버튼에 사용하고, 보조 강조는 추천 콘텐츠나 차트 포인트에 사용합니다. 선택된 행과 알림 배경은 브랜드 바탕색으로 낮은 강도의 강조를 만듭니다.
게시 설정 저장English Color Usage Example
Use Primary for decisive actions, Primary Dark for active states, and Accent for highlights that should support, not compete with, the main workflow.
Save Publish Settings2. Typography
Korean Type
웹진 운영 대시보드
Noto Serif KR / 36px / 700
콘텐츠 흐름을 부드럽게 읽는 화면
Gowun Dodum / 20px / 400
기사 작성, AI 요약, 예약 발행까지 한 화면에서 관리할 수 있도록 문장 길이와 행간을 넉넉하게 잡았습니다.
Pretendard Variable / 14px / relaxed
보조 설명과 캡션은 정보 밀도를 낮추고 읽는 속도를 안정시킵니다.
Noto Serif KR / 12px / 400
English Type
Editorial Control Room
Theme Display / 36px / 700
Signal-rich publishing workflow
Playfair Display / 20px / 700
A balanced paragraph style keeps admin pages calm while still leaving enough contrast for scanning, review, and repeated publishing tasks.
Theme Body / 14px / relaxed
const creditLeft = 8800;
JetBrains Mono / 12px / 500
3. Buttons
Variants
Micro-Interactive Action Buttons
각 버튼 위에 마우스를 올려 마이크로 인터랙션을 확인하세요.
5. Badges & Tags
Status Badges
Meta Tags
6. Stat Cards
8. Cards
기본 컨테이너 카드
디자인 시스템 내의 모든 컴포넌트들을 담는 범용 구조체 레이아웃입니다. 테마에 비례해 둥글기나 보더가 변경됩니다.
액션 헤더형 카드
헤더 우측에 단축 명령 액션이 빌트인되어 빠른 제어를 지원하는 다기능 카드 모형입니다.
9. Credit Widget (AI 토큰 모니터링)
대형 크레딧 모니터링 관리 모듈
7. Data Table & Pagination
| 제목 | 카테고리 | 유형 | 조회수 | 게시 여부 | |
|---|---|---|---|---|---|
| 2026년 AI 트렌드 분석: 생성형 AI의 새로운 도약 | 테크 | NEWS | 1,284 | ||
| CTO 인터뷰: 클라우드 네이티브 아키텍처 전환 | 인터뷰 | INTERVIEW | 892 |
방명록 스타일 아코디언 테이블
| 작성자 | 이메일 | 한줄평 | 별점 | 상태 | |
|---|---|---|---|---|---|
| 홍길동 | gildong@example.com | SaaS 플랫폼 UI/UX 템플릿이 정말 고급스럽고 모던합니다! | ★★★★★ | 승인됨 | |
|
방명록 원문 안녕하세요! ANTIGRAVITY 디자인 시스템 덕분에 레이아웃 빌드가 10배 이상 빨라졌습니다. 다크모드가 매우 자연스럽고, 모달이나 토스트 등 세밀한 애니메이션들이 premium 사양답게 무척 자연스럽네요. 대박나세요! |
|||||
4. Form Elements
업로드할 파일을 여기에 드래그하거나 클릭하여 찾기
최대 10MB · 이미지 전용 (PNG, JPG, WebP)
10. Overlay Components
Modal / Toast / Overlay Interactions
SaaS AI 신규 콘텐츠 작성
11. Interactive Charts (Pure SVG/CSS)
주간 AI 엔진 호출 트래픽 및 크레딧 소모 트렌드
AI 엔진별 호출 비율
🔵 Theme A: Corporate Tech Visual Simulator
웹진 CMS 콘텐츠 AI 생성 SaaS 서비스를 강조하는 프리미엄 비주얼 슬라이더
🖥️ PC 데스크톱 랜딩 히어로 영역 (가로형 와이드 슬라이더)
📱 모바일 앱 & 모바일 랜딩 뷰 (디바이스 프레임 내 9:16 세로 슬라이더)
📱 Mobile Webzine UX/UI 시뮬레이터
스마트폰의 터치 스와이프를 연상시키는 고감도 모션 엔진이 장착되어 있습니다. 디바이스 화면을 마우스로 드래그하거나 스마트 기기에서 터치 스크롤해보세요.
- 60fps 하드웨어 가속 트랜지션
- 탄성 snap-back (복귀 동작) 구현
- PC와 모바일 독립 재생 및 제어 루프
🟢 Theme B: Nordic Slate Visual Simulator
에코 미니멀 비주얼과 단정한 정체성을 품은 친환경 SaaS 매거진 시뮬레이션
🖥️ PC 데스크톱 랜딩 히어로 영역 (가로형 와이드 슬라이더)
📱 모바일 앱 & 모바일 랜딩 뷰 (디바이스 프레임 내 9:16 세로 슬라이더)
📱 Theme B: Nordic Slate UX/UI
에코 틸(Teal) 및 에메랄드 컬러웨이가 글래스모피즘 오버레이와 조화되어 깨끗하고 편안한 인상을 줍니다. 손끝에서 튕겨나가는 부드러운 스와이프를 체험하세요.
- 에메랄드/틸 변수 스타일 연동
- 60fps 하드웨어 가속 탄성 스냅 백
- 자연스럽고 편안한 미니멀리즘 비주얼
🟣 Theme C: Cyberpunk Neon Visual Simulator
화려하고 사이키델릭한 사이버 테크와 하이퍼 라이팅의 퍼포먼스 랜딩 비주얼
🖥️ PC 데스크톱 랜딩 히어로 영역 (가로형 와이드 슬라이더)
📱 모바일 앱 & 모바일 랜딩 뷰 (디바이스 프레임 내 9:16 세로 슬라이더)
📱 Theme C: Cyberpunk Neon UX/UI
사이버네틱 네온 핑크와 일렉트릭 퍼플 라이팅이 글래스모피즘 카드 위에서 찬란하게 요동칩니다. 가벼운 제스처로 넘어가는 하이퍼 스와이프를 체감해보세요.
- 사이버 펑크 네온 색조 테마 변조
- 초고속 60fps 탄성 스냅 하드웨어 가속
- 미래지향적인 사이키델릭 테크 비주얼