# 구조 시안 재검토 — 2026-10-13

> 이 문서는 초기 4개 시안 검토의 기록입니다. 이후 확장된 현재 목록은 [출처 페이지](research.html)와 `designs.json`, 브랜드별 `EVIDENCE_*.md`를 참조하세요. 아래 숫자는 초기 검토 시점 기준입니다.

## 결정

기존 74개는 하나의 Apple 템플릿에 색·폰트·radius를 바꾼 실험이었다. 브랜드별 디자인을 비교한다는 목적을 충족하지 못했다.
이번에는 **Apple / Airbnb / Linear / Vercel 4개만 독립 구조로 재구현**한다. 나머지 70개는 기본 목록에서 제외하고 `기존 색상 실험`으로 표시한다. 후보 저장/비교는 유지한다. 하우스 표준 변경은 하지 않는다.

`구조 시안`은 **명시된 구성 규칙을 What U Up 콘텐츠로 재해석**했다는 뜻이다. 브랜드 공식 구현·인증·정확한 복제·전용 폰트 재현을 뜻하지 않는다.

## 원본과 신뢰도

- 74개 원본: https://github.com/VoltAgent/awesome-design-md
- 로컬 분석 기준 revision: `664b3e78fd1a298ba11973822da988483256d4b4` (2026-06-16)
- 웹 배포 원본: https://getdesign.md/ — 각 페이지가 `Independent analysis`임을 명시한다. 브랜드 공식 문서가 아니다.
- 추가로 확인한 공식 문서 모음: https://github.com/VoltAgent/official-design-md
- Vercel은 https://vercel.com/design.md 를 직접 조회해 브랜드 자체 문서를 사용했다.
- Apple / Linear / Airbnb는 커뮤니티 분석 + 각 브랜드 실제 홈페이지의 브라우저 렌더를 대조했다.
- 전용 폰트는 라이선스/파일을 확보하지 않았으므로 문서에 허용된 시스템 폴백을 썼다.
- 기존 템플릿의 22개 서비스 이름·설명·URL을 보존한다. 서비스 가동률/사용자 수/평점 등 새로운 운영 사실은 만들지 않는다.

## 적용 차이와 근거

### Apple — 제품 쇼케이스

