디자인킷 · 도식
용어와 정의 4행
D-도식-글-용어정의4
언제 쓰는가
제안서에서 쓰는 지표나 용어의 뜻을 먼저 맞춰 둘 때. 왼쪽 용어 굵게, 오른쪽 풀이와 예시. 용어 3~4개, 풀이 1~2줄, 예시 1줄. 값 바꾸는 법: dl 안의 div 하나가 용어. dt 의 b=용어, span=영문이나 약어(없으면 삭제), dd 의 p=풀이, em=예시. 색 강조 없음(위계는 굵기와 크기로).
참고
컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 사전의 표제어·풀이 2단 조판(표제어 굵게, 풀이 보통 굵기, 용례는 한 단계 작게). 구성 방식만 참고, 그림과 코드는 직접 제작.
조각
<div class="dk dk-tdef">
<dl>
<div><dt><b>노출</b><span>Impression</span></dt><dd><p>광고가 화면에 한 번 표시된 횟수. 같은 사람이 두 번 보면 2회로 집계</p><em>예: 검색 결과 상단에 광고가 뜬 횟수</em></dd></div>
<div><dt><b>클릭률</b><span>CTR</span></dt><dd><p>노출 대비 클릭의 비율. 소재와 문구가 관심을 끄는 정도를 보는 값</p><em>예: 노출 1,000회에 클릭 25회면 2.5%</em></dd></div>
<div><dt><b>전환</b><span>Conversion</span></dt><dd><p>이 제안에서는 구매 완료, 상담 신청, 회원 가입 세 가지 행동만 전환으로 집계</p><em>예: 장바구니 담기는 전환이 아닌 중간 행동으로 따로 기록</em></dd></div>
<div><dt><b>기여 기간</b><span>Attribution window</span></dt><dd><p>광고를 본 뒤 며칠 안의 전환까지 광고 성과로 볼지 정한 기간</p><em>예: 클릭 후 7일, 조회 후 1일</em></dd></div>
</dl>
</div>스타일
.dk-tdef dl{margin:0;border-top:1px solid var(--line2)}
.dk-tdef dl>div{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;min-height:98px;border-bottom:1px solid var(--line)}
.dk-tdef dl>div:last-child{border-bottom-color:var(--line2)}
.dk-tdef dt b{display:block;font-size:var(--f-xl);font-weight:700;line-height:1.3;letter-spacing:-.015em}
.dk-tdef dt span{font-size:var(--f-cap);color:var(--mu)}
.dk-tdef dd{margin:0}
.dk-tdef dd p{margin:0;font-size:var(--f-md);color:var(--ink)}
.dk-tdef dd em{display:block;margin-top:4px;font-style:normal;font-size:var(--f-sm);color:var(--mu)}