소개 페이지 — 스킬을 스스로 적용해 만든 첫 사례

designpaca 파이프라인 0~6단계를 실제로 돌려 만들었다. 근거는 research/site-brief.md, 결정 기록은 apps/site/design.md 에 있다. 한 문장 컨셉 - 이 페이지는 designpaca 를 거쳐 만들어졌고, 절차와 형태 수치를 한국어 기준으로 전부 공개한다 번호 없이 순서 표현 (C-07 회피) - 파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문에 걸린다 - 시각: 스파인 위 위치가 순서를 만든다 / 내용: 같은 브리프가 단계마다 변한다 - 의미: <ol role="list"> — 화면에 번호 0개, 보조기술에는 "6개 중 n번째" 멀티링구얼 - / = 한국어, /en/ = 영어. 번역이 아니라 각 판을 따로 썼다 - 언어별 레이아웃이 자기 폰트만 로드한다 (판당 2개) - 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다 실측 - JS 314B (gzip, 예산 50KB) / CSS 3.0KB / HTML 4.4~4.8KB - radius 2종 · backdrop-filter 0개 · 타입 5단계 · 강조색 1개 - 슬롭 지문 grep 9패턴 0건, 정적 하드 게이트 8개 전부 통과 감사에서 걸려 고친 것 - eyebrow 6개 → 상한 ceil(7/3)=3 위반 → 3개로 - clip-path 리빌 → 게이트 #8 위반 → transform 으로 교정 - 구분선 대비 1.30:1 → 입력 테두리용 별칭 분리 (WCAG 1.4.11) - 본문 컬럼 960px → --measure 로. layout.md 예시 코드도 같이 수정
2026-08-20 11:00:38 +09:00 · 2026-08-20 11:00:38 +09:00 · 6103700d38
commit 6103700d38
parent 8808c672dc
18 changed files with 1497 additions and 20 deletions
--- a/apps/site/src/pages/index.astro
+++ b/apps/site/src/pages/index.astro
@ -1,19 +1,28 @@
 ---
-const version = "0.1.0";
+import Base from "../layouts/Base.astro";
+import Hero from "../components/Hero.astro";
+import Pipeline from "../components/Pipeline.astro";
+import Metrics from "../components/Metrics.astro";
+import Preflight from "../components/Preflight.astro";
+import Typography from "../components/Typography.astro";
+import Rules from "../components/Rules.astro";
+import Install from "../components/Install.astro";
+import { ko as c } from "../i18n/content";
 ---

-<html lang="ko">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>designpaca</title>
-    <meta name="description" content="웹 디자인 전 과정을 끌고 가는 파이프라인 스킬" />
-  </head>
-  <body>
-    <main>
-      <h1>designpaca</h1>
-      <p>웹 디자인 파이프라인 스킬 — v{version}</p>
-      <code>npx designpaca</code>
-    </main>
-  </body>
-</html>
+<Base lang="ko" title={c.meta.title} description={c.meta.description}>
+  <Hero c={c.hero} ui={c.ui} />
+  <Pipeline c={c.pipeline} />
+  <Metrics c={c.metrics} />
+  <Preflight c={c.preflight} />
+  <Typography c={c.typography} />
+  <Rules c={c.rules} />
+  <Install c={c.install} ui={c.ui} />
+
+  <Fragment slot="footer">
+    <p>{c.footer.made}</p>
+    <p class="mono">
+      <a href={`https://${c.footer.repo}`}>{c.footer.repo}</a> · {c.footer.license}
+    </p>
+  </Fragment>
+</Base>