AI 에이전트 네트워크 연구실 랜딩 페이지 (Reference Prototype)

경북대학교 컴퓨터학부 AI 에이전트 네트워크 연구실(ANL / AI Agent Networking Lab) 의 랜딩 페이지 참고용 프로토타입입니다. 프로덕션 배포용이 아니라, 구조와 디자인을 참고해 실제 콘텐츠로 교체하기 위한 레퍼런스 구현입니다. 모든 인물·논문·표준 기여 내역은 예시(placeholder)이므로 실제 정보로 바꿔서 사용하세요.

연구실 소개 (Lab Context)

본 연구실은 (a) QUIC, gRPC, A2A 기반 차세대 에이전트 통신 프로토콜과 (b) HERDR/LangGraph 기반 멀티에이전트 오케스트레이션 아키텍처 및 시스템을 연구합니다.

기술 스택 (Tech Stack)

Next.js 14+ (App Router)
TypeScript
Tailwind CSS

디렉터리 구조 (Directory Structure)

refer_landing_page/
├── app/
│   ├── layout.tsx              # 루트 레이아웃 (Header/Footer, 폰트, 메타데이터)
│   ├── globals.css             # Tailwind 지시문 + 공통 유틸 클래스
│   ├── intro/page.tsx          # 연구실 소개
│   ├── members/page.tsx        # 구성원
│   ├── publications/page.tsx   # 논문
│   ├── lectures/page.tsx       # 강의
│   └── standardization/page.tsx# 표준화 활동
├── components/
│   ├── Header.tsx              # 반응형 상단 내비게이션
│   ├── Footer.tsx              # 하단 연락처/바로가기
│   ├── PageHeader.tsx          # 페이지 배너 (한글 제목 + 영문 display)
│   ├── SectionLabel.tsx        # 매거진 섹션 넘버링 (01 / 05)
│   ├── Reveal.tsx              # 스크롤 등장 모션 래퍼
│   ├── Counter.tsx             # 0→값 카운트업 숫자
│   └── Marquee.tsx             # 키워드 러닝 티커
├── docs/
│   └── DESIGN.md               # 디자인 시스템 문서 (토큰·타입·모션·컴포넌트)
├── tailwind.config.ts          # 색상·폰트·타입스케일·모션 토큰
├── next.config.js
├── tsconfig.json
├── postcss.config.js
└── package.json

실행 방법 (How to Run)

⚠️ 의존성 설치(npm install)는 사용자가 직접 실행해야 합니다. 이 저장소를 생성한 도구는 npm install을 실행하지 않았습니다.

cd refer_landing_page
npm install
npm run dev

개발 서버는 기본적으로 http://localhost:3000 에서 실행됩니다.

라우트 맵 (Route Map)

경로	설명
`/intro`	연구실 소개 — 5대 핵심 연구 기둥(Agent Core Eng, MCP & SKILL, Orchestration, A2A/ACP Standards, AIoT & gRPC)
`/members`	구성원 — 지도교수 및 박사·석사·학부 연구원 (placeholder)
`/publications`	논문 — 대표 저널/학회 논문 목록 (placeholder)
`/lectures`	강의 — 담당 학부·대학원 강의 (placeholder)
`/standardization`	표준화 활동 — oneM2M, W3C WoT, IETF QUIC, OMA LwM2M 기여 (placeholder — 마이그레이션 예정)

디자인 시스템 (Design System)

이 사이트는 고대비 매거진 스프레드 감성의 에디토리얼 디자인 시스템("Issue 01") 으로 구성됩니다. 소수의 토큰에서 전체 테마가 파생되며, 토큰 하나를 바꾸면 사이트 전반에 반영됩니다. 색상 토큰, 타입 스케일, 모션 원칙, 공유 컴포넌트 사용법 등 전체 설명은 docs/DESIGN.md 를 참고하세요.

커스터마이징 (Customization Hooks)

색상(Colors): tailwind.config.ts 의 theme.extend.colors 에서 디자인 토큰을 수정합니다 — ink(본문·괘선), ivory/paper(종이 배경), line(헤어라인), 그리고 두 에디토리얼 강조색 vermillion(Agent Engineering / Orchestration) · cobalt(MCP / A2A Protocol). 같은 값이 app/globals.css 의 :root CSS 변수에도 미러링되어 있으니 두 곳을 함께 바꾸세요. (brand/accent 별칭은 레거시 호환용이므로 신규 코드에서는 사용하지 마세요.)
폰트(Fonts): app/layout.tsx 에서 next/font 로 로드해 CSS 변수 (--font-display, --font-serif-ko, --font-sans)로 노출하고, tailwind.config.ts 의 fontFamily 에서 패밀리를, fontSize 의 display/display-sm 에서 매거진 디스플레이 스케일을 조정합니다.
모션(Motion): 스크롤 등장 타이밍은 app/globals.css 의 --reveal-duration / --reveal-ease 에서, 마퀴·스트림 등 애니메이션 속도는 tailwind.config.ts 의 theme.extend.animation 에서 조정합니다. prefers-reduced-motion 은 자동 존중됩니다.
콘텐츠(Content): 각 app/<route>/page.tsx 상단의 // CUSTOMIZATION HOOK 주석이 표시된 데이터 배열(구성원, 논문, 강의, 표준 기여, 카운터 수치, 키워드 티커 등)을 실제 정보로 교체하세요.
공유 컴포넌트(Shared Components): Reveal(등장 모션), SectionLabel(섹션 넘버링), PageHeader(페이지 마스트헤드), Counter(카운트업 수치), Marquee(키워드 티커)를 재사용합니다. 각 컴포넌트의 용도와 props 는 docs/DESIGN.md 4절을 참고하세요.
내비게이션/푸터: components/Header.tsx 의 navItems, components/Footer.tsx 의 주소·이메일 placeholder 를 수정합니다.

본 프로젝트는 참고용 프로토타입이며 실제 서비스 배포를 보장하지 않습니다.

5.6 KiB Raw Blame History