yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/packages/skill/references/galleries.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

9 KiB
Raw Blame History

galleries.md — 어디를 볼 것인가

레퍼런스 조사 단계에서 갤러리를 고르는 표다. 브리프를 표에 대입해 3곳을 정하고, 거기서 원본 사이트 URL을 확보한다.

1. 브리프 → 갤러리 라우팅

R1은 구조, R2는 톤, R3는 디테일을 가져올 소스다. R2는 반드시 R1과 다른 업종에서 고른다.

두 행에 동시에 걸리면 청중을 기준으로 고른다. "개발자용 API 모니터링 SaaS"는 SaaS · B2B 와 개발자 도구 양쪽에 해당한다. 보는 사람이 엔지니어면 개발자 도구 행이다.

갤러리에서 원본 URL을 못 뽑으면 경쟁사·인접 제품을 직접 지목해도 된다. 갤러리는 발견 수단이지 목적이 아니다. 1단계 검증 조건은 "원본 사이트 URL을 확보했는가"이지 "갤러리를 경유했는가"가 아니다. 접근 실패로 왕복을 세 번 넘기지 마라 — §5를 먼저 확인하고, 막히면 바로 우회해라.

브리프 R1 구조 R2 톤 (다른 업종) R3 디테일
SaaS · B2B 랜딩 Land-book The Brand Identity Codrops
개발자 도구 · API 문서 Refero Klim Codrops
개인 · 스튜디오 포트폴리오 Godly Typographic Posters Eyecandy
에이전시 · 브랜드 사이트 SiteInspire Mindsparkle Mag Eyecandy
이커머스 · D2C ecomm.design Visuelle Details Matter
모바일 앱 Mobbin Handheld.design Spotted in Prod
대시보드 · 웹앱 내부 Webframe Data Viz Project UI Sources
미니멀 · 정보량 적음 Minimal Gallery Httpster Design Spells
개성 강한 · 실험적 Hover States Brutalist Websites Codrops
이메일 · 뉴스레터 Really Good Emails Email Love —
온보딩 · 결제 플로우 Page Flows UX Bites Mobbin
타이포 주도 (텍스트가 주인공) Awwwards Typography Fonts In Use Typewolf
리디자인 (개편) Rebrand Gallery (현행 사이트 자체) Design Spells
한국어 사이트 노트폴리오 디비컷 GDWeb

국소 브리프 (한 섹션만 다시 짤 때)

대상 소스
히어로 Supahero
내비게이션 Navbar Gallery
푸터 Footer.design
요금제 Pricing Pages
404 · 빈 상태 404s.design
후기 · 신뢰 요소 Social Proof Examples
OG · 공유 이미지 OG Image Gallery

2. 경고 — 갤러리마다 편향이 있다

Awwwards 구조를 SaaS에 이식하지 마라. 2026 Q1 SOTD 47건의 업종 분포는 럭셔리 패션 28% · 자동차 22% · 건축 18% · 문화기관 14%, 테크/SaaS는 5% 미만이다. 수상작의 전면 3D·풀스크린 인트로·스크롤 서사는 "제품을 팔지 않는 사이트"의 문법이다. Awwwards는 타이포 완성도와 야심의 상한선으로만 쓰고, 섹션 구조는 Land-book·Refero에서 가져온다.

그 밖의 편향:

갤러리 편향 대응
Dribbble 구현 불가능한 "샷"이 다수 색·타이포 발상만. 구조 참고 금지
Collect UI Daily UI 과제 기반이라 비현실적 컴포넌트 아이디어만
Pinterest 출처 추적 불가 + AI 이미지 오염 최후순위. 가급적 쓰지 마라
Lapa Ninja 실무 평균값 → 슬롭 패턴이 섞여 있음 볼 때 antipatterns.md를 옆에 둬라
Dark Mode Design / dark.design 다크가 전제 브리프가 다크를 요구할 때만

3. 텍스트로 읽히는 소스 (기본 경로)

에이전트는 이미지를 못 보는 것이 기본값이다. 갤러리 카드는 이미지라 정보가 없다. 아래는 말로 설명해주는 소스다. 폰트·색·모션은 여기서 확보한다.

소스 URL 얻는 것
Typewolf https://www.typewolf.com 특정 사이트가 실제로 쓴 폰트 이름 + 무료 대체 폰트
Typewolf Google Fonts https://www.typewolf.com/google-fonts 구글폰트 베스트 40, 본문용/디스플레이용 구분
Fonts In Use https://fontsinuse.com 폰트의 산업·시대별 톤
Eyecandy https://eyecannndy.com 모션 기법에 붙은 이름 (displacement, kinetic type 등)
Codrops https://tympanus.net/codrops/ 효과의 소스 코드 그 자체
UI Sources https://www.uisources.com 인터랙션을 문장으로 분해한 해설
UX Bites https://builtformars.com/ux-bites 특정 앱 UX가 왜 좋은지 서술
DesignSystems.one https://www.designsystems.one/design-systems 실사용 디자인 시스템 88개 + 토큰 원문(design.md) 다운로드
DESIGN.md https://designmd.app 에이전트용으로 정제된 디자인 시스템 정의 561개
Happy Hues https://www.happyhues.co 색을 역할(배경/텍스트/강조)로 서술한 팔레트
Branding Style Guides https://brandingstyleguides.com 실제 브랜드 가이드 문서
Rebrand Gallery https://rebrand.gallery 리브랜딩 before/after — "왜 바꿨나"를 학습 가능

브라우저 도구(Chrome DevTools MCP / Playwright)를 쓸 수 있으면 원본 사이트의 computed style을 직접 읽어라. 뽑을 값: font-family font-size line-height letter-spacing color background-color border-radius box-shadow padding gap max-width transition.

4. 카테고리별 대표

라우팅 표에서 못 찾았을 때만 본다.

종합 어워드

미니멀 · 에디토리얼

브루탈 · 실험

SaaS · 랜딩 · 웹앱

모바일 · 플로우

타이포 · 폰트

컬러

모션 · 코드

브랜딩 (웹 밖에서 톤 가져오기)

국내

5. 자동 접근 불가 목록

아래는 WebFetch로 못 읽는다. 조사 계획에서 제외하거나 대체 소스를 잡아라.

사이트 상태 대체
land-book.com 403 봇 차단. 브라우저로 열어도 카드에 외부 URL 이 없다 Httpster, Lapa Ninja
refero.design SPA — WebFetch 가 제목만 반환 Mobbin, Screenlane
siteinspire.com 429 간헐 차단 Httpster, Minimal Gallery
cssdesignawards.com 403 봇 차단 Awwwards
uncut.wtf Cloudflare 차단 Fontshare, Fontesk
refs.gallery 429 Godly
unsplash.com 401 Pexels
adfolio.design 429 Love The Work More
commercecream.com HTTPS 연결 거부 (방치 상태) ecomm.design로 대체. 쓰지 마라

근거: research/references/01-gallery-catalog.md, 03-trends-2026.md (조사일 2026-08-20)