designpaca/research/dogfood-coffee/01-references.md

1단계 — 레퍼런스 조사 (무월 원두 정기구독)

브리프

홈카페 3년차 이상 애호가가 구독 신청 버튼을 누르게. 느낌은 차분한, 정확한.

R1 · 구조 — Coffee Collective https://coffeecollective.dk

갤러리: ecomm.design /tag/coffee/ (인덱스에서 href 추출) · 업종: 스페셜티 커피 D2C

• 가져올 축: 축 1(그리드), 축 6(시선 흐름·섹션 순서)
• 축 1 그리드: 컨테이너 1425px / 뷰포트 1440px = 0.99 (사실상 풀블리드). 내부 2분할 673 + 713px (≈1:1). 보조 컬럼 581·633·650px
• 축 2 타입(참고만): 크기 10종 = 10/12/14/16/20/22/24/25.6/30/48px → 8단계 초과 = 통제 실패. 최대 48 ÷ 본문 14 = 3.4배 (4배 미만 = 위계 약함). 패밀리 1개(NB International Pro)
• 축 3 컬러(참고만): 배경 2단계 #FAF6ED(20) / #F1EDE3(14). 텍스트 1단계 지배 #4C4341(101). 강조 오렌지 #E17526 등장 1회 = 면적 1% 미만. radius 종류 1개(50%, 원형 아이콘만) → 각진 형태 어휘
• 축 4 여백: ❌ 빈칸. sectionPadding 추출이 0px / 0px 하나만 반환. 이 사이트는 <section>에 패딩을 주지 않는다
• 축 6 시선: 히어로(상품 2종 + h1) → 선별커피 → 구독 → 장비 → 특가 → 도매 → 뉴스레터 → 카페위치. CTA Subscribe now가 3번째 섹션. 목표 행동이 "구매"와 "구독"으로 갈라져 있음
• 6축 밖의 관측: ① 내비 최상위에 Transparency(생두 구매가·농가 공개). 이 업종의 신뢰 장치는 스토리가 아니라 거래 내역 공개다. ② 가격을 히어로에서 즉시 노출(379/161/159 DKK). 숨기지 않는다
• 변형: 컨테이너를 0.99 풀블리드 → 최대 1120px로 축소. 한국어 본문이 풀블리드에서 한 줄 40자를 넘기 때문. 그리고 목표 행동을 구독 단 하나로 통합 — 브리프가 구독 전환을 명시했으므로 구매 CTA를 만들지 않는다

R2 · 톤 — Fitzcarraldo Editions https://fitzcarraldoeditions.com [업종: 독립 문학 출판 — R1과 다름 ✓]

갤러리 라우팅 이탈 — 사유는 FINDINGS.md F2 참조

• 가져올 축: 축 2(타입 스케일), 축 3(컬러 역할)
• 축 2 타입: 크기 5단계 15/16/18/20.8/22px. 최대 22 ÷ 본문 16 = 1.375배(인덱스 페이지라 위계 약함 — 그대로 안 가져감). 패밀리 2개인데 둘 다 세리프(adobe-caslon-pro 120회 + kings-caslon 13회). 본문 16px / line-height 24px = 1.5 / 컬럼 폭 522px
• 축 3 컬러: 배경 2단계 #FFFFFF(12) / #FBFBFB(8). 텍스트 3단계 #151B23(67) / #363636(3) / #666666(7). 강조 = 파랑 #0033A0 하나뿐, 46회 전부 링크. radius 5종(2/3/4/5/50%) → 우연히 결정됨(안 가져감)
• 축 1 그리드(참고): 컨테이너 1329~1345px, 2분할 672/673px
• 축 4 여백: ❌ 빈칸. section padding이 32px / 32px 하나만 나옴
• 축 6: h1이 실질적으로 없고 h2는 0개. 위계를 태그가 아니라 크기·색으로만 만든다 — 구조적 결함이므로 안 가져간다
• 6축 밖의 관측: 상품(책)을 이미지 없이 제목 + 저자 + 한 문단 설명으로 판다. 텍스트가 상품 이미지를 대신한다. → 브리프 제약(사진 없음)과 정확히 맞는다
• 변형: 타입 비율을 1.375배 → 최대/본문 4.2배로 벌린다. 원본은 카탈로그 인덱스라 위계가 필요 없지만 우리는 단일 랜딩이라 첫 화면에서 위계가 서야 한다. 세리프 2종은 세리프 1 + 산세리프 1로 교체 — 한글 세리프(마루 부리)를 본문에 쓰면 16px에서 가독성이 떨어진다

