1. 들어가며 ✍️
얼마 전, 미래에셋증권 리서치 리포트(올해는 이더리움이다: 에이전트 시대의 Near Automata)를 접하게 되었습니다. AI Agent를 인간과 함께할 경제 주체로 바라보는 시각에 적잖이 충격을 받았더랬죠.
한 가지 짚고 넘어갈 부분이 있습니다. 우리가 흔히 'AI'라고 부르는 것과 'AI Agent'는 다릅니다.
ChatGPT나 Claude 같은 AI 모델은 질문을 받으면 답변을 생성합니다. 훌륭하지만, 본질적으로 수동적입니다. 누군가 입력을 줘야만 반응하고, 그것으로 역할이 끝납니다.
반면 AI Agent는 목표가 주어지면 스스로 계획을 세우고, 도구를 사용하고, 외부 환경과 상호작용하며 작업을 완료합니다. 사람이 개입하지 않아도 됩니다. 예를 들어 "800달러 상한선을 기준으로 내가 원하는 스펙의 노트북을 구매해!"라는 목표를 받으면, 시장을 분석하고 판단하고 트랜잭션을 실행하는 모든 과정을 자율적으로 처리합니다.
자율성이 핵심입니다. 그리고 자율적으로 경제 활동을 하려면 반드시 한 가지가 전제가 요구됩니다.
"AI Agent가 스스로 결제하고, 계약하고, 신뢰를 쌓으려면 어떤 개념이 필요할까?"
바로 지갑(Wallet)입니다. 인간이 경제 활동을 하기 위해 계좌가 필요하듯, AI Agent도 온체인에서 자율적으로 활동하려면 암호화폐 지갑이 필요합니다.
Novitas 프로젝트는 바로 이 지점에서 출발합니다. AI Agent들이 서로를 신뢰하고, 검증하고, 결제하는 전 과정을 구현하고 해당 데이터의 흐름을 시각화하고 싶다는 명확한 목표 하에 시작되었습니다.
오늘은 그 첫 번째 기술적 기반인 Web3 Provider 설정 과정을 공유합니다.
2. 전체 Architecture ✍️
Novitas의 핵심 플로우는 다음과 같습니다.
구매자 AI Agent와 판매자 AI Agent는 각각 Novitas 플랫폼에 등록(Register) 됩니다. 이후 Mutual Verification 단계에서 서로의 신뢰도를 검증하고, Smart Contract Escrow를 통해 안전한 거래를 보장합니다. 거래가 완료되면 x402 프로토콜 기반 정산 후 각 Agent의 NFT Reputation이 업데이트됩니다.
이 구조에서 Web3 지갑 연결은 모든 것의 시작점입니다. Agent가 온체인에서 신원을 증명하고, 에스크로에 참여하며, 평판 NFT를 발행받으려면 반드시 지갑이 연결되어 있어야 합니다.
3. Configuration ✍️
가장 먼저 Wagmi 어댑터와 네트워크를 설정합니다. Reown AppKit을 사용해 지갑 연결 UI를 손쉽게 구현할 수 있습니다.
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { mainnet, arbitrum, sepolia } from "@reown/appkit/networks";
import { cookieStorage, createStorage } from "wagmi";
// Reown Cloud에서 발급받은 프로젝트 식별 키를 로드합니다.
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!projectId) {
throw new Error("Project ID is not defined. .env.local 파일을 확인하세요.");
}
// 지갑 연결 UI에 노출할 블록체인 네트워크 목록을 정의합니다.
export const networks = [mainnet, arbitrum, sepolia];
// SSR 호환성 및 세션 유지가 적용된 Wagmi 어댑터를 생성합니다.
export const wagmiAdapter = new WagmiAdapter({
storage: createStorage({
storage: cookieStorage,
}),
ssr: true,
projectId,
networks,
});
// WagmiProvider에 주입할 설정 객체를 내보냅니다.
export const config = wagmiAdapter.wagmiConfig;cookieStorage를 사용해 SSR 환경에서도 세션이 유지되도록 설정했습니다. 그리고 sepolia를 포함시켜 테스트넷 환경에서 우선적으로 검증할 수 있게 했습니다. 마지막으로 ssr: true 옵션을 통해 Next.js 서버 컴포넌트와의 hydration mismatch를 방지했습니다.
4. Context ✍️
다음은 앱 전체를 감싸는 Web3Provider 컴포넌트입니다. Reown AppKit 초기화와 React Query, Wagmi Provider를 한 곳에 모아둔 핵심 레이어입니다.
"use client";
import { ReactNode } from "react";
import { wagmiAdapter, projectId, networks } from "@/config";
import { createAppKit } from "@reown/appkit/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { type AppKitNetwork } from "@reown/appkit/networks";
// 온체인 데이터의 효율적인 관리와 캐싱을 위한 QueryClient를 생성합니다.
const queryClient = new QueryClient();
if (!projectId) throw new Error("Project ID is not defined");
// Reown AppKit을 사용하여 지갑 연결 인터페이스를 초기화합니다.
// 에이전트 경제의 핵심인 '지갑 기반 인증/결제'를 위한 UI 접점입니다.
createAppKit({
adapters: [wagmiAdapter],
networks: networks as unknown as [AppKitNetwork, ...AppKitNetwork[]],
projectId,
features: {
// 에이전트 활동 분석을 위한 기능을 활성화합니다.
analytics: true,
},
});
// Provider 컴포넌트: 앱 전체를 블록체인 및 데이터 관리 환경으로 감싸줍니다.
export default function Web3Provider({ children }: { children: ReactNode }) {
return (
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
);
}analytics: true 옵션은 나중에 Agent들의 온체인 활동 패턴을 분석하는 데 유용하게 쓰일 예정입니다. 어떤 Agent가 얼마나 자주, 어떤 네트워크에서 활동하는지 추적할 수 있습니다.
5. Layout ✍️
layout.tsx에서 Web3Provider로 앱 전체를 감쌉니다. 메타데이터도 이 단계에서 Novitas의 정체성에 맞게 정의합니다.
import type { Metadata } from "next";
import "./globals.css";
import Web3Provider from "@/context";
// 메타데이터: 서비스의 정체성을 정의합니다.
export const metadata: Metadata = {
title: "Novitas - AI Agent Web3 Platform",
description: "Experience the future of Web3 with AI Agents",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body className="antialiased">
<Web3Provider>{children}</Web3Provider>
</body>
</html>
);
}6. Test ✍️
가장 간단한 방법으로 지갑 연결이 정상 동작하는지 확인합니다. Reown AppKit이 제공하는 <appkit-button /> Web Component 하나로 지갑 선택 모달이 완성됩니다.
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm flex flex-col gap-6">
<h1 className="text-4xl font-bold tracking-tighter">
Novitas Web3 Test
</h1>
<appkit-button />
<div className="flex flex-col items-center gap-2 text-gray-500">
<p>1. 버튼이 정상적으로 보이는지 확인</p>
<p>2. 클릭 시 지갑 선택 모달이 뜨는지 확인</p>
</div>
</div>
</main>
);
}체크리스트는 단 두 가지입니다.
버튼이 정상적으로 렌더링 되는가. 클릭 시 지갑 선택 모달이 정상적으로 렌더링 되는가.
이 두 가지가 확인되면 Web3 기반 인프라가 제대로 세팅된 것입니다. MetaMask, Coinbase Wallet, WalletConnect 등 주요 지갑이 모두 연결 가능한 것을 확인했습니다.
7. Trouble Shooting ✍️
Can't resolve '@solana/kit' — EVM 프로젝트인데 솔라나 에러?
Web3 Provider 세팅을 마치고 npm run dev를 돌렸을 때 예상치 못한 에러가 반겼습니다.
Module not found: Can't resolve '@solana/kit'분명 Solana는 한 줄도 작성하지 않았는데, 왜 솔라나 패키지를 찾는 걸까요?
최신 버전의 Reown AppKit과 Coinbase SDK는 내부적으로 멀티체인(이더리움+솔라나 등) 지원 코드를 번들에 포함하고 있습니다. Novitas 프로젝트에서 솔라나 기능을 사용하지 않더라도, 빌드 단계에서 해당 모듈을 참조하려 하기 때문에 패키지가 없으면 에러가 발생합니다.
직접 사용하지 않더라도, SDK의 정상 빌드를 위해 솔라나 관련 패키지를 명시적으로 설치해줍니다.
npm install @solana/kit설치 후 다시 빌드하면 에러 없이 통과됩니다. SDK 내부 의존성 때문에 생기는 문제이므로, 실제 솔라나 기능을 구현하지 않아도 이 패키지는 package.json에 남겨두는 게 맞습니다.
8. 마치며 ✍️
구현하면서도 계속 드는 질문이 있습니다. “그래서 Novitas는 무엇이 다른가?”
아직 명확한 답은 없습니다. Escrow, NFT Reputation, Agent 간 검증 구조 모두 기존 Web3에서 다뤄온 개념이기도 합니다. 지금 단계의 Novitas는 이미 있던 조각들을 Agent를 중심으로 다시 배열해보는 시도에 불과합니다.
그리고 솔직히 말하면, 이 방향이 맞는지도 아직은 잘 모르겠습니다. AI가 지갑을 가지고 스스로 거래하는 구조가 정말 의미 있는 패러다임이 될지, 아니면 하나의 실험으로 끝날지도 알 수 없습니다.
다만, Novitas는 가설을 검증하는 과정입니다. 안 될 것 같은 것과 안 되는 것은 전혀 다른 문제겠죠.
다음 단계는 Agent 간 Mutual Verification과 Escrow를 실제 온체인 로직으로 구현하는 것입니다. 그 과정 속에서, Novitas로 세상에 전달하고자 하는 메시지가 더욱 선명해지기를 소망합니다.
