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/01-gallery-catalog.md

@@ -0,0 +1,359 @@
+# 01 — 디자인 레퍼런스 사이트 카탈로그
+
+> 총 **155개** URL (사이트 기준 약 145곳, 일부는 하위 페이지 별도 게재).
+> 모든 URL은 2026-08-20에 실제 HTTP 요청으로 생존을 확인함.
+> `[!]` 표시는 접속 이상이 확인된 항목 (파일 하단 "링크 상태 리포트" 참조).
+>
+> **읽는 법**: `designpaca` 스킬은 작업 시작 전 반드시 이 카탈로그에서 **최소 3개**를 고르고,
+> 왜 그 3개를 골랐는지 브리프와 연결해서 말해야 한다.
+> "언제 보나" 열이 그 선택의 근거다.
+
+---
+
+## 0. 브리프 → 갤러리 라우팅 표 (먼저 이걸 본다)
+
+| 브리프 유형 | 1순위 | 2순위 | 3순위 (디테일) |
+|---|---|---|---|
+| SaaS / B2B 랜딩 | Land-book | SaaSFrame | Refero |
+| 개인·스튜디오 포트폴리오 | Awwwards | Godly | Pafolios |
+| 에이전시 / 브랜드 사이트 | SiteInspire | The FWA | The Brand Identity |
+| 이커머스 / D2C | ecomm.design | Land-book (ecommerce) | tiny blocks |
+| 모바일 앱 UI | Mobbin | Handheld.design | Scrnshts |
+| 대시보드 / 웹앱 내부 화면 | Webframe | Nicelydone | Interface Index |
+| 문서 / 개발자 도구 | Refero | Design Systems Repo | Klim (타입) |
+| 미니멀 / 정보 밀도 낮음 | Minimal Gallery | Dead Simple Sites | Httpster |
+| 개성 강한 / 실험적 | Hover States | Brutalist Websites | Browsing Mode |
+| 다크 테마 필수 | Dark Mode Design | dark.design | Godly |
+| 이메일 / 뉴스레터 | Really Good Emails | Email Love | Inbox Flows |
+| 온보딩·결제 등 플로우 설계 | Page Flows | Mobbin | UX Bites |
+| 타이포 중심 (텍스트가 주인공) | Typewolf | Fonts In Use | Typographic Posters |
+| 모션·인터랙션이 핵심 | Codrops | Eyecandy | Landing.love |
+| 한국어 사이트 / 국내 클라이언트 | 노트폴리오 | 디비컷 | GDWeb |
+
+---
+
+## 1. 종합 어워드 · 최상위 큐레이션
+
+가장 높은 완성도의 기준선. **다만 "수상용 사이트"는 실무 제약(로딩, 접근성, CMS)을 무시한 경우가 많다.**
+구조를 그대로 가져오지 말고 "톤과 야심의 상한선"으로만 써라.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Awwwards | https://www.awwwards.com | 심사위원 채점 기반 SOTD/SOTM/SOTY | 상한선 설정, 모션·3D 야심작 | 무료 열람 / 제출·PRO 유료 | Design 40%·Usability 30%·Creativity 20%·Content 10%로 채점 |
+| Awwwards Sites of the Day | https://www.awwwards.com/websites/sites_of_the_day/ | 일별 수상작 아카이브 | "지금 뭐가 이기고 있나" 실측 | 무료 | 최근 30일치만 봐도 트렌드가 잡힌다 |
+| The FWA | https://thefwa.com | 인터랙티브·기술 실험 프로젝트 | WebGL·캠페인 사이트 브리프 | 무료 | 1999년부터 축적된 인터랙티브 아카이브 |
+| CSS Design Awards `[!]` | https://www.cssdesignawards.com | CSS·프론트엔드 품질 중심 수상작 | Awwwards보다 실무적인 기준이 필요할 때 | 무료 열람 / 제출 $25–60 | 소규모 스튜디오 비중이 높아 재현 가능성이 큼 |
+| Godly | https://godly.website | 극도로 선별된 "잘 만든 웹" | 애니메이션·스크롤 연출 상한선 | 무료 | 주당 3–5개만 등록. 신호 대 잡음비 최고 |
+| Godly 전체 목록 | https://godly.website/websites | 카테고리·기술 필터 | 스택별로 골라볼 때 | 무료 | Framer/Webflow/Next 필터 유용 |
+| Site of Sites | https://siteofsites.co | 갤러리들을 모은 메타 갤러리 | 새 레퍼런스 소스를 발굴할 때 | 무료 | 이 카탈로그의 갱신원으로 써라 |
+| MaxiBestOf | https://maxibestof.one | 개인이 고른 "베스트 오브 베스트" | 취향이 뚜렷한 소수 정예가 필요할 때 | 무료 | 큐레이터 1인 취향이라 편차가 곧 개성 |
+| Refs.gallery `[!]` | https://refs.gallery | 주간 갱신 핸드픽 웹사이트 | 최신 감각 빠른 스캔 | 무료 | 900+ 사이트, 주간 업데이트 |
+| Webdesign-inspiration | https://www.webdesign-inspiration.com | 대량 무료 갤러리 | 볼륨이 필요할 때 | 무료 | 큐레이션 강도는 낮음 |
+| A Fresh Website | https://a-fresh.website | 신선한 실험 웹 | 뻔한 안이 나올 때 흔들기용 | 무료 | 소규모지만 밀도 높음 |
+| Call to Inspiration | https://calltoinspiration.com | 웹·브랜딩 혼합 큐레이션 | 브랜드 톤까지 같이 잡을 때 | 무료 | 웹 밖의 그래픽까지 커버 |
+
+---
+
+## 2. 미니멀 · 에디토리얼 · 타입 주도
+
+여백과 타이포만으로 승부하는 브리프. **가장 실무 재현성이 높은 카테고리다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| SiteInspire `[!]` | https://www.siteinspire.com | 2010년부터 핸드큐레이션한 웹 | 에디토리얼·유럽식 절제된 톤 | 무료 | style/type/subject 3축 태깅이 가장 정교 |
+| Minimal Gallery | https://minimal.gallery | 미니멀 웹만 | 정보량 적고 여백 큰 브리프 | 무료 | "여백을 얼마나 줘도 되나"의 기준선 |
+| Httpster | https://httpster.net | 독립 디자이너·소규모 스튜디오 | 과하지 않은 현대적 톤 | 무료 | 타입 파운드리·스튜디오 사이트 비중 높음 |
+| Dead Simple Sites | https://deadsimplesites.com | 극단적으로 단순한 사이트 | 1페이지·랜딩·문서 | 무료 | "덜어내기"의 하한선 확인용 |
+| One Page Love | https://onepagelove.com | 원페이지 사이트 전용 | 캠페인·이벤트·개인 페이지 | 무료 (템플릿 유료) | 스크롤 서사 구조 학습에 최적 |
+| One Page Love 인스피레이션 | https://onepagelove.com/inspiration | 카테고리별 원페이지 | 업종 지정 브리프 | 무료 | 레스토랑·컨퍼런스 등 세분화 |
+| Cargo | https://cargo.site | 아티스트·에디토리얼 사이트 빌더 | 아트북 같은 레이아웃 | 유료 (빌더) | 예시 사이트 자체가 레퍼런스 |
+| Awwwards Typography | https://www.awwwards.com/websites/typography/ | 타이포 수상작만 | 텍스트가 주인공인 브리프 | 무료 | 대형 타입 스케일 실전 사례 |
+
+---
+
+## 3. 브루탈리즘 · 실험 · 안티트렌드
+
+**2026년 현재 bento 그리드의 반작용으로 다시 강해진 흐름.** 개성이 필요한 브리프에서 꺼낸다.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Brutalist Websites | https://brutalistwebsites.com | 웹 브루탈리즘 원본 아카이브 | 규칙을 깨야 하는 브리프 | 무료 | 2014년 Pascal Deville이 만든 정전 |
+| Neubrutalism.com | https://neubrutalism.com | 네오브루탈리즘 가이드 + 사례 | 두꺼운 테두리·오프셋 그림자 스타일 | 무료 | 스타일 정의와 예시가 같이 있음 |
+| Hover States | https://hoverstat.es | 실험적 웹 프로젝트 | 인터랙션 발상 전환 | 무료 | 아트·문화기관 웹 비중 높음 |
+| Browsing Mode | https://browsingmode.com | 극단적·기이한 웹 | 안전한 안만 나올 때 | 무료 | "이래도 되나" 상한 테스트 |
+| The Whimsical Web | https://whimsical.club | 유머·놀이가 있는 개인 웹 | 사람 냄새가 필요한 브리프 | 무료 | 개인 사이트 위주 |
+| Crypto Design Club | https://cryptodesign.club | 크립토·웹3 웹디자인 | 다크·테크 톤 브리프 | 무료 | 다크+네온의 좋은 사례/나쁜 사례 대조군 |
+| HUDS + GUIS | https://hudsandguis.com | 영화 HUD·SF 인터페이스 | 데이터·모니터링 UI | 무료 | 실제 제품에 그대로 쓰면 안 되지만 발상 자극 |
+| Auto Interfaces | https://autointerfaces.com | 자동차 인포테인먼트 UI | 대형 화면·글랜서블 UI | 무료 | 정보 밀도 대비 가독성 사례 |
+
+---
+
+## 4. SaaS · 랜딩페이지 · 웹앱
+
+**가장 자주 쓰게 될 카테고리이자 AI 슬롭이 가장 심한 영역.**
+여기서 본 걸 그대로 따라가면 04번 문서의 금지 목록에 그대로 빠진다. 경계하며 봐라.
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Land-book | https://land-book.com | 심사를 거친 랜딩페이지 | SaaS·앱·스타트업 랜딩 | 무료 + 프로 | 전수 심사라 신호 대 잡음비 높음 |
+| Landingfolio | https://www.landingfolio.com | 랜딩페이지 + 섹션 컴포넌트 | 섹션 단위로 구조 뜯을 때 | 무료 + 프로 | Tailwind/Webflow/Figma 컴포넌트 동봉 |
+| Lapa Ninja | https://www.lapa.ninja | 업종별 랜딩 풀페이지 캡처 | "실제로 출시되는 것"의 평균 | 무료 | 실험성 낮고 실무성 높음 |
+| SaaS Landing Page | https://saaslandingpage.com | SaaS 랜딩 전용 | B2B 카피·섹션 순서 | 무료 | 섹션 유형별 필터 |
+| SaaSFrame | https://www.saasframe.io | SaaS 랜딩 + 앱 + 이메일 통합 | 제품 전체 여정 설계 | 무료 + 유료 | 랜딩만이 아니라 온보딩 이메일까지 |
+| SaaSpo | https://saaspo.com | SaaS 웹사이트 대량 아카이브 | 경쟁사 스캔 | 무료 | 볼륨 위주 |
+| SaaS Interface | https://saasinterface.com | SaaS 앱 내부 화면 | 로그인 후 화면 설계 | 무료 | 오래됐지만 패턴 학습용으로 유효 |
+| Refero | https://refero.design | 웹·iOS 실제 화면 30K+ | UX 패턴·UI 요소 단위 검색 | 무료 일부 + 유료 | v4에서 6,000개 플로우 + AI 검색 추가 |
+| Webframe | https://webframe.xyz | 웹앱 화면 스크린샷 | 대시보드·설정 화면 | 무료 + 유료 | "로그인 후"의 레퍼런스가 귀한데 여기 있음 |
+| Nicelydone | https://nicelydone.club | 잘 만든 SaaS 웹앱 | 컴포넌트 디테일 | 무료 | 요소별(모달·테이블·폼) 분류 |
+| Interface Index | https://interface-index.com | 다양한 인터페이스 수집 | 장르 불문 UI 발상 | 무료 | 분류가 느슨해 탐색형 |
+| UI Sources | https://www.uisources.com | 실제 앱의 인터랙션 분해 | "왜 이렇게 했나"까지 필요할 때 | 무료 일부 | 인터랙션을 글로 설명해줌 → **AI에게 특히 유용** |
+| UI Garage | https://uigarage.net | 일별 UI 패턴 | 특정 컴포넌트 아이디어 | 무료 | 패턴 태그가 촘촘함 |
+
+---
+
+## 5. 모바일 앱 · UX 플로우
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Mobbin | https://mobbin.com | 실제 출시 앱의 전체 화면·플로우 | 앱 UI, 온보딩·결제 흐름 | 무료 제한 / 유료 중심 | iOS·Android·Web 모두. 가장 깊음 |
+| Page Flows | https://pageflows.com | 사용자 여정 **영상** 기록 | 전환·에러·엣지케이스 | 유료 | 정적 캡처로 못 보는 전환이 보임 |
+| Screenlane | https://screenlane.com | 모바일 UI 스크린샷 | 빠른 화면 단위 참고 | 무료 | Page Flows로 통합됐으나 도메인 유지 |
+| Handheld Design | https://handheld.design | 개성 있는 모바일 인터페이스 | 앱이 뻔해질 때 | 무료 | 큐레이션 강도 높음 |
+| Scrnshts | https://scrnshts.club | 앱스토어 스크린샷 세트 | 스토어 등록용 비주얼 | 무료 | 마케팅 캡처의 타이포 사례 |
+| Spotted in Prod | https://spottedinprod.com | 프로덕션의 좋은 iOS 디테일 | 마이크로 인터랙션 | 무료 | 짧은 영상 위주 |
+| iOS Icon Gallery | https://www.iosicongallery.com | 앱 아이콘 | 아이콘·파비콘 방향 | 무료 | 아이콘 그리드 감각 학습 |
+| UX Bites | https://builtformars.com/ux-bites | 실제 앱의 UX 디테일 해설 | "왜 좋은지"를 언어화할 때 | 무료 | **글 설명이 있어 AI가 읽기 좋음** |
+| Details Matter | https://detailsmatter.framer.website | 마이크로 인터랙션 모음 | 디테일 한 스푼 필요할 때 | 무료 | 짧은 영상 중심 |
+| Pushkeen | https://pushkeen.ai | 푸시 알림 카피·패턴 | 알림·이메일 카피 | 무료 | 카피 톤 레퍼런스로 특이 |
+
+---
+
+## 6. 페이지 요소 단위 갤러리
+
+**"히어로만 다시 짜야 한다" 같은 국소 브리프에서 가장 효율적이다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Supahero | https://supahero.io | 히어로 섹션만 | 첫 화면 구조 결정 | 무료 | 히어로 유형 분류가 좋음 |
+| Navbar Gallery | https://navbar.gallery | 내비게이션 바만 | 정보구조 노출 방식 | 무료 | 메가메뉴 사례 다수 |
+| Footer.design | https://footer.design | 푸터만 | 푸터가 성의 없어질 때 | 무료 | 푸터는 AI가 항상 대충 만드는 곳 |
+| Pricing Pages | https://pricingpages.design | 요금제 페이지 | 가격표·비교표 | 무료 | 3열 카드 말고 다른 방법이 여기 있음 |
+| 404s.design | https://404s.design | 404 페이지 | 에러·빈 상태 | 무료 | 빈 상태 톤 설계 |
+| OG Image Gallery | https://ogimage.gallery | OG·공유 이미지 | 소셜 카드 | 무료 | 공유 이미지도 디자인 대상임을 상기 |
+| Unsection | https://unsection.com | 섹션·호버 효과 | 섹션 단위 조립 | 무료 | 섹션 유형 라이브러리 |
+| Bento Grids | https://bentogrids.com | 벤토 그리드 레이아웃 | 벤토를 **잘** 써야 할 때 | 무료 | 나쁜 벤토와 좋은 벤토의 차이가 보임 |
+| Social Proof Examples | https://socialproofexamples.com | 후기·로고월·지표 | 신뢰 요소 설계 | 무료 | 로고월 말고 다른 방법들 |
+
+---
+
+## 7. 이커머스 · D2C
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| ecomm.design | https://ecomm.design | 이커머스 사이트 디렉토리 | 쇼핑몰 전 페이지 | 무료 | 사용 기술(Shopify 등) 필터 |
+| tiny blocks | https://tinyblocks.cc | 이커머스 요소·컴포넌트 | 장바구니·PDP 요소 | 무료 | 요소 단위라 조립하기 좋음 |
+| Commerce Cream `[!]` | http://commercecream.com | 잘 디자인된 이커머스 | 브랜드 중심 쇼핑몰 | 무료 | **HTTPS 연결 거부 상태 — HTTP만 응답** |
+
+---
+
+## 8. 이메일 · 뉴스레터
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Really Good Emails | https://reallygoodemails.com | 19,000+ 이메일 | 트랜잭셔널·마케팅 메일 | 무료 | HTML 소스까지 열람 가능 |
+| Email Love | https://emaillove.com | 이메일 디자인·템플릿 | 뉴스레터 레이아웃 | 무료 | 브랜드별 정리 |
+| Inbox Flows | https://inboxflows.com | 이메일 **시퀀스** 전체 | 온보딩 메일 흐름 | 무료 일부 | 단발이 아니라 흐름 단위 |
+
+---
+
+## 9. 포트폴리오
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Bestfolios | https://www.bestfolios.com | 디자이너 포트폴리오·케이스스터디 | 포트폴리오 브리프 | 무료 | 이력서·케이스스터디까지 |
+| Prettyfolio | https://prettyfolio.com | 예쁜 포트폴리오 | 비주얼 중심 포트폴리오 | 무료 | 큐레이션 좋음 |
+| Pafolios | https://pafolios.com | 수상급 포트폴리오 | 개인 브랜딩 상한선 | 무료 | 어워드 수상작 위주 |
+| PFolios | https://pfolios.net | 포트폴리오 쇼케이스 | 볼륨 확보 | 무료 | 분류 단순 |
+| Sideprojectors | https://www.sideprojectors.com | 사이드 프로젝트 매물 | 인디 제품의 실제 톤 | 무료 | 갤러리는 아니지만 "인디 감성"의 원본 |
+
+---
+
+## 10. 타이포그래피 · 폰트
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Typewolf | https://www.typewolf.com | 실제 웹의 폰트 사용례 + 추천 | **폰트 결정할 때 무조건 여기 먼저** | 무료 | 폰트별 사용 사이트·대체 무료 폰트 제시 |
+| Typewolf Google Fonts | https://www.typewolf.com/google-fonts | 구글폰트 베스트 40 | 무료 폰트만 써야 할 때 | 무료 | 본문용/디스플레이용 구분 표기 |
+| Fonts In Use | https://fontsinuse.com | 폰트 사용례 아카이브 (웹·인쇄) | 폰트의 "역사적 톤" 확인 | 무료 | 산업·시대별 분류 |
+| Typographic Posters | https://typographicposters.com | 타이포 포스터 | 대형 타입 구성 | 무료 | 웹 밖에서 타입 감각 가져오기 |
+| Google Fonts | https://fonts.google.com | 무료 웹폰트 | 라이선스 걱정 없는 기본 | 무료 | 가변폰트 필터 필수 |
+| Fontshare | https://www.fontshare.com | ITF의 고품질 무료 폰트 | 구글폰트가 뻔할 때 | 무료 (상업 가능) | Satoshi·Clash Display 등 |
+| Uncut.wtf `[!]` | https://uncut.wtf | 동시대 무료 폰트 163종 | 개성 있는 무료 폰트 | 무료 | 봇 차단으로 자동 접근 어려움 |
+| Fontesk | https://fontesk.com | 무료 폰트 대량 아카이브 | 실험적 디스플레이 폰트 | 무료 | 라이선스 개별 확인 필요 |
+| Velvetyne | https://velvetyne.fr | 프랑스 오픈소스 실험 파운드리 | 브루탈·아트 브리프 | 무료 (오픈소스) | 개성이 아주 강함 |
+| Klim Type Foundry | https://klim.co.nz | 상업 파운드리 | 유료 폰트 검토 | 유료 | 사이트 자체가 타이포 레퍼런스 |
+| Pangram Pangram | https://pangrampangram.com | 상업 파운드리 | 트렌디한 유료 폰트 | 유료 (일부 개인 무료) | 현재 웹에서 가장 많이 보이는 유료 폰트들 |
+| Grilli Type | https://www.grillitype.com | 스위스 파운드리 | 정밀한 그로테스크 | 유료 | 트라이얼 제공 |
+| Displaay | https://displaay.net | 체코 파운드리 | 에디토리얼 세리프 | 유료 | 사이트 데모가 훌륭 |
+| 눈누 | https://noonnu.cc | 상업용 무료 **한글** 폰트 | 한국어 사이트 폰트 선정 | 무료 | 라이선스 범위 표기가 명확 |
+
+---
+
+## 11. 컬러 · 팔레트
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Coolors | https://coolors.co | 팔레트 생성·저장 | 빠른 후보 생성 | 무료 + 프로 | 잠금 후 재생성이 빠름 |
+| Adobe Color | https://color.adobe.com | 색 이론 + 접근성 검사 | 대비 검증까지 필요할 때 | 무료 | 색각 이상 시뮬레이션 내장 |
+| Khroma | https://www.khroma.co | 취향 학습형 팔레트 AI | 방향 탐색 초기 | 무료 | 초기 50색 선택으로 학습 |
+| Happy Hues | https://www.happyhues.co | **실제 UI에 적용된** 팔레트 | 역할 배분(배경/텍스트/강조) | 무료 | 색을 역할로 보여줘 AI에게 특히 유용 |
+| Realtime Colors | https://www.realtimecolors.com | 실제 레이아웃에 실시간 적용 | 팔레트 검증 | 무료 | 팔레트를 "페이지로" 본다 |
+
+---
+
+## 12. 인터랙션 · 모션 · 코드
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Codrops | https://tympanus.net/codrops/ | 인터랙션 튜토리얼 + 데모 | 구현 가능한 효과 찾기 | 무료 | **소스 코드까지 제공 — AI가 직접 읽을 수 있음** |
+| Codrops Tutorials | https://tympanus.net/codrops/category/tutorials/ | 단계별 구현 글 | 효과를 코드로 옮길 때 | 무료 | 2009년부터 축적 |
+| Uiverse | https://uiverse.io | 커뮤니티 CSS/Tailwind 컴포넌트 | 버튼·로더 등 소품 | 무료 | 그대로 쓰면 슬롭. 발상만 가져와라 |
+| GSAP | https://gsap.com | 모션 라이브러리 + 쇼케이스 | 타임라인·스크롤 모션 | **2026년 전면 무료** | ScrollTrigger 포함 전 플러그인 무료화 |
+| Motion (구 Framer Motion) | https://motion.dev | 웹 애니메이션 라이브러리 | React 모션 | 무료 | 문서의 이징 가이드가 좋음 |
+| LottieFiles | https://lottiefiles.com | 벡터 애니메이션 에셋 | 아이콘·일러스트 모션 | 무료 + 유료 | 남용하면 즉시 슬롭이 되니 절제 |
+| Eyecandy | https://eyecannndy.com | 모션 **기법**을 이름 붙여 분류 | "무슨 기법인지" 언어화 | 무료 | **기법명이 텍스트로 있어 AI에게 최상급 소스** |
+| Landing.love | https://www.landing.love | 애니메이션 랜딩 모음 | 스크롤 연출 참고 | 무료 | 영상 프리뷰 제공 |
+| Art of the Title | https://www.artofthetitle.com | 영화 타이틀 시퀀스 | 인트로·로딩 연출 | 무료 | 웹 밖에서 모션 언어 훔치기 |
+
+---
+
+## 13. 디자인 시스템
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Design Systems Repo | https://designsystemsrepo.com | 공개 디자인 시스템 디렉토리 | 토큰·컴포넌트 구조 참고 | 무료 | 가장 오래된 집계처 |
+| DesignSystems.one | https://www.designsystems.one | 88개 실사용 시스템 + design.md | **AI에 먹일 토큰 문서** 확보 | 무료 | 각 항목에 design.md 다운로드 제공 |
+| Designsystems.com | https://www.designsystems.com | 시스템 구축 방법론 글 | 시스템을 만들 때 | 무료 | Figma 운영 |
+| DESIGN.md | https://designmd.app | AI 에이전트용 디자인 시스템 파일 561개 | 스킬에 주입할 스타일 정의 | 무료 | **designpaca 스킬과 직접 연결되는 포맷** |
+| Refero Styles (AI Agents) | https://styles.refero.design | AI 에이전트용 디자인 프롬프트·DESIGN.md 예시 | 프롬프트 구조 설계 | 무료 | 02번 문서의 근거 소스 |
+| Nielsen Norman Group | https://www.nngroup.com | UX 리서치 원문 | 패턴의 근거가 필요할 때 | 무료 | 트렌드 대신 원칙 |
+| Smashing Magazine | https://www.smashingmagazine.com | 심층 프론트엔드·디자인 글 | 구현 근거 | 무료 | 접근성·CSS 최신 정보 |
+
+---
+
+## 14. 이미지 · 텍스처 · 그래픽 에셋
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Unsplash `[!]` | https://unsplash.com | 무료 사진 | 사진이 필요할 때 | 무료 | **"랩탑 앞 다국적 팀"류는 즉시 슬롭. 추상·질감 위주로만** |
+| Pexels | https://www.pexels.com | 무료 사진·영상 | 배경 영상 | 무료 | 위와 동일 주의 |
+| Pattern Club | https://patternclub.io | 패턴·텍스처 | 배경 질감 | 무료 일부 | 반복 패턴 |
+| Modern Illustration | https://modernillustration.org | 동시대 일러스트 | 일러스트 방향 | 무료 | 스타일 사조별 |
+| Illustration.lol | https://illustration.lol | 에디토리얼 일러스트 | 기사·블로그 삽화 | 무료 | 잡지 삽화 중심 |
+| Behance UI/UX 갤러리 | https://www.behance.net/galleries/ui-ux | UI/UX 프로젝트 케이스 | 과정과 근거 | 무료 | 다단계 케이스스터디 |
+| Data Viz Project | https://www.datavizproject.com | 차트 유형 사전 | 데이터 시각화 선택 | 무료 | 차트 유형별 적합성 |
+
+---
+
+## 15. 무드보드 · 수집 · 정리 도구
+
+**레퍼런스를 "모으는" 단계의 도구. AI 에이전트는 여기 대신 파일로 무드보드를 만든다 (02번 §4 참조).**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Are.na | https://www.are.na | 블록·채널 기반 큐레이션 | 장기 리서치 축적 | 무료 + 유료 | 한 블록이 여러 채널에 존재 → 연결형 사고 |
+| Savee | https://savee.it | 비주얼 클리핑 | 순수 시각 수집 | **유료 전용 ($9/월)** | 무료 체험 폐지됨 |
+| Cosmos | https://www.cosmos.so | AI 큐레이션 비주얼 디스커버리 | 취향 기반 탐색 | 무료 + 프로 | **AI 생성 이미지를 필터링해줌** |
+| Designspiration | https://www.designspiration.com | 색 기반 검색 가능한 수집 | 색으로 레퍼런스 찾기 | 무료 | 색 검색이 강점 |
+| Mymind | https://mymind.com | 개인 전용 자동 정리 | 혼자 쓰는 저장소 | 유료 | 태그를 자동 생성 |
+| Kive | https://kive.ai | AI 기반 에셋 검색 | 대량 에셋 관리 | 유료 | 팀 단위 |
+| Pinterest | https://www.pinterest.com | 범용 이미지 수집 | 클라이언트와 톤 합의 | 무료 | **출처 추적 불가 + AI 이미지 오염 심함. 최후순위** |
+| Muzli | https://muz.li | 디자인 뉴스 애그리게이터 | 수동적 트렌드 유입 | 무료 | 크롬 새탭 확장 |
+
+---
+
+## 16. 브랜딩 · 그래픽 · 로고
+
+웹 밖에서 톤을 훔쳐오는 곳. **웹 갤러리만 보면 웹처럼 생긴 것만 나온다.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| The Brand Identity | https://the-brandidentity.com | 브랜딩 프로젝트 심층 | 브랜드 톤 전체 설계 | 무료 | 케이스별 근거 설명이 충실 |
+| Branding Style Guides | https://brandingstyleguides.com | 실제 브랜드 가이드라인 | 규칙 문서 작성 | 무료 | **가이드 문서 구조 자체가 참고 대상** |
+| Brand Guidelines | https://brandguidelines.net | 브랜드 가이드 아카이브 | 위와 동일 | 무료 | 보완용 |
+| Rebrand Gallery | https://rebrand.gallery | 리브랜딩 전후 비교 | 개편 브리프 | 무료 | **before/after가 있어 "왜 바꿨나"를 학습 가능** |
+| Mindsparkle Mag | https://mindsparklemag.com | 큐레이션된 그래픽 프로젝트 | 인쇄·패키지까지 | 무료 | 웹 밖 사조 유입 |
+| AIGA Eye on Design | https://eyeondesign.aiga.org | 디자인 저널리즘 | 맥락과 담론 | 무료 | 트렌드의 "이유"를 다룸 |
+| Visuelle | https://visuelle.co.uk | 동시대 그래픽 작업 | 영국·유럽 톤 | 무료 | 인쇄물 비중 높음 |
+| Inspiration Grid | https://theinspirationgrid.com | 그래픽·브랜딩 일간 | 넓은 유입 | 무료 | 볼륨형 |
+| The Index | https://theindex.website | 그래픽 디자인 디렉토리 | 스튜디오 발굴 | 무료 | 스튜디오 사이트로 이어짐 |
+| Trending.design | https://trending.design | 트렌딩 그래픽 | 지금 뜨는 것 | 무료 | 짧은 주기 |
+| Logobook | https://logobook.com | 로고 아카이브 | 마크 설계 | 무료 | 고전 로고 다수 |
+| Logo System | https://logosystem.co | 실제·가상 로고 | 로고 시스템 | 무료 | 시스템 단위 |
+| LogoLounge | https://www.logolounge.com | 대규모 로고 DB | 로고 리서치 | 유료 | 연간 트렌드 리포트로 유명 |
+| Deck.gallery | https://www.deck.gallery | 잘 만든 발표 자료 | 피치덱·소개 자료 | 무료 | 웹이 아닌 문서 디자인 |
+| Steep | https://steep.design | 스토리형 크리에이티브 | 세로 스토리 포맷 | 무료 | 모바일 세로 구성 |
+| Love The Work More | https://lovetheworkmore.com | 수상 광고 캠페인 | 카피와 아이디어 | 무료 | 웹 카피 톤 자극 |
+| Adfolio `[!]` | https://adfolio.design | 소셜 광고 | 짧은 카피 | 무료 | 봇 차단 있음 |
+
+---
+
+## 17. 아카이브 · 메타 디렉토리 · 커뮤니티
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Web Design Museum | https://www.webdesignmuseum.org | 1991–2010년대 웹 아카이브 | 레트로·노스탤지어 브리프 | 무료 | 시대별 고증이 정확 |
+| Curated.design | https://curated.design | 디자인 리소스 디렉토리 | 도구·에셋 탐색 | 무료 | 메타 디렉토리 |
+| toools.design | https://www.toools.design | 디자인 도구·리소스 대량 집계 | 도구가 필요할 때 | 무료 | 이 카탈로그의 원 소스 중 하나 |
+| Design Spells | https://www.designspells.com | "마법 같은" 디테일 순간 | 디테일 한 방 | 무료 | 짧은 클립 중심 |
+| Recent.design | https://recent.design | 최신 UI/UX | 빠른 스캔 | 무료 | 갱신 빠름 |
+| Design Vault | https://designvault.io | UI 패턴 아카이브 | 패턴 단위 | 무료 일부 | 실제 제품 캡처 |
+| Collect UI | https://collectui.com | Daily UI 기반 수집 | 컴포넌트 발상 | 무료 | Dribbble 기반이라 비현실적인 것 섞임 |
+| Viewport UI | https://viewport-ui.design | 큐레이션된 UI 경험 | 화면 단위 | 무료 | 소규모 정예 |
+| Dribbble | https://dribbble.com | 디자인 커뮤니티 | 색·타이포 발상만 | 무료 + 유료 | **구현 불가능한 "샷"이 많다. 구조 참고 금지** |
+| Behance | https://www.behance.net | 프로젝트 케이스스터디 | 과정과 근거 | 무료 | 다단계 케이스가 강점 |
+| Best Website Gallery | https://bestwebsite.gallery | 오래된 큐레이션 갤러리 | 넓은 유입 | 무료 | 2010년대 감각 다수 |
+| Humaan | https://www.humaan.com | (스튜디오) 자체 작업 | 스튜디오 수준 기준선 | 무료 | 개별 스튜디오 사이트도 레퍼런스다 |
+
+---
+
+## 18. 다크 모드 전용
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| Dark Mode Design | https://darkmodedesign.com | 다크 테마 웹 | 다크가 **요구된** 브리프 | 무료 | 다크에서의 대비 처리 학습 |
+| dark.design | https://dark.design | 다크 테마 베스트 | 위와 동일 | 무료 | 큐레이션 강도 높음 |
+
+> **경고**: 다크 모드는 AI 슬롭 1순위 시그니처다. 브리프가 요구하지 않으면 다크를 기본값으로 삼지 마라 (04번 A-01 참조).
+
+---
+
+## 19. 국내(한국) 레퍼런스
+
+한국어 타이포·정보 밀도·업종 관행은 서구 갤러리에서 안 나온다. **한국어 프로젝트면 반드시 1개 이상 포함.**
+
+| 이름 | URL | 무엇을 모으나 | 언제 보나 | 비용 | 특징 |
+|---|---|---|---|---|---|
+| 노트폴리오 | https://notefolio.net | 국내 디자이너 포트폴리오·작업물 | 한국어 타이포·레이아웃 감각 | 무료 | 국내 최대 창작자 플랫폼 |
+| 디비컷 (DBCUT) | https://www.dbcut.com | 국내외 신규 사이트 평가·아카이브 | 국내 기업·기관 사이트 관행 | 무료 | 커뮤니티 평가 기능 |
+| GDWeb | https://gdweb.co.kr | 국내 에이전시·제작사 포트폴리오 | 국내 에이전시 수준선 | 무료 | 분야별 순위 제공 |
+| 눈누 | https://noonnu.cc | 상업용 무료 한글 폰트 | 한글 폰트 선정 | 무료 | 10번 항목과 중복 게재 |
+
+---
+
+## 링크 상태 리포트 (2026-08-20 검증)
+
+전체 155개 URL에 대해 curl로 최종 상태 코드를 확인했다. **완전히 죽은 링크는 없었다.**
+
+| 상태 | 대상 | 해석 |
+|---|---|---|
+| **HTTPS 연결 거부** | commercecream.com | DNS는 살아있으나 443 포트 연결 거부(Connection refused). HTTP로만 200 응답. **사실상 방치 상태 — 인용 시 주의**. 이 문서에서는 `http://`로 표기 |
+| 403 (봇 차단) | cssdesignawards.com | 브라우저로는 정상. 자동 접근(WebFetch/curl) 불가 |
+| 429 (레이트 리밋) | siteinspire.com, refs.gallery, adfolio.design | 정상 운영 중. 자동 접근 시 간헐 차단 |
+| 455 (Cloudflare 차단) | uncut.wtf | 정상 운영 중. 봇 차단 정책 |
+| 401 | unsplash.com | API 인증 요구. 브라우저 접근은 정상 |
+| 200 | 나머지 149개 전부 | 정상 |
+
+**AI 에이전트 관점 시사점**: 위 6개 사이트는 `WebFetch`로 읽을 수 없다.
+자동 리서치 파이프라인에서는 **Godly, Land-book, Lapa Ninja, Typewolf, Codrops, UI Sources, Eyecandy, DesignSystems.one**처럼
+텍스트 설명이 충실하고 봇 차단이 없는 소스를 1순위로 잡아라 (02번 §5 참조).

