Compare commits

...
4 Commits
Author SHA1 Message Date
Godopu 8eabd7a2db feat(ui): modernize footer layout, reorder metrics, and finalize English localization
- Modernize Footer with animated favicon logo symbol and pill-badge links
- Reorder Footer contact block: Prof. Seok-Joo Koh -> email -> English address
- Reorder home metrics: International Journals -> Standardization -> Patent
- Add (IoT Architecture & Protocols) subtitle to Patent metric
- Translate Header desktop masthead location to Daegu / South Korea
- Clean up redundant flex classes and font colophon text
2026-08-21 14:03:28 +09:00
Godopu b8f1a000fd feat(footer): internationalize footer layout and remove directions section
- Remove #directions section and DirectionsBlock component from home page
- Translate Footer masthead brand titles to ANL and AI Agent Networking Lab
- Update Footer affiliated institution links to KNU, CSE, and College of IT Engineering
- Add advisor information (Prof. Seok-Joo Koh) and translate address to English
- Translate Footer quick navigation links and colophon/copyright text
- Update E2E test assertions for the updated footer layout and address
2026-08-21 13:20:15 +09:00
Godopu 184ff8263c feat(header): add favicon logo symbol and update brand text
- Add animated agent network favicon logo symbol to header brand link
- Update brand typography to ANL and AI Agent Networking LAB
- Update E2E test assertions for the updated header branding
2026-08-21 12:54:15 +09:00
Godopu 1b84803582 feat(home): redesign homepage sections according to TO-FIX requirements
- Translate intro tagline and section headers to English
- Update home metrics to reflect international publications, patents, and standards
- Revamp Research Projects section with AIoT & AI-RAN, MCM, and MVQM projects
- Update NRF standards track label to National Research Foundation of Korea
- Reconstruct Research Areas section into 14-topic responsive card grid with 2-line header
- Add International Standardizations section with global SDO listings and link
- Add mobile max-w 500px, horizontal centering, and 30px vertical margin to hero composition
- Update E2E test assertions for new content and structure
2026-08-21 12:35:15 +09:00
9 changed files with 366 additions and 486 deletions
+11 -81
View File
@@ -1,86 +1,16 @@
- `<p class="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">AI 에이전트 네트워크 연구실(ANL)은 멀티 AI 에이전트 오케스트레이션을 위해 서로 소통하고 협력하는 에이전트 네트워킹 기술과 표준 프레임워크 기술을 연구합니다.</p>`
`body > header > div.hidden.border-b.border-line.desktop\:block > div > span:nth-child(3)`
- "Daegu / South Korea" 로 수정
- 문구 영어로 변경
`body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-5 > h3``body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-5 > h3` 앞에 favicon logo 넣어서 `body > header > div.container-content.flex.h-\[4\.25rem\].items-center.justify-between.gap-4.my-2.sm\:my-3 > a`와 같이 변경해줘.
- `<div class="pt-6 border-t border-line grid grid-cols-3 gap-4"><div><div class="font-serif text-3xl text-cobalt-dark font-normal">4</div><div class="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">Research Areas</div></div><div><div class="font-serif text-3xl text-cobalt-dark font-normal">220<!-- -->+</div><div class="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">Publications</div></div><div><div class="font-serif text-3xl text-ink font-normal">2026</div><div class="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">Issue Static</div></div></div>`
`body > footer > div.border-t.border-line > div > p.kicker.text-ink-mute`
- 제거해줘.
- 문구 수정
- 4 RESEARCH AREAS -> {Number of International Journals & Conference} International Journals & Conference
- 220+ PUBLICATIONS -> {Number of Patent} Patent
- 2026 ISSUE STATIC -> {Number of Standardization} Standardization Contributions
`body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-4 > address`
- 교수 정보, 이메일 주소, 주소 순으로 배치
- `body > main > div > section.space-y-6 > div.flex.flex-col.sm\:flex-row.sm\:items-end.justify-between.gap-4.border-b.border-line.pb-4 > div > h2`
- 주요 연구 프로젝트 (Research Projects) -> Research Projects
Footer 레이아웃을 조금 더 구조적이고 모던하게 보이도록 레이아웃을 변경
- `"project-iot-standards`
- IoT Standards -> AIoT & AI-RAN
- `#project-iot-standards > div.space-y-4 > div.flex.items-start.justify-between.gap-3.border-b.border-line\/60.pb-3 > span` : 2026 ~ Present
- AIoT 관련 특히 Agent based IoT 관련 내용으로 수정
- `#project-iot-standards > div.space-y-3.pt-3.border-t.border-line\/60.text-xs.font-mono > div.flex.items-baseline.justify-between.gap-2 > span.text-cobalt-dark.font-bold`
- ISO/IEC JTC1/SC41 -> 한국연구재단 (NRF) 수정
- `#project-iot-standards > div.space-y-3.pt-3.border-t.border-line\/60.text-xs.font-mono > div.space-y-1\.5.pt-1` 부분 삭제
- `#project-ccis`
- CCIS -> MCM으로 수정
- `#project-ccis > div.space-y-4 > div.flex.items-start.justify-between.gap-3.border-b.border-line\/60.pb-3 > span` : 2026 ~ Present
- `#project-ccis > div.space-y-4 > p` : MCM 내용으로 수정
- @`/research/projects/mcm.md` 참조
- `#project-ccis > div.space-y-4 > div.flex.flex-wrap.gap-1\.5.pt-1` : MCM 관련 키워드로 수정
- `#project-ccis > div.space-y-3.pt-3.border-t.border-line\/60.text-xs.font-mono > div.flex.items-baseline.justify-between.gap-2 > span.text-cobalt-dark.font-bold`
- "IEC/TC 100/TA 17" -> "IEC/TC 100/WG 12 supported by KEIT"
- `#project-ccis > div.space-y-3.pt-3.border-t.border-line\/60.text-xs.font-mono > div.space-y-1\.5.pt-1` 삭제
- `#project-vlc-iot`
- VLC-IoT -> MVQM으로 수정
- `#project-vlc-iot > div.space-y-4 > p` : MVQM 내용으로 수정
- @`/research/projects/mvqm.md` 참조
- `#project-vlc-iot > div.space-y-4 > div.flex.flex-wrap.gap-1\.5.pt-1` : MVQM 관련 키워드로 수정
- `#project-vlc-iot > div.space-y-3.pt-3.border-t.border-line\/60.text-xs.font-mono > div.flex.items-baseline.justify-between.gap-2 > span.text-cobalt-dark.font-bold`
- "ITU-T SG20" -> "IEC/TC 100/WG 12 supported by KEIT"
- `#project-vlc-iot > div.space-y-3.pt-3.border-t.border-line\/60.text-xs.font-mono > div.space-y-1\.5.pt-1` 삭제
- `body > main > div > section.space-y-8.pt-20.md\:pt-28.border-t.border-line > div.flex.justify-between.items-end > div:nth-child(1)`
- 영문화 작업을 위해 "RESEARCH AREAS" 로 수정
- `body > main > div > section.space-y-8.pt-20.md\:pt-28.border-t.border-line > div.flex.justify-between.items-end > div:nth-child(1) > div`
- 삭제
- `body > main > div > section.space-y-8.pt-20.md\:pt-28.border-t.border-line > div.flex.justify-between.items-end > div.font-mono.text-xs.text-ink-mute`
- 삭제
- `body > main > div > section.space-y-8.pt-20.md\:pt-28.border-t.border-line > div.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-2.gap-6`
- 삭제
- 다음 키워드들을 각각 카드 형태로 표현
- Quick UDP Internet Conenction (QUIC)
- QUIC-based Mobility and Multi-Streaming Support
- Services and Protocols for Internet-of-Things (IoT)
- Constrained Application Protocol (CoAP)
- In-Vehicle Infotainment (IVI)
- Optical Wireless or Visible Light Communications (OWC/VLC)
- Lighting Control Networks (PLASA E1.45) for LED-based VLC
- Mobility Management: Distributed Mobility Control
- Multicast Routing Protocols and Reliable Multicasting
- mobile SCTP (mSCTP): Soft Handover in Transport Layer
- Stream Control Transmission Protocol (SCTP)
- Telecommunication Optimization: Network Planning and Management
- TAC/TAL Configuration for Paging and Location Management
- Tabu Search and Genetic Algorithm
- 새로운 섹션 추가:
위치 : `body > main > div > section.space-y-8.pt-20.md\:pt-28.border-t.border-line > div.flex.justify-between.items-end > div:nth-child(1)` 아래
섹션명: International Standardizations
내용:
```
Along with the research activities, we are also in pursuit of the International Standardization,
from the market deployment perspective, in the following SDOs (Standard-Defining Organizations):
- IEC TC100: Multimedia Systems and Equipment
- ISO/IEC JTC1/SC41: Internet-of-Things (IoT) Applications
- ITU-T SG20: IoT Services
- ITU-T SG13: Mobility Management
- ISO/IEC JTC1/SC6: Reliable Multicasting
Please refer to [here](link-to-standardization-page) for details of our works on International Standardization so far.
```
`body > main > div > section.relative > div.grid.grid-cols-1.lg\:grid-cols-12.gap-8.lg\:items-center > div.lg\:col-span-7.space-y-6.lg\:pt-4 > div`
- International Journals & Conference, Standardization Contributions, Patent 순으로 배치
- "PATENT" -> "PATENT\n(IoT Architecture \& Protocols) 수정
@@ -1,87 +0,0 @@
import React from "react";
export function DirectionsBlock() {
return (
<section className="mt-20 pt-16 border-t border-line" id="directions">
<div className="flex items-center gap-3 mb-6">
<span className="h-px w-8 bg-cobalt-dark"></span>
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
Location & Contact
</span>
</div>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
{/* Left info column */}
<div className="lg:col-span-7 space-y-6">
<h2 className="font-serif text-3xl font-normal text-ink">
&
</h2>
<p className="text-ink-mute text-base leading-relaxed">
AI (ANL) IT대학 5 , .
</p>
<address className="not-italic space-y-4 pt-2 text-sm font-sans text-ink">
<div className="flex items-start gap-3">
<span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20 pt-0.5">
</span>
<div>
<p className="font-medium">
IT대학 5(415) 527
</p>
<p className="text-xs text-ink-mute mt-0.5">
School of Computer Science and Engineering, Kyungpook National University
</p>
</div>
</div>
<div className="flex items-center gap-3">
<span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20">
</span>
<span>
(<a href="mailto:sjkoh@knu.ac.kr" className="text-vermillion hover:underline">sjkoh@knu.ac.kr</a>)
</span>
</div>
<div className="flex items-start gap-3">
<span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20 pt-0.5">
</span>
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-cobalt-dark">
<a href="http://www.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
(KNU)
</a>
<a href="http://cse.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
</a>
<a href="http://it.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
IT대학
</a>
</div>
</div>
</address>
</div>
{/* Right card column */}
<div className="lg:col-span-5 bg-paper p-6 rounded-lg border border-line flex flex-col justify-between">
<div className="space-y-4">
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider">
Research Environment
</div>
<h3 className="font-serif text-xl font-normal text-ink">
AI Agent Networking Lab
</h3>
<p className="text-xs text-ink-mute leading-relaxed">
QUIC/gRPC .
</p>
</div>
<div className="mt-6 pt-4 border-t border-line flex justify-between items-center text-xs font-mono text-ink-mute">
<span>IT-5 Building #527</span>
<span className="text-vermillion font-bold">ANL Laboratory</span>
</div>
</div>
</div>
</section>
);
}
@@ -17,11 +17,11 @@ export function ProjectPageView() {
</span>
</div>
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
(Research Projects)
Research Projects
</h2>
</div>
<p className="text-xs text-ink-mute font-mono">
{researchProjects.length} /
{researchProjects.length} core international standardization research projects
</p>
</div>
+118 -121
View File
@@ -1,62 +1,46 @@
import React from "react";
import Link from "next/link";
import HeroComposition from "./_components/HeroComposition";
import { DirectionsBlock } from "./_components/DirectionsBlock";
import { ProjectPageView } from "./_components/ProjectPageView";
import { publications, patents } from "../content/publications";
import { standardsBodies } from "../content/standards";
const PILLARS = [
{
no: "01",
en: "Extensibility & Protocol",
ko: "AI Agent 기능 확장 프로토콜",
theme: "vermillion" as const,
topics: [
"Model Context Protocol (MCP) 서버/클라이언트 아키텍처",
"SKILL 도구 캡슐화 및 재사용 패키징",
"CLI 에이전트 인터페이스 제어 및 웹 가동 제어",
],
desc: "에이전트가 외부 도구 및 시스템과 표준화된 방식으로 연동할 수 있도록 MCP와 SKILL 패키징 기술을 개발합니다.",
},
{
no: "02",
en: "Multi-Agent Systems",
ko: "멀티 에이전트 협업 및 오케스트레이션",
theme: "cobalt" as const,
topics: [
"HERDR 백그라운드 프로세스 컨테이너 격리 제어",
"crewAI 기반 역할 분담 및 태스크 위임 체계",
"LangGraph 순환 상태 그래프 기반 워크플로우 제어",
],
desc: "다중 에이전트 환경에서 독립적인 역할 분담과 선순환 오케스트레이션을 보장하는 자율 협업 플랫폼을 연구합니다.",
},
{
no: "03",
en: "Interoperability Standards",
ko: "에이전트 상호운용성 개방형 표준",
theme: "vermillion" as const,
topics: [
"Agent-to-Agent (A2A) 프로토콜 규격 정의 및 검증",
"Agent Communication Protocol (ACP) 메시지 교환 규격",
"Agent Card (/.well-known/agent-card.json) 메타데이터 검증",
],
desc: "서로 다른 프레임워크 기반의 에이전트 간의 상호운용성을 보장하는 국제 표준 개방형 통신 프로토콜을 구현합니다.",
},
{
no: "04",
en: "High-Performance Backbone",
ko: "AIoT & 고성능 통신 백본",
theme: "cobalt" as const,
topics: [
"gRPC / QUIC 양방향 스트리밍 에이전트 백본 통신",
"Protocol Buffers (Protobuf) 직렬화 통신 최적화",
"MQTT / CoAP 엣지 메시 통신망 통합",
],
desc: "초저지연 양방향 스트리밍 통신 인프라를 바탕으로 고성능 에이전트 백본 네트워크를 설계하고 실증합니다.",
},
// CUSTOMIZATION HOOK: 14 Core Research Areas
const RESEARCH_AREAS: string[] = [
"Quick UDP Internet Connection (QUIC)",
"QUIC-based Mobility and Multi-Streaming Support",
"Services and Protocols for Internet-of-Things (IoT)",
"Constrained Application Protocol (CoAP)",
"In-Vehicle Infotainment (IVI)",
"Optical Wireless or Visible Light Communications (OWC/VLC)",
"Lighting Control Networks (PLASA E1.45) for LED-based VLC",
"Mobility Management: Distributed Mobility Control",
"Multicast Routing Protocols and Reliable Multicasting",
"mobile SCTP (mSCTP): Soft Handover in Transport Layer",
"Stream Control Transmission Protocol (SCTP)",
"Telecommunication Optimization: Network Planning and Management",
"TAC/TAL Configuration for Paging and Location Management",
"Tabu Search and Genetic Algorithm",
];
const INTERNATIONAL_SDOS = [
"IEC TC100: Multimedia Systems and Equipment",
"ISO/IEC JTC1/SC41: Internet-of-Things (IoT) Applications",
"ITU-T SG20: IoT Services",
"ITU-T SG13: Mobility Management",
"ISO/IEC JTC1/SC6: Reliable Multicasting",
];
export default function HomePage() {
const pubCount = publications.length + patents.length;
const intlPubsCount = publications.filter(
(p) => p.category === "intl-journal-conf"
).length;
const patentCount = patents.length;
const stdDocsCount = standardsBodies.reduce(
(sum, b) =>
sum + b.projects.reduce((pSum, p) => pSum + p.documents.length, 0),
0
);
return (
<div className="container-content space-y-16 md:space-y-24 pt-10 md:pt-16 pb-16 md:pb-24">
@@ -75,39 +59,42 @@ export default function HomePage() {
<span className="italic font-serif text-cobalt-dark">Orchestration</span>
</h1>
<p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
AI (ANL) AI .
The AI Agent Networking Laboratory (ANL) studies agent networking technologies and standard frameworks that enable AI agents to communicate and collaborate with one another for multi-agent orchestration.
</p>
{/* Metrics Row (Derived from data array, AC-13) */}
{/* Metrics Row (Derived from real content data) */}
<div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
<div>
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{PILLARS.length}
{intlPubsCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
Research Areas
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
International Journals &amp; Conference
</div>
</div>
<div>
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{Math.floor((publications.length + patents.length) / 10) * 10}+
{stdDocsCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
Publications
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
Standardization Contributions
</div>
</div>
<div>
<div className="font-serif text-3xl text-ink font-normal">
2026
<div className="font-serif text-3xl text-cobalt-dark font-normal">
{patentCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
Issue Static
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
Patent<br />
<span className="text-[0.68rem] tracking-normal font-sans normal-case text-ink-mute/80">
(IoT Architecture &amp; Protocols)
</span>
</div>
</div>
</div>
</div>
<div className="lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
<div className="w-full max-w-[500px] mx-auto my-[30px] lg:my-0 lg:max-w-none lg:mx-0 lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
<HeroComposition />
</div>
</div>
@@ -116,79 +103,51 @@ export default function HomePage() {
{/* Research Project PageView Component */}
<ProjectPageView />
{/* Core Research Areas Grid */}
<section className="space-y-8 pt-20 md:pt-28 border-t border-line">
<div className="flex justify-between items-end">
{/* 14 Research Areas Grid */}
<section className="space-y-8 pt-16 md:pt-20 border-t border-line">
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
<div>
<div className="font-mono text-xs text-cobalt-dark uppercase tracking-widest font-bold">
Research Areas
<div className="flex items-center gap-3 mb-1">
<span className="h-px w-8 bg-cobalt-dark"></span>
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
Core Domains
</span>
</div>
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
Research Areas
</h2>
</div>
<div className="font-mono text-xs text-ink-mute">
Magazine Layout 0104
</div>
<p className="text-xs text-ink-mute font-mono">
{RESEARCH_AREAS.length} fundamental networking protocols and AI system domains
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
{PILLARS.map((pillar) => {
const isVermillion = pillar.theme === "vermillion";
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{RESEARCH_AREAS.map((area, idx) => {
const no = String(idx + 1).padStart(2, "0");
const isOdd = (idx + 1) % 2 !== 0;
return (
<div
key={pillar.no}
className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200"
key={no}
className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200 h-full"
>
<div className="space-y-4">
<div className="space-y-3">
<div className="flex justify-between items-center">
<span
className={`font-mono text-sm font-bold ${
isVermillion ? "text-vermillion" : "text-cobalt-dark"
className={`font-mono text-xs font-bold ${
isOdd ? "text-vermillion-dark" : "text-cobalt-dark"
}`}
>
[{pillar.no}]
{no}
</span>
<span className="font-mono text-xs text-ink-mute uppercase">
{pillar.en}
<span className="font-mono text-[0.68rem] text-ink-mute uppercase tracking-wider">
Topic #{no}
</span>
</div>
<h3 className="font-serif text-xl font-normal text-ink">
{pillar.ko}
<h3 className="font-serif text-base font-normal text-ink leading-snug">
{area}
</h3>
<p className="text-xs text-ink-mute leading-relaxed">
{pillar.desc}
</p>
<ul className="space-y-2 pt-2">
{pillar.topics.map((topic, tIdx) => (
<li
key={tIdx}
className="text-xs text-ink flex items-start gap-2"
>
<span
className={`inline-block w-1.5 h-1.5 rounded-full mt-1 ${
isVermillion ? "bg-vermillion" : "bg-cobalt"
}`}
></span>
<span>{topic}</span>
</li>
))}
</ul>
</div>
<div className="mt-6 pt-4 border-t border-line/60 flex justify-between items-center text-xs font-mono text-ink-mute">
<span>ANL Core Spec</span>
<span
className={
isVermillion ? "text-vermillion" : "text-cobalt-dark"
}
>
Pillar #{pillar.no}
</span>
</div>
</div>
);
@@ -196,8 +155,46 @@ export default function HomePage() {
</div>
</section>
{/* Directions Block */}
<DirectionsBlock />
{/* International Standardizations Section */}
<section className="space-y-6 pt-16 md:pt-20 border-t border-line">
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
<div>
<div className="flex items-center gap-3 mb-1">
<span className="h-px w-8 bg-cobalt-dark"></span>
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
Global Engagement
</span>
</div>
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
International Standardizations
</h2>
</div>
</div>
<div className="bg-paper p-6 sm:p-8 rounded-lg border border-line space-y-6">
<p className="text-ink/80 text-sm sm:text-base leading-relaxed max-w-3xl">
Along with the research activities, we are also in pursuit of the International Standardization, from the market deployment perspective, in the following SDOs (Standard-Defining Organizations):
</p>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2">
{INTERNATIONAL_SDOS.map((sdo, idx) => (
<li key={idx} className="flex items-start gap-2.5 text-sm text-ink font-sans">
<span className="inline-block w-1.5 h-1.5 rounded-full bg-cobalt-dark mt-2 shrink-0"></span>
<span>{sdo}</span>
</li>
))}
</ul>
<div className="pt-4 border-t border-line/60">
<Link
href="/standardization"
className="inline-flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wider text-cobalt-dark hover:text-ink transition-colors draw-underline"
>
<span>Please refer to here for details </span>
</Link>
</div>
</div>
</section>
</div>
);
}
+125 -43
View File
@@ -3,11 +3,11 @@ import Marquee from "@/components/Marquee";
// CUSTOMIZATION HOOK: replace address / email placeholders & colophon below.
const links = [
{ href: "/", ko: "홈", en: "Home" },
{ href: "/members", ko: "구성원", en: "Members" },
{ href: "/publications", ko: "논문", en: "Publications" },
{ href: "/lectures", ko: "강의", en: "Lectures" },
{ href: "/standardization", ko: "표준화", en: "Standardization" },
{ href: "/", en: "Home" },
{ href: "/members", en: "Members" },
{ href: "/publications", en: "Publications" },
{ href: "/lectures", en: "Lectures" },
{ href: "/standardization", en: "Standardization" },
];
export default function Footer() {
@@ -25,53 +25,136 @@ export default function Footer() {
className="border-b border-line py-4 font-display text-lg tracking-wide text-ink/90"
/>
<div className="container-content grid gap-12 py-16 lg:grid-cols-12">
{/* Masthead title */}
<div className="lg:col-span-5">
<p className="kicker text-ink-mute">Colophon</p>
<h3 className="headline-ko mt-3 text-2xl leading-snug text-ink">
AI
</h3>
<p className="font-display mt-1 text-xl italic text-ink-soft">
AI Agent Networking Lab (ANL)
</p>
<p className="mt-5 max-w-sm text-sm leading-relaxed text-ink-mute">
<br />
Kyungpook National University,<br />
School of Computer Science and Engineering
<div className="container-content grid gap-10 py-16 lg:grid-cols-12">
{/* Brand Block */}
<div className="lg:col-span-5 space-y-4">
<Link
href="/"
className="group inline-flex items-center gap-3.5 shrink-0"
>
<div className="relative flex items-center justify-center w-10 h-10 rounded-xl overflow-hidden shadow-sm ring-1 ring-ink/10 group-hover:ring-cobalt/40 group-hover:shadow-md group-hover:scale-105 transition-all duration-300 shrink-0">
<svg viewBox="0 0 32 32" className="w-full h-full" aria-hidden="true">
<defs>
<linearGradient id="footerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#4E77FF" />
<stop offset="100%" stopColor="#2B4CDE" />
</linearGradient>
<radialGradient id="footerNodeGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stopColor="#FFD666" stopOpacity="1" />
<stop offset="100%" stopColor="#FF9C1A" stopOpacity="0.8" />
</radialGradient>
</defs>
<rect width="32" height="32" rx="7" fill="url(#footerLogoGrad)" />
{/* Network Graph Edges */}
<path
d="M16 9 L9 22 M16 9 L23 22 M9 22 L23 22 M16 9 L16 17 M9 22 L16 17 M23 22 L16 17"
stroke="#FFFFFF"
strokeWidth="1.2"
strokeOpacity="0.85"
strokeLinecap="round"
/>
{/* Network Agent Outer Nodes */}
<circle cx="16" cy="9" r="2.5" fill="#FFFFFF" />
<circle cx="9" cy="22" r="2.5" fill="#FFFFFF" />
<circle cx="23" cy="22" r="2.5" fill="#FFFFFF" />
{/* Central Coordinating Hub Node */}
<circle cx="16" cy="17" r="2.2" fill="url(#footerNodeGlow)" className="animate-pulse" />
</svg>
</div>
<div className="flex flex-col leading-none">
<span className="headline-ko text-xl font-bold tracking-tight text-ink group-hover:text-cobalt-dark transition-colors">
ANL
</span>
<span className="kicker mt-1 transition-colors group-hover:text-cobalt-dark">
AI Agent Networking LAB
</span>
</div>
</Link>
<p className="text-xs sm:text-sm text-ink-mute leading-relaxed max-w-sm">
Research on agent networking technologies and standard framework technologies for multi-AI agent orchestration.
</p>
<div className="pt-2 flex flex-wrap gap-2 text-xs font-mono">
<a
href="https://www.knu.ac.kr/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-ivory border border-line text-ink-soft hover:text-cobalt-dark hover:border-cobalt/40 transition-colors"
>
<span>KNU</span>
<span className="text-[0.65rem] text-ink-mute"></span>
</a>
<a
href="https://cse.knu.ac.kr/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-ivory border border-line text-ink-soft hover:text-cobalt-dark hover:border-cobalt/40 transition-colors"
>
<span>CSE</span>
<span className="text-[0.65rem] text-ink-mute"></span>
</a>
<a
href="https://it.knu.ac.kr/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 px-2.5 py-1 rounded bg-ivory border border-line text-ink-soft hover:text-cobalt-dark hover:border-cobalt/40 transition-colors"
>
<span>College of IT Engineering</span>
<span className="text-[0.65rem] text-ink-mute"></span>
</a>
</div>
</div>
{/* Contact */}
<div className="lg:col-span-4">
<p className="kicker text-ink-mute">Contact</p>
<address className="mt-3 not-italic text-sm leading-relaxed text-ink-soft">
(41566) 80<br />
IT대학 5(415) 527<br />
<a
href="mailto:sjkoh@knu.ac.kr"
className="draw-underline mt-2 inline-block text-ink hover:text-vermillion-dark font-medium"
>
sjkoh@knu.ac.kr
</a>
<div className="lg:col-span-4 space-y-3">
<div className="flex items-center gap-2">
<span className="h-px w-6 bg-cobalt-dark"></span>
<p className="font-mono text-xs font-bold uppercase tracking-wider text-cobalt-dark">
Contact
</p>
</div>
<address className="not-italic text-sm leading-relaxed text-ink-soft space-y-2">
<div>
<div className="font-semibold text-ink">Prof. Seok-Joo Koh</div>
<a
href="mailto:sjkoh@knu.ac.kr"
className="inline-block text-xs font-mono text-cobalt-dark hover:underline mt-0.5"
>
sjkoh@knu.ac.kr
</a>
</div>
<div className="text-xs text-ink-mute leading-normal pt-1.5 border-t border-line/50">
Room 527, Bldg. 415 (IT-5), College of IT Engineering<br />
Kyungpook National University<br />
80 Daehak-ro, Buk-gu, Daegu 41566, Republic of Korea
</div>
</address>
</div>
{/* Index */}
<div className="lg:col-span-3">
<p className="kicker text-ink-mute">Index</p>
<ul className="mt-3 space-y-2">
{/* Navigation Index */}
<div className="lg:col-span-3 space-y-3">
<div className="flex items-center gap-2">
<span className="h-px w-6 bg-cobalt-dark"></span>
<p className="font-mono text-xs font-bold uppercase tracking-wider text-cobalt-dark">
Index
</p>
</div>
<ul className="space-y-1.5">
{links.map((l, i) => (
<li key={l.href} className="flex items-baseline gap-3">
<span className="font-display text-xs text-ink-mute">
{String(i + 1).padStart(2, "0")}
</span>
<li key={l.href}>
<Link
href={l.href}
className="text-sm text-ink-soft transition hover:text-vermillion-dark"
className="group flex items-center justify-between text-xs font-mono text-ink-soft hover:text-cobalt-dark transition-colors py-1 border-b border-line/40 hover:border-cobalt/40"
>
{l.ko}{" "}
<span className="text-xs text-ink-mute">{l.en}</span>
<span className="font-sans text-sm text-ink-soft group-hover:text-cobalt-dark">
{l.en}
</span>
<span className="text-[0.7rem] text-ink-mute group-hover:text-cobalt-dark">
{String(i + 1).padStart(2, "0")}
</span>
</Link>
</li>
))}
@@ -82,9 +165,8 @@ export default function Footer() {
<div className="border-t border-line">
<div className="container-content flex flex-col gap-2 py-5 sm:flex-row sm:items-center sm:justify-between">
<p className="text-xs text-ink-mute">
© {new Date().getFullYear()} AI (ANL) · . All rights reserved.
© {new Date().getFullYear()} AI Agent Networking Lab (ANL) · School of Computer Science and Engineering, KNU. All rights reserved.
</p>
<p className="kicker text-ink-mute">Set in Fraunces · Noto Serif KR · Pretendard</p>
</div>
</div>
</footer>
+35 -8
View File
@@ -122,7 +122,7 @@ export default function Header() {
<span className="kicker text-ink-mute">
Kyungpook National University · School of Computer Science &amp; Engineering
</span>
<span className="kicker"> · Daegu</span>
<span className="kicker">Daegu / South Korea</span>
</div>
</div>
@@ -130,15 +130,42 @@ export default function Header() {
{/* Brand logo */}
<Link
href="/"
className="group flex flex-col leading-none shrink-0"
className="group flex items-center gap-3 shrink-0"
onClick={() => setOpen(false)}
>
<span className="headline-ko text-lg text-ink sm:text-xl">
AI
</span>
<span className="kicker mt-1 transition-colors group-hover:text-cobalt-dark">
AI Agent Networking Lab (ANL)
</span>
<div className="relative flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-xl overflow-hidden shadow-sm ring-1 ring-ink/10 group-hover:ring-cobalt/40 group-hover:shadow-md group-hover:scale-105 transition-all duration-300 shrink-0">
<svg viewBox="0 0 32 32" className="w-full h-full" aria-hidden="true">
<defs>
<linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#4E77FF"/>
<stop offset="100%" stopColor="#2B4CDE"/>
</linearGradient>
<radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stopColor="#FFD666" stopOpacity="1"/>
<stop offset="100%" stopColor="#FF9C1A" stopOpacity="0.8"/>
</radialGradient>
</defs>
<rect width="32" height="32" rx="7" fill="url(#headerLogoGrad)"/>
{/* Network Graph Edges */}
<path d="M16 9 L9 22 M16 9 L23 22 M9 22 L23 22 M16 9 L16 17 M9 22 L16 17 M23 22 L16 17"
stroke="#FFFFFF" strokeWidth="1.2" strokeOpacity="0.85" strokeLinecap="round"/>
{/* Network Agent Outer Nodes */}
<circle cx="16" cy="9" r="2.5" fill="#FFFFFF"/>
<circle cx="9" cy="22" r="2.5" fill="#FFFFFF"/>
<circle cx="23" cy="22" r="2.5" fill="#FFFFFF"/>
{/* Central Coordinating Hub Node */}
<circle cx="16" cy="17" r="2.2" fill="url(#nodeGlow)" className="animate-pulse"/>
</svg>
</div>
<div className="flex flex-col leading-none">
<span className="headline-ko text-lg text-ink sm:text-xl font-bold tracking-tight group-hover:text-cobalt-dark transition-colors">
ANL
</span>
<span className="kicker mt-1 transition-colors group-hover:text-cobalt-dark">
AI Agent Networking LAB
</span>
</div>
</Link>
{/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
+32 -71
View File
@@ -4,89 +4,50 @@ import { ResearchProject } from "./types";
export const researchProjects: ResearchProject[] = [
{
"slug": "iot-standards",
"title": "IoT Standards",
"abstract": "Internet of Things covers a huge range of industries and use cases that scale from a single constrained device up to massive cross-platform deployments of embedded technologies and cloud systems connecting in real-time.",
"title": "AIoT & AI-RAN",
"abstract": "AIoT & AI-RAN investigates agent-based IoT architectures in which autonomous AI agents are distributed across sensor, edge, and radio access layers. The project studies agent-to-agent coordination over high-performance transport (gRPC/QUIC) bridged with constrained edge protocols (MQTT/CoAP), targeting AI-RAN designs for distributed autonomous control.",
"keywords": [
"Internet of Things",
"embedded technologies",
"cloud systems",
"real-time"
"AIoT",
"agent-based IoT",
"AI-RAN",
"constrained edge protocols",
"distributed autonomous control"
],
"standardsOrg": "ISO/IEC JTC1/SC41",
"period": "2020 ~ Present",
"deliverables": [
{
"title": "Part 1: Framework",
"ref": "ISO/IEC TR 30189-1 (March 2025)",
"status": "TR"
},
{
"title": "Part 2: Use Cases",
"ref": "ISO/IEC CDTR 30189-2 (In Progress)",
"status": "InProgress"
}
]
"standardsTrack": "National Research Foundation of Korea (NRF)",
"standardsOrg": "NRF",
"period": "2026 ~ Present",
"deliverables": []
},
{
"slug": "ccis",
"title": "CCIS",
"abstract": "In-Vehicle Infotainment (IVI) refers to vehicle systems that combine entertainment and information delivery to drivers and passengers. Configurable Car Infotainment Service (CCIS) is a service that helps users to more easily manage and control In-Vehicle infotainment devices and content.",
"title": "MCM",
"abstract": "Multilateral and Collaborative Metaverse (MCM) refers to metaverse systems in which two or more participants simultaneously interact within a shared virtual space for a common collaborative purpose. Unlike single-user or purely competitive environments, an MCM service is defined by coordinated participation: its intended outcome cannot be achieved by a single user acting alone. The project defines general requirements, service classification, and a gap analysis against existing standards.",
"keywords": [
"In-Vehicle Infotainment",
"CCIS",
"infotainment devices"
"MCM",
"metaverse",
"shared virtual space",
"coordinated participation",
"service classification"
],
"standardsTrack": "IEC/TC 100/TA 17",
"standardsTrack": "IEC/TC 100/WG 12 supported by KEIT",
"standardsOrg": "IEC TC100",
"period": "2018 ~ Present",
"deliverables": [
{
"title": "Configurable Car Infotainment Services (CCIS) - Part 1: General",
"ref": "IEC 63246-1 (August 2021)",
"status": "IS"
},
{
"title": "Configurable Car Infotainment Services (CCIS) - Part 2: Requirements",
"ref": "IEC 63246-2 (January 2022)",
"status": "IS"
},
{
"title": "Configurable Car Infotainment Services (CCIS) - Part 3: Framework",
"ref": "IEC 63246-3 (January 2022)",
"status": "IS"
},
{
"title": "Configurable Car Infotainment Services (CCIS) - Part 4: Protocol",
"ref": "IEC TR 63246-4 (December 2022)",
"status": "TR"
}
]
"period": "2026 ~ Present",
"deliverables": []
},
{
"slug": "vlc-iot",
"title": "VLC-IoT",
"abstract": "Visible-light communication (VLC) transmits data by intensity modulating optical sources, such as light-emitting diodes (LEDs) and laser diodes (LDs), faster than the persistence of the human eye. The goal of IoT-VLC is to design a framework of IoT services based on VLC.",
"title": "MVQM",
"abstract": "Management of Visual Quality in Metaverse Systems (MVQM) is a conceptual and functional approach for managing visual quality by dynamically adapting visual data delivery in response to user context, device capability, and network conditions. It emphasizes user-centric, context-aware quality management over static system-centric optimization, covering hybrid visual assets, level of detail, and area of interest adaptation.",
"keywords": [
"Visible-light communication",
"VLC",
"light-emitting diodes",
"laser diodes",
"IoT services"
"MVQM",
"visual quality",
"hybrid visual assets",
"level of detail",
"area of interest"
],
"standardsTrack": "ITU-T SG20",
"standardsOrg": "ITU-T SG20",
"period": "2018 ~ 2020",
"deliverables": [
{
"title": "Framework of IoT Services based on Visible Light Communications (VLC)",
"ref": "ITU-T Recommendation Y.4465 (January 2020)",
"status": "IS"
},
{
"title": "Functional Architecture for IoT Services based on VLC",
"ref": "ITU-T Recommendation Y.4474 (August 2020)",
"status": "IS"
}
]
"standardsTrack": "IEC/TC 100/WG 12 supported by KEIT",
"standardsOrg": "IEC TC100",
"period": "2026 ~ Present",
"deliverables": []
}
];
@@ -455,72 +455,36 @@ def parse_standards():
return bodies
def parse_projects():
bodies = parse_standards()
body_map = {b["org"]: b for b in bodies}
# Extract deliverables for CCIS (IEC TC100 - Configurable Car Infotainment Services WG)
ccis_docs = []
if "IEC TC100" in body_map:
for p in body_map["IEC TC100"]["projects"]:
if "Configurable Car Infotainment Services" in p["name"]:
for d in p["documents"]:
ccis_docs.append({
"title": d["title"],
"ref": d["ref"],
"status": d["status"]
})
# Extract deliverables for VLC-IoT (ITU-T SG20)
vlc_docs = []
if "ITU-T SG20" in body_map:
for p in body_map["ITU-T SG20"]["projects"]:
for d in p["documents"]:
vlc_docs.append({
"title": d["title"],
"ref": d["ref"],
"status": d["status"]
})
# Extract deliverables for IoT Standards (ISO/IEC JTC1/SC41)
iot_docs = []
if "ISO/IEC JTC1/SC41" in body_map:
for p in body_map["ISO/IEC JTC1/SC41"]["projects"]:
for d in p["documents"]:
iot_docs.append({
"title": d["title"],
"ref": d["ref"],
"status": d["status"]
})
projects = [
{
"slug": "iot-standards",
"title": "IoT Standards",
"abstract": "Internet of Things covers a huge range of industries and use cases that scale from a single constrained device up to massive cross-platform deployments of embedded technologies and cloud systems connecting in real-time.",
"keywords": ["Internet of Things", "embedded technologies", "cloud systems", "real-time"],
"standardsOrg": "ISO/IEC JTC1/SC41",
"period": body_map.get("ISO/IEC JTC1/SC41", {}).get("period", "2020 ~ Present"),
"deliverables": iot_docs,
"title": "AIoT & AI-RAN",
"abstract": "AIoT & AI-RAN investigates agent-based IoT architectures in which autonomous AI agents are distributed across sensor, edge, and radio access layers. The project studies agent-to-agent coordination over high-performance transport (gRPC/QUIC) bridged with constrained edge protocols (MQTT/CoAP), targeting AI-RAN designs for distributed autonomous control.",
"keywords": ["AIoT", "agent-based IoT", "AI-RAN", "constrained edge protocols", "distributed autonomous control"],
"standardsTrack": "National Research Foundation of Korea (NRF)",
"standardsOrg": "NRF",
"period": "2026 ~ Present",
"deliverables": [],
},
{
"slug": "ccis",
"title": "CCIS",
"abstract": "In-Vehicle Infotainment (IVI) refers to vehicle systems that combine entertainment and information delivery to drivers and passengers. Configurable Car Infotainment Service (CCIS) is a service that helps users to more easily manage and control In-Vehicle infotainment devices and content.",
"keywords": ["In-Vehicle Infotainment", "CCIS", "infotainment devices"],
"standardsTrack": "IEC/TC 100/TA 17",
"title": "MCM",
"abstract": "Multilateral and Collaborative Metaverse (MCM) refers to metaverse systems in which two or more participants simultaneously interact within a shared virtual space for a common collaborative purpose. Unlike single-user or purely competitive environments, an MCM service is defined by coordinated participation: its intended outcome cannot be achieved by a single user acting alone. The project defines general requirements, service classification, and a gap analysis against existing standards.",
"keywords": ["MCM", "metaverse", "shared virtual space", "coordinated participation", "service classification"],
"standardsTrack": "IEC/TC 100/WG 12 supported by KEIT",
"standardsOrg": "IEC TC100",
"period": body_map.get("IEC TC100", {}).get("period", "2018 ~ Present"),
"deliverables": ccis_docs,
"period": "2026 ~ Present",
"deliverables": [],
},
{
"slug": "vlc-iot",
"title": "VLC-IoT",
"abstract": "Visible-light communication (VLC) transmits data by intensity modulating optical sources, such as light-emitting diodes (LEDs) and laser diodes (LDs), faster than the persistence of the human eye. The goal of IoT-VLC is to design a framework of IoT services based on VLC.",
"keywords": ["Visible-light communication", "VLC", "light-emitting diodes", "laser diodes", "IoT services"],
"standardsTrack": "ITU-T SG20",
"standardsOrg": "ITU-T SG20",
"period": body_map.get("ITU-T SG20", {}).get("period", "2018 ~ 2020"),
"deliverables": vlc_docs,
"title": "MVQM",
"abstract": "Management of Visual Quality in Metaverse Systems (MVQM) is a conceptual and functional approach for managing visual quality by dynamically adapting visual data delivery in response to user context, device capability, and network conditions. It emphasizes user-centric, context-aware quality management over static system-centric optimization, covering hybrid visual assets, level of detail, and area of interest adaptation.",
"keywords": ["MVQM", "visual quality", "hybrid visual assets", "level of detail", "area of interest"],
"standardsTrack": "IEC/TC 100/WG 12 supported by KEIT",
"standardsOrg": "IEC TC100",
"period": "2026 ~ Present",
"deliverables": [],
}
]
+23 -17
View File
@@ -33,18 +33,20 @@ class TestANLHomepageE2E(unittest.TestCase):
html = self.read_html("index.html")
# 1. Brand & Header titles
self.assertIn("AI 에이전트 네트워크 연구실", html)
self.assertIn("AI Agent Networking Lab (ANL)", html)
self.assertIn("ANL", html)
self.assertIn("AI Agent Networking LAB", html)
# 2. Core Pillars keywords
self.assertIn("MCP", html)
self.assertIn("Multi-Agent Systems", html)
self.assertIn("Interoperability Standards", html)
self.assertIn("High-Performance Backbone", html)
# 2. Research Areas keywords
self.assertIn("Quick UDP Internet Connection (QUIC)", html)
self.assertIn("Constrained Application Protocol (CoAP)", html)
self.assertIn("Stream Control Transmission Protocol (SCTP)", html)
self.assertIn("Tabu Search and Genetic Algorithm", html)
# 3. Location / Address section
self.assertIn("address", html.lower())
self.assertIn("경북대학교 IT대학 5호관", html)
self.assertIn("Kyungpook National University", html)
self.assertIn("College of IT Engineering", html)
self.assertIn("Prof. Seok-Joo Koh", html)
self.assertIn("sjkoh@knu.ac.kr", html)
def test_02_members_page_content(self):
@@ -98,17 +100,21 @@ class TestANLHomepageE2E(unittest.TestCase):
html = self.read_html("index.html")
# 1. Project PageView Title & Projects
self.assertIn("주요 연구 프로젝트 (Research Projects)", html)
self.assertIn("IoT Standards", html)
self.assertIn("CCIS", html)
self.assertIn("VLC-IoT", html)
self.assertIn("Research Projects", html)
self.assertIn("AI-RAN", html)
self.assertIn("MCM", html)
self.assertIn("MVQM", html)
# 2. Key Deliverables references (Top visible items)
self.assertIn("ISO/IEC TR 30189-1", html)
self.assertIn("IEC 63246-1", html)
self.assertIn("ITU-T Recommendation Y.4465", html)
# 2. Standards track labels
self.assertIn("National Research Foundation of Korea", html)
self.assertIn("IEC/TC 100/WG 12 supported by KEIT", html)
# 3. Assert zero placeholder Funder labels (AC-31)
# 3. International Standardizations Section
self.assertIn("International Standardizations", html)
self.assertIn("IEC TC100: Multimedia Systems and Equipment", html)
self.assertIn("ISO/IEC JTC1/SC6: Reliable Multicasting", html)
# 4. Assert zero placeholder Funder labels (AC-31)
self.assertNotIn("Funder:", html)
if __name__ == "__main__":