yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/research/references/05-sources.md
Yun Chan 8808c672dc 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)
2026-08-20 10:48:00 +09:00

181 lines
16 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 수정
Reference in a new issue View git blame Copy permalink