[Blueprint L3] Pons 포트폴리오 — 의존성 0, 단일 index.html이 오래 가는 이유

# [Blueprint L3] Pons 포트폴리오 — 의존성 0, 단일 index.html이 오래 가는 이유 > Series: `blueprint-ponslink` (3/3) · Category: `P2P/분산기술` + `개발 회고` · Slug: `blueprint-ponslink-08-portfolio-static` > Source: `blueprints/specs/P02_ponslink_web.md` §08 + `blueprints/08-ponslink-portfolio.png` + `pons_포트/index.html` — ## 0. TL;DR `pons_포트`는 `React`도 `Vite`도 없이 `index.html` 단일 파일(41KB, 순수 HTML/CSS)로 13개 제품을 쇼케이스한다. 프레임워크 0, `robots.txt`만. 디자인 토큰은 `SSOT(single source of truth)`로 한 곳에서만 정의. 가장 단순한 아키텍처가 가장 오래 가는 증거.

— ## 1. 문제 정의 — 왜 정적이어야 했나 `PonsLink`는 13개 제품이 각자의 도메인에서 라이브로 동작한다. 포트폴리오는 그들을 소개하는 `쇼케이스`일 뿐, 제품 자체가 아니다. `Next.js`로 포트폴리오를 만들면 `빌드·배포·의존성`이 제품만큼 무거워진다. 그래서 `단일 HTML`로 만들었다. `CDN`에 올리면 끝. `npm install`도 `빌드`도 없다. — ## 2. 설계도 한눈에 — 한 장 `방문자 → 정적 호스팅/CDN → index.html 단일 문서` — 내부에 `디자인 토큰 SSOT`와 `13개 제품 쇼케이스 카드`가 나열. `robots.txt`만 별도. 프레임워크 0, `JS`는 `30줄` 이내. 최소주의 정적 아키텍처. — ## 3. 아키텍처 해부 — 1개 파일 “` pons_포트/ ├── index.html (41KB, 순수 HTML/CSS) ├── assets/ └── robots.txt “` * **index.html:** `head`에 `디자인 토큰`을 `CSS 변수`로 정의. `–clay`, `–paper`, `–ink` 등. 모든 섹션이 이 변수를 참조. 토큰을 바꾸면 전체가 바뀐다. * **assets:** `13개 제품`의 `히어로 이미지`와 `로고`. `CDN` 캐시 30일. * **robots.txt:** `Allow: /`, `Sitemap: https://ponslink.com/sitemap.xml` — `SEO` 최소. — ## 4. 로직 딥다이브 — 토큰 SSOT “`css :root { –clay: #c08457; –paper: #fafaf9; –ink: #1c1917; –radius: 1.5rem; } “` * `SSOT` — 토큰을 `index.html`의 `:root`에만 정의. 다른 파일에서 재정의 금지. `Figma`와 `CSS`가 같은 값을 쓰게 `guide/`에 문서로 동기화. — ## 5. 왜 이 선택인가 | 선택 | 채택 | 버린 대안 | 버린 이유 | |—|—|—|—| | 프레임워크 | 없음 (단일 HTML) | Next.js | 빌드·배포 오버헤드, 포트폴리오는 제품이 아님 | | 토큰 | SSOT | 각 섹션별 CSS | 일관성 붕괴, 다크모드 대응 불가 | | 호스팅 | 정적 CDN | Node 서버 | 비용, 장애점 증가 | — ## 6. 실패와 복구 * **실패:** 처음엔 `Tailwind`를 썼다. 그러나 `포트폴리오`가 `제품`보다 빌드가 무거워짐. `Tailwind`를 빼고 `순수 CSS`로 전환하자 `41KB`로 줄고, `Lighthouse` 100점. * **복구:** `13개 제품` 중 `3개`가 `도메인`을 바꿀 때, `index.html`의 `href`만 고치면 됐다. 프레임워크가 없으니 `마이그레이션`이 10분. — ## 7. 운영 증거 * `index.html` — `41KB`, `HTML/CSS`만, `JS` 30줄, `Lighthouse` 100점 * `디자인 토큰 SSOT` — `guide/` 문서와 `CSS 변수` 동기화 * `robots.txt` — `Allow: /`, `Sitemap` 명시 — ## 8. 시리즈 마무리 — PonsLink 3부작을 닫으며 `pons_p2p`(BFF) → `control-tower`(dry-run) → `포트폴리오`(정적). `PonsLink`는 `연결을 세션으로 바꾸는` 제품이고, 그 주변을 `BFF`, `자동발행`, `쇼케이스`로 감쌌다. 다음은 전체 `55개` 설계도 중 `YouTube/미디어`, `문서/PDF` 등 47개를 어떻게 풀어낼지 고민한다. *부록: `blueprints/08-ponslink-portfolio.png` 프롬프트 `prompts.part1.json#08`, 코드 진입점 `pons_포트/index.html`*