아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.
AI 강의용 인터랙티브 데모 페이지를 만들어줘. 주제는 "스트리밍 응답(Streaming)".
- "▶ 질문 보내기" 버튼 하나를 누르면 두 개의 박스가 동시에 동작을 시작해야 해
- 왼쪽 박스 "스트리밍 없이": 로딩 점(...) 애니메이션을 약 3초간 보여준 뒤, 미리 정해둔 4~5문장짜리 답변("제주도 여행 팁 알려줘"에 대한 답)을 한 번에 전부 보여줌
- 오른쪽 박스 "스트리밍 응답": 버튼을 누르자마자 거의 바로 같은 답변을 단어 단위로 80~120ms 간격으로 하나씩 이어붙이며 보여줌 (타이핑 커서 느낌)
- 버튼을 여러 번 눌러도 이전 애니메이션이 겹치지 않도록 기존 타이머/인터벌을 정리하고 다시 시작할 것
- 각 박스 제목 옆에 경과 시간을 표시하고, 완료되면 완료 표시를 보여줄 것
- 하단에 "한 줄 정리" 카드에서 스트리밍의 개념을 초보자도 이해할 수 있게 설명
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