설명
Claude와 Perplexity, NotebookLM, Bing Copilot이 자리 잡게 만든 후속 질문 유도 방식입니다. 답변이 끝나는 자리에 '이런 것도 궁금하실 텐데요' 같은 작은 안내와 함께 질문 후보 칩 3~4개를 띄워 줘요. 사용자가 칩을 누르면 그 질문이 입력창에 채워지거나 바로 다음 턴으로 보내집니다. 첫 답변을 받자마자 다음에 뭘 더 물어보지 하고 잠시 멈추는 단절을 줄여 주는 게 이 방식의 강점이에요.
🖼️ 미니어처
💬 AI에게 이렇게 말하세요
- AI 답변 마지막 메시지 아래에 후속 질문 칩 3~4개를 가로 wrap으로 보여 주세요. 칩은 둥근 모양(border-radius full), 옅은 회색 테두리, 호버 시 배경색.
- 클릭하면 해당 질문 텍스트를 입력창에 자동 채우거나(편집 가능) 또는 바로 전송하는 두 옵션을 prop으로.
- 칩 위에 작은 안내 라벨("이런 것도 궁금해요" 또는 "후속 질문")을 두고, 답변 본문과는 8px 정도 시각 분리.
두 동작 모드
- Auto-send: 칩을 클릭하면 즉시 다음 턴으로 전송돼요(속도 우선, 단순 질문에 적합합니다).
- Fill-input: 칩을 클릭하면 입력창에 텍스트가 채워집니다(편집 가능, 신중한 질문에 적합해요).
기본은 Fill-input이 안전합니다. Auto-send는 NotebookLM처럼 가벼운 탐색 컨텍스트에 한정해서 쓰는 걸 권장해요.
⚡ 사용 예 (한 줄)
{suggestions.map(q => <button onClick={() => append({role:'user', content:q})} className="rounded-full border px-3 py-1.5 text-sm hover:bg-muted">{q}</button>)}🧩 컴포넌트 매핑
shadcn/ui Button(variant='outline', size='sm', rounded-full)을 씁니다. lucide-react Sparkles 아이콘을 함께 두면 좋아요. Vercel AI SDK의 useChat에서 messages.length가 바뀔 때마다 별도 endpoint로 후속 질문을 생성하거나, 같은 LLM 응답에 structured output으로 함께 받는 방식이 있습니다.
후속 질문을 답변 본문 안에 마크다운 리스트로 박아 두면 클릭할 수 있는 칩으로 보이지 않아요. 사용자는 그냥 텍스트로 읽고 지나칩니다.
한국어 후속 질문은 영어보다 평균 1.3배 정도 길어지기 쉽습니다. 칩 안 텍스트를 max-width로 잘라 주고 호버나 popover에서 전체를 볼 수 있게 두면 깔끔해요. 칩 개수는 모바일에서 2개, 데스크톱에서 4개 정도로 잡으면 화면이 답답하지 않습니다.
각 칩은 <button>으로 감싸 키보드 포커스가 가능하게 합니다. 그룹 영역에는 role="group"과 aria-label="후속 질문"을 둬요. 칩 호버 시에만 정보를 노출하면 키보드 사용자에게는 안 보이므로, focus 상태에서도 동일하게 처리해야 합니다.