feat: 개발자 터미널 스타일 UI 전면 적용

- index.html: GitHub Dark 테마 터미널 스타일 랜딩 페이지
- terms.html, privacy.html, sla.html: 법적 페이지 터미널 UI 적용
- ASCII 아트 로고, vim 상태바, JSON 코드 블록
- Fira Code 모노스페이스 폰트, 터미널 그린 컬러 팔레트

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-30 07:30:07 +09:00
parent 7f71b5edb0
commit a4e9dc2dd8
4 changed files with 816 additions and 1644 deletions

View File

@@ -1,195 +1,211 @@
<!DOCTYPE html>
<html lang="ko" class="scroll-smooth">
<html class="dark scroll-smooth" lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>이용약관 - Anvil Hosting</title>
<!-- Tailwind CSS -->
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<link rel="stylesheet" href="fonts.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230ea5e9' rx='20' width='100' height='100'/><text x='50' y='70' font-size='60' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>A</text></svg>">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#3fb950",
"background-dark": "#0d1117",
"terminal-bg": "#010409",
"terminal-border": "#30363d",
"terminal-text": "#c9d1d9",
"terminal-muted": "#8b949e",
"terminal-cyan": "#58a6ff",
"terminal-amber": "#d29922",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"mono": ["Fira Code", "monospace"],
},
},
},
}
</script>
<style>
.line-num { color: #484f58; user-select: none; min-width: 2.5rem; text-align: right; padding-right: 1rem; }
</style>
</head>
<body class="font-sans antialiased bg-dark-900 text-slate-300">
<body class="bg-background-dark text-terminal-text font-mono min-h-screen flex flex-col p-4 md:p-8">
<!-- Header -->
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<a href="/" class="flex items-center gap-2 group">
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div>
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span>
</a>
<a href="/" class="text-sm text-slate-400 hover:text-white transition">← 메인으로</a>
<div class="w-full max-w-4xl mx-auto bg-background-dark border border-terminal-border rounded-lg overflow-hidden flex flex-col">
<!-- Window Title Bar -->
<div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-terminal-border">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
</div>
</nav>
<span class="text-xs text-terminal-muted">cat /etc/anvil/terms.md</span>
<a href="/" class="text-xs text-terminal-muted hover:text-primary transition">cd ~</a>
</div>
<!-- Main Content -->
<main class="pt-24 pb-16">
<div class="max-w-4xl mx-auto px-6">
<!-- Page Header -->
<div class="mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4">이용약관</h1>
<p class="text-slate-400">최종 수정일: 2026년 1월 20일</p>
<!-- Content -->
<div class="p-6 md:p-8 space-y-8">
<!-- Header -->
<div class="border-b border-terminal-border pb-6">
<div class="flex items-center gap-2 text-sm text-terminal-muted mb-4">
<span class="text-primary">$</span> cat terms.md
</div>
<!-- Terms Content -->
<div class="glass-card p-8 md:p-12 rounded-2xl space-y-12">
<!-- Section 1 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제1조 (목적)</h2>
<p class="text-slate-300 leading-relaxed">
본 약관은 LIBEHAIM Inc.(이하 "회사")가 제공하는 Anvil Hosting 서비스(이하 "서비스")의 이용과 관련하여 회사와 이용자 간의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
</p>
</section>
<!-- Section 2 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제2조 (정의)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p><strong class="text-white">1. "서비스"</strong>란 회사가 제공하는 클라우드 컨테이너 호스팅 및 관련 서비스 일체를 의미합니다.</p>
<p><strong class="text-white">2. "이용자"</strong>란 본 약관에 동의하고 회사가 제공하는 서비스를 이용하는 개인 또는 법인을 의미합니다.</p>
<p><strong class="text-white">3. "계정"</strong>이란 이용자가 서비스를 이용하기 위해 회사가 부여한 고유 식별정보를 의미합니다.</p>
<p><strong class="text-white">4. "인스턴스"</strong>란 이용자가 서비스를 통해 생성하는 가상 서버 환경을 의미합니다.</p>
</div>
</section>
<!-- Section 3 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제3조 (약관의 효력 및 변경)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 본 약관은 서비스를 이용하고자 하는 모든 이용자에 대하여 그 효력을 발생합니다.</p>
<p>2. 회사는 필요한 경우 관련 법령을 위배하지 않는 범위에서 본 약관을 변경할 수 있으며, 변경된 약관은 서비스 내 공지사항을 통해 공지됩니다.</p>
<p>3. 이용자는 변경된 약관에 동의하지 않을 경우 서비스 이용을 중단하고 탈퇴할 수 있습니다.</p>
</div>
</section>
<!-- Section 4 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제4조 (회원가입 및 계정 관리)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 서비스 이용을 위해서는 회사가 정한 절차에 따라 회원가입을 완료해야 합니다.</p>
<p>2. 이용자는 계정정보의 관리 책임을 지며, 타인에게 자신의 계정을 양도하거나 대여할 수 없습니다.</p>
<p>3. 이용자는 계정정보가 도용되거나 제3자가 사용하고 있음을 인지한 경우 즉시 회사에 통보해야 합니다.</p>
<p>4. 회사는 다음 각 호에 해당하는 경우 회원가입을 거부하거나 사후에 계정을 해지할 수 있습니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>타인의 정보를 도용한 경우</li>
<li>허위 정보를 기재한 경우</li>
<li>법령 또는 본 약관을 위반한 경우</li>
</ul>
</div>
</section>
<!-- Section 5 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제5조 (서비스 이용료 및 결제)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 서비스 이용료는 회사가 정한 요금표에 따르며, 웹사이트 또는 공식 채널을 통해 공지됩니다.</p>
<p>2. 이용자는 선택한 결제 방식(월간/연간)에 따라 서비스 이용료를 납부해야 합니다.</p>
<p>3. 이용료는 VAT가 포함된 금액이며, 결제 시점의 환율에 따라 변동될 수 있습니다.</p>
<p>4. 이용자가 이용료를 납부하지 않을 경우 회사는 서비스 제공을 일시 중단하거나 해지할 수 있습니다.</p>
<p>5. 환불 정책은 다음과 같습니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>서비스 이용 전: 전액 환불</li>
<li>서비스 이용 후 7일 이내: 사용일수를 제외한 금액 환불</li>
<li>서비스 이용 후 7일 이후: 환불 불가 (단, 회사의 귀책사유가 있는 경우 제외)</li>
</ul>
</div>
</section>
<!-- Section 6 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제6조 (금지 행위)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>이용자는 다음 각 호의 행위를 해서는 안 됩니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>불법 콘텐츠(아동 학대물, 저작권 침해물 등)의 저장, 배포 또는 전송</li>
<li>스팸 메일 또는 불법 광고 발송</li>
<li>해킹, DDoS 공격 등 타인의 시스템을 공격하는 행위</li>
<li>무단 암호화폐 채굴 행위</li>
<li>과도한 네트워크 트래픽 발생으로 서비스 안정성을 저해하는 행위</li>
<li>회사의 서비스 운영을 방해하는 행위</li>
<li>관련 법령을 위반하는 행위</li>
</ul>
<p>회사는 위반 행위 발견 시 사전 통지 없이 서비스 이용을 제한하거나 계정을 해지할 수 있습니다.</p>
</div>
</section>
<!-- Section 7 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제7조 (서비스 중단 및 해지)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 회사는 다음 각 호의 경우 서비스 제공을 일시 중단할 수 있습니다.</p>
<ul class="list-disc list-inside ml-4 space-y-2">
<li>시스템 점검, 보수, 교체 등 기술적 사유</li>
<li>천재지변, 국가비상사태 등 불가항력적 사유</li>
<li>기타 서비스 제공이 어려운 경우</li>
</ul>
<p>2. 이용자는 언제든지 서비스 해지를 요청할 수 있으며, 회사는 즉시 처리합니다.</p>
<p>3. 서비스 해지 시 이용자의 모든 데이터는 삭제되며, 복구되지 않습니다.</p>
</div>
</section>
<!-- Section 8 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제8조 (면책 조항)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 회사는 천재지변, 전쟁, 테러 등 불가항력적 사유로 인한 서비스 중단에 대해 책임을 지지 않습니다.</p>
<p>2. 회사는 이용자의 귀책사유로 인한 서비스 이용 장애에 대해 책임을 지지 않습니다.</p>
<p>3. 회사는 이용자가 서비스를 통해 저장하거나 전송한 데이터의 내용에 대해 책임을 지지 않습니다.</p>
<p>4. 이용자는 자신의 데이터에 대한 백업 책임을 지며, 회사는 데이터 손실에 대해 책임을 지지 않습니다. (단, SLA에서 정한 경우 제외)</p>
</div>
</section>
<!-- Section 9 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제9조 (분쟁 해결)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>1. 본 약관과 관련된 분쟁은 회사와 이용자 간의 협의를 통해 해결합니다.</p>
<p>2. 협의가 이루어지지 않을 경우, 일본 도쿄 지방법원을 전속 관할법원으로 합니다.</p>
<p>3. 본 약관의 해석 및 적용은 대한민국 법령 및 일본 법령을 우선 적용합니다.</p>
</div>
</section>
<!-- Section 10 -->
<section>
<h2 class="text-2xl font-bold text-white mb-4">제10조 (연락처)</h2>
<div class="space-y-3 text-slate-300 leading-relaxed">
<p>서비스 관련 문의사항은 아래 연락처로 문의하시기 바랍니다.</p>
<ul class="list-none ml-4 space-y-2">
<li><strong class="text-white">회사명:</strong> LIBEHAIM Inc.</li>
<li><strong class="text-white">대표:</strong> Taro Tanaka</li>
<li><strong class="text-white">주소:</strong> #202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</li>
<li><strong class="text-white">서비스 URL:</strong> <a href="https://hosting.anvil.it.com" class="text-brand-400 hover:underline">https://hosting.anvil.it.com</a></li>
<li><strong class="text-white">고객 지원:</strong> <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="text-brand-400 hover:underline">@AnvilForgeBot</a> (Telegram)</li>
</ul>
</div>
</section>
</div>
<!-- Back to Home -->
<div class="mt-12 text-center">
<a href="/" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 transition">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
메인 페이지로 돌아가기
</a>
</div>
<h1 class="text-2xl md:text-3xl font-display font-bold text-white mb-2"># 이용약관</h1>
<p class="text-terminal-muted text-sm">// 최종 수정일: 2026년 1월 20일</p>
</div>
</main>
<!-- Footer -->
<footer class="py-8 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6 text-center text-sm text-slate-500">
<p>© 2026 LIBEHAIM Inc. All rights reserved.</p>
<!-- Section 1 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제1조 (목적)</h2>
<p class="text-terminal-text leading-relaxed pl-4 border-l-2 border-terminal-border">
본 약관은 LIBEHAIM Inc.(이하 "회사")가 제공하는 Anvil Hosting 서비스(이하 "서비스")의 이용과 관련하여 회사와 이용자 간의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
</p>
</section>
<!-- Section 2 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제2조 (정의)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm space-y-2">
<div class="flex"><span class="line-num">1</span><span><span class="text-terminal-cyan">"서비스"</span> = 회사가 제공하는 클라우드 컨테이너 호스팅 및 관련 서비스 일체</span></div>
<div class="flex"><span class="line-num">2</span><span><span class="text-terminal-cyan">"이용자"</span> = 본 약관에 동의하고 서비스를 이용하는 개인 또는 법인</span></div>
<div class="flex"><span class="line-num">3</span><span><span class="text-terminal-cyan">"계정"</span> = 이용자가 서비스를 이용하기 위해 부여된 고유 식별정보</span></div>
<div class="flex"><span class="line-num">4</span><span><span class="text-terminal-cyan">"인스턴스"</span> = 이용자가 서비스를 통해 생성하는 가상 서버 환경</span></div>
</div>
</section>
<!-- Section 3 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제3조 (약관의 효력 및 변경)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 본 약관은 서비스를 이용하고자 하는 모든 이용자에 대하여 그 효력을 발생합니다.</p>
<p><span class="text-primary">2.</span> 회사는 필요한 경우 관련 법령을 위배하지 않는 범위에서 본 약관을 변경할 수 있습니다.</p>
<p><span class="text-primary">3.</span> 이용자는 변경된 약관에 동의하지 않을 경우 서비스 이용을 중단하고 탈퇴할 수 있습니다.</p>
</div>
</section>
<!-- Section 4 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제4조 (회원가입 및 계정 관리)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 서비스 이용을 위해서는 회사가 정한 절차에 따라 회원가입을 완료해야 합니다.</p>
<p><span class="text-primary">2.</span> 이용자는 계정정보의 관리 책임을 지며, 타인에게 양도하거나 대여할 수 없습니다.</p>
<p><span class="text-primary">3.</span> 계정 도용 인지 시 즉시 회사에 통보해야 합니다.</p>
<p><span class="text-primary">4.</span> 회원가입 거부/해지 사유:</p>
<div class="bg-terminal-bg rounded p-3 mt-2 text-sm border border-terminal-border">
<p class="text-terminal-amber">- 타인의 정보 도용</p>
<p class="text-terminal-amber">- 허위 정보 기재</p>
<p class="text-terminal-amber">- 법령 또는 약관 위반</p>
</div>
</div>
</section>
<!-- Section 5 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제5조 (서비스 이용료 및 결제)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 서비스 이용료는 회사가 정한 요금표에 따릅니다.</p>
<p><span class="text-primary">2.</span> 이용자는 선택한 결제 방식(월간/연간)에 따라 납부해야 합니다.</p>
<p><span class="text-primary">3.</span> 이용료는 VAT 포함 금액이며, 환율에 따라 변동될 수 있습니다.</p>
<p><span class="text-primary">4.</span> 미납 시 서비스 제공 중단 또는 해지될 수 있습니다.</p>
<p><span class="text-primary">5.</span> 환불 정책:</p>
<div class="bg-terminal-bg rounded p-3 mt-2 text-sm border border-terminal-border">
<p><span class="text-primary"></span> 이용 전: <span class="text-primary">전액 환불</span></p>
<p><span class="text-terminal-amber"></span> 이용 후 7일 이내: <span class="text-terminal-amber">사용일수 제외 환불</span></p>
<p><span class="text-terminal-muted"></span> 이용 후 7일 이후: <span class="text-terminal-muted">환불 불가</span></p>
</div>
</div>
</section>
<!-- Section 6 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제6조 (금지 행위)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p class="text-terminal-muted mb-3"># 다음 행위는 금지됩니다:</p>
<p class="text-[#ff7b72]">❌ 불법 콘텐츠 저장/배포/전송</p>
<p class="text-[#ff7b72]">❌ 스팸 메일 또는 불법 광고 발송</p>
<p class="text-[#ff7b72]">❌ 해킹, DDoS 공격 등 시스템 공격</p>
<p class="text-[#ff7b72]">❌ 무단 암호화폐 채굴</p>
<p class="text-[#ff7b72]">❌ 과도한 트래픽으로 서비스 안정성 저해</p>
<p class="text-[#ff7b72]">❌ 서비스 운영 방해</p>
<p class="text-[#ff7b72]">❌ 관련 법령 위반</p>
<p class="text-terminal-amber mt-3">⚠️ 위반 시 사전 통지 없이 서비스 제한/계정 해지</p>
</div>
</section>
<!-- Section 7 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제7조 (서비스 중단 및 해지)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 서비스 중단 사유: 시스템 점검, 천재지변, 불가항력적 사유</p>
<p><span class="text-primary">2.</span> 이용자는 언제든지 서비스 해지를 요청할 수 있습니다.</p>
<p><span class="text-terminal-amber">3.</span> 해지 시 모든 데이터는 삭제되며 복구되지 않습니다.</p>
</div>
</section>
<!-- Section 8 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제8조 (면책 조항)</h2>
<div class="space-y-2 text-terminal-muted pl-4 text-sm">
<p><span class="text-terminal-muted">1.</span> 불가항력적 사유로 인한 서비스 중단 - 면책</p>
<p><span class="text-terminal-muted">2.</span> 이용자 귀책사유로 인한 이용 장애 - 면책</p>
<p><span class="text-terminal-muted">3.</span> 이용자가 저장/전송한 데이터 내용 - 면책</p>
<p><span class="text-terminal-muted">4.</span> 데이터 손실 (SLA 제외) - 면책</p>
</div>
</section>
<!-- Section 9 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제9조 (분쟁 해결)</h2>
<div class="space-y-2 text-terminal-text pl-4">
<p><span class="text-primary">1.</span> 분쟁은 회사와 이용자 간 협의를 통해 해결합니다.</p>
<p><span class="text-primary">2.</span> 협의 불가 시 일본 도쿄 지방법원을 전속 관할법원으로 합니다.</p>
<p><span class="text-primary">3.</span> 대한민국 법령 및 일본 법령을 우선 적용합니다.</p>
</div>
</section>
<!-- Section 10 -->
<section class="space-y-3">
<h2 class="text-lg font-display font-bold text-terminal-cyan">## 제10조 (연락처)</h2>
<div class="bg-terminal-bg rounded border border-terminal-border p-4 text-sm">
<p><span class="text-terminal-cyan">company</span> = <span class="text-primary">"LIBEHAIM Inc."</span></p>
<p><span class="text-terminal-cyan">ceo</span> = <span class="text-primary">"Taro Tanaka"</span></p>
<p><span class="text-terminal-cyan">address</span> = <span class="text-primary">"#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo"</span></p>
<p><span class="text-terminal-cyan">url</span> = <a href="https://hosting.anvil.it.com" class="text-primary hover:underline">"https://hosting.anvil.it.com"</a></p>
<p><span class="text-terminal-cyan">support</span> = <a href="https://t.me/AnvilForgeBot" class="text-primary hover:underline">"@AnvilForgeBot"</a></p>
</div>
</section>
<!-- Back -->
<div class="pt-6 border-t border-terminal-border">
<a href="/" class="text-primary hover:underline text-sm">$ cd / # 메인으로 돌아가기</a>
</div>
</footer>
</div>
<!-- Vim Status Bar -->
<div class="bg-primary text-background-dark text-xs font-bold py-1 px-4 flex justify-between">
<div class="flex gap-4">
<span class="bg-background-dark/20 px-2 rounded text-white/90">NORMAL</span>
<span>terms.md</span>
</div>
<div class="flex gap-4">
<span>utf-8</span>
<span>100%</span>
</div>
</div>
</div>
<footer class="mt-6 text-terminal-muted text-xs text-center opacity-50">
© 2026 LIBEHAIM Inc. exit 0
</footer>
</body>
</html>