답 스트리밍Answer Streaming

Answer Streaming

답 스트리밍

다른 이름Also known as · 토큰 스트리밍 · Answer stream · 답변 스트리밍 · Answer Stream · 답변 스트림 · Answer streaming · Word stream replacement · 단어 스트림 교체

314

도판Fig. 314. 답 스트리밍 · Answer Streaming · none

재생 속도Speed

답변을 토큰 묶음 단위로 순서대로 표시하고 새 묶음의 농도를 점차 높이는 동작An animation that reveals an answer in sequential token groups and gradually increases the opacity of each new group.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

답변이 생성되는 과정과 현재 출력 위치Shows the answer generation process and the current output position.

언제 쓰나Use whenUSE WHEN

AI 답변을 10개 묶음으로 0.18초마다 표시하고 끝에 주홍 커서 블록을 둔다
답변이 생성되는 과정과 현재 출력 위치을 보여 줄 때

When revealing an AI answer in 10 groups every 0.18 seconds with a vermilion cursor block at the end
When showing the answer generation process and current output position

과용 주의AvoidAVOID

답 전체를 한 번에 페이드해 생성 순서가 보이지 않는다
동작 종료 뒤 최소 0.5초 읽기 시간을 둔다

분류TagsTAGS

UI 시연UI Demo 설명Explain 피드백Feedback 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

AI 답변을 10개 묶음으로 0.18초마다 표시하고 끝에 주홍 커서 블록을 둔다

과용 · 나쁜 사례OVERUSE

답 전체를 한 번에 페이드해 생성 순서가 보이지 않는다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
묶음 수	10개	6~16개	글자보다 큰 출력 단위
묶음 간격	0.18s	0.12~0.25s	순차 출력 속도
초기 농도	0.22	0.15~0.4	새로 나온 묶음만 옅게
농도 정착	0.26s	0.15~0.35s	opacity 1로 정착

GSAP

const tl = Motion.timeline();
const chunks=['AI는 ','앞의 말을 ','읽고, ','올 수 있는 ','말마다 ','확률을 ','매긴 뒤 ','하나를 ','고릅','니다.'];
document.querySelector('#tokens').innerHTML=chunks.map(s=>`<span class="token">${s}</span>`).join('');
document.querySelectorAll('.token').forEach((el,i)=>{const at=.3+i*.18;tl.set(el,{display:'inline',opacity:.22},at);tl.to(el,{opacity:1,duration:.26,ease:'none'},at);});
tl.to('.lead',{opacity:1,duration:.2},2.2);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 답변에 AI는 앞의 말을 읽고, 올 수 있는 말마다 확률을 매긴 뒤 하나를 고릅니다.를 10개 span 묶음으로 스트리밍해줘. 0.3초부터 0.18초마다 한 묶음을 표시하고 opacity 0.22에서 1까지 0.26초 동안 none으로 진하게 해. 답 끝에는 주홍 15×34px 커서 블록을 두고 2.4~3초는 정지해.

Stream "AI reads the preceding words, assigns a probability to each possible next word, and then picks one." in the <target> answer as 10 span groups. Starting at 0.3 seconds, reveal one group every 0.18 seconds and increase its opacity from 0.22 to 1 over 0.26 seconds with ease none. Place a vermilion 15×34px cursor block at the end of the answer and hold still from 2.4 to 3 seconds.

Codex

<파일>의 답변 출력에 10개 토큰 묶음 span을 적용해. GSAP 타임라인에서 0.3+i*0.18초에 display inline과 opacity 0.22를 설정하고 0.26초 동안 opacity 1로 바꿔. 0.73초, 1.23초, 2.9초를 캡처해 순차 출력, 새 묶음의 옅은 농도, 완성 문장과 끝 커서를 확인해.

Apply 10 token-group spans to the answer output in <file>. In a GSAP timeline, set display to inline and opacity to 0.22 at 0.3+i*0.18 seconds, then change opacity to 1 over 0.26 seconds. Capture at 0.73, 1.23, and 2.9 seconds to check sequential output, the low opacity of each new group, the completed sentence, and the end cursor.