인라인‑패턴: 카드, 리스트, 캐러셀 및 CTA

1. inline‑모드란 무엇이며 왜 이것이 “디폴트”인가

OpenAI 공식 가이드라인은 inline‑표시가 ChatGPT Apps의 기본 모드라고 강조합니다. 인라인‑위젯은 모델 응답 위, 채팅 타임라인 안에서 바로 렌더링되며 작은 UI 블록(카드, 리스트, 캐러셀)과 그 아래의 GPT 팔로업 메시지를 포함합니다.

핵심은 간단합니다. 사용자를 별도의 큰 인터페이스로 보내는 대신, 대화 맥락 안에서 곧바로 간결한 시각적 “스파크”를 제공합니다: 모델이 무슨 일이 일어났는지와 다음 선택지를 설명하고, 위젯은 구조와 가능한 동작을 단정하게 보여줍니다.

인라인‑위젯은

• 내용이 가볍고 많은 단계를 요구하지 않습니다;
• 탭이나 내부 스크롤바가 있는 복잡한 내비게이션으로 사용자를 끌고 가지 않습니다;
• 작은 과제 한두 개를 해결합니다: 옵션 목록 보여주기, 선택 제공, 동작 확인, 상태 표시.

Fullscreen‑모드(다음 강의에서 다룸)는 큰 위저드와 복잡한 콘텐츠에 필요합니다. 지금 중요한 점은 이겁니다: 기본적으로는 inline을 먼저 생각하고, fullscreen은 inline으로 분명히 해결되지 않을 때 의식적으로 선택하세요.

이번 강의의 목표는 세 가지 주요 inline‑패턴을 자신 있게 다루고, 그 위에서 CTA를 적절히 연결하는 것입니다:

• 카드
• 리스트
• 캐러셀

그리고 여기에 CTA 버튼(Call to Action)을 알맞게 부착하는 법을 익힙니다.

2. inline이 fullscreen보다 좋은 때

간단히 말해, inline‑모드는 “빠른 도우미”, fullscreen은 “ChatGPT 안의 별도 앱”입니다.

인라인이 특히 좋은 경우:

• 여러 가지 대안을 보여주고 그중 하나둘을 선택하게 해야 할 때;
• 결과를 컴팩트한 구조로 표현할 수 있을 때: 선물 카드, 주문 요약, 미니 표;
• 짧은 동작을 수행할 때: “선택”, “자세히 보기”, “필터 변경”;
• 대화가 중심일 때: GPT가 설명하고 농담하고 코멘트하며, 위젯은 단지 편리한 폼이나 비주얼을 제공합니다.

GiftGenius에서 inline은 이런 것들입니다:

• 선택한 사람을 위한 상위 3–5개 선물을 보여주기;
• 빠른 필터 제공: “디지털 선물만 보여줘”;
• 선택 확인: “여기 주문 요약입니다. 괜찮나요?”

Fullscreen은 나중에 복잡한 3단계 체크아웃 위저드에 쓰면 좋습니다. 지금은 가벼운 영역에 머뭅니다: 도구 호출 1회 결과 → inline‑위젯 1개.

더 명확히 보려면 작은 표를 보겠습니다:

이를 염두에 두고, 이제 구체로 내려가 봅시다. 이 패턴들이 UI와 코드에서 어떻게 구현되는지, 각 패턴을 같은 포맷으로 살펴보겠습니다: 먼저 UX 관점의 정의, 그다음 GiftGenius용 간단한 React 컴포넌트, 마지막으로 이를 inline‑위젯에 어떻게 삽입하는지.

3. 카드: inline‑UI의 기본 블록

Apps SDK 맥락에서 카드란?

OpenAI 가이드라인에 따르면, inline‑카드는 소량의 구조화된 데이터와 하단의 1–2개 동작을 보여주는 가벼운 1인용 위젯입니다. 제목, 이미지, 몇 줄의 메타데이터와 기본 CTA 버튼 하나 (옵션으로 보조 버튼 하나)를 가질 수 있습니다.

GiftGenius에서 각 카드는 하나의 선물입니다. 카드에는 다음을 배치하기 좋습니다:

• 선물 이름;
• 가격;
• 누구에게 적합한지(예: “동료”, “친한 친구”);
• 왜 좋은 선택인지에 대한 짧은 설명;
• “이 선물 선택” 또는 “자세히 보기” 버튼.