R3 · 디테일 — Codrops, "A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()"

https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/

• 가져올 축: 축 5(모션 언어) — R3는 이 축만 채운다
• 모션: animation-timeline: view() — 요소가 뷰포트에 교차할 때 페이드 + 상승. JS 0바이트
• 구현 제약:
  • 브라우저: 기사 시점 Chromium 전용 (Firefox·Safari 미지원)
  • 이중 게이팅 필수 — @media (prefers-reduced-motion: no-preference) 안에 @supports (animation-timeline: view())
  • 폴백: 애니메이션 없음. 콘텐츠는 기본 visible이어야 한다(antipatterns 5절 "reveal 실패 시 opacity:0 잔존" 회피)
  • 폴리필(flackr/scroll-timeline) 존재하나 쓰지 않는다 — 브리프가 "프레임워크 없는 정적 HTML/CSS"이고 모바일 70%다
• 변형: animation-range를 entry 0% entry 40%로 짧게. 모바일 뷰포트에서는 진입 구간이 길면 요소가 계속 반쯤 투명한 상태로 머문다

회색조 위계

가장 강한 덩어리는 로스팅 프로파일 표(원두 3종의 산미·바디 수치), 두 번째 구독 CTA, 세 번째 가격·주기 조건. 비즈니스 우선순위 [1 구독 신청 / 2 원두 선택 근거 제공 / 3 가격 납득]과 — 부분 불일치. 1위 덩어리가 CTA가 아니다. → 4-1에서 조정: 프로파일 표는 폭을 넓게 두되 명도 대비를 낮추고, CTA는 면적은 작지만 **유일한 반전 블록(잉크 배경 + 오프화이트 텍스트)**으로 만들어 회색조에서 가장 어둡게 한다. 색으로 해결하지 않는다.

안 할 것 (antipatterns.md에서 이 브리프에 특히 위험한 항목)

1. 크림/베이지를 "고급"의 기본값으로 (1절) — 커피 브리프에서 가장 빠지기 쉬운 함정. 오프화이트를 쓰되 왜 그 색인지 브리프와 연결하고 잉크·강조를 재설계한다
2. 근거 없는 지표 배너 (3절) + 모든 숫자가 어림수 (6절) — "10,000+ 구독자", "4.9★" 금지. 사용자가 준 수치가 없다. 5단계 하드 게이트 11번 대상
3. 버튼이 항상 2개 나란히 (4절) — R1이 구매/구독으로 갈라져 있으므로 그대로 베끼면 걸린다. 주 CTA 1개
4. 아이콘이 카드 상단 중앙인 3열 피처 카드 (3·4절) — 원두 3종을 이 형태로 만들면 즉시 걸린다. 표 또는 비대칭 리스트로
5. 한글 조판 8절 전체 — word-break: keep-all, line-height 1.61.8, 음수 자간 금지, 한 줄 2540자, 라틴 폰트를 폴백 앞에
6. 이미지 없음 → 떠 있는 3D 블롭·일반 SVG 도형으로 채우기 (7절) — 사진이 없다고 장식 그래픽을 만들지 않는다. R2처럼 텍스트가 이미지를 대신한다

---

검증 조건 자가 판정

• R1/R2/R3 각각 원본 URL (갤러리 URL 아님)
• R2 업종이 R1과 다름 (문학 출판 vs 커피 커머스)
• 각 슬롯에 가져올 축 명시
• 각 슬롯에 변형 1개 + 이유
• [~] 6축 값에 숫자 있음 — 축 4(여백 리듬)는 R1·R2 모두 빈칸. §5 스크립트가 값을 못 뽑았음(FINDINGS F3)
• R3에 구현 제약(지원 범위·JS 비용)
• [~] 회색조 위계 — 작성했으나 화면이 아직 없어 추정이다. 실제 판정은 4-1 이후 (FINDINGS F4)