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

1단계 — 레퍼런스 조사 (스튜디오 폼)

브리프 (2줄)

공간건축연구소 "스튜디오 폼(FORM)"의 아카이브 사이트. 평면도·단면도가 주인공인 swiss-minimal 흑백 UI — 1px 헤어라인, 콘크리트·전시공간 사진, 도면 우선 레이아웃. 조사일 2026-08-21. 방법: WebFetch + webReader(원본 HTML/CSS 직접 추출). 아래 수치는 지어낸 것이 아니라 각 사이트 CSS/HTML에서 직접 읽은 실측값이다.

---

R1 · 구조 — John Pawson Architects https://johnpawson.com

같은 업종(건축사사무소) 확인. 후보 davidchippersfield.com·valerioolgati.com은 DNS 실패, Pawson만 접속(2회 재시도로 안정성 확인).

가져올 축

고정 사이드 내비 + 협소 단일 콘텐츠 컬럼의 "아카이브 몸통". 프로젝트 인덱스는 이미지가 아니라 텍스트 3줄(제목/위치/연도) 이 주체이고, 필터는 단어 나열. 도면·사진은 상세 페이지에서 세로 리듬으로만 배열.

실측값 (CSS/HTML 직접 추출)

• 정보 구조(내비 4개): Architecture → Design → Journal → Office. 프로젝트 URL 체계 /works/{slug}(예: /works/neuendorf-house).
• 프로젝트 인덱스 (/architecture):
  • 정렬: 완공연도 역연대순(2024 → 1981).
  • 항목 3요소: 제목(h2) / 위치 / 연도 range (2016 – 2024 엔 대시). 카테고리 라벨은 항목에 노출 안 함.
  • 필터 6개: Commercial, Cultural, Design, Hospitality, Religious, Residential.
  • 목록 레이아웃: 2컬럼 — fifty-left 250px float:left / fifty-right 265px float:right, 썸네일 폭 265px.
• 프로젝트 상세 순서: 제목 → 위치/연도 메타 → 본문 2문단 → 협업 표기("In partnership with Claudio Silvestrin") → 크레딧 2블록(Project Team / Photography, 19px).
• 컨테이너 폭: #wrap padding 22px, min-width 724px 고정폭(반응형 아님). 내부 = 고정 #nav-col 165px + #content-col 537px. 슬라이더 이미지 537×400.
• 그리드: 6분할 컬럼 시스템 — col-1-6 16.6667% / col-2-6 33.3334% / col-3-6 50%.
• 타입 위계: 크기 위계가 아니라 동일 크기 + 색 위계. body·h1~h6·p 전부 27px / line-height 33px, Univers Next Pro Light(자체 호스팅, woff). 메타·캡션·크레딧만 19px/22px. 계열: Univers-Next-330-Basic-Light, fallback Helvetica/Arial. 자체 아이콘 폰트 pawson_iconsregular.
• 색: 배경 #ffffff, 본문 #000000, 보조 #999999, 프리로더 도트 #ededed.
• 헤어라인: hr 1px solid #999999 — 1px 라인이 유일한 구분선 장치.
• 여백 리듬: 11px 기본 단위의 배수 — 문단 margin-bottom 33px, 상세 이미지 margin-bottom 44px, 목록 이미지 margin-bottom 41px, 캡션 padding-top 19px, 이미지 상하 여백 22px. 세로 리듬 = 본문 line-height(33px)에 맞춤.
• 이미지 처리: img { max-width:100%; height:auto; vertical-align:text-bottom }, 캡션은 이미지 폭과 동일하게 19px 텍스트. 상세 이미지는 콘텐츠 컬럼 폭(537px) 안에 갇힘.

변형 (우리는 다르게 할 것)