카드는 자족적이어야 합니다. 사용자가 한눈에 이 엔터티가 무엇이고 핵심 동작이 무엇인지 이해할 수 있어야 합니다.

데이터 타입과 간단한 GiftCard 컴포넌트

먼저 선물 데이터 타입을 정의합니다. 이미 이 객체 배열을 담은 ToolOutput이 있다고 가정하고, 여기서는 UI만 신경 씁니다.

// UI용 선물의 일반 구조
export type GiftSuggestion = {
  id: string;
  title: string;
  priceLabel: string;         // 예: "≈ 40 $"
  recipientLabel: string;     // "동료용"
  reason?: string;            // 모델의 설명
  imageUrl?: string;
};

이제 간단한 카드 React 컴포넌트를 만들어 봅시다:

type GiftCardProps = {
  gift: GiftSuggestion;
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftCard({ gift, onSelect }: GiftCardProps) {
  return (
    <div className="flex flex-col gap-2 rounded-lg border p-3">
      <div className="text-sm font-medium">{gift.title}</div>
      <div className="text-xs text-muted-foreground">
        대상: {gift.recipientLabel} · {gift.priceLabel}
      </div>
      {gift.reason && (
        <div className="text-xs text-muted-foreground">{gift.reason}</div>
      )}
      <button
        className="mt-2 self-start rounded bg-primary px-3 py-1 text-xs text-primary-foreground"
        onClick={() => onSelect(gift)}
      >
        이 선물 선택
      </button>
    </div>
  );
}

바로 짚고 가는 포인트:

• 카드를 텍스트로 과하게 채우지 않습니다. 메타데이터 2–3줄과 짧은 설명이 최대치입니다;
• 주요 CTA는 하나 — “이 선물 선택”; 여기에 다양한 선택지를 5개씩 넣으려 하지 마세요;
• 컴포넌트는 inline‑리스트에서도, 캐러셀 내부에서도 쉽게 재사용할 수 있습니다.

카드는 전체 위젯에 어떻게 들어가는가

도구 호출을 통해 MCP에서 giftgenius.suggestGifts를 실행해 얻은 배열 gifts가 있다고 가정합시다. inline‑모드의 위젯은 이를 1–3열의 그리드로 간단히 렌더링할 수 있습니다.

type GiftGridProps = {
  gifts: GiftSuggestion[];
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftGrid({ gifts, onSelect }: GiftGridProps) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {gifts.map((gift) => (
        <GiftCard key={gift.id} gift={gift} onSelect={onSelect} />
      ))}
    </div>
  );
}

여기서는:

• 1–2열 그리드를 써서 위젯이 “벽돌담”처럼 보이지 않게 합니다;
• 카드 수를 쉽게 제한할 수 있습니다. 예를 들어 처음 3–6개만 보여주도록.

onSelect 핸들러는 체크아웃 도구를 호출하거나, 단순히 Widget State에 선택을 저장한 뒤 모델이 대화를 이어가게 할 수 있습니다. 도구 통합의 가장 단순한 예:

async function handleSelect(gift: GiftSuggestion) {
  await window.openai.actions.call("giftgenius.startCheckout", {
    giftId: gift.id,
  });
}

여기서 window.openai.actions.call은 위젯에서 등록된 MCP 도구를 직접 호출하는 브리지입니다.

보통 이런 호출 뒤에는 모델이 상태를 보여주거나 다음 위젯(예: 주문 요약)을 엽니다. 중요한 점 — 체크아웃 전체 로직을 카드 안에서 처리하려 하지 마세요. 카드는 명확한 다음 단계를 시작하기만 하면 됩니다.

4. 리스트: 비주얼이 핵심이 아닐 때

카드가 작은 “포스터”라면, 리스트는 단정한 텍스트 목록입니다. 문서와 UX 권고는 리스트가 텍스트 내용이 더 중요할 때 적합함을 보여줍니다.

리스트가 적합한 경우:

• 5–10개의 옵션을 보여줘야 하지만 이미지가 필요 없을 때;
• 사용자가 제목과 짧은 설명을 “눈으로 훑기”만 하길 원할 때;
• 모든 항목의 동작이 동일하고, UI가 주의를 분산시키지 않아야 할 때.

GiftGenius의 예:

• 자세한 정보 없이 “빠른” 선물 아이디어 목록;
• 즐겨찾는 카테고리 목록: “동료용”, “부모님용”, “아이용”;
• 저장된 추천 모음(“HR 부서 선물”, “$20 이하 연말 소품”).

