obsidian/history/2026-04-21-ironclad-redesign.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

4.8 KiB

Raw Blame History

title, updated, tags

title

updated

요약

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 세팅

claude.ai/design 에서 Ironclad Design System 생성 (project id a17ceb77-c652-44dd-ad39-71f9afd98074)
- Company blurb에 staging 톤, 카피 규칙, 내부 벤더 은닉 규칙 전부 주입
- 라이트 + 민트 그린 팔레트, Urbanist/Nunito Sans/JetBrains Mono 자동 설정
보안서비스 페이지 프로젝트 생성 (ironclad-security-v2, id 6a3e45a2-459f-4301-baac-57098282105f)
프롬프트 투입 후 11개 컴포넌트(Nav/Hero/Defense 2/Value 2/Console 2/Pricing 3) 생성
"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으로 리디자인 가능성 검토

4.8 KiB Raw Blame History

요약

배경