AI 검색 미리보기 제어

AI snippet controls

스니펫 지시어로 AI 검색에 보여줄 수 있는 본문 범위를 제어합니다.

···
html
<div class="snip"><div class="controls"><button data-limit="full" class="on">FULL</button><button data-limit="short">SHORT</button><button data-limit="none">NONE</button></div><div class="answer"><small>ANSWER PREVIEW</small><div class="line one"></div><div class="line two"></div><div class="line three"></div><div class="cover">PREVIEW LIMITED</div></div><div class="source">SOURCE PAGE → ANSWER</div></div>
css
.snip{width:min(86%,550px);display:grid;gap:clamp(8px,2vmin,17px);font:800 clamp(10px,max(1.7vmin,1vw),15px) sans-serif;color:var(--fg)}.controls{display:flex;gap:5px}.controls button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:clamp(5px,1.2vmin,10px);font:inherit;cursor:pointer}.controls button.on{background:var(--accent);color:white;border-color:var(--accent)}.answer{position:relative;background:var(--surface);border:1px solid var(--line);padding:clamp(11px,2.2vmin,20px);display:grid;gap:clamp(6px,1vmin,10px)}.answer small{color:var(--accent);letter-spacing:.12em}.line{height:clamp(7px,1.5vmin,13px);background:var(--fg);opacity:.7;border-radius:3px;transition:opacity .35s,width .35s}.line.two{width:90%}.line.three{width:60%}.snip.short .line.three,.snip.none .line{opacity:.07}.snip.short .line.two{width:35%}.cover{display:none;color:var(--accent);font-size:max(10px,1vw,.8em)}.snip.none .cover{display:block;position:absolute;top:50%;left:25%;background:var(--surface);padding:4px}.source{color:var(--muted);font-size:max(10px,1vw,.7em);letter-spacing:.1em}small{font-size:max(.833em,10px,1vw)}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}
js
const box=document.querySelector('.snip'),buttons=[...document.querySelectorAll('[data-limit]')];let n=0;function show(){box.classList.toggle('short',n===1);box.classList.toggle('none',n===2);buttons.forEach((b,i)=>b.classList.toggle('on',i===n))}buttons.forEach((b,i)=>b.addEventListener('click',()=>{clearInterval(timer);n=i;show()}));setTimeout(()=>{n=1;show()},900);const timer=setInterval(()=>{n=(n+1)%3;show()},3000);

검색의 기존 미리보기 지시어는 AI 검색 형식에도 적용됩니다. nosnippet, data-nosnippet, max-snippet 등으로 표시 가능한 내용을 제한할 수 있습니다.

데모에서 제한을 바꾸면 답변 카드의 인용 문장 길이가 달라집니다. 더 강한 제한은 검색 경험에서 콘텐츠가 소개될 기회도 줄일 수 있으므로 공개 범위와 발견 가능성을 함께 판단하세요.

언제 쓰나

검색 결과에 본문을 어디까지 공개할지 편집·법무 기준을 정할 때 씁니다.

페이지로 열기 ↗