3dfceb81b7
products/ironclad-website.md: 배포 표에 라우팅 방식 컬럼 추가. production만 zone route 방식(custom_domain 대신 zone_name + /*)을 써서 기존 APISIX A record를 건드리지 않고 Cloudflare 엣지에서 Worker가 매칭 요청을 가로채는 구조. 전제 조건(crowdsec bouncer wildcard가 apex를 가로채지 않도록 *.ironclad.it.com/* 수정) 명시. history/2026-04-21: 3차에 걸친 cutover 경로(DNS 충돌 → route 전환 → crowdsec wildcard dot 누락 수정) + 현재 prod 상태 + 후속 정리 항목.
142 lines
9.5 KiB
Markdown
142 lines
9.5 KiB
Markdown
---
|
|
title: Ironclad 홈페이지
|
|
updated: 2026-04-21
|
|
tags: [product, website, design]
|
|
---
|
|
|
|
## 개요
|
|
|
|
ironclad.it.com 공식 홈페이지. 호스팅 상품 소개, 가격표, 회사 소개, 보안서비스 전용 랜딩 포함.
|
|
|
|
- **정본 코드**: [hosting/ironclad](https://gitea.inouter.com/hosting/ironclad) (Gitea, private)
|
|
- **이전 실험 폐기**: `kaffa/anvil-hosting` + `hosting.inouter.com`은 2026-03 중순까지 실험 후 폐기. 최종 브랜드는 **Ironclad**로 통합.
|
|
|
|
## 기술 스택
|
|
|
|
| 항목 | 선택 | 이유 |
|
|
|------|------|------|
|
|
| 프레임워크 | **Next.js 16.2.3** (App Router) | Cloudflare Workers 완전 지원(`@opennextjs/cloudflare`), 동적 라우트 + 정적 생성 혼용, 다국어 `[locale]` 세그먼트 |
|
|
| 디자인 도구 | **Claude Design** + 자체 Design System | 디자인 시스템 사전 설정 → 일관 톤 자동 유지. 영상 리뷰·실사용 검증 완료 (2026-04-21) |
|
|
| 스타일 | **Tailwind CSS v4** (`@tailwindcss/postcss`) | Next.js 16 공식 권장, OKLCH 네이티브 |
|
|
| 배포 | **opennextjs-cloudflare + Wrangler** | Worker + R2 캐시, `pnpm deploy:{staging,preview,production}` 일원화 |
|
|
| 다국어 | `[locale]` App Router 세그먼트 (현재 `ko`만 활성) | `SUPPORTED_LOCALES = ['ko']` — 영/일 추가 시 배열만 확장 |
|
|
| 패키지 매니저 | pnpm 10 | lockfile 재현성 |
|
|
|
|
## 배포 아키텍처
|
|
|
|
```
|
|
개발 → hosting/ironclad repo push (main 브랜치)
|
|
→ Gitea Actions (.gitea/workflows/deploy-{staging,preview,production}.yml)
|
|
→ pnpm install → opennextjs-cloudflare build → wrangler deploy --env=<env>
|
|
→ Worker ironclad-site-{staging|preview|} + R2 ironclad-cache-{staging|preview|prod}
|
|
```
|
|
|
|
| 환경 | Worker | R2 버킷 | 도메인 | 배포 트리거 | 라우팅 방식 |
|
|
|------|--------|---------|--------|------------|------------|
|
|
| production | `ironclad-site` | `ironclad-cache-prod` | `ironclad.it.com` · `www.ironclad.it.com` | `v*` 태그 push (`deploy-production.yml`) | **zone route** (`pattern: ironclad.it.com/*, zone_name: ironclad.it.com`) — 기존 A record(APISIX 172.233.93.180) 유지, Worker가 엣지에서 가로챔 |
|
|
| staging | `ironclad-site-staging` | `ironclad-cache-staging` | `staging.ironclad.it.com` | main push 자동 (`deploy-staging.yml`) | `custom_domain: true` |
|
|
| preview | `ironclad-site-preview` | `ironclad-cache-preview` | `preview.ironclad.it.com` | manual workflow_dispatch (`deploy-preview.yml`) | `custom_domain: true` |
|
|
|
|
**왜 production만 zone route?** apex 도메인(`ironclad.it.com`)은 이미 APISIX origin을 가리키는 A record가 등록되어 있어 wrangler의 `custom_domain` 등록이 실패(`code: 100117`). `custom_domain` 대신 zone route를 쓰면 기존 DNS 레코드를 건드리지 않고 Cloudflare 엣지에서 Worker가 매칭된 요청만 처리. 롤백 시 DNS 수동 복구 불필요.
|
|
|
|
**전제 조건**: Cloudflare zone에 등록된 Worker route 중 apex를 가로채는 wildcard가 없어야 한다. [[crowdsec-safeline|crowdsec-cloudflare-worker-bouncer]]의 zone route가 `*ironclad.it.com/*`로 오설정되어 있었고 이걸 `*.ironclad.it.com/*`로 수정해야 apex가 `ironclad-site` Worker로 직행 (2026-04-21 조치).
|
|
|
|
- 공통 KV: `CROWDSECCFBOUNCERNS` (id `9af0d1c1c14a4bc1a3835c2a5b22fd7a`) — CrowdSec bouncer 미들웨어 상태 공유
|
|
- 배포 후 smoke test: `curl -skL -w '%{http_code}' https://<domain>/` 5xx면 실패
|
|
|
|
## 디자인 시스템 (Claude Design 관리)
|
|
|
|
Claude Design의 Design System 기능으로 관리. 프로젝트 ID `a17ceb77-c652-44dd-ad39-71f9afd98074` ("Ironclad Design System").
|
|
|
|
- **팔레트**: 라이트 베이스(#ffffff / #f8fafc) + 민트·에메랄드 그린 액센트 (oklch emerald 계열). 헤더만 다크 네이비 고정.
|
|
- **타이포**: Urbanist (display), Nunito Sans (body), JetBrains Mono (코드·수치). 모두 Google Fonts, `next/font/google` 주입.
|
|
- **아이콘**: Lucide 라인 아이콘 (민트 둥근 사각형 배경 + 녹색 outline).
|
|
- **모션**: 부드러운 페이드 업, 플로팅 배지 `fbA`/`fbB` keyframe, 네비 scroll elevation.
|
|
- **전체 인상**: Vercel/Linear/Resend 스타일 라이트 B2B SaaS.
|
|
|
|
## 페이지 구성
|
|
|
|
| 경로 | 내용 | 구현 위치 |
|
|
|------|------|-----------|
|
|
| `/ko` | 히어로 + 상품 카테고리 4개 + "Ironclad만의 7가지 이유" + 가격 + 푸터 | `src/app/[locale]/page.tsx` |
|
|
| `/ko/security` | **보안서비스 전용 랜딩** — Hero / 다계층 방어 체계 / DDoS 표 / 6개 장점 카드 / 글로벌 엣지 / 대시보드 프리뷰 / 온보딩 5단계 / 가격 / FAQ / SLA 푸터 | `src/app/[locale]/security/page.tsx` + `src/components/security-v2/*.tsx` (Hero·Defense·Value·Console·Pricing) |
|
|
| `/ko/pricing` | 리전별 가격표, 비교표 ([[ironclad-hosting-products]]) | `src/app/[locale]/pricing/page.tsx` |
|
|
| `/ko/cases` | 사례 | `src/app/[locale]/cases/page.tsx` |
|
|
| `/ko/about` · `/ko/contact` · `/ko/demo` · `/ko/docs/quickstart` · `/ko/legal/*` · `/ko/sla` · `/ko/privacy` · `/ko/terms` | 회사 소개, 문의, 무료 체험, 문서, 법률/약관, SLA | `src/app/[locale]/...` |
|
|
|
|
## 보안서비스 페이지 콘텐츠 규칙
|
|
|
|
주력 상품 보안서비스 페이지는 공정거래 규제 준수 + 내부 기술 스택 은닉이 엄격하게 적용된다.
|
|
|
|
### 핵심 원칙
|
|
- 내부 기술 스택명(BunnyCDN, SafeLine, CrowdSec) 노출 금지
|
|
- 고객 관점에서 "무엇을 어떻게 막아주는가"에 집중
|
|
- 아이언클래드 자체 브랜딩으로 포장
|
|
- 과대광고/부당비교 금지 — 공정거래위원회 부당광고 규제 준수
|
|
|
|
### 다계층 방어 체계 표현
|
|
|
|
위협 인텔리전스 → 엣지 WAF → ML 심층 WAF → 로그 분석이 하나의 **순환 피드백 루프**로 동작하는 구조. 고객에게는 시각적 다이어그램으로 루프를 **방향성 화살표 포함**하여 표시.
|
|
|
|
| 계층 | 고객 표현 | 내부 기술 | 설명 |
|
|
|------|----------|----------|------|
|
|
| 엣지 차단 | 글로벌 위협 인텔리전스 | CrowdSec bloom filter | 글로벌 커뮤니티 기반 악성 IP DB로 엣지에서 즉시 차단, 3분 주기 갱신, 오탐 시 CAPTCHA 구제 |
|
|
| 1차 WAF | 엣지 웹 방화벽 (WAF) | BunnyCDN WAF (OWASP CRS) | OWASP Top 10 (SQLi, XSS, RCE, SSRF, Log4j, Shellshock) 차단 |
|
|
| 2차 WAF | 머신러닝 기반 이상 탐지 방화벽 | SafeLine WAF | ML 기반 트래픽/요청 본문 심층 분석, 룰 기반이 놓치는 변형 공격 탐지 |
|
|
| 로그 분석 | 실시간 로그 분석 & 자동 차단 | CrowdSec 시나리오 | HTTP 프로빙/크롤링/백도어 탐지 → 위협 인텔리전스 DB에 자동 피드백 |
|
|
|
|
> **금지 표현**: "4중 보안", "5중 방어" 같은 숫자 마케팅. 엣지 차단과 로그 분석은 동일 시스템(CrowdSec)의 입출력이므로 독립 계층으로 세지 않는다. "다계층 방어 체계" 또는 "3단계 WAF + 위협 인텔리전스 피드백 루프"로 표현.
|
|
|
|
### DDoS 방어 — L3~L7 전 계층
|
|
|
|
| 계층 | 공격 유형 | 방어 방식 |
|
|
|------|----------|----------|
|
|
| L3/L4 | UDP Flood, SYN Flood, 볼류메트릭 | 글로벌 엣지 네트워크 흡수 |
|
|
| L7 | HTTP Flood, Slowloris, 봇 공격 | 행동 분석 + Proof-of-Work 챌린지 |
|
|
| L7 | SQLi, XSS, RCE | 엣지 WAF + ML 심층 방화벽 이중 차단 |
|
|
| L7 | 크롤링, 프로빙, 백도어 시도 | 실시간 로그 분석 → 자동 차단 |
|
|
|
|
> "200+ Tbps"는 CDN 네트워크 총합 용량이지 고객별 할당이 아님. 수치 사용 시 "글로벌 CDN 네트워크 총 200+ Tbps 용량 기반" 명시하거나 수치 없이 "글로벌 엣지 네트워크"로.
|
|
|
|
### 아이언클래드 보안의 장점 (경쟁사 비교 대체)
|
|
|
|
> 경쟁사 비교표 금지. "일반 CDN/WAF" 부당비교는 공정거래위원회 규제 대상.
|
|
|
|
- L3~L7 전 계층 DDoS 방어
|
|
- 엣지 WAF + ML 심층 방화벽 이중 구조
|
|
- 글로벌 크라우드소싱 위협 인텔리전스 + 자동 피드백 루프
|
|
- DNS 연결만으로 간편 적용
|
|
- 보안 올인원 패키지: CDN + WAF + SSL + 위협 인텔리전스 (서버 비용 별도)
|
|
|
|
### 가격
|
|
- 99 크레딧 / 월 / 사이트 (1 크레딧 = $1, 원화 환산 병기)
|
|
- 포함: CDN + WAF + SSL + 위협 인텔리전스 + 보안 대시보드
|
|
- 서버 비용 별도
|
|
- 트래픽 초과 티어: 1~5TB $0.05/GB, 5~20TB $0.04/GB, 20TB+ 협의
|
|
|
|
### 온보딩 5단계
|
|
서비스 신청 → DNS 변경 (CNAME) → SSL 자동 발급 → WAF 자동 활성화 → 대시보드 접속
|
|
|
|
> "원클릭 적용" 금지 — DNS 변경은 고객 측 작업. "DNS 연결만으로 간편 적용"으로.
|
|
|
|
### SLA 및 면책 (반드시 포함)
|
|
- CDN/WAF 서비스 가용성 99.9%
|
|
- 미달성 시 서비스 크레딧 보상 (10/25/50% 티어)
|
|
- 오탐 대응: 영업일 기준 1시간 이내 1차 응답, 24시간 이내 해결/우회
|
|
- 데이터 처리: 요청 로그 30일 후 자동 삭제, DPA 검토 가능
|
|
- 면책: 100% 차단 비보장, 고객 애플리케이션 취약점 제외, DDoS 용량 초과 한계
|
|
|
|
### FAQ 필수 항목
|
|
오탐 대응 / WebSocket 지원 / 1TB 초과 처리 / DDoS 트래픽 포함 여부 / 기존 CDN 마이그레이션 / 커스텀 WAF 룰 / 사고 알림 (최소 6개).
|
|
|
|
### 타깃 고객
|
|
- 1차: 별도 보안 인력이 없는 중소규모 웹사이트 운영자
|
|
- 2차: 기술 지식이 중간 수준인 의사결정자
|
|
- 향후 엔터프라이즈: 전용 IP, 커스텀 룰, 전담 지원 플랜 필요
|
|
|
|
## 관련 문서
|
|
|
|
- [[ironclad-corp]] — 회사 정보, 요금 플랜
|
|
- [[ironclad-hosting-products]] — 전체 상품 구성, 가격표
|
|
- [[cf-multisite]] — 별도 멀티테넌트 플랫폼 (`*.actions.it.com`). Ironclad 본체와 **무관** — Ironclad는 독자 Worker 사용.
|