Claude DesignDESIGN
시각 시안
Editorial × Soft Brutalism 톤 정의, 컬러 토큰 결정, 카드 레이아웃, 다크 팔레트 분기.
← HOME
// DESIGN
디자인 히스토리.
시각 언어의 진화, AI 도구의 분업, 그리고 다음 4단계.
// 01 — 진화
v1 → v2
속성v1 (Slate)v2 (Editorial × Brutalism)
톤Slate 다크모드Editorial × Soft Brutalism
배경#0F172A (dark)#F4F1EA (off-white paper)
텍스트#F1F5F9#0A0A0A (ink)
강조#60A5FA + 그라디언트#FF5C28 only · 그라디언트 없음
모서리rounded-lgrounded-none
보더soft 1px1.5px solid ink
그림자blur shadow (rgba)4px 4px 0 ink (hard, blur 0)
타이포 헤드라인Pretendard 700Pretendard 800 · ls -0.04em
테마 전환다크 고정[data-theme] + system + URL ?theme=
// 02 — AI 분업
도구별 역할
Claude CodeBUILD
구현
Next.js 컴포넌트 변환, MDX 인프라, ToC IntersectionObserver, 토큰 정합화.
CursorMVP
초기 MVP
Phase 1 이전의 빠른 프로토타입 — 플렉시블, 노션 커스텀 대시보드. Tab 기반 인라인 코드 생성.
CodexREVIEW
리뷰 · 역검증
구현 후 코드 리뷰, 버그 탐색, 빌드/타입 점검. 같은 파일 동시 수정 금지로 분업.
Notion AI (노뚝이)DOCS
기록
세션로그 · ADR · 트러블슈팅 · TIL 자동 정리. Dev Log DB에 적재.
// 03 — 로드맵
다음 4단계
Phase 1
랜딩 + 포트폴리오
완료v1 디자인 (Slate 톤) Vercel 배포Hero · Portfolio · About · Featured · Contact 섹션Pretendard + JetBrains Mono 폰트 시스템
Phase 2
블로그 + SEO + v2 디자인
완료Editorial × Soft Brutalism 마이그레이션MDX 블로그 (/blog, /blog/[slug]) + ToC + CodeBlocksitemap · robots · OG · JSON-LD · GA · GSC다크모드 (system + manual + URL param)
Phase 3
스토어 · 결제 · 뉴스레터
예정Supabase Postgres 연결Stripe 결제 흐름디지털 상품 다운로드 게이트뉴스레터 구독
Phase 4
자동화 배포
예정n8n 멀티채널 자동 발행Notion → 블로그 동기화Dev Log 자동 백필