---
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으로 리디자인 가능성 검토