112 lines
6.6 KiB
Markdown
112 lines
6.6 KiB
Markdown
# 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`을 실행하지 않았습니다.
|
|
|
|
```bash
|
|
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`](./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 를 수정합니다.
|
|
|
|
---
|
|
|
|
> 본 프로젝트는 참고용 프로토타입이며 실제 서비스 배포를 보장하지 않습니다.
|