yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Yun Chan 2026-06-25 22:23:01 +09:00
parent 84eb6e2173
commit 859ab26314
2 changed files with 749 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

602
docs/dev_dashboard.html Normal file
View file

@ -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>