아틀리에 아카이브 세리프

# 아틀리에 아카이브 세리프 — web 디자인 팩

## 이 스타일의 정체성
미술관·갤러리 도록(catalogue raisonné)의 디지털 번역이다. 12열 엄격 그리드를 화면에 노출하되, 좌측 4열은 작품·컬렉션 인덱스 리스트가 세리프로 정밀 정렬되고, 우측 7~8열은 단 하나의 큰 작품 이미지가 넉넉한 여백 속에 앉는다. 무엇을 보면 이 스타일임을 아는가 — (1) 좌측 인덱스의 각 항목에 줄 번호·연도·치수가 등폭 모노 숫자로 소수점까지 정렬돼 있고, (2) 우측 이미지 아래에 도서관 라벨 같은 초소형 캡션이 모노로 붙으며, (3) 트랜지셔널 세리프 헤딩과 산세리프 메타데이터가 또렷이 역할 분리된다. 카드도, 그림자도, 색도 없다 — 그리드와 룰과 활자뿐.

## 색
- 배경: `#f4f1ea` (오프화이트, 약한 웜 그레이). 단일 배경, 섹션마다 바꾸지 않는다.
- 표면(인덱스 활성 행): `#e9e4d8`. 호버 행: `#ece8dd`.
- 텍스트: `#211f1a` (헤딩·본문). 메타데이터·라벨·캡션: `#7c776a`.
- 강조: `#3a3a3a`에 가까운 무채 — 별도 강조색 없음. 활성 인덱스 항목의 좌측에만 `2px` 잉크 바(`#211f1a`). 면적 1% 이하.
- 룰 라인: `#c8c2b1` 헤어라인.

## 타이포그래피
- 헤딩(작품명·섹션 타이틀): `Source Serif 4`(Google Fonts), weight 500~600, 대체 `'Spectral', Georgia, serif`. 크기 `clamp(1.6rem, 3vw, 2.6rem)`, `letter-spacing: -0.012em`, line-height 1.22.
- 본문(작품 해설·에세이): `Source Serif 4` `1.0625rem`, weight 400, line-height 1.62, 측정 62~70자.
- 메타데이터·라벨·인덱스 텍스트: `Inter`(Google Fonts), `0.8125rem`, weight 450~500, `letter-spacing: 0.02em`. 라벨은 대문자 `letter-spacing: 0.08em`.
- 숫자(줄 번호·연도·치수·소장번호): `IBM Plex Mono`(Google Fonts) `0.75rem`, weight 400, 표 형식 숫자(`font-variant-numeric: tabular-nums`)로 소수점·자릿수 정렬.
- 위계는 `mixed`로 만든다 — 세리프(서사)·산세리프(메타)·모노(수치) 3겹이 각자 역할을 갖는다. 한 텍스트에 둘을 섞지 않는다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1280px. 좌우 패딩 모바일 20px / 데스크탑 48px.
- 브레이크포인트: 720px, 1080px.
- `strict-grid` — 12열, 거터 24px. 그리드 라인은 약하게 노출(`#c8c2b1` 헤어라인 세로 룰을 섹션 경계에만).
- 데스크탑: 좌측 인덱스 칼럼 4열(고정 sticky, top 96px), 우측 작품 영역 8열. 1080px 미만에서는 인덱스가 위로 접히고 단일 칼럼.
- 인덱스 행 그리드: `[번호 1.5열][작품명 6열][연도 2열][치수 2.5열]`.
- 섹션 수직 리듬: 블록 간 72px(airy — 아카이브지만 갤러리 톤이라 여백을 둔다). 인덱스 행 사이는 0(룰로만 구분).

## 형태 / 질감
- 모서리: radius `0`. 전 요소 직각 — 이미지도 직각.
- 보더: 헤어라인 `1px solid #c8c2b1`. 인덱스 행 하단 룰 `1px`, 섹션 구분 `1px solid #211f1a`.
- 그림자: 전면 금지. 깊이는 그리드 위치와 룰로만.
- 이미지: 직각, 보더 없음 또는 `1px solid #c8c2b1`. 비율은 콘텐츠대로(자르지 않음). 아래 4px 간격 후 모노 캡션 한 줄.
- 캡션 포맷: `FIG. 01 · 2026 · 120 × 90 cm · OIL ON LINEN` 식의 모노 메타 스트링.
- 아이콘: 사용 최소화. 필요 시 1px 라인 아이콘만, 채움 금지.

## 모션
- `motion: none` — 도록은 정적이다.
- 호버만 허용: 인덱스 행 배경 `#f4f1ea→#ece8dd` 전환 `140ms ease`, 링크는 밑줄 즉시(`text-underline-offset: 3px`).
- 스크롤 진입 페이드·패럴랙스·이미지 줌 전면 금지.
- 인덱스 항목 선택 시 좌측 잉크 바만 즉시 토글, 슬라이드 애니메이션 없음.

## 하지 말 것
- 보라/인디고 그라디언트·어떤 그라디언트 배경도 금지.
- 둥근 모서리·박스 섀도·떠 있는 카드 금지 — 콘텐츠는 인덱스 행과 그리드 셀.
- 강조색 추가 금지 — 무채 잉크와 모노만. 활성 표시는 2px 잉크 바로만.
- 스크롤 애니메이션·패럴랙스·이미지 켄 번스 줌 금지.
- 세리프·산세리프·모노를 한 텍스트 안에서 섞지 말 것 — 역할별로 분리.
- 작품 이미지를 강제로 정사각 크롭하지 말 것 — 원 비율 유지.
- 이모지·blob·정체불명 일러스트 금지.
- 인덱스에서 줄 번호·연도·치수 모노 메타를 빼지 말 것 — 도록의 정밀함이 정체성.

## 적용 예
- **히어로(컬렉션 헤더):** 12열 상단에 세리프 컬렉션명 한 줄(`clamp` 대형) + 그 아래 모노 부제(`COLLECTION 2026 · 48 WORKS · ATELIER ARCHIVE`). 아래 1px 잉크 룰. 좌측 정렬, 중앙 정렬 금지.
- **갤러리(메인):** 좌측 4열 sticky 인덱스 — 각 행은 모노 번호(`01`)·세리프 작품명·모노 연도·모노 치수. 우측 8열은 선택된 작품 이미지 한 점(원 비율) + 아래 모노 캡션 + 세리프 해설 단락(측정 62~70자). 행 호버 시 배경 살짝 어둡게, 선택 시 좌측 잉크 바.
- **푸터:** 상단 1px 잉크 룰. 모노 라벨로 컬렉션 인덱스(연도·매체·장르)를 3단 컬럼 나열, 색 반전 없음. 하단 모노 한 줄 — `© 2026 · CATALOGUE RAISONNÉ · ALL DIMENSIONS APPROXIMATE`.