디자인킷 · 도식
고객 발언 인용과 해석
D-도식-글-고객발언해석
언제 쓰는가
미팅이나 요청서에서 고객이 한 말을 그대로 옮기고 그 말을 어떻게 읽었는지 붙일 때. 인용 3줄 이내(70자 안팎), 해석 3개, 해석마다 낱말과 설명 1~2줄. 값 바꾸는 법: blockquote=발언 원문(다듬지 않고 그대로), figcaption=말한 사람과 자리·시점. 오른쪽 dl 의 div 하나가 해석(dt 낱말, dd 설명). 인용은 말투를 그대로 두는 유일한 예외 자리.
참고
잡지 편집의 끌어온 인용(pull quote)과 조사 보고서의 발언 원문·해석 병기 방식. 글머리표 대안 정리 글(Visme 'bullet points presentation' https://visme.co/blog/bullet-points-presentation/ , SlideGenius '3 Bullet Point Alternatives' https://www.slidegenius.com/blog/3-bullet-point-alternatives-that-will-improve-your-deck , Maurizio La Cava FAQ https://www.mauriziolacava.com/en/faq/creative-alternatives-to-using-bullet-points-on-a-slide/)의 '목록을 구조로 바꾼다'는 방식 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.
조각
<div class="dk dk-tquote">
<figure>
<blockquote>광고는 계속 하고 있는데, 뭐가 잘되고 있고 뭐가 안 되는지 한 번에 본 적이 없어요. 보고서는 매체마다 따로 오고요.</blockquote>
<figcaption><b>마케팅 담당자</b>사전 미팅, 2026년 9월 2주</figcaption>
</figure>
<div class="r">
<p class="dk-lb">이 발언의 해석</p>
<dl>
<div><dt>통합</dt><dd>매체가 달라도 한 화면에서 비교되는 보고 체계가 첫 번째 요구</dd></div>
<div><dt>판단 기준</dt><dd>잘됨과 안 됨을 가르는 기준 값이 아직 없는 상태</dd></div>
<div><dt>창구</dt><dd>매체별 담당자와 따로 연락하는 부담을 줄여야 함</dd></div>
</dl>
</div>
</div>스타일
.dk-tquote{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.dk-tquote figure{margin:0;padding-right:56px}
.dk-tquote blockquote{position:relative;margin:0;padding-top:56px;font-size:var(--f-xl);font-weight:600;line-height:1.6;letter-spacing:-.015em;color:var(--ink)}
.dk-tquote blockquote::before{content:"“";position:absolute;left:-4px;top:-22px;font-size:var(--f-huge);font-weight:700;line-height:1;color:var(--g1)}
.dk-tquote figcaption{margin-top:20px;font-size:var(--f-sm);color:var(--mu)}
.dk-tquote figcaption b{margin-right:10px;color:var(--ink2)}
.dk-tquote .r{padding-left:56px;border-left:1px solid var(--line2)}
.dk-tquote dl{margin:8px 0 0}
.dk-tquote dl>div{padding:16px 0;border-bottom:1px solid var(--line)}
.dk-tquote dl>div:last-child{border-bottom:0;padding-bottom:0}
.dk-tquote dt{font-size:var(--f-lg);font-weight:700}
.dk-tquote dd{margin:2px 0 0;font-size:var(--f-body);color:var(--ink2)}