디자인킷 · 아이콘
근거 종류 표시 4종(사실과 가설 구분)
D-아이콘-근거종류
언제 쓰는가
제안서의 문장이 무엇에 기대고 있는지 문장 끝에 붙이는 작은 표시. 고객 발언, 조사 확인, 작성자 추정, 미확인 네 가지. 진단·현황 장과 목표 수치 장에서 사실과 가설을 나눌 때. 한 장에 4~8개. 값 바꾸는 법: 표시 하나: <span class="ev e-said|e-found|e-guess|e-none"><i></i>이름</span>. 문장 끝이나 표의 마지막 칸에 붙임. 강조색은 미확인에만(확인이 필요한 곳을 눈에 띄게). 덱에 넣을 때는 .ev 관련 CSS 만 가져감. 장 아래에 네 가지 범례를 한 줄로 적어 둠.
참고
조사 보고서의 근거 수준 표기(확인된 사실, 추정, 미확인을 기호로 나눔)와 컨설팅 문서의 사실·가설 구분 관행. 채운 원, 겹원, 반원, 점선 원으로 확실한 정도를 나타냄. 직접 제작.
조각
<div class="dk dk-ice">
<div class="set">
<div class="row"><span class="ev e-said"><i></i>고객 발언</span><p>미팅, 요청서, 메일에서 고객이 직접 말하거나 적은 내용</p></div>
<div class="row"><span class="ev e-found"><i></i>조사 확인</span><p>공개 자료, 계정 데이터, 직접 조사로 확인한 내용. 출처 줄 필수</p></div>
<div class="row"><span class="ev e-guess"><i></i>작성자 추정</span><p>확인된 사실에서 대행사가 이끌어 낸 판단. 전제를 함께 적음</p></div>
<div class="row"><span class="ev e-none"><i></i>미확인</span><p>아직 확인하지 못한 내용. 확인 방법과 시점을 함께 적음</p></div>
</div>
<div class="ex">
<p class="dk-lb mu">진단 문장에 붙인 예</p>
<ul>
<li><p>보고서가 매체마다 따로 와서 한 번에 비교하기 어려움</p><span class="ev e-said"><i></i>고객 발언</span></li>
<li><p>브랜드 검색 첫 화면의 자사 콘텐츠는 10칸 중 3칸</p><span class="ev e-found"><i></i>조사 확인</span></li>
<li><p>첫 화면 점유가 낮아 다른 매체의 유입이 경쟁사로 새는 것으로 판단</p><span class="ev e-guess"><i></i>작성자 추정</span></li>
<li><p>자사몰 전환 추적 코드의 정상 작동 여부</p><span class="ev e-none"><i></i>미확인</span></li>
</ul>
</div>
</div>스타일
.dk-ice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.dk-ice .ev{display:inline-flex;align-items:center;gap:7px;font-size:var(--f-cap);font-weight:600;color:var(--ink2);white-space:nowrap}
.dk-ice .ev i{flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink)}
.dk-ice .e-said i{background:var(--ink)}
.dk-ice .e-found i{background:var(--card);box-shadow:inset 0 0 0 2.5px var(--card),inset 0 0 0 6px var(--ink)}
.dk-ice .e-guess i{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.dk-ice .e-none{color:var(--ac)}
.dk-ice .e-none i{border:1.5px dashed var(--ac)}
.dk-ice .row{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;min-height:80px;border-bottom:1px solid var(--line)}
.dk-ice .row:first-child{border-top:1px solid var(--line2)}
.dk-ice .row:last-child{border-bottom-color:var(--line2)}
.dk-ice .row .ev{font-size:var(--f-sm)}
.dk-ice .row p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-ice .ex ul{list-style:none;margin:10px 0 0;padding:0}
.dk-ice .ex li{display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:20px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.dk-ice .ex li:last-child{border-bottom:1px solid var(--line)}
.dk-ice .ex li p{margin:0;font-size:var(--f-body);color:var(--ink)}