docs: 개발 계획 오버뷰 대시보드(진행현황·로드맵·산출물·리스크)

2026-06-25 22:23:01 +09:00 · 2026-06-25 22:23:01 +09:00 · 859ab26314
commit 859ab26314
parent 84eb6e2173
2 changed files with 749 additions and 0 deletions
--- a/docs/dev_dashboard.html
+++ b/docs/dev_dashboard.html
@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Vignette — 개발 오버뷰 (PM 보드)</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css">
+<style>
+/* =====================================================================
+   Vignette — 개발 오버뷰 대시보드 (내부 PM 보드, 앱 화면 아님)
+   토큰: DESIGN_CONCEPT.md §3 그대로 계승. accent = 세이지-틸(학습자 톤).
+   철칙: border-left 0 · 이모지 0(아이콘 inline SVG) · 카드덤프 0 ·
+        순흑/순백 금지 · 강조는 weight/tint/kicker/dot로만 · 한 화면 한 목적.
+        빨강은 리스크에만.
+   ===================================================================== */
+:root{
+  /* 중성 베이스 (따뜻한 종이 + 잉크 네이비-그린) */
+  --paper:#FBFAF8; --paper-2:#F4F2EE; --surface:#FFFFFF;
+  --neutral-100:#ECEFF1; --neutral-150:#E5E1DA; --neutral-200:#D5DBDE; --neutral-400:#98A4A9;
+  --ink:#1C2A2A; --ink-2:#5A6663; --ink-3:#93A09C; --hair:#E5E1DA;
+  /* 악센트: 세이지-틸 (프로젝트 톤) */
+  --accent:#3E7A6E; --accent-deep:#316257; --accent-tint:#EEF4F2; --accent-bright:#5F968B;
+  /* 보조 온기 (테라코타) — 화면당 절제 */
+  --clay:#B0735C; --clay-deep:#94604C; --clay-tint:#F6F0EC;
+  /* 의미색 */
+  --pos-text:#2C6E49; --pos-solid:#3B8C5E; --pos-tint:#E8F3EC;
+  --warn-text:#8A5A00; --warn-solid:#C28A2C; --warn-tint:#FAF1E0;
+  --crit-text:#A8352C; --crit-solid:#C4453A; --crit-tint:#FAEAE8;
+  --info-text:#2E5A7A; --info-solid:#3C7299; --info-tint:#EAF1F6;
+  --neutral-sig:#8895A2;
+  /* 별칭 */
+  --text-on-accent:#FBFAF8;
+  --focus-ring:rgba(62,122,110,.45);
+  /* 폰트 */
+  --font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
+  --font-num:"Pretendard Variable","JetBrains Mono",ui-monospace,monospace;
+  /* spacing */
+  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
+  --radius:8px; --radius-sm:6px; --radius-lg:12px;
+  --maxw:1200px;
+  --shadow-sm:0 1px 2px rgba(28,42,42,.05);
+  --shadow-md:0 4px 14px rgba(28,42,42,.07);
+  --ease-out:cubic-bezier(.22,.61,.36,1);
+}
+*{margin:0;padding:0;box-sizing:border-box;}
+html,body{height:100%;}
+body{
+  font-family:var(--font-sans); background:var(--paper); color:var(--ink);
+  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
+  letter-spacing:-0.01em; line-height:1.6;
+}
+.tab-num{font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
+
+/* ============ 공통 앱 셸: 톱바 ============ */
+.topbar{
+  height:56px; background:var(--surface); border-bottom:1px solid var(--hair);
+  display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-6);
+  position:sticky; top:0; z-index:20;
+}
+.brand{display:flex; align-items:center; gap:10px;}
+.brand .mark{display:flex; align-items:center; justify-content:center; width:26px; height:26px;}
+.brand .mark svg{width:26px; height:26px;}
+.brand .wm{font-size:17px; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
+.brand .wm .v{color:var(--accent);}
+/* 컨텍스트 라벨 (mono accent, 조용한 신호) */
+.rolelabel{
+  font-family:var(--font-num); font-size:13px; font-weight:600;
+  letter-spacing:0.04em; color:var(--accent);
+  padding-left:var(--sp-4); margin-left:var(--sp-2);
+  border-left:1px solid var(--hair); /* 셸 구획 디바이더(강조선 아님) */
+}
+.topbar .spacer{flex:1;}
+.repo{
+  font-family:var(--font-num); font-size:12.5px; color:var(--ink-3);
+  display:inline-flex; align-items:center; gap:7px;
+}
+.repo svg{width:14px; height:14px; stroke:var(--ink-3); fill:none;}
+.repo .priv{
+  font-size:11px; font-weight:600; color:var(--ink-2); background:var(--paper-2);
+  padding:2px 8px; border-radius:100px; letter-spacing:0.02em;
+}
+.topbar .when{
+  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);
+  font-weight:500; margin-left:var(--sp-2);
+}
+.topbar .when .dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
+.topbar .when .d{font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600;}
+
+/* ============ 본문 래퍼 ============ */
+.wrap{max-width:var(--maxw); margin:0 auto; padding:var(--sp-7) var(--sp-6) var(--sp-8);}
+.kicker{
+  font-family:var(--font-num); font-size:12px; font-weight:600;
+  letter-spacing:0.08em; color:var(--accent);
+  display:flex; align-items:center; gap:8px;
+}
+.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
+
+/* 페이지 헤드라인 (한 화면 한 메시지) */
+.head{margin-bottom:var(--sp-7);}
+.head .kicker{margin-bottom:var(--sp-3);}
+.head h1{font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.3;}
+.head h1 em{font-style:normal; color:var(--accent-deep);}
+.head .sub{font-size:15px; color:var(--ink-3); margin-top:8px; max-width:680px;}
+
+/* 헤드라인 옆 요약 스탯 라인 */
+.headstats{
+  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-5);
+  margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--hair);
+}
+.headstats .stat{display:inline-flex; align-items:baseline; gap:7px;}
+.headstats .stat .num{font-size:20px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.02em;}
+.headstats .stat .lab{font-size:13.5px; color:var(--ink-3);}
+.headstats .vsep{width:1px; height:18px; background:var(--hair);}
+
+/* 섹션 헤더 */
+.sechead{margin-bottom:var(--sp-5);}
+.sechead .kicker{margin-bottom:6px;}
+.sechead .desc{font-size:13px; color:var(--ink-3);}
+
+.block{margin-bottom:var(--sp-8);}
+
+/* ============ 1. 로드맵 4단계 진행 막대 ============ */
+.roadmap{
+  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
+  box-shadow:var(--shadow-sm); padding:var(--sp-6) var(--sp-6) var(--sp-5);
+}
+.phase-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);}
+.phase .ph-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px;}
+.phase .ph-id{font-family:var(--font-num); font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--ink-3);}
+.phase .ph-pct{font-family:var(--font-num); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2);}
+.phase.is-active .ph-pct{color:var(--accent-deep);}
+.phase .ph-name{font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; line-height:1.4; margin-bottom:3px;}
+.phase .ph-weeks{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-bottom:11px;}
+.phase .track{height:8px; background:var(--paper-2); border-radius:4px; overflow:hidden;}
+.phase .track .fill{height:100%; border-radius:4px; background:var(--neutral-150);}
+.phase.is-active .track .fill{background:var(--accent);}
+.phase .ph-state{
+  margin-top:11px; display:inline-flex; align-items:center; gap:7px;
+  font-size:12.5px; font-weight:500;
+}
+.phase .ph-state .d{width:7px; height:7px; border-radius:50%; background:var(--neutral-200);}
+.phase .ph-state.active{color:var(--accent-deep); font-weight:600;}
+.phase .ph-state.active .d{background:var(--accent);}
+.phase .ph-state.wait{color:var(--ink-3);}
+.phase .ph-note{font-size:11.5px; color:var(--ink-3); margin-top:7px; line-height:1.5;}
+/* 단계 사이 연결 디바이더 (시각 흐름) */
+.phase{position:relative;}
+.phase:not(:first-child)::before{
+  content:""; position:absolute; left:calc(-1 * var(--sp-5) / 2 - 0.5px); top:7px; bottom:7px;
+  width:1px; background:var(--hair);
+}
+
+/* ============ 2단 본문 (좌: 완료/다음 · 우: 결정/리스크) ============ */
+.cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:start;}
+
+/* 완료 체크리스트 */
+.panel{
+  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
+  box-shadow:var(--shadow-sm); padding:var(--sp-6);
+}
+.panel + .panel{margin-top:var(--sp-6);}
+.panel .ph{font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; margin-bottom:var(--sp-2);}
+.panel .pd{font-size:12.5px; color:var(--ink-3); margin-bottom:var(--sp-5);}
+
+.checks{display:flex; flex-direction:column;}
+.chk-group + .chk-group{margin-top:var(--sp-5);}
+.chk-glabel{
+  font-family:var(--font-num); font-size:11px; font-weight:600; letter-spacing:0.06em;
+  color:var(--ink-3); text-transform:uppercase; margin-bottom:10px;
+}
+.chk{display:flex; align-items:flex-start; gap:11px; padding:7px 0;}
+.chk + .chk{border-top:1px solid var(--paper-2);}
+.chk .mk{
+  flex:none; width:18px; height:18px; border-radius:50%; margin-top:1px;
+  background:var(--pos-tint); display:flex; align-items:center; justify-content:center;
+}
+.chk .mk svg{width:11px; height:11px; stroke:var(--pos-solid); fill:none; stroke-width:2.6;}
+.chk .ct{font-size:13.5px; color:var(--ink); line-height:1.5;}
+.chk .ct b{font-weight:600;}
+.chk .ct .tag{
+  display:inline-block; margin-left:6px; font-family:var(--font-num); font-size:10.5px; font-weight:600;
+  letter-spacing:0.02em; color:var(--accent-deep); background:var(--accent-tint);
+  padding:1px 7px; border-radius:100px; vertical-align:middle;
+}
+.chk .ct .verified{color:var(--pos-text); background:var(--pos-tint);}
+
+/* 진행중 / 다음 (도트 리스트) */
+.nextlist{display:flex; flex-direction:column;}
+.nx{display:flex; align-items:flex-start; gap:11px; padding:10px 0;}
+.nx + .nx{border-top:1px solid var(--paper-2);}
+.nx .nd{flex:none; width:8px; height:8px; border-radius:50%; margin-top:7px;}
+.nx .nd.doing{background:var(--accent);}
+.nx .nd.queued{background:var(--neutral-200);}
+.nx .nt{font-size:13.5px; color:var(--ink); line-height:1.5;}
+.nx .nt b{font-weight:600;}
+.nx .nt .st{
+  display:inline-block; margin-left:6px; font-size:11px; font-weight:600;
+  padding:1px 8px; border-radius:100px; vertical-align:middle;
+}
+.nx .nt .st.doing{color:var(--accent-deep); background:var(--accent-tint);}
+.nx .nt .st.blocked{color:var(--crit-text); background:var(--crit-tint);}
+.nx .nt .st.queued{color:var(--ink-3); background:var(--paper-2);}
+.nx .nt .why{display:block; font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.5;}
+
+/* 확정 결정 */
+.decisions{display:flex; flex-direction:column;}
+.dc{display:grid; grid-template-columns:96px 1fr; align-items:baseline; gap:var(--sp-4); padding:11px 0;}
+.dc + .dc{border-top:1px solid var(--paper-2);}
+.dc .dk{font-size:12.5px; font-weight:600; color:var(--ink-3); letter-spacing:-0.01em;}
+.dc .dv{font-size:13.5px; color:var(--ink); line-height:1.5;}
+.dc .dv b{font-weight:600; color:var(--accent-deep);}
+.dc.span{grid-template-columns:1fr;}
+.dc.span .dk{
+  font-family:var(--font-num); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
+  color:var(--ink-3); margin-bottom:8px;
+}
+.dc .stack-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:3px;}
+.dc .stack-chips .c{
+  font-family:var(--font-num); font-size:11.5px; font-weight:500; color:var(--ink-2);
+  background:var(--paper-2); padding:4px 10px; border-radius:100px;
+}
+.dc .stack-chips .c.key{color:var(--accent-deep); background:var(--accent-tint); font-weight:600;}
+
+/* 리스크 · 블로커 (빨강은 여기에만) */
+.risks{display:flex; flex-direction:column;}
+.rk{display:flex; align-items:flex-start; gap:12px; padding:13px 0;}
+.rk + .rk{border-top:1px solid var(--paper-2);}
+.rk .sev{
+  flex:none; margin-top:3px; display:inline-flex; align-items:center; gap:7px;
+  font-family:var(--font-num); font-size:10.5px; font-weight:700; letter-spacing:0.04em;
+  width:64px;
+}
+.rk .sev .d{width:9px; height:9px; border-radius:50%;}
+.rk .sev.high{color:var(--crit-text);} .rk .sev.high .d{background:var(--crit-solid);}
+.rk .sev.mid{color:var(--warn-text);} .rk .sev.mid .d{background:var(--warn-solid);}
+.rk .rbody .rt{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.45;}
+.rk .rbody .rd{font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-top:3px;}
+.rk .rbody .rd .ext{
+  font-size:11px; font-weight:600; color:var(--clay-deep); background:var(--clay-tint);
+  padding:1px 7px; border-radius:100px; margin-left:4px;
+}
+
+/* ============ 3. 산출물 인벤토리 (테이블) ============ */
+.inv-tbl{width:100%; border-collapse:collapse; font-size:14px;}
+.inv-tbl thead th{
+  font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0.02em;
+  text-align:left; padding:0 var(--sp-3) var(--sp-3); border-bottom:1px solid var(--neutral-200);
+  white-space:nowrap;
+}
+.inv-tbl tbody td{padding:var(--sp-4) var(--sp-3); border-bottom:1px solid var(--paper-2); vertical-align:top;}
+.inv-tbl tbody tr:last-child td{border-bottom:none;}
+.inv-tbl .area{font-weight:600; color:var(--ink); white-space:nowrap;}
+.inv-tbl .area .kd{
+  display:inline-flex; align-items:center; gap:8px;
+}
+.inv-tbl .area .kd .d{width:7px; height:7px; border-radius:50%; background:var(--accent-bright);}
+.inv-tbl .what{color:var(--ink-2); line-height:1.55;}
+.inv-tbl .path{
+  font-family:var(--font-num); font-size:12px; color:var(--ink-3); line-height:1.7;
+  white-space:nowrap;
+}
+.inv-tbl .path code{
+  background:var(--paper-2); color:var(--ink-2); padding:2px 7px; border-radius:var(--radius-sm);
+  font-family:var(--font-num); display:inline-block; margin:1px 4px 1px 0;
+}
+.inv-tbl .stt{white-space:nowrap;}
+.invtag{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500;}
+.invtag .d{width:7px; height:7px; border-radius:50%;}
+.invtag.done{color:var(--pos-text);} .invtag.done .d{background:var(--pos-solid);}
+.invtag.partial{color:var(--warn-text);} .invtag.partial .d{background:var(--warn-solid);}
+
+/* 푸터 메타 */
+.foot{
+  margin-top:var(--sp-6); display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-4);
+  font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums;
+}
+.foot .fdot{width:5px; height:5px; border-radius:50%; background:var(--neutral-200);}
+
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
+}
+@media (max-width:980px){
+  .phase-grid{grid-template-columns:repeat(2,1fr); gap:var(--sp-6);}
+  .phase:not(:first-child)::before{display:none;}
+  .cols{grid-template-columns:1fr; gap:var(--sp-6);}
+  .repo,.topbar .when{display:none;}
+  .inv-tbl .path{white-space:normal;}
+}
+@media (max-width:560px){
+  .phase-grid{grid-template-columns:1fr;}
+}
+</style>
+</head>
+<body>
+
+<!-- ============ 공통 앱 셸: 톱바 ============ -->
+<header class="topbar">
+  <div class="brand">
+    <span class="mark">
+      <!-- 워드마크: 비네트(조리개) — inline SVG -->
+      <svg viewBox="0 0 26 26" fill="none" aria-hidden="true">
+        <circle cx="13" cy="13" r="11" stroke="#3E7A6E" stroke-width="2"/>
+        <path d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5" stroke="#3E7A6E" stroke-width="2" stroke-linecap="round"/>
+        <circle cx="13" cy="9" r="1.6" fill="#B0735C"/>
+      </svg>
+    </span>
+    <span class="wm"><span class="v">Vignette</span></span>
+  </div>
+  <span class="rolelabel">개발 오버뷰</span>
+  <span class="spacer"></span>
+  <span class="repo">
+    <svg viewBox="0 0 24 24" stroke-width="1.7"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    yunchan8804-blip/vignette
+    <span class="priv">private</span>
+  </span>
+  <span class="when"><span class="dot"></span>오늘 <span class="d">2026-06-25</span></span>
+</header>
+
+<!-- ============ 본문 ============ -->
+<div class="wrap">
+
+  <!-- 페이지 헤드라인 -->
+  <div class="head">
+    <div class="kicker"><span class="dot"></span>한신대 산학협력 · 20주 · 매칭금 500만</div>
+    <h1>Phase 0 기반정렬 막바지, <em>엔진 실동작까지 검증</em>됐습니다.</h1>
+    <div class="sub">설계 4종·모노레포·디자인 7종·P0 코드 골격이 오늘 자로 완료됐고, 남은 블로커는 Docker 기동 후 DB 실마이그레이션과 외부 데이터 수급입니다.</div>
+    <div class="headstats">
+      <span class="stat"><span class="num">4</span><span class="lab">로드맵 단계</span></span>
+      <span class="vsep"></span>
+      <span class="stat"><span class="num">1</span><span class="lab">진행중 (P0)</span></span>
+      <span class="vsep"></span>
+      <span class="stat"><span class="num">6</span><span class="lab">확정 결정</span></span>
+      <span class="vsep"></span>
+      <span class="stat"><span class="num">3</span><span class="lab">열린 리스크</span></span>
+    </div>
+  </div>
+
+  <!-- 1. 로드맵 4단계 진행 막대 -->
+  <section class="block">
+    <div class="sechead">
+      <div class="kicker"><span class="dot"></span>로드맵 · 20주</div>
+      <div class="desc">단계별 진행률과 상태. 진행중인 단계만 색으로 강조, 대기 단계는 무채로 둡니다.</div>
+    </div>
+
+    <div class="roadmap">
+      <div class="phase-grid">
+        <!-- Phase 0 -->
+        <div class="phase is-active">
+          <div class="ph-top"><span class="ph-id">PHASE 0</span><span class="ph-pct">70%</span></div>
+          <div class="ph-name">기반정렬</div>
+          <div class="ph-weeks">1~2주차</div>
+          <div class="track"><div class="fill" style="width:70%"></div></div>
+          <div class="ph-state active"><span class="d"></span>진행중</div>
+          <div class="ph-note">스캐폴드·DB 스키마·엔진 PoC 거의 완료</div>
+        </div>
+        <!-- Phase 1 -->
+        <div class="phase">
+          <div class="ph-top"><span class="ph-id">PHASE 1</span><span class="ph-pct">0%</span></div>
+          <div class="ph-name">텍스트 상담 MVP</div>
+          <div class="ph-weeks">3~8주차</div>
+          <div class="track"><div class="fill" style="width:0%"></div></div>
+          <div class="ph-state wait"><span class="d"></span>대기</div>
+          <div class="ph-note">상담 루프 + 상태머신 + 실시간 피드백</div>
+        </div>
+        <!-- Phase 2 -->
+        <div class="phase">
+          <div class="ph-top"><span class="ph-id">PHASE 2</span><span class="ph-pct">0%</span></div>
+          <div class="ph-name">음성 + 3역할 + 페르소나</div>
+          <div class="ph-weeks">9~15주차</div>
+          <div class="track"><div class="fill" style="width:0%"></div></div>
+          <div class="ph-state wait"><span class="d"></span>대기</div>
+          <div class="ph-note">음성 캐스케이드 · 슈퍼바이저/내담자/평가</div>
+        </div>
+        <!-- Phase 3 -->
+        <div class="phase">
+          <div class="ph-top"><span class="ph-id">PHASE 3</span><span class="ph-pct">0%</span></div>
+          <div class="ph-name">효과검증 파일럿</div>
+          <div class="ph-weeks">16~20주차</div>
+          <div class="track"><div class="fill" style="width:0%"></div></div>
+          <div class="ph-state wait"><span class="d"></span>대기</div>
+          <div class="ph-note">IRB 면제 확정 (교육용)</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 2단 본문 -->
+  <div class="cols">
+
+    <!-- 좌측: 오늘 완료 + 진행중/다음 -->
+    <div>
+      <section class="block">
+        <div class="sechead">
+          <div class="kicker"><span class="dot"></span>오늘 완료 · 2026-06-25</div>
+          <div class="desc">P0 기반정렬에서 오늘 자로 닫은 항목들입니다.</div>
+        </div>
+
+        <div class="panel">
+          <div class="checks">
+            <!-- 설계 -->
+            <div class="chk-group">
+              <div class="chk-glabel">설계 4종</div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">마스터플랜</span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">적대검증 — red team <b>40개 결함</b> 도출 후 재설계</span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">메모리 · 페르소나 설계</span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">디자인 컨셉</span></div>
+            </div>
+            <!-- 인프라 -->
+            <div class="chk-group">
+              <div class="chk-glabel">인프라</div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">모노레포 repo 생성</span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">Docker 이식 구성 <span class="ct" style="color:var(--ink-3)">— compose + Caddy + 엔진 어댑터 분리</span></span></div>
+            </div>
+            <!-- 디자인 -->
+            <div class="chk-group">
+              <div class="chk-glabel">디자인</div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">화면 <b>7종</b> 시안 <span class="tag">login · learner-home · session · session-review · professor · admin · settings</span></span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">아바타 <b>Rive</b> 채택</span></div>
+            </div>
+            <!-- 엔진 -->
+            <div class="chk-group">
+              <div class="chk-glabel">엔진</div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct"><code style="font-family:var(--font-num);font-size:12px;background:var(--paper-2);padding:1px 6px;border-radius:5px;">claude -p</code> 상주 멀티턴 게이트웨이 <span class="tag verified">실동작 검증 완료</span><br><span style="font-size:12px;color:var(--ink-3);">컨텍스트 유지 + 캐시 재사용 확인</span></span></div>
+            </div>
+            <!-- P0 코드 -->
+            <div class="chk-group">
+              <div class="chk-glabel">P0 코드 · 구문검증 통과</div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">DB 스키마 <b>35테이블</b> <span style="color:var(--ink-3);font-variant-numeric:tabular-nums;">(727줄)</span></span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">FastAPI 골격</span></div>
+              <div class="chk"><span class="mk"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="ct">taxonomy <span style="color:var(--ink-3);font-variant-numeric:tabular-nums;">(285줄)</span></span></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="sechead">
+          <div class="kicker"><span class="dot"></span>진행중 · 다음</div>
+          <div class="desc">P0 마무리와 P1 진입 작업.</div>
+        </div>
+
+        <div class="panel">
+          <div class="nextlist">
+            <div class="nx">
+              <span class="nd doing"></span>
+              <span class="nt">DB 실제 마이그레이션 <span class="st blocked">블로커</span>
+                <span class="why">Docker Desktop 띄워 psql 적용 — Docker 꺼져 있어 미완</span>
+              </span>
+            </div>
+            <div class="nx">
+              <span class="nd queued"></span>
+              <span class="nt">상담 루프 연결 <span class="st queued">P1</span>
+                <span class="why">엔진 + 상태머신 + 실시간 피드백</span>
+              </span>
+            </div>
+            <div class="nx">
+              <span class="nd queued"></span>
+              <span class="nt">Rive 아바타 통합 <span class="st queued">P1</span></span>
+            </div>
+            <div class="nx">
+              <span class="nd queued"></span>
+              <span class="nt">OpenAI 음성 캐스케이드 <span class="st queued">P1</span></span>
+            </div>
+            <div class="nx">
+              <span class="nd queued"></span>
+              <span class="nt">React 프론트 연결 <span class="st queued">P1</span></span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- 우측: 확정 결정 + 리스크/블로커 -->
+    <div>
+      <section class="block">
+        <div class="sechead">
+          <div class="kicker"><span class="dot"></span>확정 결정</div>
+          <div class="desc">되돌리지 않는 아키텍처·운영 기준선.</div>
+        </div>
+
+        <div class="panel">
+          <div class="decisions">
+            <div class="dc">
+              <span class="dk">엔진</span>
+              <span class="dv">로컬 <b>claude -p</b> 상주풀 <span style="color:var(--ink-3);">(API 폴백)</span></span>
+            </div>
+            <div class="dc">
+              <span class="dk">아바타</span>
+              <span class="dv"><b>Rive</b></span>
+            </div>
+            <div class="dc span">
+              <span class="dk">기술 스택</span>
+              <span class="dv">
+                <span class="stack-chips">
+                  <span class="c key">React 19</span>
+                  <span class="c key">FastAPI</span>
+                  <span class="c key">PG 16 + pgvector</span>
+                  <span class="c">Docker</span>
+                </span>
+              </span>
+            </div>
+            <div class="dc span">
+              <span class="dk">운영 디폴트 6종</span>
+              <span class="dv" style="font-size:13px;color:var(--ink-2);line-height:1.65;">
+                s2s 2차 · 평가 AI 로컬 · 재귀학습 few-shot · 자유연습 ON (교수 토글) · 스케일업 compose
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="block">
+        <div class="sechead">
+          <div class="kicker"><span class="dot"></span>리스크 · 블로커</div>
+          <div class="desc">빨강은 데이터·외부 의존, 주황은 검증 미완.</div>
+        </div>
+
+        <div class="panel">
+          <div class="risks">
+            <div class="rk">
+              <span class="sev high"><span class="d"></span>HIGH</span>
+              <span class="rbody">
+                <span class="rt">데이터 n=1</span>
+                <span class="rd">0615 단일 축어록뿐. 추가 사례 수급은 한신대 협의 필요 <span class="ext">외부 블로커</span></span>
+              </span>
+            </div>
+            <div class="rk">
+              <span class="sev mid"><span class="d"></span>MID</span>
+              <span class="rbody">
+                <span class="rt">DB 실마이그레이션 미검증</span>
+                <span class="rd">Docker Desktop 기동 후 psql 적용 필요 — 현재 Docker 꺼짐</span>
+              </span>
+            </div>
+            <div class="rk">
+              <span class="sev mid"><span class="d"></span>MID</span>
+              <span class="rbody">
+                <span class="rt">미성년 사례데이터 활용동의</span>
+                <span class="rd">한신대 공문 필요 <span class="ext">외부 협의</span></span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <!-- 3. 산출물 인벤토리 -->
+  <section class="block">
+    <div class="sechead">
+      <div class="kicker"><span class="dot"></span>산출물 인벤토리</div>
+      <div class="desc">repo 경로 기준. 카드가 아니라 표로 — 전체를 한 번에 훑습니다.</div>
+    </div>
+
+    <table class="inv-tbl">
+      <thead>
+        <tr>
+          <th style="width:120px;">영역</th>
+          <th>내용</th>
+          <th>repo 경로</th>
+          <th style="width:88px;">상태</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="area"><span class="kd"><span class="d"></span>설계 문서</span></td>
+          <td class="what">마스터플랜 · 적대검증(red team) · 메모리·페르소나 설계 · 디자인 컨셉</td>
+          <td class="path"><code>docs/MASTERPLAN.md</code><code>docs/redteam/</code><code>docs/MEMORY_KNOWLEDGE_PERSONA_DESIGN.md</code><code>docs/DESIGN_CONCEPT.md</code></td>
+          <td class="stt"><span class="invtag done"><span class="d"></span>완료</span></td>
+        </tr>
+        <tr>
+          <td class="area"><span class="kd"><span class="d"></span>디자인 시안</span></td>
+          <td class="what">화면 7종 목업 (login · learner-home · session · session-review · professor · admin · settings)</td>
+          <td class="path"><code>docs/mockups/</code> <span style="color:var(--ink-3);font-family:var(--font-num);">(7)</span></td>
+          <td class="stt"><span class="invtag done"><span class="d"></span>완료</span></td>
+        </tr>
+        <tr>
+          <td class="area"><span class="kd"><span class="d"></span>인프라</span></td>
+          <td class="what">Docker 이식 구성 — compose + Caddy + 엔진 어댑터 분리</td>
+          <td class="path"><code>infra/</code></td>
+          <td class="stt"><span class="invtag partial"><span class="d"></span>구성 완료 · 마이그레이션 미완</span></td>
+        </tr>
+        <tr>
+          <td class="area"><span class="kd"><span class="d"></span>엔진 · 백엔드</span></td>
+          <td class="what">claude -p 상주 게이트웨이 (실동작 검증) + FastAPI 골격 + DB 스키마 35테이블 + taxonomy</td>
+          <td class="path"><code>apps/api/</code></td>
+          <td class="stt"><span class="invtag partial"><span class="d"></span>골격 · 구문검증 통과</span></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="foot">
+      <span>repo · github.com/yunchan8804-blip/vignette (private)</span>
+      <span class="fdot"></span>
+      <span>기준일 2026-06-25</span>
+      <span class="fdot"></span>
+      <span>Vignette 개발팀 내부 PM 보드</span>
+    </div>
+  </section>
+
+</div>
+</body>
+</html>
--- a/docs/taxonomy.md
+++ b/docs/taxonomy.md
@ -0,0 +1,147 @@
+# 발화 라벨 Taxonomy v1.0 — 0615 파란색 라벨 정의서
+
+> SoT(라벨 정의). 코드 구현: `apps/api/app/taxonomy.py`. 예시 데이터: `docs/golden_schema.jsonl`.
+> 근거: `데이터/README.md`(파랑 #3057B9 = 3종 혼재), `MASTERPLAN.md` §3.1~§3.2(89개·77종, 3축 분리),
+> `MEMORY_KNOWLEDGE_PERSONA_DESIGN.md` §3.6(kb.chunk.label_id FK).
+> **버전 = 1.0.0** (`TAXONOMY_VERSION`). 라벨 코드는 불변, 추가는 append-only.
+
+## 0. 설계 원칙
+
+0615 축어록의 파란색(#3057B9) 주석은 **한 셀에 3종이 혼재**한다(기법/내담자 상태/슈퍼바이저 논평).
+학습 신호 오염을 막기 위해 **3개의 독립 축으로 분리**한다. 이것이 평가 AI 정답셋과 페르소나
+상태전이 정답의 단일 원천이다.
+
+- **3축 분리**: (A) 기법 태그(상담자 발화) · (B) 내담자 상태 태그(내담자 발화) · (C) 슈퍼바이저 논평(둘 다).
+- **위계**: 기법은 5개 군집(category) 아래에 둔다 → 분포·과다/과소 집계·리뷰 게이지 축.
+- **복수 부착**: 한 발화에 기법·상태·논평이 각각 여러 개 붙을 수 있다.
+- **부착 규칙**: 기법은 상담자 발화에만, 상태는 내담자 발화에만(코드에서 강제, `Annotation.__post_init__`).
+- **원본 미적재**: 0615 원문(미성년·자살사고)은 절대 적재하지 않는다. 예시는 합성 변형(`source="0615_synthetic"`).
+
+## 1. 회기 단계 (Stage)
+
+결정론 상태머신이 소유(LLM 아님). 발화는 발화 시점의 단계를 단일 값으로 기록한다.
+
+| code | 단계 | 정의 |
+|---|---|---|
+| `라포` | 라포 형성 | 안전감·관계 구축, 비밀보장 구조화, 비자발성 완화 |
+| `탐색` | 탐색 | 호소문제·정서·인지·위험요인(자살/자해) 탐색 |
+| `개입` | 개입 | 직면·해석·인지재구성·교정적 정서체험 |
+| `정리` | 정리 | 요약·과제·다음 회기 연결·종결 |
+
+## 2. 화자 (Speaker)
+
+| code | 화자 | 0615 대응 |
+|---|---|---|
+| `counselor` | 상담자(수련생/상담사 AI) | "상N" |
+| `client` | 내담자(가상내담자 AI) | "내N" |
+
+## 3. (A) 기법 라벨 (Technique) — 상담자 발화
+
+> 각 라벨: **조작적 정의**(무엇을 했을 때 부착하는가) + **0615 예시**(실제 파랑 라벨에서 정규화).
+
+### 3.1 RELATIONAL (관계 형성)
+
+| code | 한글 | 조작적 정의 | 0615 표면 라벨 예시 |
+|---|---|---|---|
+| `empathy` | 공감 | 내담자의 감정·입장을 정확히 알아차리고 그대로 되돌려, "이해받고 있다"를 전달 | "공감" / "한숨이 무겁게 느껴지네요" |
+| `reflection` | 반영 | 내담자 발화·비언어의 핵심(정서/내용)을 거울처럼 재진술 | "반영", "정서 반영", "내담자의 반응을 반영함" |
+| `validation` | 타당화 | 내담자의 감정·반응이 그 상황에서 자연스럽고 정당함을 인정 | "타당화", "감정 노출의 타당화" |
+| `holding` | 홀딩 | 침묵·머뭇거림을 재촉 없이 견디며 안전한 공간을 유지(기다려 줌) | "홀딩", "탐색과 홀딩" |
+| `self_disclosure` | 자기공개 | 상담자 자신의 정보·경험·마음을 라포 목적으로 적절히 개방 | "라포형성을 위한 상담자의 자기 개방" |
+| `affect_conveyance` | 정서 전달 | 내담자를 향한 상담자 자신의 정서·태도를 명시적으로 전달 | "상담자의 정서 전달" |
+| `humor` | 유머 | 무거운 분위기를 가볍게 만들어 참여를 촉진(상황·관계 고려) | "유머" |
+
+### 3.2 EXPLORATORY (탐색)
+
+| code | 한글 | 조작적 정의 | 0615 표면 라벨 예시 |
+|---|---|---|---|
+| `exploration` | 탐색 | 경험·맥락·의미를 더 드러내도록 묻거나 머무름 | "탐색", "탐색질문" |
+| `facilitative_question` | 촉진질문 | 내담자가 더 말하도록 여는 개방형/참여 촉진 질문 | "촉진", "참여 촉진 질문" |
+| `risk_assessment` | 위험사정 | 자살/자해/타해 위험 요인·경험·계획을 직접 탐색 | "위험요인 탐색", "자해 위험 및 경험 탐색" |
+| `consent_motivation_check` | 동의·동기 확인 | 상담 동의·문제의식·변화 동기 수준을 확인 | "동의확인, 동기수준 확인" |
+| `opinion_check` | 의견 확인 | 내담자의 생각·반응·주호소를 되짚어 확인 | "내담자 의견 확인", "주호소 문제 재확인" |
+
+### 3.3 INTERVENTION (개입)
+
+| code | 한글 | 조작적 정의 | 0615 표면 라벨 예시 |
+|---|---|---|---|
+| `confrontation` | 직면 | 내담자 발화·행동의 불일치/모순을 근거와 함께 마주하게 함 | "기초자료를 활용하여 반응의 불일치에 직면시킴" |
+| `interpretation` | 해석 | 표면 너머의 의미·동기·패턴을 가설로 제시 | "모순의 의미를 해석함", "비언어적 자극 해석", "행동의 재해석" |
+
+### 3.4 STABILIZING (안정/지지)
+
+| code | 한글 | 조작적 정의 | 0615 표면 라벨 예시 |
+|---|---|---|---|
+| `stabilization` | 안정화 | 각성·정서를 진정시켜 안전 범위로 되돌림 | "안정화" |
+| `hope_instillation` | 희망고취 | 변화 가능성·욕구를 비추어 희망을 불어넣음 | "동기부여, 희망고취", "희망 고취, 욕구 반영" |
+| `reinforcement` | 강화 | 바람직한 개방·시도를 인정·격려해 지속을 촉진 | "강화" |
+| `normalization` | 정상화 | 반응(감정 노출 등)을 보편적 경험으로 정상화 | "감정 반응을 노출하는 것을 정상화함" |
+
+### 3.5 STRUCTURING (구조화)
+
+| code | 한글 | 조작적 정의 | 0615 표면 라벨 예시 |
+|---|---|---|---|
+| `principle_explanation` | 상담원칙 설명 | 비밀보장·예외 등 상담 원칙·틀을 안내 | "상담원칙에 대한 설명", "비밀보장 제외 원칙 설명" |
+| `psychoeducation` | 심리교육 | 보편적 교범·정보를 주관적 해석과 구별해 전달 | "보편적 교범 전달, 주관적 해석과 구별" |
+| `homework` | 과제 부여 | 회기 간 실천 과제를 이해 가능하게 제시·확인 | "다음 회기까지 해 와야 하는 과제 설명" |
+
+## 4. (B) 내담자 상태 태그 (ClientState) — 내담자 발화/비언어
+
+> 페르소나 저항 엔진의 상태전이 정답 + 평가 AI '반응 읽기' 채점 근거.
+
+| code | 한글 | 조작적 정의 | 0615 표면 라벨 예시 |
+|---|---|---|---|
+| `involuntary` | 비자발적 태도 | 단답·회피·거부 등 상담에 비자발적 신호 | "(아니오)는 비자발적 태도", "(쓴웃음)은 비자발적 태도" |
+| `defensive` | 방어 | 주제 회피·차단·거리두기 | "방어", "부모자녀 관계에 대한 방어적 태도" |
+| `suicidal_ideation_admit` | 자살사고 인정 | 자살/죽음 생각을 직간접 인정(★안전 핵심) | "자살사고 인정" |
+| `negative_self_perception` | 부정적 자기인식 | 자기에 대한 부정·평가절하 표현 | "부정적 자기인식" |
+| `conflicted` | 갈등 상태 | 양가·상충하는 욕구/감정 사이의 갈등 | "갈등 상태" |
+| `lack_of_confidence` | 확신 부족 | 자신감/확신의 결여 표현 | "확신의 부족" |
+| `affect_contact` | 정서 접촉/표현 | 자기 감정에 접촉하고 표현하기 시작 | "정서와 접촉함", "정서와 사고의 표현" |
+| `thought_organizing` | 생각 정리 | 침묵 속에서 자기 생각을 정리 중 | "생각을 정리함" |
+| `responds_to_exploration` | 탐색에 반응 | 상담자 탐색에 응답·협조 | "상담자의 탐색에 반응함" |
+| `expresses_plan` | 계획/욕구 표현 | 자기 계획·욕구·바람을 표현 | "자신의 계획을 표현함" |
+| `defense_loosening` | 방어 완화 | 누적된 반영/탐색으로 방어가 서서히 풀림(진전 신호) | "방어가 서서히 풀어지고 있음" |
+
+## 5. (C) 슈퍼바이저 논평 (SupervisorComment)
+
+2종으로 분리한다. critique 는 `intent_deviation`(의도 vs 실제)을 구조화한다(윤찬: 1급 시민).
+
+| kind | 정의 | 0615 예시 |
+|---|---|---|
+| `rationale` | 왜 이 반응이 적절한가 — 근거·의도 설명 | "비자발적 내담자의 초기 상담에서는 상담자의 적극적인 안내가 필요함" |
+| `critique` | 개선점·주의 — 과도/부족/평가적 시각 등 | "과도한 자기개방일 수 있음", "비언어적 반응의 반영이 더 되었으면 좋았을 것임", "평가적인 시각을 줄 수 있음" |
+
+`critique` 선택 필드: `dimension`(평가 차원) · `expected`(권장 의도) · `actual`(실제) · `severity`(minor/moderate/major) · `author`(ai/supervisor).
+
+## 6. 발화 Annotation 스키마 (golden 단위)
+
+`docs/golden_schema.jsonl` 한 줄 = `Annotation` 하나. README JSONL 스키마를 3축 분리로 격상.
+
+```jsonc
+{
+  "utterance_id": "0615-C-001",   // 화자(C=상담자/K=내담자)+seq 인코딩
+  "speaker": "counselor",          // counselor | client
+  "stage": "라포",                  // 라포 | 탐색 | 개입 | 정리
+  "seq": 0,                         // 회기 내 발화 순서(0-based)
+  "text": "…",                      // 발화 텍스트(합성 변형, 원문 미적재)
+  "techniques": ["self_disclosure"],        // (A) 상담자 발화만
+  "client_states": [],                      // (B) 내담자 발화만
+  "comments": [{"kind": "rationale", "text": "…", "author": "ai"}],  // (C)
+  "nonverbal": ["(쓴웃음)"],         // 비언어 단서 원문 표기(상태판정 보조)
+  "source": "0615_synthetic"        // provenance
+}
+```
+
+## 7. DB 코드테이블 동기화
+
+`MASTERPLAN.md` §3.2 코드테이블에 enum `value`(code)를 적재, 다대다 연결.
+
+| taxonomy 축 | DB 코드테이블 | 다대다 연결 | label_id 참조 |
+|---|---|---|---|
+| `Technique` | `technique_label_def(code, category, ko)` | `turn_technique(turn_id, label_id)` | `kb.chunk.label_id` |
+| `ClientState` | `client_state_def(code, ko)` | `turn_client_state(turn_id, label_id)` | — |
+| `Stage` | `stage_def(code)` | `turns.stage` | — |
+| `SupervisorComment` | `supervisor_comment(turn_id, kind, text, intent_deviation JSONB)` | (1:N) | — |
+
+> 라벨 추가 시: enum 에 append → `technique_label_def` seed → `TAXONOMY_VERSION` minor++. 기존 code 변경 금지(골든셋 재현성).