[검색창 없는 쇼핑몰] Agentic AI 커머스 구현 가이드 2탄 - LangChain, LangGraph, Dynamic UI

앞선 1단계에서 지식이 주어졌다면, 이제 손발이 되어 실제 업무를 처리하는 2단계와 상황에 따라 스스로 판단해 행동하는 3단계, 그리고 이를 화면으로 구현하는 4단계의 설계가 필요합니다. 2단계의 핵심은 API 연결을 통해 AI가 대화 중에 데이터를 조회하고 행동할 수 있도록 하는 것입니다. 재고 조회 API는 “그 제품 지금 바로 살 수 있어?”에 대한 답을 주고, 주문/배송 API는 “내 택배 어디쯤이야?”에 실시간으로 응답합니다. 추천 로직 API는 현재 세션의 클릭 로그를 전달해 실시간 추천 리스트를 제공합니다. LangChain의 StructuredTool을 활용해 AI가 언제 어떤 도구를 호출해야 하는지 매뉴얼처럼 제시하고, AI가 상황에 맞게 도구를 선택하도록 합니다. 예시 상황에서 AI의 생각은 재고 여부에 따라 재고 조회를 우선할지, 배송 상태를 확인할지, 또는 비슷한 상품을 추천할지 판단합니다.

3단계는 LangGraph를 이용한 뇌 워크플로우 설계입니다. 도구의 상황별 사용 순서를 결정하는 업무 프로세스로, 재고 조회가 먼저이고 없으면 추천으로 이어지며, 있으면 구매 링크를 전송하는 흐름을 노드와 엣지로 구성합니다. 상태 정의에는 대화 중 기억해야 할 정보가 포함되며, 행동은 각 단계의 구체적 작업, 흐름은 조건부 로직으로 이루어집니다. 예를 들어 품절 시에는 추천으로 자동 이동하고, 문의에 따라 최종적으로 맞춤형 답변이 생성됩니다. 2단계의 도구가 서로 연계되어 문제 해결까지의 경로를 열어주는 구조가 바로 Agentic AI의 실체로 다가옵니다.

4단계의 프론트엔드 접목은 AI가 준비한 결과물을 고객 눈앞에 가장 사고 싶게 차려내는 과정입니다. Floating Agent와 Dynamic UI가 핵심으로, 사용자가 보고 있는 페이지와 클릭 맥락을 실시간으로 파악해 대화창으로 먼저 제안합니다. 예를 들어 특정 상품 페이지에서 머무름이 길면 AI의 선제적 제안이 등장하고, 결제 과정도 대화창 안에서 바로 진행될 수 있습니다. 인터랙티브 카드와 즉시 체크아웃이 결합되며, 맞춤형 테마는 성분 중시형이나 가격 중시형 등에 따라 UI 요소를 달리 노출합니다. KV, PLP, PDP 등 전통적 페이지 구성요소는 필요 시 AI의 판단으로 재배치되며, On-the-fly 디자인으로 변하는 Liquid UI 또는 Generative UI가 구현됩니다. 디자인 단위는 페이지에서 모듈로 바뀌고, 레이아웃은 상황에 맞춰 실시간으로 결정되며, 브랜드의 톤앤매너는 유지하되 구성은 유연하게 바뀝니다. 필요 정보만 모듈식으로 제시하고, 성분 안전성이나 가격 비교 등 정보가 즉시 나타나도록 구성됩니다. 실무자는 Headless 구조로 백엔드와 프런트를 분리하고, 채팅창 안에 결제 위젯을 삽입하는 방식으로 구현해 나갑니다. 로그 연동으로 실시간 관심사를 파악하고, 배너와 상품은 필요 시에만 등장하는 On-Demand UI로 재배치됩니다. 이러한 흐름은 AI가 자율적으로 판단하고 행동하는 에이전틱 커머스의 핵심 방향을 제시합니다.