landing_page/refer_landing_page

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/
│   ├── _components/            # 서버/클라이언트 전용 컴포넌트 (ProjectPageView, ProjectPageViewControls)
│   ├── layout.tsx              # 루트 레이아웃 (Header/Footer, 폰트, 메타데이터)
│   ├── globals.css             # Tailwind 지시문 + 공통 유틸 클래스
│   ├── page.tsx                # Home 라우트 (연구실 소개, Research Project PageView, 4대 분야 조판, 오시는 길)
│   ├── members/page.tsx        # 구성원 (16명 재학 연구원, 60명 졸업생 인벤토리)
│   ├── publications/
│   │   ├── page.tsx            # 연구 실적 개요 및 Top 10 하이라이트
│   │   └── [category]/page.tsx # 카테고리 3종 정적 사전 생성 라우트 (● SSG)
│   ├── lectures/page.tsx       # 강의 이력 (2004 Spring ~ 2026 Spring 45개 학기)
│   ├── standardization/page.tsx# 표준화 활동 (6개 기구 / 44개 규격 문서)
│   ├── sitemap.ts              # SEO 사이트맵
│   └── robots.ts               # 검색엔진 크롤러 제어
├── content/                    # 마이그레이션 실데이터 및 스키마 모듈 (projects.ts 자동 생성)
├── scripts/                    # 레거시 데이터 파싱 및 무손실 대조 검증 파이프라인
├── components/
│   ├── Header.tsx              # 반응형 상단 내비게이션 (1240px desktop: 햄버거 토글)
│   ├── Footer.tsx              # 하단 연락처/바로가기
│   ├── SectionLabel.tsx        # 매거진 섹션 넘버링 (01 / 05)
│   ├── Reveal.tsx              # 스크롤 등장 모션 래퍼
│   ├── Counter.tsx             # 0→값 카운트업 숫자
│   └── Marquee.tsx             # 키워드 러닝 티커
├── docs/
│   └── DESIGN.md               # 디자인 시스템 문서 (토큰·타입·모션·컴포넌트)
├── tailwind.config.ts          # 색상·폰트·타입스케일·모션 토큰 (desktop: "1240px")
├── 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)

경로	설명
/	Home — 연구실 소개 · Research Project PageView(3대 실연구과제 인터랙티브 카드) · 4대 핵심 연구 분야 · 오시는 길
/intro	Home (/)으로 308 permanent redirect
/members	구성원 — 지도교수 및 재학 연구원 16명, 졸업생 60명 이력 인벤토리
/publications	연구 실적 개요 — 223건 카테고리 분류 및 Top 10 최신 성과
/publications/[category]	카테고리별 실적 (intl-journal-conf, domestic-journal-conf, patent) — ● SSG 정적 프리렌더
/lectures	강의 — 45개 학기 학부·대학원 개설 교과목 이력
/standardization	표준화 활동 — IEC TC100, ISO/IEC JTC1, ITU-T, TTA 등 6개 기구 / 44개 규격 문서

디자인 시스템 (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 를 수정합니다.

---

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