research/references/02-methodology.md

@@ -0,0 +1,410 @@
+# 02 — 레퍼런스 해체·합성 방법론
+
+> 이 문서는 두 부분이다.
+> **§1–4**: 사람 디자이너가 레퍼런스를 다루는 방식 (원리).
+> **§5–8**: 이미지를 보지 못하는 AI 에이전트가 그 원리를 실행하는 절차 (실무).
+>
+> `designpaca` 스킬은 §6의 **6축 해체 시트**와 §7의 **3-소스 합성 규칙**을 강제 산출물로 삼는다.
+
+---
+
+## 1. 원칙: 베끼기와 참고의 경계
+
+### 1.1 무엇을 훔치고 무엇을 훔치지 않는가
+
+Austin Kleon의 *Steal Like an Artist*가 말하는 "훔치기"는 결과물 복제가 아니라
+**분해 → 원리 추출 → 재조합**이다. 실무에서 이 경계는 다음과 같이 그어진다.
+
+| 훔쳐도 되는 것 (원리) | 훔치면 안 되는 것 (표현) |
+|---|---|
+| 그리드 비율 (예: 2:1 비대칭 분할) | 그 사이트의 레이아웃 전체 배치 |
+| 타입 스케일 비율 (예: 1.333) | 폰트 조합 그대로 |
+| 색의 **역할 배분** (배경 60 / 중립 30 / 강조 10) | 색상값 그 자체 |
+| 여백 리듬 (섹션 간 120px, 요소 간 24px) | 섹션 구성 순서 그대로 |
+| 모션의 **의도** (스크롤 = 시선 유도) | 특정 애니메이션 시퀀스 복제 |
+| 정보 위계 결정 (무엇을 1순위로 뒀나) | 카피 문장 |
+
+**판별 기준 한 줄**: 레퍼런스를 언어로 설명했을 때 그 설명이 **여러 다른 결과물로 구현될 수 있으면 원리**,
+하나의 결과물로만 이어지면 표현이다. 원리만 가져가라.
+
+### 1.2 레퍼런스를 3개 이상 쓰는 이유
+
+레퍼런스가 1개면 모방이다. 2개면 절충이다. **3개 이상이어야 합성이 된다.**
+그리고 3개는 서로 다른 층위에서 골라야 한다 (§7 참조).
+
+### 1.3 레퍼런스를 쓰지 않았을 때 벌어지는 일
+
+레퍼런스 없이 생성한 디자인은 학습 데이터의 **최빈값**으로 수렴한다.
+그 최빈값이 정확히 04번 문서에 나열된 AI 슬롭 시그니처다.
+레퍼런스 참고는 취향의 문제가 아니라 **최빈값 회피 장치**다.
+
+---
+
+## 2. 6축 해체 프레임워크
+
+레퍼런스 하나를 볼 때 반드시 이 6축으로 뜯는다. 축마다 **숫자 또는 규칙으로 기록**한다.
+"세련됐다", "깔끔하다" 같은 형용사는 기록이 아니다.
+
+### 축 1 — 레이아웃 그리드
+
+기록할 것:
+- 컬럼 수와 거터 (12컬럼 / 24px 거터 / 최대폭 1280px 같은 식)
+- **콘텐츠 최대폭**과 뷰포트 폭의 비 (예: 1440 뷰포트에 1120 컨테이너 = 78%)
+- 대칭인가 비대칭인가. 비대칭이면 분할 비율 (2:1, 3:2, 5:7 등)
+- 그리드를 **깨는 요소**가 있는가 (풀블리드 이미지, 오버행 타이틀)
+- 본문 텍스트 한 줄의 글자 수 (영문 45–75자 / 국문 25–40자가 정상 범위)
+
+질문: *"이 사이트는 무엇을 정렬시키고 무엇을 일부러 어긋나게 했는가?"*
+
+### 축 2 — 타입 스케일
+
+기록할 것:
+- 실제 사용된 폰트 크기 목록 (예: 14 / 16 / 20 / 32 / 56 / 96)
+- 그 사이의 **비율** (1.2 minor third / 1.25 major third / 1.333 perfect fourth / 1.5)
+- 서로 다른 크기가 **몇 단계** 쓰였나 (좋은 디자인은 보통 3–5단계. 8단계 이상이면 통제 실패)
+- 폰트 패밀리 수 (2개가 표준. 3개 이상이면 이유가 있어야 함)
+- 굵기 대비 (400 vs 700처럼 극단으로 벌렸나, 500 vs 600처럼 붙였나)
+- line-height: 본문 1.5–1.7, 헤드라인 1.0–1.2가 일반 범위
+- letter-spacing: 대형 헤드라인은 보통 음수(-0.02em ~ -0.04em)
+
+질문: *"가장 큰 글자와 본문의 비는 몇 배인가?"* (4배 미만이면 위계가 약하다)
+
+### 축 3 — 컬러 역할
+
+색상값이 아니라 **역할**을 기록한다.
+
+| 역할 | 기록 항목 |
+|---|---|
+| surface (배경) | 몇 단계의 배경이 있나. 순백/순흑인가 아니면 오프화이트/오프블랙인가 |
+| text | 본문 / 보조 / 비활성 3단계가 있나 |
+| accent | 강조색이 **몇 %의 면적**을 차지하나 (10% 이하가 정상) |
+| border | 테두리가 존재하나, 아니면 배경 차이로만 구분하나 |
+| state | hover / focus / active / disabled가 별도 색인가 |
+
+60-30-10 규칙: 지배색 60% / 중립 30% / 강조 10%.
+레퍼런스에서 이 비율이 어떻게 깨져 있는지가 그 사이트의 성격이다.
+
+질문: *"강조색을 지우면 이 페이지는 여전히 읽히는가?"* (읽혀야 정상이다)
+
+### 축 4 — 여백 리듬
+
+기록할 것:
+- 기본 단위 (4px / 8px 그리드인가)
+- 섹션 간 수직 여백 (데스크톱에서 80–160px가 일반 범위)
+- 요소 간 여백과 섹션 간 여백의 **비율** (보통 1:4 ~ 1:6)
+- 여백 값이 몇 종류인가 (4–6종이 건강. 모든 곳이 같은 값이면 리듬이 없다)
+- 좌우 패딩 (모바일 16–24px, 데스크톱 24–80px)
+
+질문: *"이 페이지에서 가장 큰 빈 공간은 어디이고, 왜 거기인가?"*
+
+### 축 5 — 모션 언어
+
+기록할 것:
+- 트리거: 로드 / 스크롤 진입 / 호버 / 클릭 / 커서 위치 중 무엇에 반응하나
+- duration: 마이크로(100–200ms) / 트랜지션(200–400ms) / 연출(600ms+)
+- easing: ease-out인가 spring인가. **bounce가 있으면 대개 잘못된 선택**이다
+- 모션이 **정보를 전달하나** (상태 변화·연속성) 아니면 장식인가
+- 스크롤 연출이 콘텐츠를 가리는가 (reveal 실패 시 빈 화면이 되는가)
+- `prefers-reduced-motion` 대응이 있나
+
+질문: *"모션을 전부 끄면 이 사이트는 여전히 작동하는가?"* (작동해야 정상이다)
+
+### 축 6 — 시선 흐름
+
+기록할 것:
+- 첫 시선 진입점 (가장 큰 대비를 가진 요소)
+- 2번째, 3번째로 눈이 가는 곳
+- 그 순서가 **비즈니스 우선순위와 일치하는가**
+- Z 패턴인가 F 패턴인가 단일 축 수직 낙하인가
+- CTA가 시선 경로 위에 있나, 아니면 옆에 비켜 있나
+
+**측정 방법 (squint test)**: 눈을 가늘게 뜨거나 이미지를 강하게 블러 처리한다.
+디테일이 사라지고 명암 덩어리만 남았을 때 먼저 보이는 것이 실제 진입점이다.
+AI 에이전트는 눈을 못 뜨므로 대신 **회색조 위계 서술**을 만든다 (§6.3).
+
+---
+
+## 3. 프로가 실제로 하는 순서
+
+1. **브리프 한 줄 먼저.** 레퍼런스를 모으기 전에 "이 사이트는 누구에게 무엇을 하게 만드나"를 한 문장으로 쓴다.
+   이 문장이 없으면 수집은 취향 나열이 된다.
+2. **넓게 모은다.** 40–60개를 빠르게 수집. 이 단계에서는 판단하지 않는다.
+3. **12–20개로 잘라낸다.** 브리프 문장과 연결되지 않는 것을 전부 버린다.
+4. **각 레퍼런스에 "역할표"를 붙인다.** 이 이미지는 색을 위해 / 이건 그리드를 위해 / 이건 질감을 위해.
+   역할이 안 붙는 레퍼런스는 그냥 예쁜 것이므로 버린다.
+5. **6축으로 해체한다** (§2). 형용사가 아니라 숫자로 기록.
+6. **합성한다** (§7).
+7. **자가 검증한다** (§8).
+
+---
+
+## 4. 무드보드 구성법
+
+### 4.1 좋은 무드보드의 조건
+
+- **결정을 내리게 하는가.** 보기 좋기만 한 보드는 실패다. 각 항목이 "이 결정을 위해 여기 있다"를 말해야 한다.
+- **의도적 그룹핑.** 색 / 질감 / 구조 / 타입 / 모션으로 묶는다. 아무데나 붙이지 않는다.
+- **반례를 포함한다.** "이렇게는 안 한다"의 예시 2–3개를 넣으면 방향이 훨씬 선명해진다.
+- **웹 밖의 것을 30% 이상 넣는다.** 웹 갤러리만 보면 웹처럼 생긴 것만 나온다.
+  인쇄물, 포스터, 패키지, 영화 타이틀, 건축 사진을 섞어라.
+
+### 4.2 AI 에이전트용 무드보드 = 텍스트 무드보드
+
+에이전트는 이미지 보드 대신 **`MOODBOARD.md` 파일**을 만든다. 형식:
+
+```markdown
+## 브리프 한 줄
+[누가] 이 페이지에 와서 [무엇]을 하게 만든다. 그때 느껴야 할 것은 [형용사 2개].
+
+## 레퍼런스 (역할 명시 필수)
+### R1 — 구조 담당: <이름> <URL>
+- 그리드: 비대칭 5:7, 최대폭 1200
+- 섹션 간 여백: 140px
+- 왜 골랐나: 브리프의 "정보량이 많지만 답답하지 않게"에 대응
+
+### R2 — 톤 담당: <이름> <URL>
+- 색 역할: 오프화이트 #F7F5F2 배경 / 잉크 #14120F 텍스트 / 강조 단 하나
+- 타입: 세리프 디스플레이 + 그로테스크 본문, 비율 1.333
+- 왜 골랐나: 브리프의 "신뢰감"
+
+### R3 — 디테일 담당: <이름> <URL>
+- 모션: 스크롤 진입 시 8px 상승 + 페이드, 320ms, ease-out
+- 호버: 밑줄이 좌→우로 그려짐
+- 왜 골랐나: 과하지 않게 살아있는 느낌
+
+## 안 할 것 (반례)
+- 보라-파랑 그라디언트 히어로
+- 아이콘 상단 배치 3열 균등 카드
+- 다크 모드 기본값
+
+## 결정 사항 (위 3개에서 합성한 결과)
+- 그리드: R1의 5:7을 채택하되 최대폭은 1120으로 축소
+- 팔레트: R2의 역할 구조 채택, 색상값은 브랜드 기준으로 교체
+- 모션: R3 채택, duration만 280ms로 단축
+```
+
+---
+
+## 5. AI 에이전트의 현실: 이미지를 못 볼 때 무엇을 하는가
+
+### 5.1 전제
+
+에이전트는 갤러리 사이트의 **스크린샷을 볼 수 없는 경우가 많다**.
+Awwwards·Godly의 카드는 이미지이고, `WebFetch`는 이미지를 텍스트로 바꿔주지 않는다.
+그러므로 전략은 **"이미지를 보는 것"이 아니라 "구조를 읽는 것"**이다.
+
+### 5.2 세 가지 접근 경로 (우선순위 순)
+
+**경로 A — 레퍼런스 사이트 본체를 직접 읽는다 (가장 정확)**
+
+갤러리에서 링크된 **원본 사이트**를 `WebFetch`한다. 갤러리 카드가 아니라 실물이다.
+얻을 수 있는 것: 카피 톤, 섹션 순서, 정보 위계, 내비게이션 구조, 헤딩 계층.
+얻을 수 없는 것: 색, 폰트, 여백, 모션 (CSS는 마크다운 변환에서 소실됨).
+
+**경로 B — 텍스트 설명이 있는 소스를 우선한다 (가장 효율적)**
+
+이미지 대신 **말로 설명해주는** 소스를 골라라. 01번 카탈로그에서 이 성격의 사이트:
+
+| 소스 | 얻는 것 |
+|---|---|
+| Typewolf | 특정 사이트가 쓴 폰트 이름 + 대체 무료 폰트 |
+| Fonts In Use | 폰트의 역사적·산업적 톤 |
+| Eyecandy (eyecannndy.com) | 모션 기법에 붙은 **이름** (예: "displacement", "kinetic type") |
+| UI Sources | 인터랙션을 문장으로 분해한 해설 |
+| UX Bites (Built for Mars) | 특정 앱 UX가 왜 좋은지 서술 |
+| DesignSystems.one | 실제 시스템의 토큰 값 (design.md 다운로드) |
+| designmd.app | AI 에이전트용으로 정제된 561개 디자인 시스템 정의 |
+| Codrops | 효과의 **소스 코드** 그 자체 |
+| Happy Hues | 색을 "역할"로 서술한 팔레트 |
+
+**경로 C — 브라우저 도구가 있으면 computed style을 뽑는다 (가장 강력)**
+
+Chrome DevTools MCP / Playwright를 쓸 수 있으면 실제 렌더된 값을 읽을 수 있다.
+이때 뽑을 것: `font-family`, `font-size`, `line-height`, `letter-spacing`, `color`,
+`background-color`, `border-radius`, `box-shadow`, `padding`, `gap`, `max-width`, `transition`.
+
+같은 일을 하는 기성 도구:
+- **Dembrandt** (`github.com/dembrandt/dembrandt`) — Playwright로 렌더 후 토큰 추출. MCP 클라이언트에서 도구로 사용 가능
+- **Design Extractor** / **Design Snap** — 크롬 확장. computed style → `design.md` 생성
+
+### 5.3 WebFetch에 던질 프롬프트 템플릿
+
+`WebFetch`는 페이지를 마크다운으로 바꿔 작은 모델에게 질문을 던진다.
+그러므로 **"예쁜지 물어보면 안 되고, 구조를 물어야 한다."**
+
+레퍼런스 사이트 본체에 던질 프롬프트:
+
+```
+이 페이지의 구조를 분석해줘. 다음을 순서대로 답해라.
+1. 상단부터 순서대로 섹션 목록 (각 섹션의 역할을 한 단어로)
+2. h1의 정확한 문장, h2 목록
+3. CTA 문구 전부와 각각의 위치
+4. 내비게이션 항목 목록
+5. 이 페이지가 독자에게 시키려는 단 하나의 행동
+6. 카피의 톤 (문장 길이, 1인칭/2인칭, 전문용어 밀도)
+7. 숫자·지표가 사용된 곳과 그 값
+추측하지 말고 페이지에 실제로 있는 것만 답해라. 없으면 "없음"이라고 써라.
+```
+
+폰트를 알고 싶을 때 (Typewolf 등):
+
+```
+이 페이지에서 언급된 폰트 이름을 전부 나열하고,
+각각이 헤드라인용인지 본문용인지, 유료인지 무료인지,
+그리고 제시된 무료 대체 폰트가 있으면 함께 적어라.
+```
+
+모션 기법을 알고 싶을 때 (Eyecandy, Codrops):
+
+```
+이 페이지에서 설명하는 애니메이션 기법의 이름, 그 기법이 무엇을 하는지,
+그리고 구현에 쓰인 CSS 속성이나 라이브러리를 나열해라.
+```
+
+### 5.4 검색으로 레퍼런스를 "말로" 확보하는 법
+
+`WebSearch`는 이미지를 못 주지만, **디자인을 서술한 글**은 준다. 유효한 쿼리 형태:
+
+- `"<사이트명>" web design analysis typography color` — 특정 사이트 분해 글
+- `awwwards site of the day <YYYY-MM> what makes it work` — 최근 수상작 해설
+- `<업종> landing page teardown 2026` — 티어다운 글
+- `<브랜드> design system tokens color typography` — 토큰 공개 여부 확인
+- `site:typewolf.com <폰트명>` — 폰트 사용례
+
+### 5.5 하지 말아야 할 것
+
+- **갤러리 홈페이지만 WebFetch하고 "레퍼런스를 봤다"고 말하기.** 홈페이지에는 카드 이미지뿐이라 정보가 없다.
+- **레퍼런스 이름만 나열하고 넘어가기.** 6축 수치가 없으면 참고한 게 아니다.
+- **이미지를 못 본다는 이유로 레퍼런스 단계를 건너뛰기.** 경로 B만으로도 폰트·색 역할·모션 언어는 확보된다.
+
+---
+
+## 6. 실전 절차: 에이전트용 8단계
+
+### 6.1 절차
+
+| 단계 | 행동 | 산출물 |
+|---|---|---|
+| 1 | 브리프를 한 문장으로 압축 | `[대상]이 [행동]하게. 느낌은 [형용사 2개]` |
+| 2 | 01번 §0 라우팅 표로 갤러리 3개 선택 | 갤러리명 3개 + 선택 이유 |
+| 3 | 각 갤러리에서 실제 사이트 URL 1개씩 확보 | 원본 URL 3개 |
+| 4 | 각 URL을 §5.3 템플릿으로 WebFetch | 섹션 구조 3벌 |
+| 5 | 텍스트 소스로 폰트·색·모션 보강 (§5.2 경로 B) | 폰트명, 팔레트 역할, 모션 기법명 |
+| 6 | **6축 해체 시트** 작성 (§2) | 축별 숫자·규칙 |
+| 7 | **3-소스 합성** (§7) | 최종 결정 사항 목록 |
+| 8 | **자가 검증** (§8) | 통과 여부 + 재작업 항목 |
+
+### 6.2 6축 해체 시트 템플릿
+
+```markdown
+### 레퍼런스: <이름> — <URL>
+| 축 | 관측값 | 내 프로젝트에 가져갈 것 |
+|---|---|---|
+| 그리드 | 최대폭 1200 / 비대칭 7:5 / 거터 32 | 비대칭 비율만 |
+| 타입스케일 | 15/17/21/34/68 (≈1.28) / 패밀리 2개 | 비율 1.25로 조정해 채택 |
+| 컬러 역할 | 배경 1단계 / 텍스트 3단계 / 강조 1색 · 면적 6% | 구조 채택, 색상값 교체 |
+| 여백 리듬 | 8px 단위 / 섹션간 120 / 요소간 24 (1:5) | 그대로 |
+| 모션 | 스크롤 진입 fade+8px / 300ms / ease-out | 채택, 280ms |
+| 시선 흐름 | 대형 헤드라인 → 제품샷 → CTA (단일 수직축) | 채택 |
+```
+
+### 6.3 이미지를 못 볼 때의 squint test 대체 — "회색조 위계 서술"
+
+에이전트는 실제 화면을 흐리게 볼 수 없으므로, **자기가 만들 화면**에 대해 다음을 문장으로 쓴다.
+
+```
+색을 전부 제거하고 회색조로 봤을 때 이 페이지에서 가장 어두운(=가장 강한) 덩어리는 ___이고,
+두 번째는 ___, 세 번째는 ___이다.
+이 순서는 비즈니스 우선순위 [1위 ___ / 2위 ___ / 3위 ___]와 일치한다 / 일치하지 않는다.
+```
+
+일치하지 않으면 크기·굵기·대비를 조정한다. **색으로 해결하려 들지 마라** — 색을 빼도 위계가 서야 한다.
+
+---
+
+## 7. 3-소스 합성 규칙
+
+### 7.1 층위를 분리해서 고른다
+
+레퍼런스 3개를 **같은 층위에서 고르면 안 된다**. 3개 다 "예쁜 랜딩페이지"면 평균이 나온다.
+반드시 아래처럼 역할을 나눠 고른다.
+
+| 슬롯 | 무엇을 가져오나 | 어디서 고르나 |
+|---|---|---|
+| **R1 · 구조(Skeleton)** | 그리드, 섹션 순서, 정보 위계, 여백 리듬 | 같은 업종·같은 목적의 사이트 (Land-book, Refero, Lapa Ninja) |
+| **R2 · 톤(Skin)** | 색 역할, 타입 페어링, 질감, 형태 언어 | **다른 업종**의 사이트 또는 웹이 아닌 것 (SiteInspire, The Brand Identity, Typographic Posters) |
+| **R3 · 디테일(Spark)** | 모션 하나, 호버 하나, 전환 하나 | Codrops, Eyecandy, Design Spells, Details Matter |
+
+**핵심은 R2가 R1과 다른 업종이어야 한다는 것.**
+SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭.
+SaaS 구조 + 독립 출판사의 톤 = 차별화.
+
+### 7.2 합성 시 충돌 해결 규칙
+
+레퍼런스 3개가 서로 어긋날 때의 우선순위:
+
+1. **가독성·접근성이 항상 이긴다.** R2의 톤이 대비를 깨면 톤을 조정한다.
+2. **R1의 구조가 R3의 모션을 이긴다.** 모션 때문에 구조를 바꾸지 않는다.
+3. **브리프 한 줄이 모든 레퍼런스를 이긴다.** 레퍼런스가 브리프와 충돌하면 레퍼런스를 버린다.
+4. **하나의 축은 하나의 소스에서만 가져온다.** 그리드는 R1에서만, 팔레트는 R2에서만.
+   축을 섞으면 이유 없는 절충이 된다.
+
+### 7.3 "그대로 가져오지 않았음"을 증명하는 변형 3가지
+
+각 레퍼런스마다 최소 하나씩 의도적으로 바꾼다. 그리고 **왜 바꿨는지 한 줄로 적는다.**
+
+- **비율 변형**: 타입 스케일 1.333 → 1.25 (정보량이 많아 단계 간 점프를 줄임)
+- **역전 변형**: 레퍼런스는 좌측 텍스트/우측 이미지 → 우측 텍스트/좌측 이미지 (읽기 흐름상 CTA를 우하단에 두기 위해)
+- **제거 변형**: 레퍼런스의 3개 요소 중 1개 삭제 (해당 정보가 우리 브리프엔 없음)
+
+---
+
+## 8. 자가 검증 체크리스트
+
+### 8.1 Awwwards 채점 축으로 자가 채점
+
+Awwwards의 실제 배점은 **Design 40% / Usability 30% / Creativity 20% / Content 10%**이다.
+Creativity가 20%뿐이라는 점이 중요하다 — **화려함은 4순위다.**
+
+| 항목 | 자문 | 통과 기준 |
+|---|---|---|
+| Design 40 | 타입 스케일·그리드·리듬이 전 브레이크포인트에서 일관한가 | 6축 시트의 값이 실제 코드에 반영됐는가 |
+| Usability 30 | 모션 끄고, 색 빼고, 키보드만으로 쓸 수 있는가 | 3개 다 예 |
+| Creativity 20 | 이 페이지에 **이 프로젝트만의 결정**이 최소 1개 있는가 | 그 결정을 한 문장으로 말할 수 있어야 함 |
+| Content 10 | 카피가 경쟁사 이름으로 바꿔도 말이 되는가 | 말이 되면 실패 (§8.2) |
+
+### 8.2 경쟁사 치환 테스트
+
+카피에서 제품/회사 이름을 경쟁사 이름으로 바꿔 읽는다.
+**여전히 자연스러우면 그 카피는 아무것도 말하지 않는 것이다.** 다시 써라.
+
+### 8.3 최종 게이트 (하나라도 걸리면 재작업)
+
+- [ ] 레퍼런스 3개의 **URL**과 각각의 **역할(R1/R2/R3)**을 말할 수 있다
+- [ ] 6축 해체 시트에 형용사가 아닌 **숫자**가 들어 있다
+- [ ] R2가 R1과 **다른 업종**이다
+- [ ] 각 레퍼런스마다 **의도적 변형 1개**와 그 이유가 있다
+- [ ] 회색조 위계 순서가 비즈니스 우선순위와 일치한다
+- [ ] 04번 문서의 금지 목록을 훑고, 걸린 항목이 없다
+- [ ] 모션을 전부 끄고도 페이지가 작동한다
+- [ ] 강조색을 지워도 페이지가 읽힌다
+- [ ] 카피가 경쟁사 치환 테스트를 통과한다
+
+---
+
+## 9. 요약 카드 (스킬에 그대로 넣을 수 있는 형태)
+
+```
+[레퍼런스 프로토콜]
+1. 브리프 1줄 → 2. 갤러리 3개 선택(01번 §0 라우팅) → 3. 원본 URL 3개 확보
+4. WebFetch 구조 분석(02번 §5.3 템플릿) → 5. 텍스트 소스로 폰트·색·모션 보강
+6. 6축 해체 시트(그리드/타입스케일/컬러역할/여백리듬/모션언어/시선흐름)
+7. 3-소스 합성(R1 구조 · R2 톤 · R3 디테일, R2는 반드시 다른 업종)
+8. 자가 검증(§8.3 9개 항목) → 하나라도 실패 시 6번으로 복귀
+
+[금지]
+- 갤러리 홈만 열어보고 "참고했다"고 말하기
+- 형용사만 적힌 해체 시트
+- 3개 레퍼런스를 같은 층위에서 고르기
+- 이미지를 못 본다는 이유로 이 절차를 건너뛰기
+```

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번 문서)