간단한 리스트 컴포넌트

오른쪽에 CTA “자세히 보기” 버튼 하나가 있는 컴팩트한 리스트를 만들어 봅시다.

type GiftListProps = {
  gifts: GiftSuggestion[];
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftList({ gifts, onSelect }: GiftListProps) {
  return (
    <ul className="flex flex-col gap-2">
      {gifts.map((gift) => (
        <li
          key={gift.id}
          className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
        >
          <span className="truncate">{gift.title}</span>
          <button
            className="text-xs text-primary"
            onClick={() => onSelect(gift)}
          >
            자세히 보기
          </button>
        </li>
      ))}
    </ul>
  );
}

여기서는:

• 제목에 truncate를 적용해 긴 이름이 레이아웃을 깨뜨리지 않게 합니다;
• 항목마다 CTA는 하나만 둡니다;
• “풍부한” 정보(설명, 이미지, 후기)는 다음 단계로 남겨 둡니다 — 예를 들어 클릭 시 개별 카드나 fullscreen 보기로 열기.

리스트는 GPT의 팔로업 제안과 특히 잘 어울립니다. 위젯이 “후보” 목록을 보여주고, 그 아래에서 GPT가 이렇게 씁니다:

“$30 이하 선물로 좁혀 드리거나 디지털 선물만 보여드릴 수 있어요. 무엇을 선택할까요?” 같은 팔로업 버튼 두세 개를 제안합니다.

별도의 섹션에서 다양한 시나리오에서 inline‑위젯과 팔로업 메시지를 어떻게 조합하는 게 좋은지도 다룰 것입니다.

5. 캐러셀: 옵션이 많지만 서로 비슷할 때

캐러셀은 가로로 배치된 카드 묶음으로, 스와이프나 내비게이션 버튼으로 넘깁니다. 가이드라인은 서로 유사한 요소의 소규모 목록(보통 3–8개)을 보여줄 때 캐러셀을 권장합니다. 각 요소에는 이미지, 제목, 약간의 메타데이터가 포함됩니다.

핵심 아이디어: 끝없는 세로 리스트에 묻히지 않고도, 사용자가 빠르게 여러 옵션을 스캔할 수 있게 합니다.

GiftGenius에서 캐러셀이 유용한 경우:

• 적합한 선물이 10–15개 있지만, inline‑위젯에서는 “핫한 8개”만 보여주고 싶을 때;
• 각 선물이 시각적으로 매력적일 때(이미지, 구성);
• 사용자가 채팅을 길게 스크롤하지 않고도 옵션을 넘겨볼 수 있어야 할 때.

캐러셀 UX 규칙

가이드라인과 리서치를 바탕으로:

• 캐러셀 카드 수는 3–8개입니다. 그 이상이면 “더 보기” 같은 별도 커맨드를 제공하세요;
• 각 카드는:
  • 이미지 또는 다른 시각 요소가 있어야 하며;
  • 텍스트 메타데이터는 두 줄을 넘기지 말아야 하며;
  • 명확한 CTA 하나(예: “선택” 또는 “자세히 보기”)를 가져야 합니다;
• 카드 내부에 복잡한 중첩 내비게이션(탭, 하위 이동)을 두지 마세요;
• 내부(세로) 스크롤바를 피하세요. 카드 높이는 합리적 한도 내에서 유연하게, 별도의 스크롤바 없이.

“한 번에 한 카드” 원칙의 단순 캐러셀

복잡한 가로 스크롤에 손대지 않으려면 가장 단순한 방식으로 구현할 수 있습니다: 한 번에 카드 하나만 보여주고 “이전/다음” 버튼을 제공합니다.

import { useState } from "react";

type GiftCarouselProps = {
  gifts: GiftSuggestion[];
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftCarousel({ gifts, onSelect }: GiftCarouselProps) {
  const [index, setIndex] = useState(0);
  const gift = gifts[index];

  return (
    <div className="flex flex-col gap-2">
      <GiftCard gift={gift} onSelect={onSelect} />
      <div className="flex items-center justify-between text-xs">
        <button
          disabled={index === 0}
          onClick={() => setIndex((i) => i - 1)}
        >
          ← 이전
        </button>
        <span>
          {index + 1} / {gifts.length}
        </span>
        <button
          disabled={index === gifts.length - 1}
          onClick={() => setIndex((i) => i + 1)}
        >
          다음 →
        </button>
      </div>
    </div>
  );
}

이것만으로도 충분히 “캐러셀” 느낌을 줍니다. 게다가:

• 코드는 간결하게 유지되고;
• 컨테이너 너비나 위젯 내부 가로 스크롤과 씨름할 필요가 없으며;
• 컴포넌트에 넘기기 전에 gifts를 최대 8개로 제한하기도 쉽습니다.

더 “진짜 같은” 캐러셀을 원한다면 overflow-x-auto와 고정 카드 너비를 사용할 수 있지만, 이 경우에는 직접 발명하기보다 UI 라이브러리(shadcn/ui, Radix 호환 솔루션 등)의 기성 컴포넌트를 쓰는 편이 보통 더 수월합니다.

6. CTA 버튼: 적고, 명확하고, 목적에 맞게

CTA(Call to Action)는 모든 inline‑패턴의 심장입니다. 버튼이 있어야 위젯이 그림을 넘어 실제 도구가 됩니다.

핵심 원칙

OpenAI 문서는 비교적 엄격히 권고합니다:

• 카드에는 기본 버튼을 최대 두 개까지만 둡니다(하나는 주요, 하나는 보조);
• 캐러셀에서는 가능하면 항목당 CTA 하나씩;
• CTA 문구는 구체적 동사여야 합니다: “자세히 보기”, “목록에 추가”, “결제로 이동”처럼, 모호한 “확인”, “동작”은 피하세요.

버튼 수가 적을수록 모델과 사용자 모두에게 쉽습니다. 위젯 위아래에는 여전히 텍스트 응답과 GPT의 팔로업 제안이 있다는 점을 잊지 마세요.

CTA를 앱 로직에 연결하기

GiftGenius에서 대부분의 CTA는 다음 중 하나일 것입니다:

• 필터/선정 기준을 변경(새 tool‑call giftgenius.refineSearch),
• 체크아웃 시작(giftgenius.startCheckout),
• 외부 사이트 열기(이전 강의에서 다룬 openExternal 사용).

“필터 변경” CTA의 간단한 핸들러 예:

async function handleRefineFilters(gift: GiftSuggestion) {
  await window.openai.actions.call("giftgenius.refineSearch", {
    baseGiftId: gift.id,
  });
}

UX 관점에서 매우 중요한 점 — system 지시에서 모델이 언제, 정확히 어떤 CTA 버튼을 제안해야 하는지를 분명히 하세요. 예를 들어:

• 사용자가 “더 많은 옵션 보여줘”라고 하면, “선택” 버튼이 달린 새 캐러셀을 보여주는 것이 좋습니다;
• 구매 단계에 이르면, CTA “결제로 이동”은 ACP 체크아웃을 시작하는 tool‑call로 이어져야 합니다(상업/결제 모듈에서 자세히 다룹니다).

또 하나의 좋은 실천은 ChatGPT 기능을 CTA로 중복하지 않는 것입니다. “ChatGPT에게 물어보기” 버튼은 필요 없습니다. 사용자는 이미 입력창과 음성을 갖고 있습니다. 가이드라인은 카드 내부에서 “중복 입력”을 피하라고 명시합니다.

7. Inline + follow‑up: 둘이서 호흡 맞추기

인라인‑위젯은 결코 진공 속에 존재하지 않습니다. 보통 응답 구조는 다음과 같습니다:

1. 모델이 여러분의 App을 사용하기로 결정하고 도구를 호출합니다;
2. MCP가 데이터를 반환합니다;
3. ChatGPT가 이 데이터로 inline‑위젯을 렌더링합니다;
4. 그 아래에 모델이 짧은 팔로업 텍스트와 준비된 계속 옵션을 덧붙입니다.

GiftGenius에서는 이렇게 보일 수 있습니다:

• inline‑위젯: “선택” CTA가 붙은 선물 카드 3개;
• 아래 텍스트:
  “동료에게 어울리는 세 가지 아이디어예요: 데스크 램프, 스피치 수업, 카페 기프트 카드. 제가 할 수 있어요: — $30 이하 옵션만 보여드리기; — 비슷한 스타일로 몇 가지 아이디어 더 찾기; — 이 중 하나로 바로 구매 단계로 넘어가도록 돕기.”

모델은 팔로업에서 여러분의 위젯 CTA를 참조(“마음에 드는 항목의 ‘선택’을 눌러보세요”)하거나, 다시 tool‑call과 inline‑UI 재렌더로 이어지는 텍스트 명령을 제안할 수 있습니다.

기억하세요: 위젯이 모든 것을 다 할 필요는 없습니다. 어떤 때는 시나리오 일부를 텍스트 대화에 맡기고, 위젯은 대화 속의 “시각 블록”으로 쓰는 편이 더 좋습니다.

8. GiftGenius 전체 플로우에 어떻게 들어가는가

더 이해하기 쉽도록 간단한 순서 다이어그램으로 정리해 봅시다:

sequenceDiagram
  participant U as 사용자
  participant C as ChatGPT
  participant A as GiftGenius 위젯
  participant B as MCP/백엔드

  U->>C: "동료를 위한 50달러 이하 선물 3개 골라줘"
  C->>B: call_tool(giftgenius.suggestGifts)
  B-->>C: 상위 3개 옵션
  C->>A: 인라인 위젯 렌더(카드/캐러셀)
  A-->>U: "선택" CTA가 있는 카드들
  U->>A: CTA 클릭
  A->>B: call_tool(giftgenius.startCheckout)
  B-->>A: 상태 / 결제 링크
  A-->>U: 선택 요약 / 상태
  C-->>U: follow-up: "아이디어를 더 찾아주거나 카드 메시지 작성도 도와줄 수 있어요"

아키텍처 관점에서:

• MCP는 “두뇌”(추천, 비즈니스 로직, ACP)이며,
• 위젯은 “얼굴”(카드/리스트/캐러셀),
• ChatGPT는 “대화 진행자”로서, 무슨 일이 일어났는지 설명하고 다음 단계를 제안합니다.

이 플로우가 편안하려면:

• 위젯에 동작을 과도하게 넣지 마세요;
• 카드 안의 데이터를 컴팩트하게 유지하세요;
• 각 inline‑표시 뒤에 유용할 팔로업 선택지가 무엇인지 미리 고민하세요.

9. inline‑패턴의 비주얼 측면 몇 가지

비주얼 디자인은 이후 강의에서 자세히 다루겠지만, inline‑패턴에 특히 중요한 몇 가지는 지금 언급하는 편이 좋습니다.

첫째, 카드와 리스트가 ChatGPT 안의 “외부 사이트”처럼 보이지 않게 하세요. 색상과 여백은 정갈하게, 자극적인 그라디언트나 Comic Sans 같은 폰트는 피하세요. 인라인‑위젯은 ChatGPT 전반 UI의 일부이지, 2007년식 배너가 아닙니다.

둘째, 내부 스크롤바를 피하세요. 카드 안에서 자체 스크롤바가 생길 정도로 길어지면 뭔가 잘못된 것입니다: 콘텐츠를 너무 많이 우겨넣었거나 패턴 선택이 잘못된 겁니다(아마 fullscreen이 필요할 수 있습니다).

셋째, 밀도를 적절히 유지하세요:

• 카드 사이에는 눈에 띄는 간격이 있어야 합니다;
• CTA는 쉽게 누를 수 있어야 합니다(적절한 패딩);
• 텍스트는 모바일에서도 읽기 쉬워야 하며, 지나치게 작은 글씨를 피하세요.

이 모든 게 “디자인 잔소리”처럼 들릴 수 있지만, 실제로 inline‑위젯이 “네이티브”처럼 보일수록 모델은 더 자주 사용하고, 사용자는 덜 혼란스러워합니다.

10. 실습: 이 강의를 바탕으로 GiftGenius 확장하기

내용을 체화하고 싶다면 간단한 실습 체크리스트가 있습니다:

먼저 도구 giftgenius.suggestGifts의 현재 결과(선물 배열)를 가져와서:

1. 하나의 컴포넌트 안에 세 가지 UI 변형을 구현하세요:
   • GiftGrid 카드 그리드;
   • GiftList 텍스트 리스트;
   • GiftCarousel “이전/다음” 내비게이션.
2. 각 변형에 한두 개의 CTA 버튼을 추가하세요:
   • 카드 — “선택”;
   • 리스트 — “자세히 보기”;
   • 캐러셀 — 역시 “선택”, 그리고 위젯 아래에 “더 많은 옵션 보기” 버튼.
3. 상태(예: 도구가 반환한 전체 선물 개수)에 따라 사용할 패턴을 고르세요:
   • 옵션이 적으면(≤ 3) — 카드 그리드;
   • 텍스트 아이디어가 많으면 — 리스트;
   • 비주얼 선물이 많으면 — 캐러셀.

이렇게 하면 UI 훈련뿐 아니라, 상황에 따라 패턴을 동적으로 선택하는 사고를 키울 수 있어 사용자와 Store 리뷰어 모두에게 좋은 인상을 줄 수 있습니다.

요컨대 inline‑패턴은 채팅 타임라인 안에서 바로 살아 움직이는 빠르고 가벼운 UI 레이어이며, 별도 앱을 대체하려 하지 않습니다. 카드, 리스트, 캐러셀만으로도 80%의 전형적 과제를 해결합니다: 옵션을 보여주고, 선택하게 하고, 대화를 자연스럽게 이어갑니다.

다음 강의에서는 inline이 더는 “버티지 못할” 때 무엇을 할지 살펴봅니다: fullscreen 위저드, PiP 모드, 그리고 여러분의 App에 정말로 ChatGPT 내부의 큰 화면이 필요한 시나리오를 다룹니다.

11. inline‑패턴 작업 시 흔한 실수

오류 №1: inline‑위젯을 미니‑사이트로 만들기.
가끔 한 카드 안에 탭, 아코디언, 폼, 표, 기타 온갖 요소를 욱여넣으려는 시도가 있습니다. 결과는 무거운 UI가 되어 채팅 리듬을 깨고 모바일에서도 불편해집니다. 가이드라인은 명확합니다: inline‑카드 내부에 깊은 내비게이션과 복잡한 뷰를 넣지 마세요; 복잡한 시나리오는 fullscreen으로 분리합니다.

오류 №2: CTA 버튼이 너무 많음.
“카드에 ‘자세히 보기’, ‘구매’, ‘즐겨찾기’, ‘공유’, ‘신고’, ‘카드 메시지 생성’을 다 붙이자” 같은 발상은 사용자도, 모델도 길을 잃게 만들어 원하는 버튼이 눌릴 확률이 떨어집니다. 원칙을 기억하세요: 주요 CTA 하나와 최대 보조 하나. 나머지 시나리오는 GPT 팔로업 메시지나 다음 단계로 넘기세요.

오류 №3: 이유 없이 한 응답 안에 리스트, 카드, 캐러셀을 뒤섞기.
동일한 콘텐츠를 리스트로도, 카드로도, 캐러셀로도 “그냥 할 수 있으니까” 보여주면 사용자는 일관성을 잃습니다. 특정 출력 유형에 하나의 패턴을 고르고(예: 이미지 없는 아이디어 — 리스트, 이미지가 있는 선물 — 캐러셀) 유지하세요.

오류 №4: 카드를 텍스트로 과잉 채움.
세 단락 설명, 세 가지 가격, “왜 좋은가” 두 블록이 들어간 카드는 텍스트 벽이 됩니다. 사용자는 더 이상 “스캔”하지 않고 그냥 스크롤해 지나갑니다. 카드에는 가장 중요한 것만 남기세요: 제목, 핵심 파라미터 하나, 짧은 이유 하나, CTA. 나머지는 옆의 GPT 텍스트 응답으로 설명하면 됩니다.

오류 №5: UI만 믿고 팔로업 대화를 무시.
“모든 걸 버튼으로 처리하고 사용자는 대화할 필요 없다”는 접근은 ChatGPT의 본질과 어긋납니다. 인라인‑위젯은 대화를 보완해야지 대체하면 안 됩니다. 위젯 아래에서 모델이 제안할 팔로업(필터 변경, 더 많은 옵션 요청, 다음 단계로 이동)을 꼭 설계하세요.

오류 №6: 항목 수 제한을 무시.
한 inline‑위젯에 카드 25개짜리 캐러셀이나 50개짜리 리스트는 사용자가 통째로 스크롤해 지나가게 만드는 지름길입니다. 문서는 캐러셀 3–8개, 리스트 5–10개를 권장합니다. 데이터가 더 많다면 “더 보기”나 “전부 텍스트로 보기” 같은 CTA를 추가하세요.

오류 №7: 이미 fullscreen이 필요한데도 inline만 고집.
단계가 4개로 늘고, 열 개의 입력 필드가 있는 폼과 큰 표가 등장하는데도 “모든 걸 inline으로” 하고 싶을 수 있습니다. 결과는 괴물이 되거나, 카드 안에 중첩 스크롤과 의사‑스텝퍼를 발명하게 됩니다. 단계와 필드가 많아진다고 느껴지면 — fullscreen 위저드로 전환을 고민하고, inline은 빠른 프리뷰와 요약에 남겨두세요.