Add Figma design system documentation and tokens
- FIGMA_DESIGN_GUIDE.md: Color palette, typography, spacing, components - figma-tokens.json: Tokens Studio importable design tokens - FIGMA_CONTENT.md: Copy-paste ready text content for all sections - figma-content.json: Structured content data for automation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
569
FIGMA_CONTENT.md
Normal file
569
FIGMA_CONTENT.md
Normal file
@@ -0,0 +1,569 @@
|
||||
# Anvil Hosting - Figma 콘텐츠 맵
|
||||
|
||||
Figma 작업 시 복사해서 사용할 수 있는 모든 텍스트 콘텐츠입니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. Navigation (네비게이션)
|
||||
|
||||
### Logo
|
||||
```
|
||||
Anvil.Hosting
|
||||
```
|
||||
|
||||
### Menu Items
|
||||
```
|
||||
기능
|
||||
요금제
|
||||
자동화
|
||||
```
|
||||
|
||||
### CTA Button
|
||||
```
|
||||
Console 시작
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Hero Section (히어로)
|
||||
|
||||
### Status Badge
|
||||
```
|
||||
System Operational: v2.4.0 Live
|
||||
```
|
||||
|
||||
### Headline
|
||||
```
|
||||
Incus/LXD 기반
|
||||
초경량 컨테이너 호스팅
|
||||
```
|
||||
|
||||
### Subheadline
|
||||
```
|
||||
VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다.
|
||||
n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다.
|
||||
```
|
||||
|
||||
### Primary CTA
|
||||
```
|
||||
🚀 인스턴스 즉시 배포
|
||||
```
|
||||
|
||||
### Ping Widget
|
||||
| 리전 | 레이턴시 |
|
||||
|------|----------|
|
||||
| 🇰🇷 Seoul | 2ms |
|
||||
| 🇯🇵 Tokyo | 35ms |
|
||||
| 🇭🇰 HongKong | 45ms |
|
||||
| 🇸🇬 Singapore | 65ms |
|
||||
|
||||
### Chat Demo (Phone Mockup)
|
||||
**Header:**
|
||||
```
|
||||
Anvil Forge Bot
|
||||
bot
|
||||
```
|
||||
|
||||
**User Message 1:**
|
||||
```
|
||||
도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘
|
||||
```
|
||||
|
||||
**Bot Response 1:**
|
||||
```
|
||||
🤖 AI가 요청을 분석했습니다.
|
||||
|
||||
다음 구성으로 서버를 준비할까요?
|
||||
|
||||
• 위치: 🇯🇵 도쿄 (Tokyo)
|
||||
• OS: Debian 12 (Bookworm)
|
||||
• 사양: Pro (2 vCPU / 4GB)
|
||||
```
|
||||
|
||||
**User Message 2:**
|
||||
```
|
||||
응 바로 생성해줘
|
||||
```
|
||||
|
||||
**Bot Response 2 (Success):**
|
||||
```
|
||||
✅ 서버 생성이 완료되었습니다!
|
||||
|
||||
IP: 45.12.89.121
|
||||
Root PW: (보안 전송됨)
|
||||
|
||||
지금 바로 SSH 접속이 가능합니다.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Features Section (기술 스택)
|
||||
|
||||
### Section Header
|
||||
```
|
||||
엔지니어를 위한 기술 스택
|
||||
단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다.
|
||||
```
|
||||
|
||||
### Feature Card 1 - Incus/LXD (Brand Blue)
|
||||
```
|
||||
<Incus/LXD>
|
||||
Native Performance
|
||||
|
||||
KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다.
|
||||
```
|
||||
|
||||
### Feature Card 2 - Automation (Purple)
|
||||
```
|
||||
<Automation>
|
||||
API & Webhooks
|
||||
|
||||
n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다.
|
||||
```
|
||||
|
||||
### Feature Card 3 - Security (Green)
|
||||
```
|
||||
<Security>
|
||||
Isolated & Safe
|
||||
|
||||
CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다.
|
||||
```
|
||||
|
||||
### Feature Card 4 - Anti-DDoS (Red)
|
||||
```
|
||||
<Anti-DDoS>
|
||||
1Tbps+ Mitigation
|
||||
|
||||
L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Automation Section (자동화)
|
||||
|
||||
### Badge
|
||||
```
|
||||
Infrastructure as Code
|
||||
```
|
||||
|
||||
### Headline
|
||||
```
|
||||
반복적인 작업은
|
||||
자동화에 맡기세요
|
||||
```
|
||||
|
||||
### Description
|
||||
```
|
||||
웹 콘솔에 접속할 필요도 없습니다. Terraform으로 인프라를 정의하고, Ansible로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다.
|
||||
```
|
||||
|
||||
### Feature List
|
||||
```
|
||||
Webhook Integration
|
||||
Github Actions, GitLab CI/CD 연동
|
||||
|
||||
Full API Access
|
||||
서버 생성, 제어, 모니터링 100% API 지원
|
||||
```
|
||||
|
||||
### Tab Buttons
|
||||
```
|
||||
n8n Workflow
|
||||
Terraform
|
||||
```
|
||||
|
||||
### n8n Workflow Nodes
|
||||
```
|
||||
Webhook → Restart Server → Notify User
|
||||
```
|
||||
|
||||
### Terraform Code
|
||||
```hcl
|
||||
resource "anvil_instance" "web" {
|
||||
name = "production-web-01"
|
||||
image = "debian-12"
|
||||
region = "jp-east-1"
|
||||
plan = "pro-v2"
|
||||
|
||||
// 자동 백업 설정
|
||||
backup_schedule {
|
||||
enabled = true
|
||||
retain = 7
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Infrastructure Section (인프라 상세)
|
||||
|
||||
### Headline
|
||||
```
|
||||
High-Spec Infrastructure
|
||||
```
|
||||
|
||||
### Feature 1
|
||||
```
|
||||
⚡ NVMe Storage
|
||||
모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장.
|
||||
```
|
||||
|
||||
### Feature 2
|
||||
```
|
||||
🌐 Premium Network
|
||||
CN2/BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시.
|
||||
```
|
||||
|
||||
### Feature 3
|
||||
```
|
||||
💾 ZFS Snapshots
|
||||
CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝.
|
||||
```
|
||||
|
||||
### Terminal Mockup
|
||||
```bash
|
||||
root@anvil:~# neofetch
|
||||
.
|
||||
/ \
|
||||
( )
|
||||
\ / OS: Debian GNU/Linux 12 (bookworm)
|
||||
| Kernel: 6.1.0-18-cloud-amd64
|
||||
| Uptime: 142 days, 4 hours
|
||||
| Virtualization: lxc (Incus)
|
||||
| CPU: AMD EPYC 7763 (4) @ 2.45GHz
|
||||
| Memory: 512MiB / 64GiB
|
||||
|
||||
root@anvil:~# docker ps
|
||||
CONTAINER ID IMAGE STATUS PORTS
|
||||
a1b2c3d4e5f6 nginx Up 24h 0.0.0.0:80->80/tcp
|
||||
_
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Domain Section (도메인 서비스)
|
||||
|
||||
### Badge
|
||||
```
|
||||
NEW: AI Domain Generator
|
||||
```
|
||||
|
||||
### Headline
|
||||
```
|
||||
대화로 끝내는
|
||||
도메인 등록과 관리
|
||||
```
|
||||
|
||||
### Description
|
||||
```
|
||||
원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다.
|
||||
```
|
||||
|
||||
### Feature Grid
|
||||
```
|
||||
AI 추천
|
||||
키워드 분석 기반 도메인 작명
|
||||
|
||||
실시간 조회
|
||||
전 세계 TLD 실시간 가용 확인
|
||||
|
||||
간편 DNS
|
||||
대화형 A/CNAME/MX 레코드 설정
|
||||
|
||||
Whois 보안
|
||||
개인정보 보호 설정 기본 제공
|
||||
```
|
||||
|
||||
### Domain Pricing Table
|
||||
```
|
||||
주요 도메인 가격 (연간)
|
||||
|
||||
.com / .net ₩20,000 / ₩22,600
|
||||
.it.com / .dev ₩8,700 / ₩27,800 (.it.com 갱신 ₩67,900)
|
||||
.io / .ai ₩114,800 / ₩139,200
|
||||
.xyz / .me ₩27,800 / ₩31,300
|
||||
```
|
||||
|
||||
### CTA Button
|
||||
```
|
||||
🌐 도메인 검색 시작하기
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Pricing Section (요금제)
|
||||
|
||||
### Section Header
|
||||
```
|
||||
합리적인 요금제
|
||||
전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함)
|
||||
```
|
||||
|
||||
### Tab Buttons
|
||||
```
|
||||
🌏 Global (Tokyo/SG/HK)
|
||||
🇰🇷 Seoul (Premium)
|
||||
```
|
||||
|
||||
### Global Pricing Table
|
||||
| Plan | vCPU | RAM | SSD | Transfer | Price/Month |
|
||||
|------|------|-----|-----|----------|-------------|
|
||||
| Micro | 1 Core | 1 GB | 25 GB | 1 TB | ₩8,500 |
|
||||
| Starter | 1 Core | 2 GB | 50 GB | 2 TB | ₩20,400 |
|
||||
| **Pro** ⭐ | 2 Cores | 4 GB | 80 GB | 4 TB | ₩40,700 |
|
||||
| Business | 4 Cores | 8 GB | 160 GB | 5 TB | ₩67,800 |
|
||||
|
||||
### Seoul Pricing Table
|
||||
| Plan | vCPU | RAM | SSD (High) | Transfer | Price/Month |
|
||||
|------|------|-----|------------|----------|-------------|
|
||||
| Nano | 1 Core | 512 MB | 20 GB | 1 TB | ₩6,000 |
|
||||
| Micro | 1 Core | 1 GB | 40 GB | 2 TB | ₩8,500 |
|
||||
| Starter | 1 Core | 2 GB | 60 GB | 3 TB | ₩17,000 |
|
||||
| **Pro** ⭐ | 2 Cores | 4 GB | 80 GB | 4 TB | ₩33,900 |
|
||||
| Business | 2 Cores | 8 GB | 160 GB | 5 TB | ₩67,800 |
|
||||
|
||||
### Footnote (Global)
|
||||
```
|
||||
* 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다.
|
||||
```
|
||||
|
||||
### Enterprise Note (Seoul)
|
||||
```
|
||||
더 강력한 성능이 필요하신가요?
|
||||
AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원)
|
||||
Enterprise 문의 →
|
||||
```
|
||||
|
||||
### Feature Highlights
|
||||
```
|
||||
🌍 글로벌 4개 리전 운영
|
||||
도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.
|
||||
|
||||
🛡️ 프리미엄 DDoS 방어
|
||||
모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.
|
||||
```
|
||||
|
||||
### Bare Metal Section
|
||||
**Badge:**
|
||||
```
|
||||
EXTREME PERFORMANCE
|
||||
```
|
||||
|
||||
**Headline:**
|
||||
```
|
||||
Bare Metal Dedicated
|
||||
```
|
||||
|
||||
**Description:**
|
||||
```
|
||||
가상화가 없는 100% 물리 서버를 단독으로 사용하세요.
|
||||
AMD EPYC 9004 프로세서와 DDR5 ECC RAM의 압도적인 성능을 경험할 수 있습니다.
|
||||
```
|
||||
|
||||
**Features:**
|
||||
```
|
||||
✓ Full IPMI Access
|
||||
✓ Custom Hardware
|
||||
✓ 40Gbps Private Network
|
||||
```
|
||||
|
||||
**Pricing:**
|
||||
```
|
||||
Live Inventory Pricing
|
||||
₩169,000~
|
||||
🇸🇬 싱가포르 최저가 재고 보유 중
|
||||
※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.
|
||||
```
|
||||
|
||||
**CTA:**
|
||||
```
|
||||
실시간 재고/가격 조회 (Bot)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Footer
|
||||
|
||||
### Left
|
||||
```
|
||||
Anvil Hosting | Global Cloud Infrastructure
|
||||
```
|
||||
|
||||
### Links
|
||||
```
|
||||
이용약관
|
||||
개인정보처리방침
|
||||
SLA
|
||||
```
|
||||
|
||||
### Right
|
||||
```
|
||||
© 2026 LIBEHAIM Inc. | Taro Tanaka
|
||||
#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Server Launcher Modal (서버 런처 모달)
|
||||
|
||||
### Modal Header
|
||||
```
|
||||
Server Launcher
|
||||
Anvil Forge Bot
|
||||
```
|
||||
|
||||
### Step 0: Region Selection
|
||||
**Bot Message:**
|
||||
```
|
||||
어느 리전에 서버를 생성할까요?
|
||||
```
|
||||
|
||||
**Options:**
|
||||
| Flag | Name | ID | Ping |
|
||||
|------|------|-----|------|
|
||||
| 🇰🇷 | 서울 | Seoul | 2ms |
|
||||
| 🇯🇵 | 도쿄 | Tokyo | 35ms |
|
||||
| 🇸🇬 | 싱가포르 | Singapore | 65ms |
|
||||
| 🇭🇰 | 홍콩 | HongKong | 45ms |
|
||||
|
||||
### Step 1: Plan Selection
|
||||
**Bot Message:**
|
||||
```
|
||||
어떤 사양이 필요하신가요?
|
||||
```
|
||||
|
||||
**Options:**
|
||||
| Icon | Plan | Spec | Price |
|
||||
|------|------|------|-------|
|
||||
| 🔹 | Micro | 1vCPU / 1GB RAM | ₩8,500/월 |
|
||||
| 🔷 | Starter | 1vCPU / 2GB RAM | ₩20,400/월 |
|
||||
| ⭐ | Pro | 2vCPU / 4GB RAM | ₩40,700/월 |
|
||||
| 💎 | Business | 4vCPU / 8GB RAM | ₩67,800/월 |
|
||||
|
||||
### Step 2: OS Selection
|
||||
**Bot Message:**
|
||||
```
|
||||
어떤 운영체제를 설치할까요?
|
||||
```
|
||||
|
||||
**Options:**
|
||||
| Icon | OS |
|
||||
|------|-----|
|
||||
| 🐧 | Debian 12 |
|
||||
| 🟠 | Ubuntu 24.04 |
|
||||
| 🔵 | CentOS 9 |
|
||||
| 🏔️ | Alpine |
|
||||
|
||||
### Step 3: Payment Selection
|
||||
**Bot Message:**
|
||||
```
|
||||
결제 방식을 선택해주세요.
|
||||
```
|
||||
|
||||
**Options:**
|
||||
| Name | Description | Discount |
|
||||
|------|-------------|----------|
|
||||
| 월간 결제 | 매월 자동 결제 | - |
|
||||
| 연간 결제 | 2개월 무료 (17% 할인) | -17% |
|
||||
|
||||
### Step 4: Confirmation
|
||||
**Bot Message:**
|
||||
```
|
||||
구성을 확인하고 서버를 생성해주세요! 🚀
|
||||
```
|
||||
|
||||
**Summary Labels:**
|
||||
```
|
||||
리전
|
||||
플랜
|
||||
OS
|
||||
결제
|
||||
월 요금
|
||||
```
|
||||
|
||||
**CTA Button:**
|
||||
```
|
||||
🚀 서버 생성하기
|
||||
```
|
||||
|
||||
### Step 5: Deployment Progress
|
||||
**Progress Labels:**
|
||||
```
|
||||
배포 중...
|
||||
완료
|
||||
```
|
||||
|
||||
**Log Messages:**
|
||||
```
|
||||
🔄 배포를 시작합니다...
|
||||
📍 {region} 리전 노드 선택 중...
|
||||
📦 {os} 이미지 준비 중...
|
||||
✅ 이미지 준비 완료
|
||||
🔧 컨테이너 인스턴스 생성 중...
|
||||
✅ 컨테이너 생성 완료
|
||||
🌐 네트워크 및 방화벽 구성 중...
|
||||
✅ IP 할당 완료: 45.12.89.{random}
|
||||
⚙️ 시스템 서비스 시작 중...
|
||||
🎉 서버가 활성화되었습니다!
|
||||
```
|
||||
|
||||
### Success State
|
||||
```
|
||||
✓
|
||||
서버 준비 완료!
|
||||
인스턴스가 활성화되었습니다
|
||||
|
||||
[닫기] [Console →]
|
||||
```
|
||||
|
||||
### Navigation
|
||||
```
|
||||
이전 단계
|
||||
닫기 (X)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Meta / SEO Content
|
||||
|
||||
### Page Title
|
||||
```
|
||||
Anvil Hosting - 개발자를 위한 컨테이너 클라우드
|
||||
```
|
||||
|
||||
### Meta Description
|
||||
```
|
||||
Incus/LXD 기반 초경량 컨테이너 호스팅. VM 오버헤드 없이 네이티브 성능을 제공하며, n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다. 도쿄, 서울, 싱가포르, 홍콩 리전 지원.
|
||||
```
|
||||
|
||||
### Meta Keywords
|
||||
```
|
||||
컨테이너 호스팅, LXD, Incus, 클라우드 서버, VPS, 도쿄 서버, 서울 서버, 개발자 호스팅, Docker, 자동화
|
||||
```
|
||||
|
||||
### OG Title
|
||||
```
|
||||
Anvil Hosting - 개발자를 위한 컨테이너 클라우드
|
||||
```
|
||||
|
||||
### OG Description
|
||||
```
|
||||
Incus/LXD 기반 초경량 컨테이너 호스팅. 네이티브 성능과 자동화 파이프라인을 경험하세요.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. Accessibility Labels (접근성)
|
||||
|
||||
```
|
||||
텔레그램 봇으로 콘솔 시작
|
||||
서버 런처 열기
|
||||
서버 요금표
|
||||
닫기
|
||||
이전 단계
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Figma Copy-Paste Ready Content*
|
||||
*Last Updated: 2026-01-20*
|
||||
413
FIGMA_DESIGN_GUIDE.md
Normal file
413
FIGMA_DESIGN_GUIDE.md
Normal file
@@ -0,0 +1,413 @@
|
||||
# Anvil Hosting - Figma Design Guide
|
||||
|
||||
Figma 리디자인을 위한 디자인 시스템 문서입니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. Color Palette
|
||||
|
||||
### Brand Colors (Primary)
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| **Brand 400** | `#38bdf8` | 56, 189, 248 | 하이라이트, 호버 |
|
||||
| **Brand 500** | `#0ea5e9` | 14, 165, 233 | 주요 액션, 링크 |
|
||||
| **Brand 600** | `#0284c7` | 2, 132, 199 | 버튼 배경, CTA |
|
||||
|
||||
### Dark Theme (Background)
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| **Dark 900** | `#0b1120` | 11, 17, 32 | 메인 배경 |
|
||||
| **Dark 800** | `#1e293b` | 30, 41, 59 | 섹션 배경 |
|
||||
|
||||
### Neutral (Slate)
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| **Slate 200** | `#e2e8f0` | 226, 232, 240 | 본문 텍스트 (body) |
|
||||
| **Slate 300** | `#cbd5e1` | 203, 213, 225 | 서브 텍스트 |
|
||||
| **Slate 400** | `#94a3b8` | 148, 163, 184 | 비활성 텍스트 |
|
||||
| **Slate 500** | `#64748b` | 100, 116, 139 | 플레이스홀더 |
|
||||
| **Slate 600** | `#475569` | 71, 85, 105 | 보더 (진한) |
|
||||
| **Slate 700** | `#334155` | 51, 65, 85 | 보더 (기본) |
|
||||
| **Slate 800** | `#1e293b` | 30, 41, 59 | 카드 배경 |
|
||||
| **Slate 900** | `#0f172a` | 15, 23, 42 | 인풋 배경 |
|
||||
|
||||
### Semantic Colors
|
||||
| Name | Hex | Usage |
|
||||
|------|-----|-------|
|
||||
| **Green 400** | `#4ade80` | 성공, 온라인 상태 |
|
||||
| **Green 500** | `#22c55e` | 성공 보더 |
|
||||
| **Red 400** | `#f87171` | 오류, 경고 |
|
||||
| **Red 500** | `#ef4444` | 오류 보더 |
|
||||
| **Yellow 400** | `#facc15` | 경고, 중간 상태 |
|
||||
| **Purple 400** | `#c084fc` | 자동화, 보조 |
|
||||
| **Purple 500** | `#a855f7` | 보조 액션 |
|
||||
| **Purple 600** | `#9333ea` | 보조 버튼 |
|
||||
| **Blue 400** | `#60a5fa` | 정보, 텔레그램 |
|
||||
|
||||
---
|
||||
|
||||
## 2. Typography
|
||||
|
||||
### Font Families
|
||||
```
|
||||
Sans-serif: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif
|
||||
Monospace: "JetBrains Mono", "Fira Code", monospace
|
||||
```
|
||||
|
||||
### Font Scale
|
||||
| Name | Size | Line Height | Weight | Usage |
|
||||
|------|------|-------------|--------|-------|
|
||||
| **6xl** | 60px (3.75rem) | 1 | Bold 700 | Hero 제목 (Desktop) |
|
||||
| **5xl** | 48px (3rem) | 1 | Bold 700 | Hero 제목 (Mobile) |
|
||||
| **4xl** | 36px (2.25rem) | 1.11 | Bold 700 | 섹션 제목 (Desktop) |
|
||||
| **3xl** | 30px (1.875rem) | 1.2 | Bold 700 | 섹션 제목 (Mobile) |
|
||||
| **2xl** | 24px (1.5rem) | 1.33 | Bold 700 | 카드 제목 |
|
||||
| **xl** | 20px (1.25rem) | 1.4 | Bold 700 | 소제목 |
|
||||
| **lg** | 18px (1.125rem) | 1.56 | Medium 500 | 리드 텍스트 |
|
||||
| **base** | 16px (1rem) | 1.5 | Normal 400 | 본문 |
|
||||
| **sm** | 14px (0.875rem) | 1.43 | Normal 400 | 작은 본문 |
|
||||
| **xs** | 12px (0.75rem) | 1.33 | Normal 400 | 캡션, 라벨 |
|
||||
| **2xs** | 10px | 1.4 | Normal 400 | 마이크로 라벨 |
|
||||
|
||||
### Font Weights
|
||||
| Name | Value | Usage |
|
||||
|------|-------|-------|
|
||||
| Normal | 400 | 본문, 설명 |
|
||||
| Medium | 500 | 강조 본문 |
|
||||
| Bold | 700 | 제목, 버튼 |
|
||||
|
||||
### Letter Spacing
|
||||
| Name | Value | Usage |
|
||||
|------|-------|-------|
|
||||
| Tight | -0.025em | 큰 제목 |
|
||||
| Normal | 0 | 본문 |
|
||||
| Widest | 0.1em | 라벨, 뱃지 |
|
||||
|
||||
---
|
||||
|
||||
## 3. Spacing System
|
||||
|
||||
Base unit: **4px (0.25rem)**
|
||||
|
||||
| Scale | Value | Pixels | Usage |
|
||||
|-------|-------|--------|-------|
|
||||
| 0.5 | 0.125rem | 2px | 미세 간격 |
|
||||
| 1 | 0.25rem | 4px | 최소 간격 |
|
||||
| 1.5 | 0.375rem | 6px | 아이콘 간격 |
|
||||
| 2 | 0.5rem | 8px | 작은 간격 |
|
||||
| 3 | 0.75rem | 12px | 컴포넌트 내부 |
|
||||
| 4 | 1rem | 16px | 기본 간격 |
|
||||
| 6 | 1.5rem | 24px | 컴포넌트 간격 |
|
||||
| 8 | 2rem | 32px | 섹션 내부 |
|
||||
| 12 | 3rem | 48px | 큰 간격 |
|
||||
| 16 | 4rem | 64px | 섹션 간격 |
|
||||
| 24 | 6rem | 96px | 섹션 패딩 |
|
||||
| 32 | 8rem | 128px | Hero 패딩 |
|
||||
|
||||
---
|
||||
|
||||
## 4. Border Radius
|
||||
|
||||
| Name | Value | Usage |
|
||||
|------|-------|-------|
|
||||
| **sm** | 4px | 태그, 작은 버튼 |
|
||||
| **default** | 4px | 인풋 필드 |
|
||||
| **lg** | 8px | 버튼 |
|
||||
| **xl** | 12px | 카드 |
|
||||
| **2xl** | 16px | 모달, 큰 카드 |
|
||||
| **3xl** | 24px | 팝업 |
|
||||
| **full** | 9999px | 원형, 뱃지, 아바타 |
|
||||
|
||||
---
|
||||
|
||||
## 5. Shadows
|
||||
|
||||
### Elevation System
|
||||
```css
|
||||
/* Small - 버튼 호버 */
|
||||
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
|
||||
/* Default - 카드 */
|
||||
shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)
|
||||
|
||||
/* Large - 드롭다운 */
|
||||
shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)
|
||||
|
||||
/* XL - 모달 */
|
||||
shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)
|
||||
|
||||
/* 2XL - 팝업 */
|
||||
shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
|
||||
```
|
||||
|
||||
### Glow Effects (Brand)
|
||||
```css
|
||||
/* Primary Glow */
|
||||
shadow-brand: 0 0 15px rgba(56, 189, 248, 0.2)
|
||||
shadow-brand-hover: 0 0 20px rgba(56, 189, 248, 0.4)
|
||||
|
||||
/* Button Glow */
|
||||
shadow-button: 0 10px 15px -3px rgba(14, 165, 233, 0.2)
|
||||
|
||||
/* Purple Accent */
|
||||
shadow-purple: 0 0 15px rgba(168, 85, 247, 0.2)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Component Styles
|
||||
|
||||
### Buttons
|
||||
|
||||
#### Primary Button
|
||||
```
|
||||
Background: Brand 600 (#0284c7)
|
||||
Hover: Brand 500 (#0ea5e9)
|
||||
Text: White
|
||||
Border Radius: 8px
|
||||
Padding: 12px 24px (py-3 px-6)
|
||||
Font: Bold, 14px
|
||||
Shadow: shadow-lg shadow-brand-500/20
|
||||
```
|
||||
|
||||
#### Secondary Button
|
||||
```
|
||||
Background: Slate 800 (#1e293b)
|
||||
Hover: Slate 700 (#334155)
|
||||
Text: White
|
||||
Border: 1px solid Slate 700
|
||||
Border Radius: 8px
|
||||
Padding: 8px 16px
|
||||
```
|
||||
|
||||
#### Ghost Button
|
||||
```
|
||||
Background: Transparent
|
||||
Hover: White/5%
|
||||
Text: Slate 400 → White
|
||||
Border Radius: 8px
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
#### Glass Panel
|
||||
```
|
||||
Background: rgba(30, 41, 59, 0.4) (Slate 800 @ 40%)
|
||||
Backdrop Filter: blur(12px)
|
||||
Border: 1px solid rgba(255, 255, 255, 0.05)
|
||||
Border Radius: 12px (xl) or 16px (2xl)
|
||||
Padding: 24px or 32px
|
||||
```
|
||||
|
||||
#### Feature Card
|
||||
```
|
||||
Background: Glass Panel
|
||||
Border Top: 2px solid [accent color]
|
||||
Hover: bg-slate-800/80
|
||||
Transition: 150ms ease
|
||||
```
|
||||
|
||||
### Input Fields
|
||||
```
|
||||
Background: Slate 900 (#0f172a)
|
||||
Border: 1px solid Slate 700
|
||||
Focus Border: Brand 500
|
||||
Border Radius: 8px
|
||||
Padding: 12px 16px
|
||||
Text: Slate 200
|
||||
Placeholder: Slate 500
|
||||
```
|
||||
|
||||
### Badges / Tags
|
||||
```
|
||||
Background: [color]/10 (예: Brand 500 @ 10%)
|
||||
Border: 1px solid [color]/20
|
||||
Text: [color]-400
|
||||
Border Radius: 9999px (full)
|
||||
Padding: 4px 12px
|
||||
Font: Mono, 12px
|
||||
```
|
||||
|
||||
### Navigation
|
||||
```
|
||||
Background: Dark 900 @ 80% + backdrop-blur
|
||||
Border Bottom: 1px solid White/5%
|
||||
Height: 64px
|
||||
Logo Size: 32px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Layout Grid
|
||||
|
||||
### Container
|
||||
| Breakpoint | Max Width |
|
||||
|------------|-----------|
|
||||
| Default | 100% |
|
||||
| sm (640px) | 640px |
|
||||
| md (768px) | 768px |
|
||||
| lg (1024px) | 1024px |
|
||||
| xl (1280px) | 1280px |
|
||||
| 2xl (1536px) | 1536px |
|
||||
| **Content** | **80rem (1280px)** |
|
||||
|
||||
### Grid System
|
||||
```
|
||||
Columns: 12
|
||||
Gutter: 24px (gap-6) or 32px (gap-8)
|
||||
Margin: 24px (mobile) / 48px (desktop)
|
||||
```
|
||||
|
||||
### Breakpoints
|
||||
| Name | Min Width | Usage |
|
||||
|------|-----------|-------|
|
||||
| sm | 640px | 모바일 가로 |
|
||||
| md | 768px | 태블릿 |
|
||||
| lg | 1024px | 데스크톱 |
|
||||
| xl | 1280px | 와이드 데스크톱 |
|
||||
| 2xl | 1536px | 초대형 모니터 |
|
||||
|
||||
---
|
||||
|
||||
## 8. Animation & Transitions
|
||||
|
||||
### Duration
|
||||
| Name | Value | Usage |
|
||||
|------|-------|-------|
|
||||
| Fast | 150ms | 버튼, 링크 |
|
||||
| Normal | 200ms | 카드, 토글 |
|
||||
| Slow | 300ms | 모달, 페이드 |
|
||||
| Slower | 500ms | 큰 트랜지션 |
|
||||
|
||||
### Easing
|
||||
```css
|
||||
ease-in: cubic-bezier(0.4, 0, 1, 1)
|
||||
ease-out: cubic-bezier(0, 0, 0.2, 1)
|
||||
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
```
|
||||
|
||||
### Common Animations
|
||||
```css
|
||||
/* Pulse (Status Indicator) */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
|
||||
/* Chat Bubble Enter */
|
||||
@keyframes chat-enter {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
animation: chat-enter 0.5s forwards;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Iconography
|
||||
|
||||
### Icon Sources
|
||||
- **Heroicons** (Outline style): 네비게이션, UI
|
||||
- **Custom SVG**: 로고, 일러스트레이션
|
||||
- **Emoji**: 리전 플래그, 기능 아이콘
|
||||
|
||||
### Icon Sizes
|
||||
| Name | Size | Usage |
|
||||
|------|------|-------|
|
||||
| xs | 12px | 인라인 |
|
||||
| sm | 16px | 버튼 내 |
|
||||
| md | 20px | 리스트 |
|
||||
| lg | 24px | 카드 헤더 |
|
||||
| xl | 32px | 기능 아이콘 |
|
||||
| 2xl | 48px | 히어로 |
|
||||
|
||||
---
|
||||
|
||||
## 10. Special Effects
|
||||
|
||||
### Grid Background
|
||||
```css
|
||||
background-image:
|
||||
linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
```
|
||||
|
||||
### Gradient Glow
|
||||
```css
|
||||
/* Hero Glow */
|
||||
background: radial-gradient(
|
||||
ellipse 800px 500px at 50% 0%,
|
||||
rgba(14, 165, 233, 0.1),
|
||||
transparent
|
||||
);
|
||||
```
|
||||
|
||||
### Glassmorphism
|
||||
```css
|
||||
background: rgba(30, 41, 59, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. Figma Setup Checklist
|
||||
|
||||
### Variables 생성
|
||||
- [ ] Color Primitives (Brand, Slate, Semantic)
|
||||
- [ ] Spacing Scale (4px base)
|
||||
- [ ] Typography Tokens
|
||||
- [ ] Border Radius
|
||||
- [ ] Shadows
|
||||
|
||||
### Components 생성
|
||||
- [ ] Button (Primary, Secondary, Ghost)
|
||||
- [ ] Card (Glass, Feature, Pricing)
|
||||
- [ ] Input (Text, Select, Checkbox)
|
||||
- [ ] Badge / Tag
|
||||
- [ ] Navigation Bar
|
||||
- [ ] Footer
|
||||
- [ ] Modal (Server Launcher)
|
||||
|
||||
### Pages 구성
|
||||
- [ ] 1. Navbar
|
||||
- [ ] 2. Hero Section
|
||||
- [ ] 3. Features (4 cards)
|
||||
- [ ] 4. Automation (n8n/Terraform tabs)
|
||||
- [ ] 5. Infrastructure
|
||||
- [ ] 6. Domain Service
|
||||
- [ ] 7. Pricing (Tabs + Table)
|
||||
- [ ] 8. Footer
|
||||
- [ ] Modal: Server Launcher (5 steps)
|
||||
|
||||
---
|
||||
|
||||
## 12. Figma Plugin 추천
|
||||
|
||||
| Plugin | 용도 |
|
||||
|--------|------|
|
||||
| **Tokens Studio** | 디자인 토큰 관리 |
|
||||
| **Iconify** | 아이콘 라이브러리 |
|
||||
| **html.to.design** | 현재 사이트 임포트 |
|
||||
| **Locofy** | 디자인 → React/HTML 변환 |
|
||||
| **Contrast** | 접근성 색상 대비 검사 |
|
||||
|
||||
---
|
||||
|
||||
## 13. Export Settings
|
||||
|
||||
### 이미지 내보내기
|
||||
- **PNG**: 2x 해상도
|
||||
- **SVG**: 아이콘, 로고
|
||||
|
||||
### 코드 변환 시 주의사항
|
||||
1. `oklch()` 색상은 `hex`로 변환 필요
|
||||
2. Tailwind v4 문법 사용 중 (`--spacing`, CSS Variables)
|
||||
3. Alpine.js 인터랙션 별도 구현 필요
|
||||
|
||||
---
|
||||
|
||||
*Generated for Anvil Hosting Figma Redesign Project*
|
||||
*Last Updated: 2026-01-20*
|
||||
287
figma-content.json
Normal file
287
figma-content.json
Normal file
@@ -0,0 +1,287 @@
|
||||
{
|
||||
"site": {
|
||||
"title": "Anvil Hosting - 개발자를 위한 컨테이너 클라우드",
|
||||
"description": "Incus/LXD 기반 초경량 컨테이너 호스팅. VM 오버헤드 없이 네이티브 성능을 제공하며, n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다.",
|
||||
"keywords": ["컨테이너 호스팅", "LXD", "Incus", "클라우드 서버", "VPS", "도쿄 서버", "서울 서버", "개발자 호스팅", "Docker", "자동화"],
|
||||
"locale": "ko_KR",
|
||||
"url": "https://hosting.anvil.it.com"
|
||||
},
|
||||
|
||||
"navigation": {
|
||||
"logo": "Anvil.Hosting",
|
||||
"menu": ["기능", "요금제", "자동화"],
|
||||
"cta": "Console 시작"
|
||||
},
|
||||
|
||||
"hero": {
|
||||
"badge": "System Operational: v2.4.0 Live",
|
||||
"headline": ["Incus/LXD 기반", "초경량 컨테이너 호스팅"],
|
||||
"subheadline": "VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다. n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다.",
|
||||
"highlights": ["n8n", "Ansible"],
|
||||
"cta": {
|
||||
"icon": "🚀",
|
||||
"text": "인스턴스 즉시 배포"
|
||||
},
|
||||
"pingWidget": [
|
||||
{ "flag": "🇰🇷", "name": "Seoul", "ping": "2ms", "color": "green" },
|
||||
{ "flag": "🇯🇵", "name": "Tokyo", "ping": "35ms", "color": "brand" },
|
||||
{ "flag": "🇭🇰", "name": "HongKong", "ping": "45ms", "color": "yellow" },
|
||||
{ "flag": "🇸🇬", "name": "Singapore", "ping": "65ms", "color": "yellow" }
|
||||
],
|
||||
"chatDemo": {
|
||||
"header": {
|
||||
"name": "Anvil Forge Bot",
|
||||
"status": "bot"
|
||||
},
|
||||
"messages": [
|
||||
{ "type": "user", "text": "도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘" },
|
||||
{ "type": "bot", "text": "🤖 AI가 요청을 분석했습니다.\n\n다음 구성으로 서버를 준비할까요?\n\n• 위치: 🇯🇵 도쿄 (Tokyo)\n• OS: Debian 12 (Bookworm)\n• 사양: Pro (2 vCPU / 4GB)" },
|
||||
{ "type": "user", "text": "응 바로 생성해줘" },
|
||||
{ "type": "bot", "text": "✅ 서버 생성이 완료되었습니다!\n\nIP: 45.12.89.121\nRoot PW: (보안 전송됨)\n\n지금 바로 SSH 접속이 가능합니다.", "success": true }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"features": {
|
||||
"header": {
|
||||
"title": "엔지니어를 위한 기술 스택",
|
||||
"subtitle": "단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다."
|
||||
},
|
||||
"cards": [
|
||||
{
|
||||
"tag": "<Incus/LXD>",
|
||||
"title": "Native Performance",
|
||||
"description": "KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다.",
|
||||
"color": "brand"
|
||||
},
|
||||
{
|
||||
"tag": "<Automation>",
|
||||
"title": "API & Webhooks",
|
||||
"description": "n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다.",
|
||||
"color": "purple"
|
||||
},
|
||||
{
|
||||
"tag": "<Security>",
|
||||
"title": "Isolated & Safe",
|
||||
"description": "CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다.",
|
||||
"color": "green"
|
||||
},
|
||||
{
|
||||
"tag": "<Anti-DDoS>",
|
||||
"title": "1Tbps+ Mitigation",
|
||||
"description": "L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.",
|
||||
"color": "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
"automation": {
|
||||
"badge": "Infrastructure as Code",
|
||||
"headline": ["반복적인 작업은", "자동화에 맡기세요"],
|
||||
"description": "웹 콘솔에 접속할 필요도 없습니다. Terraform으로 인프라를 정의하고, Ansible로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다.",
|
||||
"highlights": ["Terraform", "Ansible"],
|
||||
"features": [
|
||||
{
|
||||
"title": "Webhook Integration",
|
||||
"description": "Github Actions, GitLab CI/CD 연동"
|
||||
},
|
||||
{
|
||||
"title": "Full API Access",
|
||||
"description": "서버 생성, 제어, 모니터링 100% API 지원"
|
||||
}
|
||||
],
|
||||
"tabs": ["n8n Workflow", "Terraform"],
|
||||
"n8nNodes": ["Webhook", "Restart Server", "Notify User"],
|
||||
"terraformCode": "resource \"anvil_instance\" \"web\" {\n name = \"production-web-01\"\n image = \"debian-12\"\n region = \"jp-east-1\"\n plan = \"pro-v2\"\n\n // 자동 백업 설정\n backup_schedule {\n enabled = true\n retain = 7\n }\n}"
|
||||
},
|
||||
|
||||
"infrastructure": {
|
||||
"title": "High-Spec Infrastructure",
|
||||
"features": [
|
||||
{
|
||||
"icon": "⚡",
|
||||
"title": "NVMe Storage",
|
||||
"description": "모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장."
|
||||
},
|
||||
{
|
||||
"icon": "🌐",
|
||||
"title": "Premium Network",
|
||||
"description": "CN2/BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시."
|
||||
},
|
||||
{
|
||||
"icon": "💾",
|
||||
"title": "ZFS Snapshots",
|
||||
"description": "CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝."
|
||||
}
|
||||
],
|
||||
"terminal": {
|
||||
"prompt": "root@anvil:~#",
|
||||
"commands": [
|
||||
{ "cmd": "neofetch", "output": "OS: Debian GNU/Linux 12 (bookworm)\nKernel: 6.1.0-18-cloud-amd64\nUptime: 142 days, 4 hours\nVirtualization: lxc (Incus)\nCPU: AMD EPYC 7763 (4) @ 2.45GHz\nMemory: 512MiB / 64GiB" },
|
||||
{ "cmd": "docker ps", "output": "CONTAINER ID IMAGE STATUS PORTS\na1b2c3d4e5f6 nginx Up 24h 0.0.0.0:80->80/tcp" }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
"domain": {
|
||||
"badge": "NEW: AI Domain Generator",
|
||||
"headline": ["대화로 끝내는", "도메인 등록과 관리"],
|
||||
"description": "원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다.",
|
||||
"features": [
|
||||
{ "title": "AI 추천", "description": "키워드 분석 기반 도메인 작명" },
|
||||
{ "title": "실시간 조회", "description": "전 세계 TLD 실시간 가용 확인" },
|
||||
{ "title": "간편 DNS", "description": "대화형 A/CNAME/MX 레코드 설정" },
|
||||
{ "title": "Whois 보안", "description": "개인정보 보호 설정 기본 제공" }
|
||||
],
|
||||
"pricing": {
|
||||
"title": "주요 도메인 가격 (연간)",
|
||||
"items": [
|
||||
{ "tld": ".com / .net", "price": "₩20,000 / ₩22,600" },
|
||||
{ "tld": ".it.com / .dev", "price": "₩8,700 / ₩27,800", "note": ".it.com 갱신 ₩67,900" },
|
||||
{ "tld": ".io / .ai", "price": "₩114,800 / ₩139,200" },
|
||||
{ "tld": ".xyz / .me", "price": "₩27,800 / ₩31,300" }
|
||||
]
|
||||
},
|
||||
"cta": "🌐 도메인 검색 시작하기"
|
||||
},
|
||||
|
||||
"pricing": {
|
||||
"header": {
|
||||
"title": "합리적인 요금제",
|
||||
"subtitle": "전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함)"
|
||||
},
|
||||
"tabs": [
|
||||
{ "id": "global", "label": "🌏 Global", "sublabel": "(Tokyo/SG/HK)" },
|
||||
{ "id": "seoul", "label": "🇰🇷 Seoul", "sublabel": "(Premium)" }
|
||||
],
|
||||
"columns": ["Plan", "vCPU", "RAM", "SSD", "Transfer", "Price / Month"],
|
||||
"global": [
|
||||
{ "plan": "Micro", "vcpu": "1 Core", "ram": "1 GB", "ssd": "25 GB", "transfer": "1 TB", "price": "₩8,500" },
|
||||
{ "plan": "Starter", "vcpu": "1 Core", "ram": "2 GB", "ssd": "50 GB", "transfer": "2 TB", "price": "₩20,400" },
|
||||
{ "plan": "Pro", "vcpu": "2 Cores", "ram": "4 GB", "ssd": "80 GB", "transfer": "4 TB", "price": "₩40,700", "featured": true },
|
||||
{ "plan": "Business", "vcpu": "4 Cores", "ram": "8 GB", "ssd": "160 GB", "transfer": "5 TB", "price": "₩67,800" }
|
||||
],
|
||||
"seoul": [
|
||||
{ "plan": "Nano", "vcpu": "1 Core", "ram": "512 MB", "ssd": "20 GB", "transfer": "1 TB", "price": "₩6,000" },
|
||||
{ "plan": "Micro", "vcpu": "1 Core", "ram": "1 GB", "ssd": "40 GB", "transfer": "2 TB", "price": "₩8,500" },
|
||||
{ "plan": "Starter", "vcpu": "1 Core", "ram": "2 GB", "ssd": "60 GB", "transfer": "3 TB", "price": "₩17,000" },
|
||||
{ "plan": "Pro", "vcpu": "2 Cores", "ram": "4 GB", "ssd": "80 GB", "transfer": "4 TB", "price": "₩33,900", "featured": true },
|
||||
{ "plan": "Business", "vcpu": "2 Cores", "ram": "8 GB", "ssd": "160 GB", "transfer": "5 TB", "price": "₩67,800" }
|
||||
],
|
||||
"globalNote": "* 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다.",
|
||||
"seoulNote": {
|
||||
"title": "더 강력한 성능이 필요하신가요?",
|
||||
"description": "AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원)",
|
||||
"cta": "Enterprise 문의 →"
|
||||
},
|
||||
"highlights": [
|
||||
{
|
||||
"icon": "🌍",
|
||||
"title": "글로벌 4개 리전 운영",
|
||||
"description": "도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다."
|
||||
},
|
||||
{
|
||||
"icon": "🛡️",
|
||||
"title": "프리미엄 DDoS 방어",
|
||||
"description": "모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다."
|
||||
}
|
||||
],
|
||||
"bareMetal": {
|
||||
"badge": "EXTREME PERFORMANCE",
|
||||
"title": "Bare Metal Dedicated",
|
||||
"description": "가상화가 없는 100% 물리 서버를 단독으로 사용하세요. AMD EPYC 9004 프로세서와 DDR5 ECC RAM의 압도적인 성능을 경험할 수 있습니다.",
|
||||
"features": ["Full IPMI Access", "Custom Hardware", "40Gbps Private Network"],
|
||||
"pricing": {
|
||||
"label": "Live Inventory Pricing",
|
||||
"price": "₩169,000~",
|
||||
"note": "🇸🇬 싱가포르 최저가 재고 보유 중",
|
||||
"subNote": "※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요."
|
||||
},
|
||||
"cta": "실시간 재고/가격 조회 (Bot)"
|
||||
}
|
||||
},
|
||||
|
||||
"footer": {
|
||||
"brand": "Anvil Hosting | Global Cloud Infrastructure",
|
||||
"links": [
|
||||
{ "label": "이용약관", "url": "https://t.me/AnvilForgeBot?start=terms" },
|
||||
{ "label": "개인정보처리방침", "url": "https://t.me/AnvilForgeBot?start=privacy" },
|
||||
{ "label": "SLA", "url": "https://t.me/AnvilForgeBot?start=sla" }
|
||||
],
|
||||
"copyright": "© 2026 LIBEHAIM Inc. | Taro Tanaka",
|
||||
"address": "#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan"
|
||||
},
|
||||
|
||||
"launcher": {
|
||||
"header": {
|
||||
"title": "Server Launcher",
|
||||
"subtitle": "Anvil Forge Bot"
|
||||
},
|
||||
"steps": {
|
||||
"region": {
|
||||
"question": "어느 리전에 서버를 생성할까요?",
|
||||
"options": [
|
||||
{ "id": "Seoul", "flag": "🇰🇷", "name": "서울", "ping": "2ms" },
|
||||
{ "id": "Tokyo", "flag": "🇯🇵", "name": "도쿄", "ping": "35ms" },
|
||||
{ "id": "Singapore", "flag": "🇸🇬", "name": "싱가포르", "ping": "65ms" },
|
||||
{ "id": "HongKong", "flag": "🇭🇰", "name": "홍콩", "ping": "45ms" }
|
||||
]
|
||||
},
|
||||
"plan": {
|
||||
"question": "어떤 사양이 필요하신가요?",
|
||||
"options": [
|
||||
{ "icon": "🔹", "plan": "Micro", "spec": "1vCPU / 1GB RAM", "price": "₩8,500" },
|
||||
{ "icon": "🔷", "plan": "Starter", "spec": "1vCPU / 2GB RAM", "price": "₩20,400" },
|
||||
{ "icon": "⭐", "plan": "Pro", "spec": "2vCPU / 4GB RAM", "price": "₩40,700" },
|
||||
{ "icon": "💎", "plan": "Business", "spec": "4vCPU / 8GB RAM", "price": "₩67,800" }
|
||||
]
|
||||
},
|
||||
"os": {
|
||||
"question": "어떤 운영체제를 설치할까요?",
|
||||
"options": [
|
||||
{ "icon": "🐧", "name": "Debian 12" },
|
||||
{ "icon": "🟠", "name": "Ubuntu 24.04" },
|
||||
{ "icon": "🔵", "name": "CentOS 9" },
|
||||
{ "icon": "🏔️", "name": "Alpine" }
|
||||
]
|
||||
},
|
||||
"payment": {
|
||||
"question": "결제 방식을 선택해주세요.",
|
||||
"options": [
|
||||
{ "id": "monthly", "name": "월간 결제", "desc": "매월 자동 결제", "discount": 0 },
|
||||
{ "id": "yearly", "name": "연간 결제", "desc": "2개월 무료 (17% 할인)", "discount": 17 }
|
||||
]
|
||||
},
|
||||
"confirm": {
|
||||
"question": "구성을 확인하고 서버를 생성해주세요! 🚀",
|
||||
"labels": ["리전", "플랜", "OS", "결제", "월 요금"],
|
||||
"cta": "🚀 서버 생성하기"
|
||||
},
|
||||
"deploy": {
|
||||
"progressLabel": ["배포 중...", "완료"],
|
||||
"logs": [
|
||||
"🔄 배포를 시작합니다...",
|
||||
"📍 {region} 리전 노드 선택 중...",
|
||||
"📦 {os} 이미지 준비 중...",
|
||||
"✅ 이미지 준비 완료",
|
||||
"🔧 컨테이너 인스턴스 생성 중...",
|
||||
"✅ 컨테이너 생성 완료",
|
||||
"🌐 네트워크 및 방화벽 구성 중...",
|
||||
"✅ IP 할당 완료: 45.12.89.{random}",
|
||||
"⚙️ 시스템 서비스 시작 중...",
|
||||
"🎉 서버가 활성화되었습니다!"
|
||||
]
|
||||
},
|
||||
"success": {
|
||||
"icon": "✓",
|
||||
"title": "서버 준비 완료!",
|
||||
"subtitle": "인스턴스가 활성화되었습니다",
|
||||
"buttons": ["닫기", "Console →"]
|
||||
}
|
||||
},
|
||||
"navigation": {
|
||||
"back": "이전 단계",
|
||||
"close": "닫기"
|
||||
}
|
||||
}
|
||||
}
|
||||
216
figma-tokens.json
Normal file
216
figma-tokens.json
Normal file
@@ -0,0 +1,216 @@
|
||||
{
|
||||
"$themes": [],
|
||||
"$metadata": {
|
||||
"tokenSetOrder": ["core", "semantic", "component"]
|
||||
},
|
||||
"core": {
|
||||
"color": {
|
||||
"brand": {
|
||||
"400": { "value": "#38bdf8", "type": "color" },
|
||||
"500": { "value": "#0ea5e9", "type": "color" },
|
||||
"600": { "value": "#0284c7", "type": "color" }
|
||||
},
|
||||
"dark": {
|
||||
"800": { "value": "#1e293b", "type": "color" },
|
||||
"900": { "value": "#0b1120", "type": "color" }
|
||||
},
|
||||
"slate": {
|
||||
"200": { "value": "#e2e8f0", "type": "color" },
|
||||
"300": { "value": "#cbd5e1", "type": "color" },
|
||||
"400": { "value": "#94a3b8", "type": "color" },
|
||||
"500": { "value": "#64748b", "type": "color" },
|
||||
"600": { "value": "#475569", "type": "color" },
|
||||
"700": { "value": "#334155", "type": "color" },
|
||||
"800": { "value": "#1e293b", "type": "color" },
|
||||
"900": { "value": "#0f172a", "type": "color" }
|
||||
},
|
||||
"green": {
|
||||
"400": { "value": "#4ade80", "type": "color" },
|
||||
"500": { "value": "#22c55e", "type": "color" }
|
||||
},
|
||||
"red": {
|
||||
"400": { "value": "#f87171", "type": "color" },
|
||||
"500": { "value": "#ef4444", "type": "color" }
|
||||
},
|
||||
"yellow": {
|
||||
"400": { "value": "#facc15", "type": "color" },
|
||||
"500": { "value": "#eab308", "type": "color" }
|
||||
},
|
||||
"purple": {
|
||||
"400": { "value": "#c084fc", "type": "color" },
|
||||
"500": { "value": "#a855f7", "type": "color" },
|
||||
"600": { "value": "#9333ea", "type": "color" }
|
||||
},
|
||||
"blue": {
|
||||
"400": { "value": "#60a5fa", "type": "color" },
|
||||
"500": { "value": "#3b82f6", "type": "color" },
|
||||
"600": { "value": "#2563eb", "type": "color" }
|
||||
},
|
||||
"white": { "value": "#ffffff", "type": "color" },
|
||||
"black": { "value": "#000000", "type": "color" }
|
||||
},
|
||||
"spacing": {
|
||||
"0": { "value": "0", "type": "spacing" },
|
||||
"0.5": { "value": "2", "type": "spacing" },
|
||||
"1": { "value": "4", "type": "spacing" },
|
||||
"1.5": { "value": "6", "type": "spacing" },
|
||||
"2": { "value": "8", "type": "spacing" },
|
||||
"3": { "value": "12", "type": "spacing" },
|
||||
"4": { "value": "16", "type": "spacing" },
|
||||
"5": { "value": "20", "type": "spacing" },
|
||||
"6": { "value": "24", "type": "spacing" },
|
||||
"8": { "value": "32", "type": "spacing" },
|
||||
"10": { "value": "40", "type": "spacing" },
|
||||
"12": { "value": "48", "type": "spacing" },
|
||||
"16": { "value": "64", "type": "spacing" },
|
||||
"20": { "value": "80", "type": "spacing" },
|
||||
"24": { "value": "96", "type": "spacing" },
|
||||
"32": { "value": "128", "type": "spacing" }
|
||||
},
|
||||
"borderRadius": {
|
||||
"sm": { "value": "4", "type": "borderRadius" },
|
||||
"default": { "value": "4", "type": "borderRadius" },
|
||||
"md": { "value": "6", "type": "borderRadius" },
|
||||
"lg": { "value": "8", "type": "borderRadius" },
|
||||
"xl": { "value": "12", "type": "borderRadius" },
|
||||
"2xl": { "value": "16", "type": "borderRadius" },
|
||||
"3xl": { "value": "24", "type": "borderRadius" },
|
||||
"full": { "value": "9999", "type": "borderRadius" }
|
||||
},
|
||||
"fontFamily": {
|
||||
"sans": { "value": "Pretendard", "type": "fontFamilies" },
|
||||
"mono": { "value": "JetBrains Mono", "type": "fontFamilies" }
|
||||
},
|
||||
"fontSize": {
|
||||
"2xs": { "value": "10", "type": "fontSizes" },
|
||||
"xs": { "value": "12", "type": "fontSizes" },
|
||||
"sm": { "value": "14", "type": "fontSizes" },
|
||||
"base": { "value": "16", "type": "fontSizes" },
|
||||
"lg": { "value": "18", "type": "fontSizes" },
|
||||
"xl": { "value": "20", "type": "fontSizes" },
|
||||
"2xl": { "value": "24", "type": "fontSizes" },
|
||||
"3xl": { "value": "30", "type": "fontSizes" },
|
||||
"4xl": { "value": "36", "type": "fontSizes" },
|
||||
"5xl": { "value": "48", "type": "fontSizes" },
|
||||
"6xl": { "value": "60", "type": "fontSizes" }
|
||||
},
|
||||
"fontWeight": {
|
||||
"normal": { "value": "400", "type": "fontWeights" },
|
||||
"medium": { "value": "500", "type": "fontWeights" },
|
||||
"bold": { "value": "700", "type": "fontWeights" }
|
||||
},
|
||||
"lineHeight": {
|
||||
"none": { "value": "1", "type": "lineHeights" },
|
||||
"tight": { "value": "1.25", "type": "lineHeights" },
|
||||
"snug": { "value": "1.375", "type": "lineHeights" },
|
||||
"normal": { "value": "1.5", "type": "lineHeights" },
|
||||
"relaxed": { "value": "1.625", "type": "lineHeights" }
|
||||
},
|
||||
"letterSpacing": {
|
||||
"tight": { "value": "-0.025em", "type": "letterSpacing" },
|
||||
"normal": { "value": "0", "type": "letterSpacing" },
|
||||
"widest": { "value": "0.1em", "type": "letterSpacing" }
|
||||
},
|
||||
"boxShadow": {
|
||||
"sm": { "value": "0 1px 2px rgba(0, 0, 0, 0.05)", "type": "boxShadow" },
|
||||
"default": { "value": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)", "type": "boxShadow" },
|
||||
"lg": { "value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)", "type": "boxShadow" },
|
||||
"xl": { "value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)", "type": "boxShadow" },
|
||||
"2xl": { "value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", "type": "boxShadow" },
|
||||
"glow-brand": { "value": "0 0 15px rgba(56, 189, 248, 0.2)", "type": "boxShadow" },
|
||||
"glow-brand-hover": { "value": "0 0 20px rgba(56, 189, 248, 0.4)", "type": "boxShadow" }
|
||||
}
|
||||
},
|
||||
"semantic": {
|
||||
"color": {
|
||||
"bg": {
|
||||
"primary": { "value": "{core.color.dark.900}", "type": "color" },
|
||||
"secondary": { "value": "{core.color.dark.800}", "type": "color" },
|
||||
"card": { "value": "{core.color.slate.800}", "type": "color" },
|
||||
"input": { "value": "{core.color.slate.900}", "type": "color" }
|
||||
},
|
||||
"text": {
|
||||
"primary": { "value": "{core.color.white}", "type": "color" },
|
||||
"secondary": { "value": "{core.color.slate.200}", "type": "color" },
|
||||
"muted": { "value": "{core.color.slate.400}", "type": "color" },
|
||||
"placeholder": { "value": "{core.color.slate.500}", "type": "color" }
|
||||
},
|
||||
"border": {
|
||||
"default": { "value": "{core.color.slate.700}", "type": "color" },
|
||||
"light": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" },
|
||||
"focus": { "value": "{core.color.brand.500}", "type": "color" }
|
||||
},
|
||||
"accent": {
|
||||
"primary": { "value": "{core.color.brand.500}", "type": "color" },
|
||||
"secondary": { "value": "{core.color.purple.500}", "type": "color" }
|
||||
},
|
||||
"status": {
|
||||
"success": { "value": "{core.color.green.400}", "type": "color" },
|
||||
"error": { "value": "{core.color.red.400}", "type": "color" },
|
||||
"warning": { "value": "{core.color.yellow.400}", "type": "color" },
|
||||
"info": { "value": "{core.color.blue.400}", "type": "color" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"component": {
|
||||
"button": {
|
||||
"primary": {
|
||||
"bg": { "value": "{core.color.brand.600}", "type": "color" },
|
||||
"bgHover": { "value": "{core.color.brand.500}", "type": "color" },
|
||||
"text": { "value": "{core.color.white}", "type": "color" },
|
||||
"borderRadius": { "value": "{core.borderRadius.lg}", "type": "borderRadius" },
|
||||
"paddingX": { "value": "{core.spacing.6}", "type": "spacing" },
|
||||
"paddingY": { "value": "{core.spacing.3}", "type": "spacing" }
|
||||
},
|
||||
"secondary": {
|
||||
"bg": { "value": "{core.color.slate.800}", "type": "color" },
|
||||
"bgHover": { "value": "{core.color.slate.700}", "type": "color" },
|
||||
"text": { "value": "{core.color.white}", "type": "color" },
|
||||
"border": { "value": "{core.color.slate.700}", "type": "color" },
|
||||
"borderRadius": { "value": "{core.borderRadius.lg}", "type": "borderRadius" }
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"glass": {
|
||||
"bg": { "value": "rgba(30, 41, 59, 0.4)", "type": "color" },
|
||||
"border": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" },
|
||||
"borderRadius": { "value": "{core.borderRadius.xl}", "type": "borderRadius" },
|
||||
"padding": { "value": "{core.spacing.6}", "type": "spacing" },
|
||||
"backdropBlur": { "value": "12", "type": "other" }
|
||||
},
|
||||
"feature": {
|
||||
"bg": { "value": "{component.card.glass.bg}", "type": "color" },
|
||||
"borderRadius": { "value": "{core.borderRadius.xl}", "type": "borderRadius" },
|
||||
"padding": { "value": "{core.spacing.8}", "type": "spacing" },
|
||||
"borderTopWidth": { "value": "2", "type": "borderWidth" }
|
||||
}
|
||||
},
|
||||
"input": {
|
||||
"bg": { "value": "{core.color.slate.900}", "type": "color" },
|
||||
"border": { "value": "{core.color.slate.700}", "type": "color" },
|
||||
"borderFocus": { "value": "{core.color.brand.500}", "type": "color" },
|
||||
"borderRadius": { "value": "{core.borderRadius.lg}", "type": "borderRadius" },
|
||||
"paddingX": { "value": "{core.spacing.4}", "type": "spacing" },
|
||||
"paddingY": { "value": "{core.spacing.3}", "type": "spacing" }
|
||||
},
|
||||
"badge": {
|
||||
"borderRadius": { "value": "{core.borderRadius.full}", "type": "borderRadius" },
|
||||
"paddingX": { "value": "{core.spacing.3}", "type": "spacing" },
|
||||
"paddingY": { "value": "{core.spacing.1}", "type": "spacing" },
|
||||
"fontSize": { "value": "{core.fontSize.xs}", "type": "fontSizes" }
|
||||
},
|
||||
"navbar": {
|
||||
"height": { "value": "64", "type": "sizing" },
|
||||
"bg": { "value": "rgba(11, 17, 32, 0.8)", "type": "color" },
|
||||
"border": { "value": "rgba(255, 255, 255, 0.05)", "type": "color" },
|
||||
"backdropBlur": { "value": "12", "type": "other" }
|
||||
},
|
||||
"modal": {
|
||||
"bg": { "value": "rgba(15, 23, 42, 0.95)", "type": "color" },
|
||||
"border": { "value": "rgba(255, 255, 255, 0.1)", "type": "color" },
|
||||
"borderRadius": { "value": "{core.borderRadius.3xl}", "type": "borderRadius" },
|
||||
"maxWidth": { "value": "800", "type": "sizing" },
|
||||
"backdropBlur": { "value": "16", "type": "other" }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user