designpaca/packages/skill/references/galleries.md

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. 카테고리별 대표

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

종합 어워드

• Awwwards https://www.awwwards.com — SOTD 아카이브. 상한선용
• The FWA https://thefwa.com — 인터랙티브·기술 실험
• Godly https://godly.website — 주당 3~5개만 등록. 신호 대 잡음비 최고

미니멀 · 에디토리얼

• SiteInspire https://www.siteinspire.com — style/type/subject 3축 태깅
• Minimal Gallery https://minimal.gallery — 여백 상한 기준선
• Httpster https://httpster.net — 독립 스튜디오·타입 파운드리
• Dead Simple Sites https://deadsimplesites.com — 덜어내기 하한선

브루탈 · 실험

• Brutalist Websites https://brutalistwebsites.com — 원본 아카이브
• Hover States https://hoverstat.es — 아트·문화기관 웹
• Neubrutalism https://neubrutalism.com — 스타일 정의 + 사례

SaaS · 랜딩 · 웹앱

• Land-book https://land-book.com — 전수 심사. 랜딩 1순위
• Refero https://refero.design — 실제 화면 30K+, UX 패턴·요소 단위 검색
• Webframe https://webframe.xyz — "로그인 후" 화면
• Landingfolio https://www.landingfolio.com — 섹션 컴포넌트 동봉
• SaaSFrame https://www.saasframe.io — 랜딩 + 앱 + 온보딩 이메일

모바일 · 플로우

• Mobbin https://mobbin.com — 실제 앱 전체 화면·플로우
• Page Flows https://pageflows.com — 사용자 여정 영상
• Handheld.design https://handheld.design — 개성 있는 모바일 UI

타이포 · 폰트

• Typewolf https://www.typewolf.com — 폰트 결정은 무조건 여기 먼저
• Fontshare https://www.fontshare.com — Satoshi, Switzer, Clash Display (무료 상업)
• Velvetyne https://velvetyne.fr — 오픈소스 실험 파운드리
• Klim https://klim.co.nz · Pangram Pangram https://pangrampangram.com — 유료
• 눈누 https://noonnu.cc — 한글 무료 폰트. 라이선스 표기 명확

컬러

• Happy Hues https://www.happyhues.co — 역할별 팔레트
• Realtime Colors https://www.realtimecolors.com — 실제 레이아웃에 실시간 적용
• Coolors https://coolors.co — 빠른 후보 생성

모션 · 코드

• Codrops https://tympanus.net/codrops/ — 튜토리얼 + 소스
• Eyecandy https://eyecannndy.com — 기법 이름
• GSAP https://gsap.com — 2026년 전 플러그인 무료
• Motion https://motion.dev — React 모션

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

• The Brand Identity https://the-brandidentity.com
• Mindsparkle Mag https://mindsparklemag.com
• Typographic Posters https://typographicposters.com
• Visuelle https://visuelle.co.uk

국내

• 노트폴리오 https://notefolio.net — 한국어 타이포·레이아웃 감각
• 디비컷 https://www.dbcut.com — 국내 기업·기관 사이트 관행
• GDWeb https://gdweb.co.kr — 국내 에이전시 수준선

---

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로 대체. 쓰지 마라

막히면 갤러리를 갈아타지 말고 브라우저로 직접 들어가라

위 표는 "대체 소스"를 적어뒀지만, 그건 차선책이다. 보려던 그 사이트를 봐야 한다. 403·404·타임아웃을 만나면 대체 갤러리를 찾아 헤매지 말고 실제 브라우저를 띄워라. 실측에서 Aesop(403) → Kinto(404) → Hasami(DNS 실패) → MUJI(타임아웃)로 네 번 왕복하고도 톤 레퍼런스를 하나도 못 얻었다. 브라우저를 열었으면 첫 번째에 끝났다.

// playwright 가 없으면: npm i -g playwright && npx playwright install chromium
const path = require('path');
const { chromium } = require(path.join(process.env.PW_ROOT, 'playwright'));
const b = await chromium.launch({ headless: false });   // headed 여야 봇 차단을 덜 받는다
const p = await b.newPage({ viewport: { width: 1440, height: 900 } });
await p.goto(url, { waitUntil: 'networkidle', timeout: 45000 });
await p.screenshot({ path: 'ref-1.png', fullPage: true });

스크린샷은 텍스트 요약보다 낫다. WebFetch 는 마크다운으로 바꾸면서 여백·비율·크기 대비를 전부 버린다 — 6축 중 절반이 그 정보다. 그림을 보고 나서 재라: 히어로가 첫 화면의 몇 %인지, 제목이 몇 px 인지, 칼럼이 몇 개인지.

// 눈으로 보지 말고 숫자로 받아라
await p.evaluate(() => {
  const h1 = document.querySelector('h1');
  return {
    h1px: h1 && getComputedStyle(h1).fontSize,
    h1가족: h1 && getComputedStyle(h1).fontFamily.split(',')[0],
    본문px: getComputedStyle(document.body).fontSize,
    배경: getComputedStyle(document.body).backgroundColor,
    첫화면_이미지비율: (() => {
      const im = [...document.querySelectorAll('img,video,canvas')]
        .filter(e => e.getBoundingClientRect().top < innerHeight);
      const a = im.reduce((s, e) => { const r = e.getBoundingClientRect(); return s + r.width * r.height; }, 0);
      return (a / (innerWidth * innerHeight) * 100).toFixed(0) + '%';
    })(),
  };
});

headed 로 띄우는 이유: 헤드리스는 Cloudflare·Akamai 봇 판정에 자주 걸린다. 그래도 막히면 그때 대체 소스로 간다 — 순서가 반대다.

규칙: 접근 실패 2회 → 브라우저를 띄운다. 대체 갤러리 탐색은 브라우저도 막힌 뒤의 일이다.

---

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