602 lines
31 KiB
HTML
602 lines
31 KiB
HTML
<!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>
|