단계와 산출물 표

진행 단계마다 기간, 하는 일, 넘겨받는 산출물을 한 줄씩 정리. 산출물은 칩으로. 단계 4~5개, 산출물 칩은 단계당 1~3개. 값 바꾸는 법: 행 단위로 단계명·기간·하는 일 교체, 산출물은 span.chip 개수 조절. 번호는 01부터 직접 입력. 강조할 단계 하나에 tr class="hot".

컨설팅 제안서의 단계별 산출물 표(Phase, Activities, Deliverables 3단 구성). Medium "Data Table Design Patterns" https://medium.com/design-bootcamp/data-table-design-patterns-4e38188a0981 (표 안 막대, 칩, 정렬 규칙). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-phase"><div class="dk-card"><table>
<colgroup><col style="width:56px"><col style="width:150px"><col style="width:110px"><col><col style="width:360px"></colgroup>
<thead><tr><th></th><th>단계</th><th>기간</th><th>하는 일</th><th>산출물</th></tr></thead>
<tbody>
<tr><td class="no num">01</td><td class="k">진단</td><td class="num p">1~2주</td><td>계정, 검색 결과, 경쟁사 현황 점검</td><td><span class="chip">진단 보고서</span><span class="chip">목표 합의서</span></td></tr>
<tr><td class="no num">02</td><td class="k">설계</td><td class="num p">2~3주</td><td>키워드, 매체 배분, 측정 체계 설계</td><td><span class="chip">운영 계획서</span><span class="chip">측정 설계서</span></td></tr>
<tr><td class="no num">03</td><td class="k">제작</td><td class="num p">3~5주</td><td>소재와 콘텐츠 제작, 검수 2회</td><td><span class="chip">소재 40종</span><span class="chip">콘텐츠 일정표</span></td></tr>
<tr class="hot"><td class="no num">04</td><td class="k">집행</td><td class="num p">4~11주</td><td>집행, 주간 조정, 하위 소재 교체</td><td><span class="chip">주간 요약 8회</span><span class="chip">월간 리포트 2회</span></td></tr>
<tr><td class="no num">05</td><td class="k">정리</td><td class="num p">12주</td><td>성과 정리와 다음 분기 제안</td><td><span class="chip">종료 보고서</span><span class="chip">인수인계 문서</span></td></tr>
</tbody></table></div></div>

.dk-phase table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-phase th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-phase td{font-size:var(--f-body);color:var(--ink2);padding:14px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-phase tbody tr:last-child td{border-bottom:0}
.dk-phase .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-phase .c{text-align:center}
.dk-phase td.k{font-weight:600;color:var(--ink)}
.dk-phase .dk-card{padding:20px 24px 12px}
.dk-phase .chip{display:inline-block;font-size:var(--f-cap);font-weight:600;line-height:1.5;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.dk-phase .chip.hot{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-phase td.no{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-right:0}
.dk-phase td.k{font-size:var(--f-lg);font-weight:700}
.dk-phase td.p{font-size:var(--f-sm);color:var(--mu);white-space:nowrap}
.dk-phase .chip{margin-right:6px;background:var(--card)}
.dk-phase tr.hot td{background:var(--acw)}
.dk-phase tr.hot td.k,.dk-phase tr.hot td.no{color:var(--ac)}