designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인

웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포.

스킬 (packages/skill)
- SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로
  본문은 절차와 인덱스만, 지식은 references/ 로 분리
- 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기
- 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외
- 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙,
  SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침

설치 CLI (packages/cli, packages/core)
- npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md
- 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다
- 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성
- AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입
- Windsurf 는 12,000자 상한 초과 시 설치를 차단

배포 (build/ci, .forgejo/workflows)
- 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러
  → draft 릴리스 → Cloudflare Pages. 재실행 멱등

근거 (research/)
- 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다

테스트 22개 통과 (core 16 · cli 6)

research/references/03-trends-2026.md

@@ -0,0 +1,325 @@
+# 03 — 2026 웹디자인 트렌드 실측
+
+> 기준 시점: **2026년 8월**. 수치는 각 출처가 밝힌 실측치이며, 출처는 05번 문서에 대응.
+> 트렌드 나열이 아니라 **"지금 실제로 이기고 있는 것 / 죽은 것"**을 구분하는 게 목적이다.
+
+---
+
+## 1. Awwwards 수상작 실측 (2026 Q1, SOTD 47건 기준)
+
+### 1.1 채점 구조 — 화려함은 4순위다
+
+| 항목 | 배점 | 의미 |
+|---|---|---|
+| Design | **40%** | 타이포 체계, 스케일 일관성, 리듬, 위계, 여백 긴장감 |
+| Usability | **30%** | 실제 기기에서의 성능·조작성 |
+| Creativity | **20%** | WebGL·인터랙션 등 "볼거리" |
+| Content | **10%** | 카피와 정보 |
+
+심사는 최소 18명의 심사위원에게 배분되며, 평균에서 가장 먼 3개 점수는 자동 제외된다. 투표 기간은 5일.
+
+> **핵심 시사점**: Design(40) + Usability(30) = 70%가 **타이포·그리드·성능**이다.
+> 화려한 3D를 추가하는 것보다 타입 스케일을 정돈하는 편이 점수에 2배 유리하다.
+
+### 1.2 2026 Q1 수상작 기술 분포
+
+| 항목 | 수치 |
+|---|---|
+| 몰입형 3D 경험 비중 | **61%** (2024 Q1 23% → 2.6배) |
+| Three.js를 주 렌더러로 사용 | 47건 중 **29건** |
+| 커스텀 WebGL(직접 셰이더) | 8건 |
+| Babylon.js | 4건 |
+| WebGL 미사용 | 6건 |
+| 스크롤 기반 서사 채택률 | 87% |
+| 카메라 스플라인 애니메이션 | 82% |
+| 커스텀 GLSL 셰이더 | 78% |
+| 물리 기반 인터랙션 | 71% |
+| 공간 오디오 | 54% |
+| WebXR | 31% |
+| 배경 비디오 사용 | **8% 미만** (2022년 40%+ → 급감) |
+
+**성능 기준**: 스크롤 중 60fps 유지, 애니메이션 루프 프레임당 4ms 미만.
+심사위원이 실제 기기에서 테스트하므로 중급 기기에서 버벅이면 탈락한다.
+
+**업종 분포**: 럭셔리 패션 28% / 자동차 22% / 건축·부동산 18% / 문화기관 14% / **테크·SaaS 5% 미만**.
+
+> **결정적 시사점**: Awwwards 수상작은 대부분 **SaaS가 아니다.**
+> SaaS 랜딩 브리프에 Awwwards 스타일을 그대로 적용하면 목적이 어긋난다.
+> Awwwards는 "야심의 상한선"으로만 쓰고, 구조는 Land-book·Refero에서 가져와라.
+
+### 1.3 2026년 실제 수상작 사례
+
+| 사이트 | URL | 수상 | 무엇이 통했나 |
+|---|---|---|---|
+| By-Kin | https://by-kin.com/ | Awwwards SOTD + Developer Award, FWA, CSSDA | 확신 있는 **에디토리얼 타이포**, 무게감 있는 스무스 스크롤, 티 안 나는 전환. Next.js + GSAP + Strapi |
+| Iventions | https://iventions.com/ | CSSDA Website of the Month, Awwwards SOTD | Three.js의 **조명 설계**로 프로젝트를 "스포트라이트 설치물"처럼 다룸. 화려함이 아닌 분위기 |
+| Mat Voyce | https://matvoyce.tv | Awwwards SOTD, GSAP SOTY 노미네이트 | 타임라인 기반 **키네틱 타입** — 글자가 늘어나고 붙는데 가독성은 유지 |
+| Uncommon Studio | https://uncommonstudio.com.au/ | Awwwards SOTD + Developer Award, FWA | 정확한 지점에서만 깨지는 그리드, 카메라 무빙 같은 GSAP 전환 |
+| Minh Pham | https://minhpham.design/ | Awwwards SOTD (개발 점수 7.77) | GSAP 모션 위에 Three.js — **3D가 작업물을 압도하지 않음** |
+
+공통점 4가지:
+1. **아트 디렉션이 하나의 아이디어로 통일**되어 있다. 장식된 템플릿이 아니다.
+2. **타이포가 주인공**이고 3D는 프레임 역할이다.
+3. 전환이 **자기 존재를 드러내지 않는다.**
+4. 빠르다. 느린 3D는 심사에서 탈락한다.
+
+---
+
+## 2. 살아남은 트렌드 vs 과대평가된 트렌드
+
+한 스튜디오가 2026년 상반기 실제 클라이언트 작업으로 검증한 결과.
+
+### 2.1 예상대로 통한 것
+
+| 트렌드 | 실측 |
+|---|---|
+| **벤토 그리드** | 12컬럼 대비 스크롤 깊이 **+23%**. Apple·Google·Spotify가 채택하며 표준화 |
+| **다크 모드 지원** | 스마트폰 사용자 **82%+**가 최소 1개 앱을 다크로 사용. 다크 대응 사이트 세션 길이 **+18%** |
+| **디자인 시스템·토큰** | 토큰 시스템 + 컴포넌트 라이브러리 + 시각 회귀 테스트가 표준이 됨 |
+
+> 다크 모드에 대한 정확한 해석: **"다크를 지원하라"이지 "다크를 기본값으로 하라"가 아니다.**
+> 토큰 기반으로 두 테마를 모두 성립시키는 게 핵심이다.
+
+### 2.2 과대평가된 것
+
+| 트렌드 | 실제로 벌어진 일 |
+|---|---|
+| **키네틱 타이포그래피** | 데모에서는 훌륭하나 프로덕션에 거의 안 들어감. 스크린리더와 충돌, 크롤러와 충돌, 레이아웃 시프트 유발 |
+| **글래스모피즘 2.0** | 실사용 기기에서 **FPS 15–30% 하락**. 내비게이션 바와 모달 정도로 용도 제한 |
+| **유기적 블롭 형태** | 랜딩페이지에만 등장. B2B SaaS·이커머스의 전환 경로에는 거의 안 씀 |
+
+### 2.3 기대에 못 미친 것
+
+| 트렌드 | 이유 |
+|---|---|
+| **3D / WebGL의 보편화** | 히어로에 Spline 씬 하나 넣으면 JS 런타임 **800KB–2MB**. 모바일 4G에서 Core Web Vitals 실패 |
+| **AI 개인화** | GDPR 동의 흐름이 전제를 무너뜨림 (유럽 시장) |
+| **지속가능 웹디자인** | 담론에 머물고 실제 채택은 저조 |
+
+### 2.4 예상 밖으로 부상한 것
+
+| 트렌드 | 내용 |
+|---|---|
+| **AI 가독성 레이어** | schema 마크업, `llms.txt`, `agents.json`. AI 경유 유입이 실측되기 시작 (한 스튜디오 3개월간 Bing Copilot 인용 2,300건) |
+| **안티그리드 브루탈리즘** | 벤토가 흔해지자 반작용으로 등장. 의도적으로 깨진 레이아웃, 모노스페이스 타이포. **차별화 수단** |
+
+> **designpaca 관점 결론**: 3D를 기본 무기로 삼지 마라. 2026년의 실전 승부처는
+> **타이포 체계 + 여백 리듬 + 성능**이고, 개성은 3D가 아니라 **타입과 색 결정**에서 나온다.
+
+---
+
+## 3. 타이포그래피 트렌드
+
+### 3.1 흐름
+
+| 흐름 | 내용 | designpaca 적용 |
+|---|---|---|
+| **세리프 부활** | 에디토리얼·미디어 중심으로 복귀. 단 고전 세리프가 아니라 **높은 대비 + 날카로운 디테일**의 현대적 리바이벌 | AI가 sans 워드마크를 몇 초에 만들어내는 시대에 세리프는 "의도와 공예"의 신호가 된다. **차별화 1순위 카드** |
+| **가변 폰트** | 2026년 기준 선택이 아니라 **인프라**. 한 파일로 굵기·폭·광학 크기 전환 | 로딩 비용 감소 + 유연한 스케일. 기본 채택 |
+| **초대형 타입** | 헤드라인이 뷰포트 높이를 채움. 글자가 구조 요소 역할 | 스크롤 중 "쉼표" 역할. 단 본문 위계를 죽이지 않게 |
+| **키네틱 타입** | 데모용으로는 강력하나 프로덕션 채택률 낮음 (§2.2) | 접근성·SEO 리스크를 감수할 이유가 있을 때만 |
+| **대비의 극단화** | 표현적 디스플레이 + 실용적 본문의 조합 | 패밀리 2개 원칙 유지, 대신 성격 차이를 크게 |
+
+### 3.2 실전 타입 스케일 기준
+
+- **비율**: 1.25 (major third) 또는 1.333 (perfect fourth)가 웹 표준 범위.
+  1.2는 위계가 약하고, 1.5 이상은 중간 단계가 비어 답답해진다.
+- **단계 수**: 3–5단계. 8단계 이상이면 통제 실패 신호.
+- **최대/본문 비**: 4배 이상 확보 (예: 본문 17px → 히어로 68px).
+- **line-height**: 본문 1.5–1.7 / 대형 헤드라인 1.0–1.15.
+- **letter-spacing**: 대형 헤드라인 -0.02em ~ -0.04em / 본문 0 / 소형 대문자 라벨은 +0.08em.
+  **본문에 0.05em 이상 주면 가독성이 무너진다.**
+- **한 줄 글자 수**: 영문 45–75자 / **국문 25–40자**.
+
+---
+
+## 4. 컬러 트렌드
+
+### 4.1 2026년 두 갈래
+
+| 방향 | 성격 | 대표 톤 | 적합 브리프 |
+|---|---|---|---|
+| **따뜻함·촉각** | Quiet Luxury, New Botanicals, Solar Warmth, Muted Earth | 고급 중립색, 부드러운 초록, 볕에 익은 산호, 흙빛 클레이 | 브랜드, 라이프스타일, D2C, 문화기관 |
+| **차갑고 디지털** | Digital Calm, Digital Neon | 저자극 블루, 보이드 블랙 위 고전압 액센트 | 핀테크·인프라(전자) / 게이밍·테크(후자) |
+
+Pantone 2026 올해의 색: **Cloud Dancer (PANTONE 11-4201)** — 중립색이 주도.
+
+> **주의**: "Digital Neon on void black"은 04번 문서의 슬롭 시그니처와 **한 끗 차이**다.
+> 브리프가 게이밍·개발자 도구처럼 명확히 요구할 때만 쓰고, 그때도 네온은 액센트 10% 이내로 묶어라.
+
+### 4.2 색 시스템 기술 표준
+
+- **OKLCH가 사실상 표준.** 지각적으로 균일한 밝기 축을 가져 톤 스케일을 프로그램으로 생성해도 대비가 고르게 나온다.
+  많은 디자인 시스템이 **토큰은 OKLCH로 저장하고 빌드 시 HEX로 내보낸다.**
+- **의미 기반 토큰 필수.** `purple-500`이 아니라 `color-action-primary`, `color-surface-elevated`, `color-text-secondary`.
+- **톤 스케일 10–11단계**, 500이 원색. `color-mix()`로 파생하되 접근성을 위해 chroma를 클램프.
+- **대비 검증**: WCAG 2 기준 본문 4.5:1 / 대형 텍스트 3:1. APCA를 쓴다면 본문 **Lc ≥ 75**.
+
+### 4.3 팔레트 구성 규칙
+
+- 색상(hue)은 **3개 이하**.
+- 면적 배분 60(지배) / 30(중립) / 10(강조).
+- **순백 `#fff` / 순흑 `#000`을 피하고** 오프화이트·오프블랙을 쓴다 (예: `#FAFAF7`, `#111014`).
+  순백·순흑은 슬롭 시그니처이자 눈부심·번짐의 원인이다.
+- 강조색을 제거해도 페이지가 읽혀야 한다.
+
+---
+
+## 5. 모션 트렌드
+
+### 5.1 기술 지형 변화 — 2026년의 가장 큰 사건
+
+| 변화 | 내용 |
+|---|---|
+| **CSS 스크롤 기반 애니메이션 전 브라우저 지원** | `animation-timeline`, `view-timeline`, `timeline-scope`. JS 0KB로 reveal·패럴랙스 구현 |
+| **View Transitions API 크로스브라우저 안착** | SPA 라우트 전환을 CSS만으로. 브라우저가 이전/이후 상태를 스냅샷 |
+| **GSAP 전면 무료화** | ScrollTrigger 포함 모든 플러그인 무료 |
+
+**선택 기준**:
+- reveal, 패럴랙스, 스티키 진행 표시 → **CSS scroll-driven** (컴포지터에서 실행, JS 없음)
+- 페이지·라우트 전환 → **View Transitions API**
+- 복잡한 타임라인, 순차 오케스트레이션, 핀 고정 스크롤 시퀀스 → **GSAP**
+- React 컴포넌트 단위 상태 모션 → **Motion (motion.dev)**
+
+### 5.2 모션 설계 기준값
+
+| 용도 | duration | easing |
+|---|---|---|
+| 마이크로 (호버, 포커스, 토글) | 100–200ms | ease-out |
+| 트랜지션 (모달, 드로어, 탭) | 200–400ms | ease-out / cubic-bezier(0.2, 0, 0, 1) |
+| 연출 (히어로 진입, 스크롤 시퀀스) | 600–1200ms | 커스텀 베지어 |
+| 페이지 전환 | 300–500ms | ease-in-out |
+
+**금지 사항**:
+- 인터페이스 요소에 bounce/elastic 이징 — 2010년대 감성이고 즉시 촌스러워진다
+- 모든 요소에 같은 fade-in — 슬롭 1순위 모션 시그니처
+- reveal 실패 시 콘텐츠가 `opacity: 0`으로 남는 구현
+- `prefers-reduced-motion` 미대응
+
+### 5.3 모션 아이디어의 출처
+
+Awwwards 수상작을 보고 "저거 어떻게 하지"가 아니라, **기법 이름을 먼저 확보**하라.
+`eyecannndy.com`은 모션 기법마다 이름을 붙여 분류해두었고, `Codrops`는 같은 기법의 소스 코드를 준다.
+이 둘의 조합이 AI 에이전트가 모션을 다루는 가장 실용적인 경로다.
+
+---
+
+## 6. 레이아웃 트렌드
+
+| 패턴 | 상태 | 주의 |
+|---|---|---|
+| **벤토 그리드** | 표준화 완료. 스크롤 깊이 +23% | 이제 **기본값이라 차별화가 안 된다.** 2026년의 벤토는 정적 타일이 아니라 호버 시 열리거나 영상이 재생되는 "활성 벤토" |
+| **비대칭 / 깨진 그리드** | 벤토의 반작용으로 상승 | 규칙 위에서 깨야 한다. 규칙 없이 깨면 그냥 사고다 |
+| **에디토리얼 레이아웃** | 세리프 부활과 함께 | 텍스트 컬럼 폭 통제가 핵심 |
+| **안티그리드 브루탈리즘** | 차별화 수단으로 부상 | 모노스페이스 + 원시 HTML 미학. 브랜드가 감당할 수 있을 때만 |
+| **3열 균등 카드** | **죽었다** | 04번 문서 참조. AI 슬롭의 핵심 시그니처 |
+
+---
+
+## 7. 폰트 추천
+
+### 7.1 무료 — 영문 (구글 폰트 / Fontshare)
+
+| 폰트 | 성격 | 용도 | 출처 |
+|---|---|---|---|
+| **Fraunces** | 가변 세리프, 부드러움·광학 크기 축 조절 가능 | 디스플레이 + 본문 겸용 | Google Fonts |
+| **Instrument Serif** | 고대비 디스플레이 세리프 | 히어로 헤드라인 | Google Fonts |
+| **Spectral** | 화면용 세리프, 본문 가독성 좋음 | 긴 본문 | Google Fonts |
+| **Lora** | 브러시 계열 세리프 | 에디토리얼 본문 | Google Fonts |
+| **DM Sans** | 기하학 산세, 중립적이되 Inter보다 성격 있음 | 본문·UI | Google Fonts |
+| **Work Sans** | 그로테스크, 넓은 굵기 범위 | 본문·헤드라인 | Google Fonts |
+| **Libre Franklin** | 프랭클린 고딕 계열, 미국적 신문 톤 | 본문 | Google Fonts |
+| **IBM Plex Sans / Mono** | 기업적이되 개성 있음 | 개발자 도구·문서 | Google Fonts |
+| **Archivo / Archivo Narrow** | 강한 그로테스크, 축약형 있음 | 헤드라인 | Google Fonts |
+| **Satoshi** | 현대적 기하학 산세 | 본문·UI (Inter 대체) | Fontshare |
+| **Clash Display** | 개성 강한 디스플레이 | 히어로 | Fontshare |
+| **Switzer** | 스위스 그로테스크 계열 | 본문·UI | Fontshare |
+| **Chillax / Cabinet Grotesk** | 부드러운 그로테스크 | 브랜드 톤 | Fontshare |
+| **JetBrains Mono** | 모노스페이스, 가독성 좋음 | 코드·라벨 | Google Fonts |
+
+> **Inter는 금지가 아니라 "기본값 금지"다.** 명확한 이유(다국어 UI, 초고밀도 대시보드)가 있으면 쓴다.
+> 이유 없이 쓰면 04번 B-01에 걸린다. Satoshi·Switzer·DM Sans가 거의 언제나 더 나은 선택.
+
+### 7.2 유료 — 영문 (파운드리)
+
+| 파운드리 | 대표 폰트 | 성격 |
+|---|---|---|
+| **Klim** (klim.co.nz) | Söhne, Signifier, Tiempos | 정밀하고 조용한 고급감. Söhne는 현재 웹에서 "비싼 톤"의 표준 |
+| **Pangram Pangram** (pangrampangram.com) | Neue Montreal, PP Editorial New, Right Grotesk | 트렌디. 개인 사용 무료 항목 있음 |
+| **Grilli Type** (grillitype.com) | GT America, GT Walsheim, GT Sectra | 스위스 정밀. 트라이얼 제공 |
+| **Displaay** (displaay.net) | Nichrome, Signal | 에디토리얼 세리프 강세 |
+| **Velvetyne** (velvetyne.fr) | Karrik, Basteleur, Terminal Grotesque | **무료 오픈소스**인데 개성이 유료급. 브루탈·아트 브리프 |
+
+### 7.3 무료 — 한글
+
+한국어 사이트는 **영문 폰트만 지정하면 한글이 시스템 기본(맑은 고딕/애플 SD 산돌고딕)으로 떨어진다.**
+이건 그 자체로 완성도 미달 신호다. 반드시 한글 폰트를 명시하라.
+
+| 폰트 | 제작 | 성격 | 웹폰트 | 라이선스 | 언제 |
+|---|---|---|---|---|---|
+| **Pretendard** | 길형진 (orioncactus) | system-ui 대체. Thin(100)–Black(900) 9단계, 가변 버전 존재 | O (jsDelivr CDN) | SIL OFL | **기본값. 고민되면 이거** |
+| **Pretendard Variable** | 동일 | 가변 폰트 단일 파일 | O | SIL OFL | 웹에서는 static보다 이쪽 (용량 유리) |
+| **본고딕 / Noto Sans KR** | Adobe·Google | 한중일 통합, 굵기 7단계 | O | SIL OFL | 다국어 혼용, 안정성 최우선 |
+| **본명조 / Noto Serif KR** | Adobe·Google | 명조 계열 | O | SIL OFL | 에디토리얼 본문 |
+| **마루 부리** | 네이버 | 현대적 명조. 세련되고 부드러움 | O | SIL OFL | **세리프 부활 트렌드의 한글 대응. 강력 추천** |
+| **에스코어 드림** | S-Core | 굵기 9단계, 완성도 높은 고딕 | O | 상업 무료 | Pretendard 대안 |
+| **Spoqa Han Sans Neo** | 스포카 | 숫자·영문 가독성 우수 | 배포 파일 사용 | SIL OFL | 대시보드·수치 많은 UI |
+| **리디바탕** | 리디 | 화면 가독성 최적화 명조 | 배포 파일 사용 | SIL OFL | 긴 글 읽기 |
+| **페이퍼로지 (Paperlogy)** | 이주임 × Paperlogy | 기하학 산세, 9단계 | O | SIL OFL | 프레젠테이션·헤드라인 |
+| **나눔고딕 / 나눔명조** | 네이버 | 가장 널리 쓰임 | O | SIL OFL | **너무 흔해서 개성이 없다. 폴백으로만** |
+| **조선일보명조체** | 조선일보 | 전통적 명조, 고급감 | O | 상업 무료 | 미디어·아카이브 톤 |
+| **제주명조 / 한라산체** | 제주도 | 개성 있는 명조 | O | 상업 무료 | 지역·문화 브리프 |
+| **배민 한나체 / 주아체 / 도현체** | 우아한형제들 | 강한 개성, 캐주얼 | O | 상업 무료 | **B2C 캠페인 한정. B2B에 쓰면 즉시 아마추어** |
+| **여기어때 잘난체** | 여기어때 | 굵고 시원함 | O | 상업 무료 | 임팩트 헤드라인 |
+| **자이언츠체** | 롯데자이언츠 | 속도감 | O | 상업 무료 | 스포츠·이벤트 |
+| **빙그레 따옴 / 메로나체** | 빙그레 | 레트로·발랄 | O | 상업 무료 | 레트로 캠페인 |
+
+**한글 폰트 수집처**: 눈누 (https://noonnu.cc) — 라이선스 범위 표기가 가장 명확.
+
+### 7.4 한글 조판 실전 규칙
+
+- **line-height를 영문보다 높게.** 한글은 글자 밀도가 높아 영문 기준 1.5로는 답답하다. **본문 1.6–1.8** 권장.
+- **letter-spacing은 음수를 주지 마라.** 한글은 이미 고정폭에 가까워 음수 자간이 즉시 뭉개진다.
+  대형 헤드라인에서만 -0.01em ~ -0.02em 정도.
+- **`word-break: keep-all`** 을 설정하라. 기본값은 단어 중간에서 줄바꿈되어 어색하다.
+  `overflow-wrap: break-word`와 함께 쓴다.
+- **한 줄 25–40자.** 영문 기준(45–75자)을 그대로 쓰면 너무 길다. 컨테이너 폭을 좁혀라.
+- **영문·숫자 폴백 순서**: 한글 폰트를 앞에 두면 라틴 문자까지 그 폰트로 그려진다.
+  라틴을 다른 폰트로 쓰고 싶으면 `font-family: 'Satoshi', 'Pretendard', sans-serif` 순으로 라틴 폰트를 먼저 둔다.
+- Pretendard CDN:
+  `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css`
+
+### 7.5 페어링 예시 (브리프별)
+
+| 브리프 | 디스플레이 | 본문 | 한글 |
+|---|---|---|---|
+| 신뢰감 있는 B2B | Söhne / Switzer | Switzer | Pretendard |
+| 에디토리얼 · 미디어 | Instrument Serif / Fraunces | Spectral | 마루 부리 + Pretendard |
+| 럭셔리 · 브랜드 | Signifier / PP Editorial New | Söhne | 마루 부리 |
+| 개발자 도구 | Archivo | IBM Plex Sans | Pretendard + JetBrains Mono |
+| 대시보드 · 데이터 | DM Sans | DM Sans | Spoqa Han Sans Neo |
+| 캠페인 · B2C | Clash Display | Satoshi | 배민 도현체 (헤드라인만) + Pretendard |
+| 실험적 · 아트 | Karrik / Basteleur (Velvetyne) | Work Sans | 제주명조 |
+
+---
+
+## 8. 이미지·질감 트렌드
+
+- **믹스드 미디어**: 3D 요소 + 스캔한 종이 질감의 결합이 2026년 주도 흐름.
+- **필름 그레인 오버레이**: 실제 필름 스캔 기반 고해상도 그레인. 디지털 이미지에 물성을 준다.
+- **노이즈 텍스처**: 그라디언트 위 미세 노이즈는 밴딩을 없애면서 질감을 준다.
+  다만 **보라-파랑 그라디언트 + 노이즈** 조합은 슬롭이다 (04번 A-03).
+- **스톡 사진 회피**: "랩탑 앞에서 웃는 다국적 팀"은 신뢰도를 **떨어뜨린다**는 게 실측 결과다.
+  실제 제품 스크린샷 / 실제 팀 사진 / 커스텀 일러스트 / 추상 질감 순으로 선택.
+- 무료 질감 소스: Texturize, Resource Boy(8K 노이즈), Pattern Club.
+
+---
+
+## 9. 2026년 요약 — 한 문단
+
+지금 이기는 사이트는 **타이포 체계가 정돈되어 있고, 여백에 리듬이 있고, 빠르다.**
+3D는 상위권에서 흔하지만 그건 럭셔리·자동차·문화기관의 이야기이고, SaaS·제품 사이트는 5% 미만이다.
+벤토 그리드는 표준이 되어 더 이상 차별화가 아니며, 반작용으로 비대칭·브루탈 방향이 다시 올라오고 있다.
+색은 중립색이 주도하고 OKLCH 기반 의미 토큰이 기술 표준이 됐다.
+모션은 CSS 스크롤 애니메이션과 View Transitions로 JS 없이 대부분 처리 가능해졌고, GSAP은 전면 무료가 됐다.
+그리고 **가장 크게 달라진 것은, 평균적인 결과물이 AI에 의해 대량 생산되면서 "평균처럼 보이는 것" 자체가 감점 요인이 됐다는 점이다.** (→ 04번 문서)