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 본체 교체 경위 기록.

history/2026-04-21-ironclad-redesign.md

@@ -0,0 +1,72 @@
+---
+title: 2026-04-21 Ironclad 홈페이지 재구성 (Claude Design 도입)
+updated: 2026-04-21
+tags: [history, ironclad, website, claude-design]
+---
+
+## 요약
+
+Ironclad 홈페이지(ironclad.it.com)의 보안서비스 페이지(`/ko/security`)를 Claude Design 기반으로 전면 재구성. Obsidian 정본을 Astro+Stitch 계획에서 실제 구현(Next.js 16 + Claude Design)으로 동기화.
+
+## 배경
+
+- 기존 정본 `products/ironclad-website.md`는 "Astro + Google Stitch + Tailwind + cf-multisite 배포" 계획을 담고 있었지만, 실제 배포는 이미 **Next.js 16 + opennextjs-cloudflare + 독자 Worker**로 진행된 상태였음 (hosting/ironclad Gitea repo, 2026-04-02 시작)
+- `kaffa/anvil-hosting`(hosting.inouter.com)은 이전 실험으로 폐기된 상태지만 정본에 반영 안 됨
+- Cloudflare Workers에 `ironclad-site`(prod) / `ironclad-site-staging` / `ironclad-site-preview` 3환경 존재, R2 캐시 3버킷 공존
+- 정본과 실제 코드 간 갭이 커서 이번 재구성과 함께 정본 업데이트
+
+## 작업 내용
+
+### Claude Design 세팅
+1. claude.ai/design 에서 **Ironclad Design System** 생성 (project id `a17ceb77-c652-44dd-ad39-71f9afd98074`)
+   - Company blurb에 staging 톤, 카피 규칙, 내부 벤더 은닉 규칙 전부 주입
+   - 라이트 + 민트 그린 팔레트, Urbanist/Nunito Sans/JetBrains Mono 자동 설정
+2. 보안서비스 페이지 프로젝트 생성 (`ironclad-security-v2`, id `6a3e45a2-459f-4301-baac-57098282105f`)
+3. 프롬프트 투입 후 11개 컴포넌트(Nav/Hero/Defense 2/Value 2/Console 2/Pricing 3) 생성
+4. "Export as standalone HTML" → 단일 HTML 번들 수령
+
+### staging 배포 검증 (1차)
+- `public/security-preview.html`에 standalone HTML 저장 → main push → Gitea Actions로 staging 자동 배포 성공 (`https://staging.ironclad.it.com/security-preview`, 2분 소요)
+- 디자인 일관성 확인 후 본체 교체 결정
+
+### 본체 교체
+- JSX 6개 컴포넌트 파일을 `src/components/security-v2/*.tsx`로 변환 (`curl` 다운로드 + sed/perl 일괄 수정)
+- `const { useState } = React` → `import { useState } from 'react'`
+- `window.__resources` fallback 제거 → `/assets/xxx.svg`로 직접 경로
+- 모듈 스코프 `window.X = X` 할당 제거
+- Tailwind 엄격 타입체크 회피를 위해 `// @ts-nocheck` 추가
+- `src/app/[locale]/security/page.tsx` 재작성 (Layout Header·Footer 유지, Nav 컴포넌트는 중복이라 제외)
+- 2개 SVG를 `public/assets/` 배치
+
+### 트러블슈팅
+- 1차 배포 후 500 에러 → `next dev` 로 재현 → `React.useState`가 import 없이 쓰여서 `ReferenceError: React is not defined` (Pricing.tsx SecurityFAQ)
+- 해결: 해당 파일에 `import * as React from 'react'` 추가 → fix 커밋 후 재배포로 HTTP 200 확인
+
+## 변경 파일
+
+| 경로 | 변경 |
+|------|------|
+| `hosting/ironclad` `src/app/[locale]/security/page.tsx` | 기존 Container 기반 → security-v2 컴포넌트 조합 |
+| `hosting/ironclad` `src/components/security-v2/` 신규 | Hero/Defense/Value/Console/Pricing (+Nav 미사용) 6 TSX |
+| `hosting/ironclad` `public/assets/` 신규 | logo-white.svg, hero-shield.svg |
+| `obsidian` `products/ironclad-website.md` | 기술 스택·배포·디자인 시스템 전면 갱신, anvil 폐기 기록 |
+
+## 커밋 (hosting/ironclad)
+
+- `b6dbf61` feat: add security-preview.html (Claude Design standalone)
+- `c2093ce` feat(security): Claude Design 기반 /ko/security 본체 교체
+- `5fcef59` fix(security-v2): add 'import * as React' to Pricing.tsx (ReferenceError on SSR)
+
+## 학습 포인트
+
+- Claude Design의 "Export as standalone HTML"은 파일 다운로드가 아니라 **Claude에게 번들링 작업을 지시**하는 액션. 결과물은 프로젝트 Design Files에 추가되고 signed URL로 fetch 가능.
+- Claude Design이 만드는 JSX는 browser-only(babel standalone) 전제라 `React.xxx` 접근과 `window.Name = Name` 모듈 스코프 할당이 자연스러움. Next.js SSR로 이식 시 이 두 패턴을 일괄 정리해야 함.
+- 라이트 테마 + 민트 그린 조합은 Stripe/Vercel류 다크 프리미엄 톤보다 한국 B2B SaaS 친화적. Obsidian 정본의 "다크 + 프리미엄" 전제가 실제 제품 방향과 어긋나 있었음 → 정본이 코드보다 뒤처져 있었던 사례.
+- `hosting/ironclad` Gitea repo는 **private**이라 토큰 없이 curl하면 404. 자동화 탐색 시 Vault에서 토큰을 미리 받아야 전체 repo 목록 보임.
+
+## 후속 과제
+
+- `graphify update ~/obsidian` 실행하여 새 파일 인덱싱
+- `/ko/security` 페이지 품질·성능 실측 (Lighthouse), 필요시 Claude Design Tweaks로 반복
+- production 배포 전 추가 검증: `deploy-production.yml`은 수동 workflow_dispatch 트리거
+- 향후 `/ko/pricing` 등 다른 페이지도 같은 Design System으로 리디자인 가능성 검토