• 도면은 537px에 가두지 않는다. Pawson은 모든 이미지를 텍스트 컬럼 폭에 맞춰 도면의 선 밀도·스케일감이 죽는다. 우리는 도면 스테이지를 별도 넓은 컬럼(≈1200px)으로, 텍스트만 협소(640–720px)로 — 이중 컬럼 인셋.
• 27px 전면 동일 크기를 계승하지 않는다. 메타 밀도 높은 아카이브 인덱스는 소형 타입(13–15px) 표 형태로. 크기 위계를 되살리되 색 위계(#111/#555/#e5e5e5)는 계승.
• 724px 고정폭(비반응형)을 그대로 쓰지 않고, 그 리듬(165px 내비 + 22px 패딩의 비율)만 스케일.

---

R2 · 톤 — Cereal (readcereal.com) https://www.readcereal.com

업종 다름 확인: 잡지/출판의 디지털 아카이브(2012–2022 스토리 아카이브 — "공간건축연구소 아카이브"와 목적까지 유사). Studio Faculty 디자인, siteinspire minimal 분류. 흑백은 아니고 웜 크림 모노크롬 — 편집 감각의 화이트 스페이스 관리가 가져올 것.

가져올 축

저대비 웜 모노크롬 + 세리프/산스 이중 서체 시스템 + small-caps 표제. 10px 루트 rem 스케일로 극소형 타입을 운용하는 용법.

실측값 (CSS 직접 추출: /_next/static/css/24569b31c193c81f.css)

• 색(전부 CSS 변수): 배경 --mainBg:#f7f6ef(웜 크림), 잉크 --mainBlack:#363531(웜 블랙), 보조 --mainGrey:#ccc7c0, --mainWhite:#fff. 즉 채도 0에 가까운 웜 단색 2개+중간회색 1개의 3단.
• 폰트 2종 단일 웨이트: 본문·표제 adobe-text-pro(세리프, Adobe Fonts), UI·캡션 NeueHaasUnicaPro-Regular(산스, Medium 500 별도). 인쇄판과 동일한 "각 1웨이트" 원칙.
• 타입 스케일(루트 10px, rem): h1 1.4rem(14px, Adobe Text + small-caps font-feature-settings:"smcp"), h2.subtitle 1.15rem uppercase letter-spacing .08rem, h3 1.25rem Unica 500, p 1.2rem(12px), 캡션·크레딧 1.1rem Unica, 아티클 본문 1.3rem/2rem line-height. 1920px 이상에서만 기본 스케일이 1.2→1.5rem으로 확대(viewport 단 스케일 전환 1곳뿐).
• 그리드/이미지: 그리드 아이템 기본 7rem × 9.5rem(112×152px, 약 3:4), --gridMinValue:200px, 갤러리 오프셋 calc(7rem + 4rem). img object-fit:cover.
• 여백 리듬: 헤더 스크롤 시 51px 지점 고정, 스크롤 패딩 탑 12rem, 아티클 로딩 패딩 29rem 3rem 2rem. 세로 여백이 가로(3rem)의 10배까지 벌어지는 북적임 제거 리듬.
• 내비: Search / Information / Menu 3개 — 검색이 첫 항목. 검색 오버레이 필터: Information / Categories / Search Terms / Year(연도 필터가 1급 시민).
• 포커스: a:focus-visible { outline:1px dotted } — 1px 도트만.

변형 (우리는 다르게 할 것)

• 크림 웜톤(#f7f6ef/#363531) 대신 중성 회색조(콘크리트 참조: #f4f4f2/#111111). 웜톤은 사진 잡지 감성, 시멘트는 중성.
• 세리if(Adobe Text) 없이 단일 그로테스크 + 도면용 모노스페이스(치수·좌표 숫자 전용) 이원화.
• 저대비 유지하되 도면 선만은 항상 최고 대비(#111 on #fff) — 저대비는 텍스트 크레딧에만.

---

R3 · 디테일 — CSS scroll-driven animation (스티키 도면 스크롤 드로잉)

기법 출처: Codrops "A Practical Introduction to Scroll-Driven Animations with CSS Scroll and View" (Adam Argyle, 2024-01-17) https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/

기법 (하나만 쓴다: view() 타임라인 도면 리빌)

평면도 SVG를 뷰포트 진입에 물려, 스크롤 진행 = 드로잉 진행으로 대응시키는 것. JS 0줄.

/* 도면 컨테이너가 sticky로 고정된 상태에서 */
.drawing path {
  animation: draw linear both;
  animation-timeline: view();
  animation-range: contain;        /* 또는 길이 지정: 25vh 75vh */
}
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* 게이트: 지원 브라우저 + 모션 허용 사용자만 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { /* 위 규칙 */ }
}

• 축 지정: view(x) / scroll(x), scroll-snap-type: x mandatory와 결합 가능.
• 원거리 요소 연결(스티키 도면 + 인접 텍스트 동기화): view-timeline: --plan x + body { timeline-scope: --plan } 후 필요한 요소가 animation-timeline: --plan 참조.
• animation-range 키워드: contain / cover, 진입~이탈 구간을 vh 길이로 좁혀 타이밍 제어(예: 25vh 75vh — 뷰포트 25% 진입 시 시작, 75%에서 완료).
• 이징은 linear 권장 — 스크롤 제스처와 직결되는 애니메이션은 선형이 자연스러움(원문 지적).

구현 제약 (브라우저 지원, 폴백)

• 게시 시점 기준 Chromium 전용(Chrome 지원, Firefox·Safari 미지원 — 2026년 현재도 Safari/Firefox는 부분·지연 지원 상태이므로 게이트 필수).
• 폴백 전략(원문): @supports (animation-timeline: scroll()) + @media (prefers-reduced-motion: no-preference) 이중 게이트, 크로스브라우저 필수 시 polyfill(flackr/scroll-timeline).
• 우리 설계 원칙: 폴백 상태 = "이미 완성된 도면 정적 표시"가 기본값. 드로잉은 enhancement로만 — 애니메이션이 콘텐츠 접근의 조건이 되면 안 됨. stroke-dashoffset 초기값을 0(완성)으로 두고 게이트 안에서만 시작값을 부여하는 방식.

---

회색조 위계 (페이지 덩어리 무게 배분 계획)

전제 팔레트: 배경 #ffffff(순백) / 도면·잉크 #111111 / 메타 #555555 / 크레딧·약식 #888888 / 헤어라인·행 호버 #e5e5e5. Pawson의 3단(#fff/#999/#000)에서 중간단을 2개로 쪼개 도면-텍스트 구분에 씀.

아카이브 페이지 기준 무게 배분:

덩어리	무게	처리
헤더·내비	5%	하단 1px #e5e5e5 라인, 텍스트 13px #111. Pawson의 165px 내비 폭 비율 계승
프로젝트 인덱스(표)	25%	행 높이 48–56px 리듬. 제목 #111 15px, 위치·연도 #555 13px. 호버 시 행 배경 #f0f0ee만(그림자 금지)
도면 스테이지	50%	최대 무게. 배경 #fff, 도면선 #111, 치수·주석 #555 11px 모노스페이스. position:sticky로 스크롤 내내 점유 — R3 기법 부착 위치
본문 텍스트	15%	16px/26px, 폭 640–720px 인셋, #111. 문단 margin 33px(Pawson 리듬)
크레딧·푸터	5%	12px #888, 상단 1px 라인. Pawson의 Project Team/Photography 19px 크레딧 블록 형식은 계승하되 축소

근거: Pawson은 27px 전면 동일 타입으로 무게가 평탄화돼 있다. 우리는 도면 스테이지에 무게를 몰아주기 위해 텍스트 전체를 1단 축소하고, Cereal식 저대비 크레딧(#888/#ccc 대비)으로 페이지 끝을 조용히 닫는다.

안 할 것 (이 브리프에서 위험한 안티패턴 3개)

1. 도면을 카드로 감싸기 — 그림자·라운드 코너·패딩 박스는 도면을 파일러 프리뷰처럼 만든다. 도면의 프레임은 1px 헤어라인과 여백으로만(Pawson hr 1px #999 계승).
2. 인덱스를 이미지 그리드로 만들기 — Pawson 인덱스가 텍스트 3줄로 운용되는 건 검색·스캔 성능 때문. 썸네일 카드 그리드는 아카이브를 갤러리 테마처럼 보이게 하고 메타 밀도를 죽인다.
3. 스크롤 드로잉을 필수 경로로 만들기 + 웜톤 도입 — (a) 애니메이션이 도면 열람의 조건이 되면 폴백 브라우저에서 콘텐츠 자체가 사라진다(정적 완성본이 기본). (b) #f7f6ef류 크림 배경은 사진 편집 감성 — 콘크리트 브리프는 중성 회색조를 유지한다.

접근 실패 기록

URL	결과	비고
https://davidchippersfield.com	DNS ENOTFOUND	도메인 없음(1회). 실제 사무소 도메인은 chipperfont 차이가 있으나 슬롯 후보군만 시도
https://www.valerioolgati.com	DNS ENOTFOUND	1회 실패, 재시도 않음(R1은 Pawson 확보)
https://www.kristofferzell.fi	DNS ENOTFOUND	R2 후보 1
https://www.apartamento.rs	DNS ENOTFOUND	R2 후보 3
https://tocca.com	접속 성공, 채택 안 함	Shopify 뷰티 스토어 — 프로모션 배너·장바구니 중심으로 "흑백/미니멀 편집감각" 불일치. 구조만 기록함(메인 내비 9개 항목, 홈 = 공지 배너→히어로 2→디스커버리 세트→4타일→뉴스레터)
https://readcereal.com/blogs/journal	404	경로 변경. 루트와 CSS 직접 추출로 대체 성공

R2는 후보 2개 DNS 실패 + 1개 톤 불일치로, 브리프 성격(흑백/미니멀 편집감각, 아카이브 목적)에 부합하는 대체 후보를 한 곳(readcereal.com)만 추가 시도해 채택했다.