research/references/04-ai-slop-signatures.md

@@ -0,0 +1,267 @@
+# 04 — "AI가 만든 티" 시그니처 목록 (금지 목록)
+
+> **이 문서가 `designpaca`의 핵심이다.**
+> 아래 항목은 전부 **구체적 패턴**이다. "generic하다", "심심하다" 같은 말은 쓰지 않는다.
+> 각 항목은 `패턴 → 왜 문제인가 → 대신 무엇을 하나` 구조다.
+>
+> **총 101개 시그니처** — A 컬러 13 · B 타이포 15 · C 레이아웃 14 · D 컴포넌트 16 ·
+> E 모션 9 · F 카피 14 · G 이미지 9 · H 품질 11 (+ I 코드 지문 grep 목록, J 자가 채점표)
+>
+> **사용법**: 작업 완료 전 이 문서를 훑고, 걸린 항목의 ID를 나열한 뒤 전부 해소해야 한다.
+> 3개 이상 걸리면 그 디자인은 폐기하고 다시 시작한다.
+
+---
+
+## 0. 근거: 이건 인상이 아니라 실측이다
+
+Adrian Krebs가 **Show HN 랜딩페이지 1,590개**를 Playwright로 렌더한 뒤
+DOM·computed style 기반 결정론적 규칙 16개로 채점한 결과:
+
+| 등급 | 기준 | 비율 | 개수 |
+|---|---|---|---|
+| Heavy slop | 4개 이상 패턴 검출 | **22%** | 347 |
+| Mild slop | 2–3개 | **32%** | 508 |
+| Clean | 0–1개 | 46% | 735 |
+
+개별 패턴 검출률 (일부 공개치):
+
+| 패턴 | 검출률 |
+|---|---|
+| CTA 버튼이 보라 계열 (indigo/violet) | **10.7%** |
+| 헤드라인 전체 대문자 | **10.5%** |
+| 번호 매긴 단계 시퀀스 (1·2·3) | **9.4%** |
+
+> Krebs 본인의 결론: *"슬롭 페이지가 나쁜 건 아니다. 그냥 영감이 없을 뿐이다. 전환은 잘 될 수도 있다.
+> 다만 지금 Show HN에 올라오는 것의 절반 이상은 '의견 없는 채팅 인터페이스가 만들었다'는 시각적 지문을 갖고 있다."**
+
+즉 이 문서의 목표는 "예쁘게"가 아니라 **지문 제거**다.
+
+---
+
+## A. 컬러 시그니처
+
+| ID | 시그니처 (구체적으로) | 왜 문제인가 | 대신 무엇을 하나 |
+|---|---|---|---|
+| **A-01** | **다크 모드를 기본값으로.** 브리프에 없는데 `bg-slate-900` / `#0B0B0F` 배경으로 시작 | AI 툴(v0·Cursor·Bolt)의 가장 흔한 반사 반응. 단일 시그니처 중 검출 빈도 1위 | 라이트를 기본으로 설계하고 다크는 **토큰으로 파생**. 다크가 필요하면 브리프에 근거를 대라 |
+| **A-02** | **보라→파랑 그라디언트 히어로.** `#6366f1 → #a855f7`, `#8b5cf6 → #3b82f6`, Tailwind `from-purple-600 to-blue-500` | Tailwind 기본 팔레트의 indigo/violet은 "결정하지 않았다"의 신호. 수십만 개 튜토리얼의 기본값 | 브랜드 색 1개를 정하고 **단색 + 중립**으로 간다. 그라디언트를 쓸 거면 같은 hue 내 명도 변화(예: `#1B4332 → #2D6A4F`) |
+| **A-03** | **"VibeCode Purple"** — 라벤더-퍼플 (`#a78bfa`, `#c4b5fd` 계열)이 어디에나 | 텍스트→랜딩 생성기의 출력 지문. 색을 고른 게 아니라 안 고른 것 | 보라를 쓰지 마라. 꼭 필요하면 채도를 낮추고 온도를 바꿔라 (`#6B5B95` 같은 탁한 보라) |
+| **A-04** | **네온 온 다크** — 시안(`#22d3ee`) / 바이올렛(`#a855f7`)이 검정 위에서 발광 | "사이버펑크 기본값". 게이밍·개발자 툴 브리프가 아닌데 나오면 즉시 티가 남 | 다크가 필요하면 **저채도 액센트 1개**. 발광 대신 **명도 차이**로 위계를 만들어라 |
+| **A-05** | **컬러 글로우 / 박스섀도.** `box-shadow: 0 0 80px rgba(139,92,246,.5)` 같은 큰 컬러 그림자 | 깊이감을 색으로 가짜로 만든 것. 실제 광원 논리가 없음 | 그림자는 중립색으로, 작게. `0 1px 2px rgba(0,0,0,.06)` + `0 8px 24px rgba(0,0,0,.08)` 2단 구성 |
+| **A-06** | **방사형 그라디언트 헤일로** — 히어로 뒤 떠 있는 보라·파랑 원형 발광 오브 | 구성을 못 잡았을 때의 회피 수단. 정보를 담지 않는 픽셀 | 배경은 비워두거나 **실제 콘텐츠**(제품 스크린샷, 타입)로 채워라 |
+| **A-07** | **순백 `#ffffff` / 순흑 `#000000`** 배경·텍스트 | 아무 결정도 하지 않았다는 뜻. 대비 눈부심과 텍스트 번짐도 유발 | 오프화이트 `#FAFAF7` / 잉크 `#111014` 처럼 살짝 틀어라. 브랜드 hue를 2–4% 섞으면 더 좋다 |
+| **A-08** | **Tailwind 기본 토큰 그대로** — `slate-900`, `gray-500`, `indigo-600`, `emerald-500` | 수학적으로 정돈됐지만 **누구나 알아본다**. 이건 팔레트가 아니라 미결정 상태 | `tailwind.config`의 색을 **교체**하라(확장이 아니라). `ink-900`, `ember-600` 같은 프로젝트 고유 이름 |
+| **A-09** | **의미 없는 색 이름 토큰** — `purple-500`을 코드 전체에서 직접 호출 | 브랜드가 바뀌면 전부 다시 찾아야 함. 색이 역할을 못 가짐 | `--color-action-primary`, `--color-surface-elevated`, `--color-text-secondary` 같은 **의미 토큰** |
+| **A-10** | **다크 테마에서 본문 대비가 겨우 통과하거나 미달** — `#0f172a` 위 `#94a3b8` | Krebs가 별도 패턴으로 잡을 만큼 흔한 기능적 결함 | 본문 4.5:1(WCAG) 또는 APCA **Lc ≥ 75** 확보. 다크에서는 순백 대신 `#E8E6E3` 정도로 눈부심 완화 |
+| **A-11** | **그라디언트 텍스트** — 헤드라인·지표 숫자에 `background-clip: text` 그라디언트 | 가독성과 스캔성을 깎으면서 정보는 0. 스크린샷·OG 이미지에서도 깨짐 | 단색. 강조가 필요하면 **크기·굵기·여백**으로 |
+| **A-12** | **크림/베이지 배경(`#FDF8F3`, `#F5F0E8`)을 "고급스러움"의 기본값으로** | 2025–26년 들어 새로 생긴 슬롭. 보라의 대체 기본값이 됐다 | 크림을 쓸 거면 **왜 크림인지** 브리프와 연결하고, 텍스트·액센트를 그에 맞춰 재설계하라 |
+| **A-13** | **색상 hue 4개 이상** 사용 | 결정을 못 한 상태의 전형 | hue 3개 이하. 면적 배분 60(지배)/30(중립)/10(강조) |
+
+---
+
+## B. 타이포그래피 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **B-01** | **Inter를 이유 없이 기본값으로.** 특히 중앙 정렬 히어로 헤드라인에 | AI 인터페이스의 기본 서체. Krebs 16패턴 1번 항목 | Satoshi / Switzer / DM Sans / Work Sans. Inter는 **초고밀도 다국어 UI 같은 명확한 이유**가 있을 때만 |
+| **B-02** | **Space Grotesk + Instrument Serif + Geist 조합** | 이 셋의 반복 조합이 생성 지문으로 특정됨 | 셋 중 하나만 쓰거나, 파운드리를 바꿔라 (Fontshare, Velvetyne) |
+| **B-03** | **헤드라인 한 단어만 세리프 이탤릭** — 나머지는 sans (`Build <em>better</em> products`) | 가장 널리 퍼진 "성의 표시" 관용구. 지금은 성의가 아니라 지문 | 강조는 **줄바꿈·크기·색·여백**으로. 굳이 서체를 섞으려면 문장 전체 단위로 |
+| **B-04** | **페이지 전체에 폰트 패밀리 1개** | 위계를 크기로만 만들게 되어 밋밋해짐 | 디스플레이 1 + 본문 1의 2개 조합. 성격 차이를 크게 (세리프+그로테스크 등) |
+| **B-05** | **타입 스케일이 평평함** — 16 / 18 / 20 / 24처럼 단계 간 비율이 1.15 미만 | 위계가 안 서고 모든 게 똑같이 중요해 보임 | 비율 1.25 또는 1.333. **최대/본문 비 4배 이상** (17 → 68) |
+| **B-06** | **타입 스케일 단계가 8개 이상** | 통제 실패. 값이 우연히 결정됐다는 뜻 | 3–5단계로 제한하고 각 단계에 역할 이름을 붙여라 |
+| **B-07** | **모든 섹션 라벨이 대문자 + 자간 넓힘** (`FEATURES`, `HOW IT WORKS`) | 검출률 10.5%. 얻지 않은 권위를 빌리는 장치 | 라벨을 없애거나, 소문자로 쓰거나, **라벨 없이 헤드라인만**으로 섹션을 구분 |
+| **B-08** | **히어로 = 작은 pill 배지 + 그 아래 거대 헤드라인** (`✨ Now in beta` + H1) | Krebs 16패턴 중 "badge above H1". 가장 알아보기 쉬운 구조 지문 | 배지를 지워라. 정말 필요한 정보면 문장 안에 넣거나 내비 옆에 둬라 |
+| **B-09** | **`_01_ _02_ _03_` 형식의 작은 번호 섹션 라벨** | 에디토리얼 흉내인데 실제 구조는 없음 | 번호가 **순서를 의미할 때만** 쓴다. 장식용 번호는 삭제 |
+| **B-10** | **본문 letter-spacing 0.05em 이상** | 글자 그룹이 흩어져 단어 인식이 느려짐 | 본문 자간 0. 대문자 소형 라벨에만 +0.08em |
+| **B-11** | **대형 헤드라인에 과도한 음수 자간** (-0.06em 이상) | 글자가 서로 먹힘. "디자인한 척"의 부작용 | -0.02em ~ -0.04em 범위. **한글은 음수 자간 금지** |
+| **B-12** | **line-height 1.3 미만의 본문** | 답답하고 읽기 어려움 | 영문 본문 1.5–1.7, **한글 본문 1.6–1.8** |
+| **B-13** | **본문 12px 이하** | 접근성 실패이자 밀도를 못 잡은 신호 | 본문 최소 14px, 권장 16–18px |
+| **B-14** | **한글 폰트를 지정하지 않아 시스템 기본으로 떨어짐** (맑은 고딕 / Apple SD 산돌고딕) | 한국어 사이트에서 즉시 미완성으로 읽힘 | `Pretendard` 또는 `본고딕` 명시. `word-break: keep-all` 함께 설정 |
+| **B-15** | **모노스페이스를 장식으로 사용** — 코드가 아닌 라벨·캡션에 `font-mono` | "테크 느낌"의 저비용 흉내 | 모노스페이스는 **코드·데이터·식별자**에만. 톤이 필요하면 그로테스크의 폭 좁은 컷을 써라 |
+
+---
+
+## C. 레이아웃 · 구조 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **C-01** | **표준 페이지 골격**: 히어로 → 3열 피처 → 로고월 → 요금제 → FAQ → 푸터 | shadcn/ui 예제, Tailwind UI 스크린샷, Vercel 템플릿의 순서 그대로. 구조를 설계하지 않았다는 증거 | 섹션 순서를 **브리프의 설득 논리**로 재배열. 예: 문제 제시 → 실제 사용 화면 → 반론 처리 → 가격. FAQ를 쓸 거면 실제로 받은 질문으로 |
+| **C-02** | **중앙 정렬 히어로 (텍스트 가운데 + CTA 2개 + 아래 스크린샷)** | 가장 안전해서 가장 흔한 구조 | 비대칭 그리드(5:7, 7:5), 좌측 정렬 대형 타입, 또는 텍스트를 화면 하단 3분의 1로 내리기 |
+| **C-03** | **정확히 3열, 균등 폭 피처 카드** | 콘텐츠가 3개여서가 아니라 **3이 예쁘게 떨어져서** 3인 것 | 항목 수를 콘텐츠가 정하게 하라. 2개면 2개, 5개면 5개. 폭도 중요도에 따라 다르게 |
+| **C-04** | **아이콘이 카드 상단 중앙에 있는 피처 카드** (둥근 사각 아이콘 타일 + 제목 + 2문장) | "universal AI feature-card template". 가장 확실한 단일 지문 | 아이콘을 없애고 **숫자·스크린샷·실제 UI 조각**으로 대체. 아이콘을 쓸 거면 좌측 인라인 배치 |
+| **C-05** | **카드 좌측 3–4px 컬러 스트립** (`border-l-4 border-purple-500`) | 텍스트의 em-dash에 맞먹는 신뢰도의 AI 지문 | 좌측 스트립 삭제. 구분이 필요하면 배경 톤 차이 또는 여백 |
+| **C-06** | **카드 안의 카드 안의 카드 (cardocalypse)** | 시각적 소음. 깊이가 정보와 무관 | 중첩 최대 1단계. 안쪽은 카드가 아니라 **구분선 또는 여백** |
+| **C-07** | **번호 매긴 1·2·3 단계 섹션** | 검출률 9.4% | 단계가 실제로 순서일 때만. 그 경우에도 번호 대신 **화면 캡처 3장**이 낫다 |
+| **C-08** | **지표 배너 행** (`10,000+ users · 99.9% uptime · 4.9★`) | 근거 없는 숫자 3–4개 나열. 검증 불가라 신뢰를 오히려 깎음 | 숫자 **1개**만, 출처와 함께. 없으면 쓰지 마라 |
+| **C-09** | **모든 여백이 같은 값** — 전부 `p-6`, 전부 `gap-4` | 리듬이 없어 강약이 사라짐 | 8pt 그리드 위에서 4–6종의 여백 값. 섹션 간 : 요소 간 = 대략 1:5 |
+| **C-10** | **섹션마다 같은 상하 패딩** (`py-20` 반복) | 페이지가 균질해져 어디가 중요한지 알 수 없음 | 중요한 섹션에 더 많은 여백. 여백이 곧 강조다 |
+| **C-11** | **벤토 그리드를 기본 선택지로** | 2026년 기준 벤토는 표준이라 차별화가 아니다. "고민 안 했음"의 새 신호 | 벤토는 **타일 크기 차이가 정보 위계를 반영할 때만**. 아니면 단순 리스트가 낫다 |
+| **C-12** | **콘텐츠가 뷰포트 가장자리에 붙음** — 컨테이너 패딩 없이 텍스트가 화면 끝에 닿음 | 모바일에서 특히 조악해 보임 | 모바일 16–24px, 데스크톱 24–80px 좌우 패딩 |
+| **C-13** | **본문 컬럼이 화면 전체 폭** — 1440px에 한 줄 텍스트 | 영문 100자 이상 줄이 되어 읽기가 무너짐 | 텍스트 컬럼 `max-width: 65ch` (영문) / 국문은 25–40자 폭 |
+| **C-14** | **푸터가 링크 4열 + 소셜 아이콘 + 카피라이트** 로만 구성 | AI가 가장 성의 없이 만드는 곳 | 푸터에 실제 정보를 넣어라 (연락처, 주소, 사업자 정보, 뉴스레터). 링크가 4개뿐이면 4열로 만들지 마라 |
+
+---
+
+## D. 컴포넌트 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **D-01** | **`rounded-2xl shadow-lg p-6` 를 손대지 않고 그대로 사용** | shadcn/ui 기본값. AI 에이전트가 복붙하도록 설계된 값 | radius를 하나의 어휘로 통일하되 **프로젝트 고유값**으로 (예: 4px 또는 12px). 큰 그림자 대신 1px 보더 + 배경 톤 차이 |
+| **D-02** | **모든 요소가 동일한 border-radius 16px** | radius가 결정이 아니라 기본값임을 드러냄 | radius 어휘 2개 (예: 컨테이너 12px, 인터랙티브 요소 8px). 혹은 0으로 통일하고 각을 살려라 |
+| **D-03** | **radius 24px 이상의 과도하게 둥근 카드** | 블롭처럼 보이며 정보 밀도를 낮춤 | 12–16px 이하 |
+| **D-04** | **1px 회색 보더 + 넓게 퍼진 그림자의 동시 사용** | 두 가지 깊이 표현을 겹친 것. 광원 논리 없음 | 하나만 선택. 보더로 갈 거면 그림자 제거 |
+| **D-05** | **글래스모피즘을 전면에 사용** (`backdrop-blur` 카드 다수) | 실기기에서 **FPS 15–30% 하락**. 2022년 유행의 잔재 | 내비게이션 바·모달 정도로 제한. 카드에는 쓰지 마라 |
+| **D-06** | **이모지를 아이콘 대신 사용** — 사이드바·피처 카드의 🚀 ⚡ 🎯 ✨ | Krebs 16패턴 중 "emoji icons in nav". 즉각적인 아마추어 신호 | 아이콘 세트 하나를 정해 일관되게 (Lucide, Phosphor, Radix). 이모지는 카피 안에서만 |
+| **D-07** | **버튼이 항상 2개, 나란히** (`Get started` + `Learn more`) | 주 행동이 무엇인지 정하지 못했다는 뜻 | 주 CTA **1개**. 보조는 텍스트 링크로 격하 |
+| **D-08** | **CTA 버튼이 보라·인디고 계열** | 검출률 10.7%로 단일 최다 | 브랜드 색. 없으면 중립 대비가 가장 강한 색(잉크/화이트 반전) |
+| **D-09** | **로고월** — 회색조 로고 6–8개 일렬 배치 | 로고를 나열하는 것 자체가 신호를 못 만듦. 대부분 가짜거나 무관 | 실제 고객이면 **한 곳의 사례를 문장으로**. 없으면 섹션 자체를 삭제 |
+| **D-10** | **아바타가 이니셜 원형인 텍스트 후기 3개** | 검증 불가한 후기는 신뢰를 깎는다 | 실명 + 직함 + **원문 링크**(리뷰 플랫폼, 트윗). 없으면 넣지 마라 |
+| **D-11** | **아코디언 FAQ 6개, 질문이 전부 가상** ("How does it work?") | 실제로 받은 질문이 아니라 채운 것 | 실제 문의 3개. 답변에 구체적 숫자·조건 포함 |
+| **D-12** | **요금제 3열 카드 + 가운데에 "Most popular" 배지** | 가장 재현율 높은 SaaS 템플릿 | 표 형식 비교, 단일 가격, 또는 **가격 계산기**. 3열 카드가 필수는 아니다 |
+| **D-13** | **펄스 애니메이션 상태 점** (초록 원이 깜빡이며 "All systems operational") | 정적 정보에 장식 애니메이션을 붙인 것 | 상태가 실제로 바뀔 때만 애니메이션. 아니면 정적 점 |
+| **D-14** | **자동 스크롤 마퀴** — 로고·후기·태그가 끝없이 흐름 | 콘텐츠를 가리고 읽기를 방해하며 주의를 강탈 | 정적 그리드. 정말 많으면 페이지네이션 |
+| **D-15** | **hover 시 아무 변화 없거나, 전 요소가 동일하게 `scale(1.02)`** | 인터랙션을 설계하지 않았다는 신호 | 요소마다 다른 반응 (링크는 밑줄, 카드는 배경 톤, 버튼은 명도). hover는 **가장 먼저** 설계한다 |
+| **D-16** | **장식용 깜빡이는 커서** — 편집 불가능한 히어로 카피 뒤의 `|` | 타이핑 흉내. 정보 없음 | 삭제 |
+
+---
+
+## E. 모션 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **E-01** | **모든 요소에 동일한 fade-in-up** (`opacity 0→1`, `translateY 20px→0`, 전부 같은 delay) | 모션 언어가 없다는 뜻. 페이지가 계속 "떠오르기만" 함 | 모션은 **중요한 것에만**. 나머지는 즉시 노출. 순차 등장이 필요하면 stagger 40–60ms |
+| **E-02** | **인터페이스 요소에 bounce / elastic 이징** | 2010년대 감성. 즉시 촌스러움 | `ease-out` 또는 `cubic-bezier(0.2, 0, 0, 1)` |
+| **E-03** | **이미지 hover 시 `scale` 또는 `rotate`** | 생성 UI의 반복 지문 | 이미지 자체는 두고 **캡션·오버레이·보더**를 변화시켜라 |
+| **E-04** | **duration이 전부 300ms** | 마이크로와 연출을 구분하지 못함 | 마이크로 100–200 / 트랜지션 200–400 / 연출 600–1200ms |
+| **E-05** | **스크롤 reveal 실패 시 콘텐츠가 `opacity: 0`으로 남음** | JS 실패·prefers-reduced-motion 시 빈 페이지가 됨 | 기본 상태를 visible로 두고 JS가 **숨긴 뒤 보여주는** 방식. 또는 CSS scroll-driven animation |
+| **E-06** | **`prefers-reduced-motion` 미대응** | 접근성 실패이자 성의 없음의 증거 | 미디어 쿼리로 모션 제거 경로를 반드시 제공 |
+| **E-07** | **패럴랙스를 전 섹션에 적용** | 스크롤 감각이 어긋나고 성능이 떨어짐 | 한 섹션에만, 이동량 작게 (10–20px) |
+| **E-08** | **히어로에 Spline / 3D 씬을 이유 없이 삽입** | JS 런타임 **800KB–2MB**. 모바일 4G에서 Core Web Vitals 실패 | 3D는 브리프가 요구할 때만. 필요하면 정적 렌더 이미지 + 미세 모션으로 대체 |
+| **E-09** | **로딩 화면 / 프리로더 카운터** | 실제로 로딩할 게 없는데 대기를 만듦 | 삭제. 진짜 무거우면 스켈레톤 |
+
+---
+
+## F. 카피 · 문장 시그니처
+
+**AI 티는 시각보다 문장에서 먼저 난다.** 이 섹션이 가장 치명적이다.
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **F-01** | **`It's not X, it's Y` / `단순한 X가 아니라 Y입니다`** 구문 | ChatGPT의 최대 지문. 400단어 글에 3번씩 나옴. 독자가 즉시 이탈 | 그냥 Y를 말해라. 대조가 필요하면 구체적 비교 대상을 실명으로 |
+| **F-02** | **`Streamline / Empower / Supercharge / Unlock / Leverage / Seamless / Elevate`** | 아무 제품에나 붙는 동사. 정보량 0 | 제품이 실제로 하는 동작 동사 (`정산한다`, `병합한다`, `4일을 6시간으로 줄인다`) |
+| **F-03** | **`world-class / cutting-edge / enterprise-grade / best-in-class / state-of-the-art`** | 자기 평가 형용사는 증거가 아니다 | 증거로 대체 — 인증명, 벤치마크 수치, 고객사 실명 |
+| **F-04** | **`Build the future of X` / `Your all-in-one platform` / `Scale without limits`** 류 히어로 헤드라인 | 경쟁사 이름으로 바꿔도 성립함 | **경쟁사 치환 테스트**를 통과하는 문장으로. 예: Stripe의 "Financial infrastructure for the internet" |
+| **F-05** | **em-dash(—) 과다 사용**, 특히 한 문단에 2회 이상 | AI 문장 리듬의 대표 지문 | 마침표로 끊거나 쉼표로. 한국어에서는 특히 부자연스럽다 |
+| **F-06** | **스타카토 3연타** (`No fluff. No filler. No BS.` / `빠르게. 정확하게. 간단하게.`) | 리듬으로 내용 없음을 감추는 장치 | 한 문장으로 구체적으로 |
+| **F-07** | **`In today's fast-paced digital landscape...`** 로 시작하는 도입 | 아무 말도 하지 않는 문단 | 첫 문장부터 본론. 도입 문단 삭제 |
+| **F-08** | **헤지 표현** (`may help you`, `can potentially`, `~할 수 있습니다`) | 확신 없음이 곧 신뢰 없음 | 단정하거나, 조건을 명시하라 (`10명 이하 팀에서는`) |
+| **F-09** | **레이블·서브레이블·헬퍼텍스트가 같은 말을 3번** (`이메일` / `이메일 주소` / `이메일 주소를 입력하세요`) | 화면 소음 | 하나만 남긴다 |
+| **F-10** | **CTA가 `Get Started` / `Learn More` / `시작하기`** | 무엇이 시작되는지 알 수 없음 | 결과를 말하는 CTA (`무료로 30일 써보기`, `가격표 보기`, `데모 예약`) |
+| **F-11** | **숫자가 전부 어림수** (`10,000+ users`, `99.9% uptime`, `50% faster`) | 검증 불가한 숫자는 없느니만 못함 | 정확한 수치와 측정 조건 (`평균 응답 240ms, 2026년 7월 p95 기준`) |
+| **F-12** | **모든 헤딩이 명사구로 통일** (`Powerful Features`, `Simple Pricing`) | 헤딩이 정보를 전달하지 않음 | 헤딩에 주장을 담아라 (`엑셀 없이 정산이 끝난다`) |
+| **F-13** | **`~를 통해`, `~에 대한`, `~에 있어서` 번역투** (한국어) | 영문 AI 카피를 기계 번역한 티 | 능동 한국어로. `~로`, `~의`, `~에서` |
+| **F-14** | **이모지로 시작하는 불릿 리스트** (`✅ 빠른 속도`) | 정보 위계를 이모지로 대체한 것 | 일반 불릿 또는 없애고 문장으로 |
+
+**F 섹션 통합 테스트 — 경쟁사 치환**: 카피에서 제품·회사 이름을 경쟁사 이름으로 바꿔 읽는다.
+**여전히 자연스러우면 그 카피는 아무것도 말하지 않은 것이다.**
+
+---
+
+## G. 이미지 · 아이콘 · 일러스트 시그니처
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **G-01** | **랩탑 앞에서 웃는 다국적 팀 스톡 사진** (밝은 오픈 오피스) | 방문자는 스톡을 알아보고, **신뢰도가 실제로 하락**한다는 실측이 있음 | 실제 팀 사진, 실제 작업 공간, 또는 사진 없이 타입으로 |
+| **G-02** | **떠 있는 3D 추상 블롭 / 기하 도형** | 콘텐츠 부재를 덮는 장식. 브랜드와 무관 | 제품 실제 화면, 데이터 시각화, 또는 여백 |
+| **G-03** | **AI 생성 일러스트** — "약간 지나치게 매끄럽고 지나치게 대칭인" | 손 개수·글자 깨짐 같은 결함이 아니어도 톤에서 티가 남 | 일관된 일러스트 시스템을 직접 정의하거나, 일러스트를 아예 쓰지 않는다 |
+| **G-04** | **일반 SVG 도형을 조합한 히어로 그래픽** | 플레이스홀더 클립아트처럼 읽힘 | 제품 UI 조각을 실제로 렌더해 보여줘라 |
+| **G-05** | **손으로 그린 듯한 조악한 SVG 마스코트** | 의도된 러프함이 아니라 그냥 못 그린 것으로 읽힘 | 마스코트를 쓸 거면 제대로 만들거나 쓰지 마라 |
+| **G-06** | **아이콘 세트가 섞임** — 라인·필·이모지가 한 화면에 | 시스템이 없다는 증거 | 세트 하나 고정. 굵기·크기·광학 정렬 통일 |
+| **G-07** | **`src`가 비어 있거나 깨진 이미지 태그** | 생성 코드가 검증 없이 배포된 흔적 | 배포 전 이미지 로드 전수 확인 |
+| **G-08** | **모든 이미지가 같은 종횡비의 둥근 사각형** | 그리드를 이미지에 강제한 것 | 콘텐츠에 맞는 비율. 풀블리드 1장을 섞으면 리듬이 생긴다 |
+| **G-09** | **반복 그라디언트 줄무늬를 표면 장식으로** | 의미 없는 텍스처 | 실제 질감(필름 그레인, 종이 스캔) 또는 무지 |
+
+---
+
+## H. 품질 · 접근성 결함 (AI 생성물에서 특히 잦음)
+
+| ID | 시그니처 | 왜 문제인가 | 대신 |
+|---|---|---|---|
+| **H-01** | **헤딩 레벨 건너뜀** (h1 → h3) | 문서 아웃라인 파손. 스크린리더·SEO 영향 | 순차적 헤딩. 크기는 CSS로 조절 |
+| **H-02** | **본문 대비 WCAG AA 미달** (본문 4.5:1, 대형 3:1 미만) | 기능적 결함 | 대비 검증을 빌드에 포함. APCA Lc ≥ 75 |
+| **H-03** | **포커스 링 제거** (`outline: none`만 있고 대체 없음) | 키보드 사용자가 조작 불가 | `:focus-visible`에 명확한 링. 브랜드 색으로 예쁘게 만들어도 된다 |
+| **H-04** | **`p-2` 미만의 좁은 패딩으로 텍스트가 컨테이너에 붙음** | 조악함의 직접 원인 | 최소 12–16px 내부 패딩 |
+| **H-05** | **잡히지 않은 스크립트 에러**로 인터랙션 파손 | 검증 없이 생성·배포된 흔적 | 콘솔 클린 상태를 배포 조건으로 |
+| **H-06** | **터치 타깃 44×44px 미만** | 모바일에서 못 누름 | 최소 44px, 간격 8px 이상 |
+| **H-07** | **폼에 `label` 없이 placeholder만** | 입력 시작하면 라벨이 사라짐. 접근성 실패 | 항상 `label`. placeholder는 예시용 |
+| **H-08** | **`alt` 속성 없거나 `image`, `photo` 같은 무의미한 값** | 스크린리더·SEO 실패 | 이미지가 전달하는 정보를 문장으로. 장식이면 `alt=""` |
+| **H-09** | **다크/라이트 전환 시 일부 컴포넌트만 대응** | 토큰 없이 하드코딩했다는 증거 | 색은 전부 토큰 경유. 하드코딩 hex 금지 |
+| **H-10** | **모바일에서 가로 스크롤 발생** | 폭 계산 없이 고정값을 쓴 결과 | `max-width: 100%`, `overflow-x: hidden`은 증상 은폐이므로 원인을 찾아라 |
+| **H-11** | **폰트 로딩 시 FOIT (텍스트가 안 보이는 구간)** | 체감 성능 하락 | `font-display: swap` + 서브셋 + preload |
+
+---
+
+## I. 코드 지문 (grep으로 잡을 수 있는 것)
+
+배포 전 아래 문자열을 검색해서 걸리면 재검토한다.
+
+```
+# 색
+indigo-|violet-|purple-|fuchsia-
+#6366f1|#818cf8|#a855f7|#8b5cf6|#c4b5fd|#a78bfa|#22d3ee
+from-purple|to-blue-|from-violet|via-purple
+bg-slate-900|bg-gray-900|text-gray-400
+#ffffff|#000000   (배경/텍스트로 사용된 경우)
+
+# 컴포넌트 기본값
+rounded-2xl|rounded-3xl
+shadow-lg|shadow-xl|shadow-2xl
+border-l-4|border-t-4
+backdrop-blur
+
+# 타이포
+font-family:.*Inter
+Space Grotesk|Instrument Serif|Geist
+uppercase tracking-wide(r|st)?
+
+# 카피
+Get Started|Learn More|Empower|Streamline|Supercharge|Seamless
+world-class|cutting-edge|enterprise-grade|best-in-class
+It's not .* it's
+—   (한 문단에 2개 이상)
+
+# 이모지 아이콘 (JSX/HTML 텍스트 노드 안)
+🚀|⚡|✨|🎯|🔥|💡|✅
+```
+
+---
+
+## J. 자가 채점표
+
+작업 완료 전 이 표를 채워라.
+
+| 카테고리 | 걸린 항목 ID | 조치 |
+|---|---|---|
+| A 컬러 | | |
+| B 타이포 | | |
+| C 레이아웃 | | |
+| D 컴포넌트 | | |
+| E 모션 | | |
+| F 카피 | | |
+| G 이미지 | | |
+| H 품질 | | |
+
+**판정 기준**
+
+| 걸린 개수 | 판정 |
+|---|---|
+| 0–1 | 통과 |
+| 2–3 | 해당 항목만 수정 후 재검 |
+| **4 이상** | **폐기하고 02번 문서 §6 절차부터 다시** (Krebs 기준 "heavy slop") |
+
+---
+
+## K. 한 줄 요약
+
+> AI 티는 **못 만들어서** 나는 게 아니라 **결정을 안 해서** 난다.
+> 보라 그라디언트, Inter, 3열 아이콘 카드, `rounded-2xl shadow-lg`, "Get Started"는 전부 **미결정의 기본값**이다.
+> 각 축마다 하나씩 **의도적으로 다른 값을 고르고, 그 이유를 한 문장으로 말할 수 있으면** 지문은 사라진다.

