디자인 아틀라스
EN
✧ AI 인터페이스

도구 호출 카드

Tool call card

모델이 함수·API를 호출할 때, 무엇을 어떤 인자로 실행 중인지 보여주는 접이식 카드.

다른 이름: Function call UIAction card
···
html
<div class="card" id="card">
  <div class="row">
    <span class="badge run" id="st"><i class="spin"></i>실행 중</span>
    <code class="fn">search_web(<span id="arg">"2025 GPU 벤치마크"</span>)</code>
  </div>
  <div class="res" id="res"></div>
</div>
css
.card{width:min(310px,96%);border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:10px 12px;display:grid;gap:8px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px}
.badge.run{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.badge.done{background:color-mix(in srgb, var(--accent-3) 18%, transparent);color:#0f9d78}
.spin{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:sp .6s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.fn{font-family:ui-monospace,monospace;font-size:11px;color:var(--fg)}
.res{font-size:11px;color:var(--muted);line-height:1.55;opacity:0;max-height:0;overflow:hidden;transition:opacity .25s}
.res[data-show]{opacity:1;max-height:60px}
js
const st = document.getElementById('st'), res = document.getElementById('res');
function run() {
  st.className = 'badge run';
  st.innerHTML = '<i class="spin"></i>실행 중';
  res.removeAttribute('data-show');
  res.textContent = '';
  setTimeout(() => {
    st.className = 'badge done';
    st.innerHTML = '완료';
    res.textContent = '결과 8건 — 상위 3개 벤치마크 기사 확인함';
    res.setAttribute('data-show', '');
  }, 1500);
}
run();
setInterval(run, 3400);

에이전트형 제품은 답을 바로 생성하는 대신 검색·계산·DB 조회 같은 도구를 호출한 뒤 그 결과를 반영해 답합니다. 이 카드는 그 중간 단계를 텍스트 로그로 흘리지 않고, 함수 이름과 핵심 인자만 한 줄로 요약해서 "지금 무엇을 하고 있는지"를 보여줍니다.

상태는 보통 세 단계입니다 — 실행 중(스피너), 완료(체크, 결과 요약 한 줄), 실패(경고 아이콘, 무엇이 잘못됐는지). 카드를 펼치면 실제 인자 값과 반환값 전문을 볼 수 있게 하되, 기본은 접힌 요약이라 대화 흐름을 방해하지 않습니다.

인자를 그대로 노출할 때는 API 키나 개인정보가 섞여 들어가지 않게 서버 쪽에서 먼저 걸러야 합니다 — 디버깅에 유용하다고 원본 요청을 그대로 화면에 찍으면 민감정보 노출 통로가 될 수 있습니다.

언제 쓰나

함수 호출·에이전트 도구 사용이 있는 흐름에 씁니다. 순수 텍스트 생성만 하는 대화에는 필요 없습니다.