에이전틱 커머스는 대화형 도구가 고객의 조건을 해석하고 상점 상품 데이터에 연결해 구매 과정을 돕는 방식입니다. 상점과 채널마다 지원하는 탐색·결제 단계가 다릅니다.
데모는 요청, 검색, 비교, 고객 승인 순서로 진행됩니다. 자동화 범위가 넓어져도 가격, 재고, 배송, 결제 조건을 고객이 확인하는 단계가 필요합니다.
언제 쓰나
AI 대화 채널에서 상품을 발견하고 구매 경로로 연결할 때 검토합니다.
에이전틱 커머스
Agentic commerce
구매 조건을 받은 AI가 상품 탐색과 비교를 돕고 승인 단계까지 잇습니다.
···
<div class="agent"><div class="ask">NEED / SMALL LAMP UNDER $50</div><div class="track"><div class="dot">ASK</div><div class="dot">FIND</div><div class="dot">COMPARE</div><div class="dot">APPROVE</div></div><div class="status" id="status">READING SHOPPER CRITERIA</div></div>.agent{width:min(90%,550px);font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.ask{padding:clamp(9px,2vmin,18px);background:var(--fg);color:var(--bg);letter-spacing:.06em}.track{display:flex;align-items:center;justify-content:space-between;gap:clamp(3px,1vmin,10px);margin:clamp(12px,3vmin,24px) 0}.dot{flex:1;height:clamp(56px,17vmin,120px);display:grid;place-items:center;text-align:center;background:var(--surface);border:2px solid var(--line);transition:.3s}.dot.active{background:var(--accent);color:white;border-color:var(--accent);transform:translateY(-5px)}.status{border-top:2px solid var(--accent);padding-top:clamp(6px,1.5vmin,12px);color:var(--accent);font-size:clamp(10px,max(1.3vmin,1vw),12px)}const dots=[...document.querySelectorAll('.dot')],status=document.querySelector('#status'),labels=['READING SHOPPER CRITERIA','QUERYING PRODUCT CATALOG','CHECKING FIT AND PRICE','WAITING FOR BUYER APPROVAL'];let step=0;function render(){dots.forEach((d,i)=>d.classList.toggle('active',i===step));status.textContent=labels[step]}render();setInterval(()=>{step=(step+1)%4;render()},1200);