309 lines
13 KiB
TypeScript
309 lines
13 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Reveal from "@/components/Reveal";
|
||
import Marquee from "@/components/Marquee";
|
||
import Counter from "@/components/Counter";
|
||
import SectionLabel from "@/components/SectionLabel";
|
||
import HeroComposition from "./_components/HeroComposition";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "연구실 소개 (Intro)",
|
||
description:
|
||
"QUIC, gRPC, A2A 기반 에이전트 통신 및 멀티에이전트 오케스트레이션을 연구하는 경북대학교 AI 에이전트 네트워크 연구실 (ANL) 소개.",
|
||
};
|
||
|
||
// CUSTOMIZATION HOOK: the five research pillars (5 Pillars, Option A).
|
||
const pillars = [
|
||
{
|
||
no: "Pillar 01",
|
||
tag: "Agent Eng",
|
||
accent: "vermillion" as const,
|
||
ko: "AI 에이전트 3대 핵심 엔지니어링",
|
||
en: "Agent Core Engineering",
|
||
desc: "프롬프트, 컨텍스트, 하네스 엔지니어링을 결합하여 대화 상태 보존, 외부 기억 바인딩, 도구 연동 인터페이스를 설계하고 자율 추론 경로를 최적화합니다.",
|
||
points: [
|
||
"역할 페르소나 및 Few-shot 최적화",
|
||
"동적 컨텍스트 윈도우 & Memory 바인딩",
|
||
"물리적 도구(Tool Use) 하네스 연결",
|
||
],
|
||
},
|
||
{
|
||
no: "Pillar 02",
|
||
tag: "MCP & SKILL",
|
||
accent: "cobalt" as const,
|
||
ko: "AI Agent 기능 확장 프로토콜",
|
||
en: "Extensibility & Protocol",
|
||
desc: "Anthropic MCP 통일 호환 규격 및 코드+스키마+Few-shot이 패키징된 SKILL 모듈을 통해 에이전트의 로컬/원격 역량을 자율적으로 동적 확장합니다.",
|
||
points: [
|
||
"MCP (Model Context Protocol) 통일 규격",
|
||
"자율 확장 SKILL 모듈 패키징",
|
||
"CLI 기반 자율 코딩 에이전트 제어",
|
||
],
|
||
},
|
||
{
|
||
no: "Pillar 03",
|
||
tag: "Orchestration",
|
||
accent: "vermillion" as const,
|
||
ko: "멀티 에이전트 협업 및 오케스트레이션",
|
||
en: "Multi-Agent Systems",
|
||
desc: "단일 에이전트의 환각과 컨텍스트 인지 한계를 극복하기 위해 역할 세분화(Role Specialization) 및 이종 모델 교차 검증과 오케스트레이션 인프라를 구축합니다.",
|
||
points: [
|
||
"HERDR 백그라운드 프로세스 컨테이너 격리",
|
||
"crewAI 역할/목표 기반 크루 프로세스",
|
||
"LangGraph 상태 보존형 순환 그래프 제어",
|
||
],
|
||
},
|
||
{
|
||
no: "Pillar 04",
|
||
tag: "A2A & ACP",
|
||
accent: "cobalt" as const,
|
||
ko: "에이전트 상호운용성 개방형 표준",
|
||
en: "Interoperability Standards",
|
||
desc: "Linux Foundation A2A 및 IBM ACP 오픈 표준 기반으로 이종 에이전트 간 서비스 발견, 태스크 위임, Agent Card 프로필 명세를 구현합니다.",
|
||
points: [
|
||
"A2A (Agent-to-Agent) 통신 오픈 표준",
|
||
"ACP 서비스 발견 & 태스크 위임",
|
||
"Agent Card (/.well-known/agent-card.json)",
|
||
],
|
||
},
|
||
{
|
||
no: "Pillar 05",
|
||
tag: "AIoT & gRPC",
|
||
accent: "vermillion" as const,
|
||
ko: "AIoT & 고성능 통신 백본",
|
||
en: "High-Performance Backbone",
|
||
desc: "스마트 팩토리/팜 엣지 자원 제약 환경에서 경량 프로토콜(MQTT/CoAP)과 HTTP/2·HTTP/3 gRPC/QUIC 양방향 스트리밍을 결합한 하이브리드 백본을 설계합니다.",
|
||
points: [
|
||
"gRPC & QUIC 양방향 스트리밍 메시징",
|
||
"Protobuf 바이너리 직렬화 최적화",
|
||
"MQTT-gRPC 하이브리드 엣지 메쉬",
|
||
],
|
||
},
|
||
];
|
||
|
||
// CUSTOMIZATION HOOK: headline figures (animated counters).
|
||
const figures = [
|
||
{ value: 5, label: "연구 기둥 · Research Pillars", suffix: "", size: "display-sm" as const, static: false },
|
||
{ value: 12, label: "에이전트 프로토콜 · Protocols", suffix: "", size: "display-sm" as const, static: false },
|
||
{ value: 99.9, label: "가동률 % · Availability", suffix: "%", size: "display-sm" as const, static: false },
|
||
];
|
||
|
||
// CUSTOMIZATION HOOK: research keyword ticker.
|
||
const keywords = [
|
||
"A2A PROTOCOL",
|
||
"MCP & SKILL",
|
||
"HERDR PROCESS CONTAINER",
|
||
"LANGGRAPH CYCLIC GRAPH",
|
||
"QUIC & GRPC STREAMING",
|
||
"MULTI-AGENT ORCHESTRATION",
|
||
"AIOT EDGE CONTROL",
|
||
"AGENT CARD SPEC",
|
||
];
|
||
|
||
const focusAreas = [
|
||
{ ko: "에이전트 통신 프로토콜 (A2A)", en: "A2A & ACP Protocols" },
|
||
{ ko: "멀티에이전트 오케스트레이션", en: "Multi-Agent Orchestration" },
|
||
{ ko: "MCP & SKILL 기능 확장", en: "MCP & SKILL Engineering" },
|
||
{ ko: "AIoT & gRPC/QUIC 백본", en: "AIoT & gRPC/QUIC Backbone" },
|
||
];
|
||
|
||
export default function IntroPage() {
|
||
return (
|
||
<>
|
||
{/* ============ COVER SPREAD ============ */}
|
||
<section className="relative overflow-hidden border-b border-ink">
|
||
<div className="container-content pb-10 pt-12 sm:pt-16">
|
||
<Reveal>
|
||
<SectionLabel index={1} label="The Cover" />
|
||
</Reveal>
|
||
|
||
<div className="mt-8 grid items-start gap-10 lg:grid-cols-12">
|
||
{/* Title & Masthead column */}
|
||
<div className="lg:col-span-7">
|
||
<Reveal delay={100}>
|
||
<p className="kicker">경북대학교 컴퓨터학부 · AI Agent Networking Lab (ANL)</p>
|
||
<h1 className="headline-ko mt-4 text-[clamp(2.5rem,8vw,5.5rem)] leading-[0.98] text-ink">
|
||
에이전트 네트워크의
|
||
<br />
|
||
<span className="text-vermillion">미래</span>를 짓다
|
||
</h1>
|
||
<p className="display mt-3 leading-[0.9]" aria-hidden>
|
||
<span className="block italic text-cobalt">in Motion</span>
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={200}>
|
||
<p className="mt-8 max-w-prose text-base leading-relaxed text-ink-soft">
|
||
메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션.
|
||
국제 표준을 토대로 분산되고 이종적인 시스템이 동일한 의미로
|
||
데이터를 교환하고 협력하도록 설계합니다.
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={260}>
|
||
<div className="mt-8 flex flex-wrap gap-3">
|
||
<Link
|
||
href="/publications"
|
||
className="bg-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ivory transition hover:bg-vermillion"
|
||
>
|
||
논문 보기 →
|
||
</Link>
|
||
<Link
|
||
href="/members"
|
||
className="border border-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ink transition hover:bg-ink hover:text-ivory"
|
||
>
|
||
구성원
|
||
</Link>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* Abstract illustration column */}
|
||
<Reveal variant="scale" delay={200} className="lg:col-span-5">
|
||
<HeroComposition className="w-full" />
|
||
<p className="mt-3 text-right text-xs italic text-ink-mute">
|
||
Fig. 01 — MCM 노드 메시 × QUIC 멀티스트림
|
||
</p>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Keyword marquee band */}
|
||
<Reveal>
|
||
<Marquee
|
||
items={keywords}
|
||
className="border-y border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
|
||
/>
|
||
</Reveal>
|
||
</section>
|
||
|
||
{/* ============ FIGURES / COUNTERS ============ */}
|
||
<section className="border-b border-ink">
|
||
<div className="container-content grid gap-px bg-line sm:grid-cols-3">
|
||
{figures.map((f, i) => (
|
||
<Reveal key={f.label} delay={i * 100} className="bg-ivory">
|
||
<div className="px-6 py-10">
|
||
<Counter
|
||
value={f.value}
|
||
suffix={f.suffix}
|
||
static={f.static}
|
||
className={`${f.size} block text-ink`}
|
||
/>
|
||
<p className="kicker mt-3">{f.label}</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ============ MISSION / PULL QUOTE ============ */}
|
||
<section className="border-b border-ink">
|
||
<div className="container-content py-16 sm:py-24">
|
||
<Reveal>
|
||
<SectionLabel index={2} label="Mission" />
|
||
</Reveal>
|
||
<Reveal delay={100}>
|
||
<blockquote className="pull-quote mt-10 max-w-4xl text-ink">
|
||
“표준 적합성과 실증을 함께 추구하여, 연구가{" "}
|
||
<span className="text-vermillion">실제 표준 문서</span>와{" "}
|
||
<span className="text-cobalt">오픈소스 구현</span>으로 이어지게 한다.”
|
||
</blockquote>
|
||
</Reveal>
|
||
<Reveal delay={160}>
|
||
<p className="mt-6 max-w-prose text-sm leading-relaxed text-ink-mute">
|
||
{/* CUSTOMIZATION HOOK: marginalia / footnote */}
|
||
† 본 연구실은 차세대 에이전트 통신 프로토콜(A2A/ACP)과 멀티에이전트 오케스트레이션(HERDR/LangGraph) 기술을 토대로, 분산·이종 에이전트가
|
||
자율적으로 협력하고 고속으로 메시지를 교환할 수 있는 네트워크 인프라를 연구합니다.
|
||
</p>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ============ FIVE RESEARCH PILLARS ============ */}
|
||
<section className="border-b border-ink">
|
||
<div className="container-content py-16 sm:py-24">
|
||
<Reveal>
|
||
<SectionLabel index={3} label="Five Research Pillars" />
|
||
</Reveal>
|
||
|
||
<div className="mt-12 grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-3">
|
||
{pillars.map((p, i) => {
|
||
const isVerm = p.accent === "vermillion";
|
||
return (
|
||
<Reveal
|
||
key={p.tag}
|
||
variant={i % 2 === 0 ? "left" : "right"}
|
||
delay={i * 80}
|
||
className="bg-ivory"
|
||
>
|
||
<article
|
||
className={`group flex h-full flex-col justify-between border border-ink p-8 transition-colors duration-500 sm:p-10 ${
|
||
isVerm
|
||
? "hover:bg-vermillion hover:text-ivory"
|
||
: "hover:bg-cobalt hover:text-ivory"
|
||
}`}
|
||
>
|
||
<div>
|
||
<div className="flex items-baseline justify-between">
|
||
<span className="kicker group-hover:text-ivory/70">{p.no}</span>
|
||
<span
|
||
className={`font-display text-2xl ${
|
||
isVerm ? "text-vermillion" : "text-cobalt"
|
||
} group-hover:text-ivory`}
|
||
>
|
||
{p.tag}
|
||
</span>
|
||
</div>
|
||
<h3 className="headline-ko mt-6 text-2xl leading-tight">
|
||
{p.ko}
|
||
</h3>
|
||
<p className="font-display mt-1 text-base italic opacity-70">
|
||
{p.en}
|
||
</p>
|
||
<p className="mt-5 text-sm leading-relaxed opacity-90">
|
||
{p.desc}
|
||
</p>
|
||
</div>
|
||
<ul className="mt-6 space-y-3 text-sm">
|
||
{p.points.map((pt) => (
|
||
<li key={pt} className="flex gap-3 border-t border-ink/20 pt-3 group-hover:border-ivory/20">
|
||
<span className="font-display text-xs opacity-60">→</span>
|
||
<span>{pt}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</article>
|
||
</Reveal>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ============ FOCUS AREAS ============ */}
|
||
<section>
|
||
<div className="container-content py-16 sm:py-24">
|
||
<Reveal>
|
||
<SectionLabel index={4} label="Focus Areas" />
|
||
</Reveal>
|
||
<div className="mt-10 grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-4">
|
||
{focusAreas.map((f, i) => (
|
||
<Reveal key={f.en} delay={i * 80} className="bg-ivory">
|
||
<div className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
|
||
<span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
|
||
{String(i + 1).padStart(2, "0")}
|
||
</span>
|
||
<div>
|
||
<p className="headline-ko text-lg">{f.ko}</p>
|
||
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-ink-mute group-hover:text-ivory/60">
|
||
{f.en}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|