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
This commit is contained in:
2026-08-21 12:35:15 +09:00
parent 73c4f8a8cb
commit 1b84803582
6 changed files with 195 additions and 259 deletions
@@ -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>
+113 -115
View File
@@ -1,62 +1,47 @@
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 +60,39 @@ 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
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}+
{patentCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
Publications
Patent
</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">
{stdDocsCount}
</div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
Issue Static
Standardization Contributions
</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 +101,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,6 +153,47 @@ export default function HomePage() {
</div>
</section>
{/* 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>
{/* Directions Block */}
<DirectionsBlock />
</div>
+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": [],
}
]
+18 -14
View File
@@ -36,11 +36,11 @@ class TestANLHomepageE2E(unittest.TestCase):
self.assertIn("AI 에이전트 네트워크 연구실", html)
self.assertIn("AI Agent Networking Lab (ANL)", 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())
@@ -98,17 +98,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__":