디자인킷 · 지면 목업
네이버 AI 브리핑 인용 영역
D-목업-네이버-AI브리핑
언제 쓰는가
GEO·AI 검색 대응 제안에서 요약 답변과 출처 인용 위치를 보여줄 때. 요약 3문장, 출처 카드 3개, 관련 질문 2개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·제목·설명 문구와 오른쪽 4행 설명만 교체. 사진 자리는 회색 상자(.g) 유지. 금액은 넣지 않음. 자사 출처 카드 하나에 class="me". 출처 카드 3개, 관련 질문 2개 기준.
참고
네이버 AI 브리핑 보도(newsis.com/view/NISX20251215_0003441461), 용어 해설(inblog.ai/ko/glossary/naver-ai-briefing). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.
조각
<div class="dk dk-mnvai">
<div class="lf">
<div class="fr">
<div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="nvh"><span class="nvn">N</span><div class="nvq">홈 필라테스 효과 기간</div></div><div class="nvt"><span class="on">전체</span><span>블로그</span><span>카페</span><span>쇼핑</span><span>이미지</span><span>지식iN</span></div>
<div class="ai"><p class="aih">AI 브리핑</p>
<p style="color:#333">주 3회 이상 꾸준히 하면 4주 전후로 자세와 코어 안정감 변화를 느끼는 경우가 많습니다<span class="n">1</span> 체형 변화는 8~12주가 일반적입니다<span class="n">2</span> 초보자는 약한 스프링과 누운 자세 동작부터 시작하는 편이 안전합니다<span class="n">3</span></p>
<div class="srcs"><div class="me"><p class="t9 bd">숲길핏 매거진</p><p class="t9 mu">4주 변화 기록</p></div><div><p class="t9 bd">대한운동학회</p><p class="t9 mu">코어 운동 지침</p></div><div><p class="t9 bd">운동하는 지니</p><p class="t9 mu">블로그 후기</p></div></div></div>
<p class="sec" style="padding-top:2px;padding-bottom:5px">관련 질문</p>
<p class="rq">홈 필라테스 기구 없이도 효과가 있나요</p><p class="rq">리포머 스프링 강도는 어떻게 고르나요</p></div>
</div>
<p class="cap">구성 예시, 실제 소재 아님</p>
</div>
<div class="rt">
<p class="dk-lb">네이버 · AI 브리핑</p>
<h3>통합검색 상단 요약 답변과 출처</h3>
<dl>
<div><dt>노출 위치</dt><dd>통합검색 결과 최상단, 정보 탐색형 질의 중심. 쇼핑·플레이스로 적용 확대 중</dd></div>
<div><dt>과금 방식</dt><dd>광고 상품 아님. 인용은 콘텐츠 품질과 신뢰도로 결정</dd></div>
<div><dt>소재 규격</dt><dd>질문에 바로 답하는 문단, 수치와 근거, 작성 주체가 분명한 문서</dd></div>
<div><dt>운영 포인트</dt><dd>질문 목록 수집 후 문서별 즉답 문단 배치, 인용 여부 월간 점검</dd></div>
</dl>
</div>
</div>스타일
.dk-mnvai{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
.dk-mnvai .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mnvai .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mnvai .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mnvai .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mnvai .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mnvai .rt .dk-lb{margin:0 0 4px}
.dk-mnvai .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mnvai .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mnvai .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mnvai .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mnvai .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mnvai .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mnvai .ph.n{width:232px}
.dk-mnvai .ph.dkm{background:#242424;color:#fff}
.dk-mnvai .ph>*{flex:none}
.dk-mnvai p{margin:0}
.dk-mnvai .ph b{color:inherit;font-weight:700}
.dk-mnvai .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mnvai .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mnvai .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px}
.dk-mnvai .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mnvai .fx{display:flex;align-items:center;gap:6px}
.dk-mnvai .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mnvai .sp{justify-content:space-between}
.dk-mnvai .f1{flex:1;min-width:0}
.dk-mnvai .t9{font-size:9px}
.dk-mnvai .t10{font-size:10px}
.dk-mnvai .t12{font-size:12px}
.dk-mnvai .t13{font-size:13px}
.dk-mnvai .bd{font-weight:700}
.dk-mnvai .mu{color:#8b8f94}
.dk-mnvai .hr{height:6px;background:#f0f1f3}
.dk-mnvai .pd{padding:8px 12px}
.dk-mnvai .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mnvai .ic.o{border-radius:50%}
.dk-mnvai .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-mnvai .nvh{display:flex;align-items:center;gap:8px;padding:4px 12px 6px}
.dk-mnvai .nvn{width:20px;height:20px;border-radius:5px;background:#03c75a;color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.dk-mnvai .nvq{flex:1;height:26px;border:1.5px solid #03c75a;border-radius:13px;padding:0 12px;display:flex;align-items:center;font-size:12px;font-weight:600}
.dk-mnvai .nvt{display:flex;gap:12px;padding:4px 12px 0;border-bottom:1px solid #e9ebee;font-size:11px;color:#666}
.dk-mnvai .nvt span{padding-bottom:5px}
.dk-mnvai .nvt .on{color:#03c75a;font-weight:700;border-bottom:2px solid #03c75a}
.dk-mnvai .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none}
.dk-mnvai .ttl{color:#0b53c1;font-size:13px;font-weight:600;line-height:1.3}
.dk-mnvai .chip{font-size:10px;color:#0b53c1;border:1px solid #dfe3e8;border-radius:11px;padding:1px 8px}
.dk-mnvai .sec{font-size:12px;font-weight:700;padding:8px 12px 2px}
.dk-mnvai .ai{margin:8px 10px;border:1px solid #dfe6f5;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;background:#f8faff}
.dk-mnvai .aih{font-size:11px;font-weight:700;color:#3b5bdb}
.dk-mnvai .n{font-size:9px;color:#3b5bdb;background:#e4ebff;border-radius:7px;padding:0 4px;margin-left:2px}
.dk-mnvai .srcs{display:flex;gap:5px}
.dk-mnvai .srcs div{flex:1;min-width:0;background:#fff;border:1px solid #e3e6ea;border-radius:6px;padding:5px 6px;display:flex;flex-direction:column;gap:1px}
.dk-mnvai .srcs .me{border-color:#3b5bdb}
.dk-mnvai .rq{margin:0 10px 7px;padding-top:6px;padding-bottom:6px;border:1px solid #e9ebee;border-radius:14px;padding:4px 10px;font-size:10px}