출처: [분석 원문](https://github.com/VoltAgent/awesome-design-md/blob/664b3e78fd1a298ba11973822da988483256d4b4/design-md/apple/DESIGN.md), [실제 홈페이지](https://www.apple.com/), [분석 배포](https://getdesign.md/apple/design-md).

- Layout / Components: 44px 내비게이션, 화면 폭 제품 타일, 밝고 어두운 구획 교차.
- Typography / Buttons: 56px 디스플레이, 600 제목, 17px 본문, pill 액션.
- 구현: 첫 섹션의 서비스 제품 쇼케이스 → 두 개의 대비 타일 → 별도의 유틸리티 목록.
- 제한: Apple 제품 사진 대신 독자 제작 서비스 일러스트를 쓴다. 첫 섹션은 단순 카드 목록이 아니라 편집된 전시 구성이다.

### Airbnb — 검색 중심 발견

출처: [분석 원문](https://github.com/VoltAgent/awesome-design-md/blob/664b3e78fd1a298ba11973822da988483256d4b4/design-md/airbnb/DESIGN.md), [실제 홈페이지](https://www.airbnb.com/), [분석 배포](https://getdesign.md/airbnb/design-md).

- Components / Search Surface: 분절형 검색 pill, 끝의 원형 검색 액션, 독립된 탐색 영역.
- Listing Cards: 이미지 우선 카드, 이미지 밖의 제목·메타정보, 비교적 낮은 타이포 위계.
- 구현: 두 단계 탐색 → 실제 검색/분류 → 서비스 일러스트 탐색 카드. 필터 상태는 URL에 반영.
- 제한: 2026-10-13 실제 기본 홈페이지의 결과 콘텐츠는 지역·상태에 따라 달랐다. 사진 카드는 수집된 상세 컴포넌트 규칙을 근거로 쓰며, 현재 모든 사용자에게 같은 피드가 보인다고 주장하지 않는다. 숙소·가격·평점 대신 실제 서비스 데이터로 적응했다.

### Linear — 제품 화면 중심

출처: [분석 원문](https://github.com/VoltAgent/awesome-design-md/blob/664b3e78fd1a298ba11973822da988483256d4b4/design-md/linear.app/DESIGN.md), [실제 홈페이지](https://linear.app/), [분석 배포](https://getdesign.md/linear.app/design-md).

- Overview / Layout: 왼쪽 대형 제목 다음 하나의 넓은 제품 패널.
- Components / Elevation: 사이드바, 촘촘한 정보 행, 표면 계층과 hairline, 장식 gradient 배제.
- 구현: 서비스 디렉토리를 실제 검색/분류 가능한 앱 패널로 만든다. 같은 서비스가 카드가 아니라 행으로 읽힌다.
- 제한: 원본 이슈 관리 앱 자체를 구현한 것이 아니며, 서비스 디렉토리로 기능과 정보를 치환했다.

### Vercel — 연속 그리드와 정보 아티팩트

출처: [공식 DESIGN.md](https://vercel.com/design.md), [실제 홈페이지](https://vercel.com/).

- 공식 규칙: 12/6/4 열 공유 그리드, 첫 화면이 논지를 보여주는 구성, 장식 표면보다 정렬과 밀도.
- 구현: 모노크롬 연속 캔버스, 분할형 서론, 카테고리별 서비스 인덱스, 본문과 공유하는 선/열.
- 제한: 배포 제품의 대시보드나 측정값을 흉내 내지 않는다. Geist는 시스템 폰트로 대체한다.

## 제외 판단

- Notion: 소개 문구/수집 문서/현재 마케팅 화면의 강조점이 일치하지 않는다. 워크스페이스 UI로 추측 변환하지 않았다.
- Spotify: 현재 대상 화면을 동등한 수준으로 검증하지 못했다. 앱 사이드바/재생 UI를 기억만으로 만들지 않았다.
- 나머지 68개: 이번 구조 재구현의 상세 원본+실화면 검수를 통과하지 않았다. 미검증을 부정확하다는 단정으로 바꾸지 않는다.

## 스킬 조사와 실제 적용

- 설치된 `frontend-design`: 브랜드마다 정보 구조·타입 역할·고유 컴포넌트를 먼저 정하고 구현/스크린샷 검토. [Anthropic 공식 스킬](https://github.com/anthropics/skills/tree/main/skills/frontend-design)과 설치본은 동일 바이트라고 주장하지 않는다.
- `web-design-guidelines`: [최신 Vercel 지침](https://github.com/vercel-labs/web-interface-guidelines/blob/main/command.md)을 조회, 의미 있는 링크/폼, 레이블, 키보드 포커스, 화면 넘침, reduced motion을 확인.
- `webapp-testing`: 설치된 Playwright 절차로 실제 브라우저 검색·필터·비교·모바일을 테스트.
- `visual-verdict`: 원본 스크린샷과 결과를 비교해 **시스템을 적용한 시안**으로 검토. 콘텐츠가 다른데 픽셀 일치율로 위장하지 않는다.
- `landing-page-design`: 미설치 `belt` 의존과 획일적 전환 페이지 구조 때문에 적용하지 않았다.
- 스킬 설치·발행·수정은 하지 않았다.

## 재현

```sh
python3 tools/gen_design_gallery.py
python3 tools/capture_design_gallery.py
python3 tools/gen_design_gallery.py  # 갱신 썸네일/페이지 해시를 목록에 반영
python3 tools/test_design_gallery.py
python3 tools/test_gallery_structural.py
```

생성기의 `CONFIRMED`는 네 개만 허용한다. `designs.json`은 전체 74개에 대해 `structural/token`, 적용 규칙, 출처, 로컬 분석 문서 해시를 기록한다.
원본 캡처와 검토용 결과는 `/tmp/gallery-redesign-evidence/`, `/tmp/linear-home.png`, `/tmp/airbnb-home.png`에 두었다. 임시 증거의 장기 보존을 보장하지 않는다.

## 완료 검증 결과

- 전체 74개 HTML/PNG 및 기존 후보 저장·공유·비교 회귀: 통과.
- 신규 4개 구조·원본 22개 서비스 데이터·실제 필터·320/390/768/1440px: 로컬/외부 모두 통과.
- 작성자와 분리된 검토자의 적응형 디자인 시각 검수: Apple 90, Airbnb 93, Linear 94, Vercel 96 / 100. **브랜드 규칙의 콘텐츠 적응 평가이며 픽셀 일치율이 아니다.**
- 발견된 보완: Linear 검색 필드 name, Vercel 서비스 링크의 접근 가능한 설명을 수정.
- Playwright의 Chromium으로 검증. 실제 iOS Safari/Android 기기 검증은 미실행.
- 공식 사이트/서비스 내부의 기능까지 구현하거나 가동 상태를 검증한 것은 아니다. 이 갤러리의 정적 시안과 탐색 동작을 검증했다.


## 추가 확장 완료 — 2026-10-13 20:31 KST

- 새 구조 시안 6개: WIRED, The Verge, Mintlify, Supabase, Nike, Pinterest. 총 10개 구조 시안 + 64개 기존 색상 실험.
- 원본 22개 서비스 데이터는 보존했다. 기존 4개 구조 시안과 64개 색상 실험 HTML은 작업 전과 바이트 단위로 동일하다.
- 상세 근거: `EVIDENCE_EDITORIAL.md`, `EVIDENCE_UTILITY.md`, `EVIDENCE_CATALOG.md`. Pinterest 메이슨리는 분석 자료 기반이며 라이브 로그아웃 화면은 탐색·컬렉션 모델을 대조했다. Mintlify는 문서 사이트를 대조했다.
- 작성자와 분리된 검증자: 전체 10개, 1440/768/390/320px, 조작·데이터 보존·포커스·44px 비인라인 타깃·이스케이프 검증 통과. 공개 출처 21개 HTTP 200.
- `test_gallery_structural.py`: 최종 스테이징 및 https://whatuup.uk/gallery/ 모두 통과. `test_design_gallery.py`: 74개 페이지/썸네일, 저장·공유·비교, 저장 차단 대체 동작 통과.
- 외부 모바일: 신규 후보 3개 저장/복원 및 비교 iframe 3개, 닫기, 수평 넘침 없음 확인. 최종 배포 아티팩트 15개의 외부 응답이 로컬과 바이트 단위로 일치했다.
- Python 컴파일, JavaScript 구문, CSS 토큰 참조 및 공백 검사 통과. 이 정적 Python/HTML 도구에는 별도 lint/typecheck 빌드 스크립트가 설정되어 있지 않다. 실제 iOS/Android 실기기 검증은 미실행.