obsidian/products/ironclad-website.md at 71aae4e374bebd70c99f5d95679585a209c1a233

Files

kaffa 71aae4e374 products/ironclad-website: Next.js 16 + Claude Design 전환 반영

기존 Astro+Stitch 계획을 실제 구현(Next.js 16 App Router, opennextjs-cloudflare,
독자 Worker 3환경) 기준으로 갱신. 보안서비스 페이지 섹션별 콘텐츠 규칙 정리.
anvil-hosting(hosting.inouter.com)은 폐기된 실험으로 명시.

history/2026-04-21: Claude Design 도입 + /ko/security 본체 교체 경위 기록.

2026-04-21 15:48:53 +09:00

8.5 KiB

Raw Blame History

title, updated, tags

title

updated

개요

ironclad.it.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`	manual workflow_dispatch (`deploy-production.yml`)
staging	`ironclad-site-staging`	`ironclad-cache-staging`	`staging.ironclad.it.com`	main push 자동 (`deploy-staging.yml`)
preview	`ironclad-site-preview`	`ironclad-cache-preview`	`preview.ironclad.it.com`	manual workflow_dispatch (`deploy-preview.yml`)

공통 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, 커스텀 룰, 전담 지원 플랜 필요

8.5 KiB Raw Blame History

개요