research/references/05-sources.md

@@ -0,0 +1,181 @@
+# 05 — 출처 목록
+
+> **이 리서치에서 실제로 열어보고 인용한 소스 95개.**
+> 별도로 **01번 문서에 갤러리·도구 URL 155개**가 있으며 그쪽도 전부 개별 검증했다.
+> 모든 상태 코드는 **2026-08-20** curl 실측치.
+>
+> 상태 표기: `OK` = 200 · `BOT` = 봇 차단(브라우저는 정상) · `DEAD` = 소멸
+
+---
+
+## A. AI 슬롭 · 생성 디자인 지문 (04번 문서의 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 1 | https://www.adriankrebs.ch/blog/design-slop/ | OK | **가장 중요한 1차 소스.** Show HN 랜딩 1,590개를 Playwright로 렌더해 16개 DOM·CSS 규칙으로 채점한 실측 연구 (heavy 22% / mild 32% / clean 46%) |
+| 2 | https://www.developersdigest.tech/blog/ai-design-slop-and-how-to-spot-it | OK | 위 연구의 16개 패턴을 폰트·색·레이아웃·CSS 프레임워크 4군으로 정리한 해설 |
+| 3 | https://impeccable.style/slop/ | OK | 슬롭 시그니처를 시각·타이포·색·여백·모션·카피·이미지로 나눠 가장 많이 열거한 목록. 04번 문서의 뼈대 |
+| 4 | https://vibecodekit.dev/ai-slop-design | OK | shadcn 기본값(`rounded-2xl shadow-lg p-6`), 카드 좌측 컬러 스트립, 벤토 남용 등 코드 레벨 지문과 수정법 |
+| 5 | https://www.925studios.co/blog/ai-slop-web-design-guide | OK | Inter 기본값·보라파랑 그라디언트·radius 16px 균일화·스톡 사진 등 시그니처와 대안 폰트 제안 |
+| 6 | https://growthguys.tech/blog/genuine-website-vs-ai-slop.html | OK | 60초 판별법. **경쟁사 치환 테스트**와 신뢰 신호 부재 목록의 출처 |
+| 7 | https://dev.to/alanwest/how-to-fix-the-ai-generated-look-in-your-frontend-1ahh | OK | `indigo-600`·`slate-900` 등 Tailwind 기본 토큰 의존, 표준 섹션 골격(hero→features→social proof→pricing→FAQ→footer)의 출처 |
+| 8 | https://rnauval.dev/en/blog/improve-web-design-without-ai-slop | OK | 슬롭 회피를 위해 레퍼런스 라이브러리를 컨텍스트로 주입하라는 접근 |
+| 9 | https://gigazine.net/gsc_news/en/20260423-design-slop/ | OK | Krebs 연구를 다룬 보도. 검출률 수치(CTA 보라 10.7%, 전체 대문자 10.5%, 번호 단계 9.4%) |
+| 10 | https://news.ycombinator.com/item?id=47864393 | BOT(429) | Krebs 연구의 HN 토론 스레드. 실무자 반론 포함 |
+| 11 | https://medium.com/@sahilkargutkar.sk/your-website-looks-like-ai-made-it-and-thats-becoming-a-problem-e679668ca7f4 | BOT(403) | "AI가 만든 것처럼 보이는 것"이 비즈니스 문제가 되는 지점을 다룸 |
+| 12 | https://aiproductivity.ai/news/how-to-spot-ai-slop-websites/ | **DEAD (410)** | 슬롭 판별 가이드였으나 삭제됨. 대체로 6번 사용 |
+| 13 | https://www.blakestockton.com/dont-write-like-ai-1-101-negation/ | OK | `It's not X, it's Y` 구문이 ChatGPT 최대 지문인 이유. F-01의 근거 |
+| 14 | https://copyadscontent.com/signs-of-ai-writing/ | OK | AI 글쓰기 지문 32가지. 스타카토 3연타, em-dash 과다 등 F섹션 근거 |
+| 15 | https://tailwindcss.com/docs/colors | OK | Tailwind 기본 팔레트 원문. A-08의 색 이름·11단계 스케일 확인용 |
+
+---
+
+## B. 어워드 · 수상작 실측 (03번 §1의 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 16 | https://www.awwwards.com/about-evaluation/ | OK | Awwwards 공식 평가 체계 원문. Design 40 / Usability 30 / Creativity 20 / Content 10 |
+| 17 | https://www.hontran.dev/blog/awwwards-judging-criteria | OK | 심사 배점의 실무적 해석. 심사위원 18명·극단값 3개 제외·5일 투표 |
+| 18 | https://www.hontran.dev/blog/best-award-winning-websites-2026 | OK | 2026년 실제 수상작 5건(By-Kin, Iventions, Mat Voyce, Uncommon, Minh Pham) 분석 |
+| 19 | https://digitalstrategyforce.com/journal/why-are-immersive-experiences-dominating-the-2026-awwwards/ | OK | 2026 Q1 SOTD 47건의 기술 분포 실측 — 3D 61%, Three.js 29/47, 배경 비디오 8% 미만, 업종 분포 |
+| 20 | https://www.awwwards.com/websites/sites_of_the_day/ | OK | SOTD 원본 아카이브. 트렌드 직접 확인용 |
+| 21 | https://by-kin.com/ | OK | 2026 SOTD + Developer Award 수상작. 에디토리얼 타이포 사례 |
+| 22 | https://iventions.com/ | OK | CSSDA Website of the Month. Three.js 조명 설계 사례 |
+| 23 | https://matvoyce.tv | BOT(307) | GSAP SOTY 노미네이트. 키네틱 타입이 가독성을 유지한 드문 사례. 자동 접근 시 Location 없는 307 반환(봇 보호) |
+| 24 | https://uncommonstudio.com.au/ | OK | 그리드를 정확한 지점에서만 깨는 사례 |
+| 25 | https://minhpham.design/ | OK | 3D가 작업물을 압도하지 않는 절제 사례 |
+
+---
+
+## C. 2026 트렌드 (03번 문서 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 26 | https://studiomeyer.io/en/blog/webdesign-trends-2026-reality-check | OK | **가장 유용한 트렌드 소스.** 상반기 실측으로 "통한 것 / 과대평가 / 미달"을 구분. 벤토 +23%, 글래스모피즘 FPS -15~30%, Spline 800KB~2MB |
+| 27 | https://elements.envato.com/learn/web-design-trends | OK | 2026 키네틱 타입·깨진 그리드·시각적 개성 회귀 |
+| 28 | https://www.figma.com/resource-library/web-design-trends/ | OK | Figma의 2026 트렌드 정리 |
+| 29 | https://www.frontendhorizon.com/blog/view-transitions-api-and-css-scroll-driven-animations-the-browser-wins-of-2026 | OK | View Transitions API·CSS scroll-driven animation의 크로스브라우저 안착. 05번 §5.1 근거 |
+| 30 | https://dev.to/nickbenksim/creating-complex-scroll-driven-animations-with-pure-css-in-2026-17l | OK | `view-timeline`, `timeline-scope` 실전 구현 |
+| 31 | https://www.loungelizard.com/blog/web-design-color-trends/ | OK | 2026 컬러 트렌드 |
+| 32 | https://www.recursion.agency/blog/ui-color-trends-2026 | OK | Quiet Luxury / Digital Calm / Digital Neon 등 2026 팔레트 방향 구분 |
+| 33 | https://www.devtoolnow.com/guides/color-formats-hex-rgb-hsl-oklch | OK | OKLCH가 표준이 된 이유와 HEX 대비 이점 |
+| 34 | https://medium.com/@orami98/designing-responsive-accessible-color-schemes-in-css-for-2026-d651cc0658a6 | OK | OKLCH + `color-mix()` + 접근성 클램핑 실무 |
+| 35 | https://www.maviklabs.com/blog/design-tokens-tailwind-v4-2026/ | OK | 의미 기반 토큰 설계 (Tailwind v4 + CSS 변수) |
+| 36 | https://medium.com/@aksamark/web-design-trends-2026-why-minimalism-is-evolving-into-bento-grids-16839fd31fb7 | OK | 벤토 그리드가 미니멀리즘을 대체한 과정 |
+| 37 | https://webpeak.org/blog/css-js-animation-trends/ | OK | 2026 CSS/JS 모션 트렌드와 마이크로 인터랙션 |
+| 38 | https://www.codercops.com/blog/web-animation-gsap-framer-motion-css-2026 | OK | GSAP vs Motion vs 플랫폼 네이티브 선택 기준. GSAP 전면 무료화 |
+| 39 | https://artcoastdesign.com/blog/best-graphic-design-textures-2026 | OK | 믹스드 미디어·필름 그레인 등 2026 질감 트렌드 |
+
+---
+
+## D. 타이포그래피 · 폰트 (03번 §3, §7 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 40 | https://www.typewolf.com/google-fonts | OK | 구글폰트 베스트 40, 본문용/디스플레이용 구분. 7.1절 추천의 기준 |
+| 41 | https://www.typewolf.com/adobe-fonts | OK | Adobe Fonts 베스트 40 |
+| 42 | https://www.typewolf.com/lookbooks | OK | 파운드리별 타입 페어링 룩북 |
+| 43 | https://designflea.com/typography-trends-2026/ | OK | 가변 폰트·브루탈리즘·세리프 부활 |
+| 44 | https://www.wix.com/wixel/resources/typography-trends | OK | 2026 타이포 트렌드. 초대형 타입·세리프의 "의도" 신호 해석 |
+| 45 | https://madegooddesigns.com/font-trends-2026/ | OK | 2026 폰트 12개 흐름 |
+| 46 | https://atypeofamigo.com/quality-fonts-for-everyone-type-foundries-that-all-designers-should-know/ | OK | 오픈소스 파운드리(Velvetyne, OSP, Uncut) 소개 |
+| 47 | https://velvetyne.fr/about/resources/ | OK | Velvetyne 리소스. 오픈소스 실험 타입 |
+| 48 | https://github.com/orioncactus/pretendard | OK | **Pretendard 공식 저장소.** SIL OFL, Thin~Black 9단계, 가변 폰트, jsDelivr CDN 경로 |
+| 49 | https://awz.kr/free-korean-fonts-commercial-use/ | OK | 상업 이용 가능 무료 한글 폰트 20종 정리 (제작처·웹폰트 지원·라이선스 표 포함). 7.3절의 근거 |
+| 50 | https://hangulhub.co.kr/en/tools/fonts | OK | 상업 무료 한글 폰트 109종 갤러리 |
+| 51 | https://noonnu.cc | OK | 눈누 — 한글 무료 폰트 수집처. 라이선스 범위 표기가 가장 명확 |
+| 52 | https://www.freekoreanfont.com/paperlogy-font-download/ | OK | 페이퍼로지 9단계 지오메트릭 산세 상세 |
+
+---
+
+## E. 레퍼런스 활용 방법론 (02번 문서 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 53 | https://www.intercom.com/blog/how-to-steal-like-a-designer-and-boost-creativity/ | OK | Kleon의 "steal like an artist"를 디자인 실무로 옮긴 글. 복제와 참고의 경계 |
+| 54 | https://medium.com/@ansimuz/copy-or-steal-using-references-to-create-your-art-653a3685fb19 | OK | 레퍼런스를 분해해 원리만 가져오는 방법 |
+| 55 | https://miro.com/moodboard/how-to-make-a-moodboard/ | OK | 무드보드 구성 실무 |
+| 56 | https://blog.cg-wire.com/animation-moodboard/ | OK | **40–60개 수집 → 12–20개로 압축**, 각 레퍼런스에 "결정 역할" 라벨링. 02번 §3·§4의 근거 |
+| 57 | https://www.nngroup.com/videos/squint-test/ | OK | NN/g의 squint test 설명. 02번 축6 근거 |
+| 58 | https://www.lukew.com/ff/entry.asp?2013= | OK | Luke Wroblewski의 squint test 원문 |
+| 59 | https://www.nngroup.com/articles/good-visual-design/ | OK | 시각 디자인 평가 기준 (원칙 중심) |
+| 60 | https://designlab.com/blog/design-critique-checklist-for-ux-designers | OK | 10항목 디자인 크리틱 체크리스트 |
+| 61 | https://www.affinity.studio/blog/visual-hierarchy-in-design | OK | 회색조 스케치·8pt 그리드·타입 스케일 3단계 제한. 02번 §2 근거 |
+| 62 | https://www.zekagraphic.com/grids-in-graphic-design-ultimate-guide/ | OK | 그리드 시스템 전반 |
+
+---
+
+## F. AI 에이전트 × 디자인 (02번 §5 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 63 | https://styles.refero.design/ai-agents/design-prompts | OK | **AI 에이전트용 디자인 프롬프트 구조.** "스타일과 구조를 동시에 요구하지 마라", 레퍼런스를 구현 요청 **앞에** 둘 것 |
+| 64 | https://styles.refero.design/ai-agents/design-md-examples | OK | DESIGN.md 실제 예시 모음 |
+| 65 | https://designmd.app/ | OK | AI 코딩 에이전트용 디자인 시스템 파일 561개 |
+| 66 | https://www.designsystems.one/design-systems | OK | 88개 실사용 디자인 시스템 + 항목별 design.md 다운로드 |
+| 67 | https://github.com/dembrandt/dembrandt | OK | 웹사이트의 디자인 토큰을 CLI로 추출하는 오픈소스. Playwright 렌더 후 computed style 분석. MCP 도구로 사용 가능 |
+| 68 | https://www.dembrandt.com/blackpaper | OK | 위 도구의 토큰 추출 방법론 문서 |
+| 69 | https://designsnap.dev/ | OK | 크롬 확장. computed style에서 색·폰트·그림자·CSS 변수를 뽑아 Tailwind/shadcn/Figma 토큰으로 내보냄 |
+| 70 | https://www.mydesignmd.com/how-to-extract-a-design-system-from-any-website | OK | 임의 사이트에서 디자인 시스템을 추출하는 절차 |
+| 71 | https://www.anthropic.com/engineering/effective-context-engineering-for-ai-agents | OK | 에이전트 컨텍스트 설계 원칙. 레퍼런스를 컨텍스트로 주입하는 방식의 근거 |
+| 72 | https://www.augmentcode.com/guides/how-to-build-agents-md | OK | AGENTS.md 작성법. DESIGN.md와의 분리 구조 |
+
+---
+
+## G. 갤러리 카탈로그 수집원 (01번 문서 근거)
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 73 | https://www.toools.design/blog-posts/ultimate-list-100-best-inspiration-sites-to-inspire-designers | OK | **01번 카탈로그의 최대 수집원.** 100+ 사이트를 UI/UX·웹·모바일·SaaS·랜딩·이커머스·이메일·포트폴리오·모션·로고·일러스트·데이터시각화·브랜딩으로 분류 |
+| 74 | https://colorlib.com/wp/showcase-inspiration-sites-web-design/ | OK | 주요 갤러리 16개의 성격 비교 (Awwwards vs CSSDA vs Godly vs SiteInspire 등) |
+| 75 | https://www.siteofsites.co/ | OK | 갤러리의 갤러리. 카탈로그 갱신원 |
+| 76 | https://coolcuration.com/cool/services-mobbin-vs-alternatives | OK | Mobbin vs Refero vs Page Flows 비교. Page Flows = Screenlane 후신이라는 사실의 출처 |
+| 77 | https://www.producthunt.com/products/mobbin/alternatives | OK | Mobbin 대안 목록 |
+| 78 | https://framify.design/blog/website-inspiration-for-framer-sites | OK | 고급 웹 인스피레이션 11선 |
+| 79 | https://www.20i.com/blog/inspiration-sites-web-designers/ | BOT(403) | 인스피레이션 사이트 21선. 브라우저로는 정상 |
+| 80 | https://muz.li/blog/best-color-palette-tools-and-generators-for-designers-2026/ | OK | 컬러 팔레트 도구 18종 실사용 비교. Khroma→Coolors→Stark 워크플로 |
+| 81 | https://storyflow.so/blog/best-moodboard-tools-designers-2026 | OK | 무드보드 도구 비교 |
+| 82 | https://www.refern.app/alternatives/best-are-na-alternatives | OK | Are.na·Savee·Cosmos의 성격과 가격 차이 (Savee 무료 체험 폐지 사실 포함) |
+| 83 | https://invernessdesignstudio.com/cosmos-app-guide-7-ways-to-optimise-creative-vision-in-2026 | OK | Cosmos가 AI 생성 이미지를 필터링한다는 사실의 출처 |
+| 84 | https://www.uxpin.com/studio/blog/best-design-system-examples/ | OK | 공개 디자인 시스템 15선 |
+| 85 | https://reallygooddesigns.com/neo-brutalist-website-examples/ | OK | 네오브루탈리즘 사례 16선 |
+| 86 | https://www.nngroup.com/articles/neobrutalism/ | OK | NN/g의 네오브루탈리즘 정의와 접근성 주의 |
+| 87 | https://www.qodeinteractive.com/magazine/best-examples-of-brutalism-in-web-design/ | OK | 웹 브루탈리즘 60선. Brutalist Websites의 출처(2014, Pascal Deville) 확인 |
+| 88 | https://resourceboy.com/textures/noise-textures/ | OK | 8K 무료 노이즈 텍스처 100종 |
+| 89 | https://texturize.app/category/noise | OK | 무료 심리스 노이즈·그레인 텍스처 + 생성기 |
+
+---
+
+## H. 국내(한국) 소스
+
+| # | URL | 상태 | 한 줄 설명 |
+|---|---|---|---|
+| 90 | https://notefolio.net | OK | 노트폴리오 — 국내 최대 창작자·디자이너 플랫폼 |
+| 91 | https://www.dbcut.com | OK | 디비컷 — 국내외 신규 사이트 평가·아카이브 커뮤니티 |
+| 92 | https://gdweb.co.kr | OK | GDWeb — 국내 웹 에이전시 큐레이션·순위 |
+| 93 | https://ppcle.com/blog/web-design/web-design-reference-korea | OK | 국내 웹디자인 참고 사이트 정리 (쇼핑몰·기업 홈페이지 벤치마킹 관점) |
+| 94 | https://simplewp.co.kr/ | OK | 국내외 웹디자인 레퍼런스 사이트 총정리 글의 출처 |
+| 95 | https://brunch.co.kr/@@6Pxb/41 | 302(리다이렉트) | 국내 디자인 벤치마킹 사이트 정리. 브런치 리다이렉트 정책상 자동 접근 시 302 |
+
+---
+
+## 검증 요약
+
+| 구분 | 개수 | 비고 |
+|---|---|---|
+| 05번 문서 인용 소스 | **95** | 아래 상태 분포 |
+| ↳ 정상(200) | 89 | |
+| ↳ 봇 차단 / 리다이렉트 | 5 | HN(429), Medium(403), 브런치(302), matvoyce.tv(307), 20i.com(403) — 브라우저로는 전부 정상 |
+| ↳ **소멸(410)** | **1** | `aiproductivity.ai/news/how-to-spot-ai-slop-websites/` |
+| 01번 문서 갤러리·도구 URL | **155** | 완전 소멸 0건, 접속 이상 6건 (01번 하단 리포트) |
+| **총 검증 URL** | **250** (일부 중복 포함) | 2026-08-20 curl 실측. **죽은 링크는 전체에서 단 1개** |
+
+---
+
+## 다음 갱신 시 확인할 것
+
+1. **Krebs 데이터셋 확장 여부** — 1,590건이 늘어나면 검출률 수치가 바뀐다 (04번 §0)
+2. **Awwwards 2026 Q3–Q4 SOTD 분포** — 3D 61% 비중이 계속 오르는지, 꺾이는지 (03번 §1.2)
+3. **CSS scroll-driven animation 실사용률** — GSAP 의존이 실제로 줄고 있는지 (03번 §5.1)
+4. **commercecream.com HTTPS 복구 여부** — 계속 죽어 있으면 01번에서 제거
+5. **Savee 가격 정책** — 무료 체험 재도입 시 01번 §15 수정