디자인킷 · 도식
전제와 가정 목록(확정·미확정)
D-도식-글-전제가정목록
언제 쓰는가
목표 수치나 일정이 기대는 전제를 밝힐 때. 확정된 것과 아직 확인이 필요한 것을 묶음으로 나눔. 묶음 2개, 묶음마다 2~3행, 전제 1줄, 근거나 확인 방법 1줄. 값 바꾸는 법: .g.fix=확정 묶음, .g.open=미확정 묶음. .r 하나가 전제(b 전제, span 근거나 확인 방법, em 시점). 묶음의 행 수를 바꾸면 CSS 의 grid-row span 숫자도 같이 바꿈. 강조색은 미확정 표시에만.
참고
컨설팅 보고서의 'key assumptions' 장과 재무 추정 자료의 가정 목록(확정 값과 추정 값을 표시로 나눔). 컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.
조각
<div class="dk dk-tasm">
<div class="h"><span></span><span>전제</span><span>근거 또는 확인 방법</span><span>시점</span></div>
<div class="g fix">
<p class="gl"><i></i>확정</p>
<div class="r"><b>월 광고 예산은 현재 수준 유지</b><span>사전 미팅에서 담당자 확인</span><em>9월 2주</em></div>
<div class="r"><b>전환은 구매 완료 기준으로 집계</b><span>전환 기준 합의서</span><em>9월 2주</em></div>
<div class="r"><b>상품 가격과 구성은 분기 내 변동 없음</b><span>요청서 3쪽 기재 내용</span><em>9월 1주</em></div>
</div>
<div class="g open">
<p class="gl"><i></i>미확정</p>
<div class="r"><b>자사몰 전환 추적 코드 정상 작동</b><span>착수 1주차에 테스트 주문으로 확인</span><em>10월 1주</em></div>
<div class="r"><b>성수기 검색량은 전년과 비슷한 수준</b><span>검색어 추이 자료로 월 단위 재확인</span><em>매월</em></div>
<div class="r"><b>체험단 모집 인원 월 20명 확보 가능</b><span>1차 모집 결과로 판단</span><em>10월 2주</em></div>
</div>
</div>스타일
.dk-tasm .h{display:grid;grid-template-columns:132px minmax(0,1.2fr) minmax(0,1fr) 96px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.dk-tasm .h span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-tasm .h span:last-child{text-align:right}
.dk-tasm .g{display:grid;grid-template-columns:132px minmax(0,1fr);border-bottom:1px solid var(--line2)}
.dk-tasm .gl{grid-row:1/span 3;margin:0;padding-top:16px;display:flex;align-items:center;gap:10px;align-self:start;font-size:var(--f-md);font-weight:700}
.dk-tasm .gl i{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.dk-tasm .open .gl{color:var(--ac)}
.dk-tasm .open .gl i{background:transparent;border:2px dashed var(--ac)}
.dk-tasm .r{grid-column:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 96px;align-items:center;min-height:54px;border-bottom:1px solid var(--line)}
.dk-tasm .r:last-child{border-bottom:0}
.dk-tasm .r b{font-size:var(--f-body);font-weight:600}
.dk-tasm .open .r b{font-weight:500;color:var(--ink2)}
.dk-tasm .r span{font-size:var(--f-sm);color:var(--mu)}
.dk-tasm .r em{font-style:normal;font-size:var(--f-sm);color:var(--ink2);text-align:right}