# 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줄.

```css
/* 도면 컨테이너가 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)만 추가 시도해 채택했다.