Files
landing_page/README.md
T

6.9 KiB

🌐 경북대학교 사물인터넷 표준 연구실 (ISL) 홈페이지 리뉴얼 프로젝트

본 프로젝트는 **경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (IoT Standards Laboratory, ISL)**의 공식 홈페이지를 차세대 웹 기술 스택(Next.js 14+, TypeScript, Tailwind CSS)으로 리뉴얼 및 구축하기 위한 디렉터리입니다.

연구실의 실제 데이터 원본(ISL-2026/)과 참고용 모던 웹 프로토타입(refer_landing_page/)을 기반으로, 멀티 에이전트 협업 체계(MAM)를 통해 차세대 연구실 랜딩페이지를 완성합니다.


📌 1. 연구실 개요 (Lab Overview)

  • 연구실명: 사물인터넷 표준 연구실 (IoT Standards Laboratory, ISL)
  • 소속: 경북대학교 IT대학 컴퓨터학부
  • 지도교수: 고석주 교수 (Prof. Seok-Joo Koh / sjkoh@knu.ac.kr)
  • 핵심 연구 분야:
    1. IoT Standards & Protocols: oneM2M, W3C WoT, OCF, OMA LwM2M 기반 사물인터넷 국제 표준 및 상호운용성 연구
    2. Automotive & IVI (CCIS): Configurable Car Infotainment Service, 차량 내 인포테인먼트 제어 및 표준 인터페이스
    3. Optical Wireless & VLC: Visible Light Communication (가시광 통신) 및 오토모티브 광통신
    4. Next-Gen Networks: QUIC 기반 멀티에이전트 오케스트레이션, MCM (Metaverse Content Management) 메타버스 인터페이스

📁 2. 디렉터리 구조 및 역할 (Directory Structure)

landing_page/
├── README.md               # [본 문서] 프로젝트 통합 온보딩 가이드
├── ISL-2026/               # 📄 [실제 데이터 원본] 기존 연구실 공식 홈페이지 (HTML/CSS)
│   ├── index.html          # 메인 랜딩페이지 & 연구 분야 소개
│   ├── member.html         # 교수진, 석/박사 연구원, 학부연구생, 졸업생 목록
│   ├── paper-international.html # 국외 저널 및 학회 논문 실적
│   ├── paper-domestic.html # 국내 저널 및 학회 논문 실적
│   ├── patent.html         # 특허 등록/출원 실적
│   ├── standard.html       # 국제/국내 표준화 기여 내역 (oneM2M, ITU-T 등)
│   ├── lecture.html        # 담당 학부 및 대학원 강의 목록
│   └── assets/ & image/    # 로고, 교수님 및 연구원 사진, 연구 분야 그래픽 자산
│
├── refer_landing_page/     # 🚀 [타겟 웹 애플리케이션 프로토타입] Next.js 14+ App Router
│   ├── app/                # Next.js App Router 페이지 (intro, members, publications, lectures, standardization)
│   ├── components/         # 모듈화된 UI 컴포넌트 (Header, Footer, PageHeader, SectionLabel, Reveal, Counter, Marquee)
│   ├── docs/DESIGN.md      # 고대비 매거진 에디토리얼 디자인 시스템 가이드 문서
│   └── tailwind.config.ts  # 디자인 토큰 및 시각 스타일 규칙 정의
│
├── .agents/                # 🤖 멀티 에이전트 오케스트레이션 규칙 및 스킬 툴킷 (MAM)
├── .mam/                   # ⚡ 에이전트 세션 DB 및 격리 상태 레지스트리
├── docs/                   # 진행 작업 노트, 미팅 기록, 아키텍처 결정(ADR)
└── research/               # 관련 논문, 표준 사양서, 벤치마크 자료

🎯 3. 온보딩 핵심 미션 (Core Development Missions)

에이전트 팀 및 개발자는 아래 3단계 주요 미션을 순차적으로 진행합니다:

📥 Mission 1: 실제 연구실 데이터 추출 및 정밀 마이그레이션 (Data Migration)

  • ISL-2026/ 디렉터리의 레거시 HTML 파일들에서 실제 데이터를 추출합니다:
    • 구성원: 교수 소개, 박사/석사/학부 연구원, 졸업생(진로 정보 포함) [ISL-2026/member.html]
    • 논문 실적: 국외 저널/학회, 국내 저널/학회 논문 최신순 정렬 [ISL-2026/paper-international.html, paper-domestic.html]
    • 특허 & 표준화: 특허 등록/출원 목록 및 oneM2M/ITU-T/OCF 표준화 실적 [ISL-2026/patent.html, standard.html]
    • 강의 목록: 학부/대학원 개설 과목 [ISL-2026/lecture.html]
  • refer_landing_page/app/<route>/page.tsx 내의 예시(placeholder) 데이터 배열을 추출한 실제 ISL 연구실 데이터로 전면 교체합니다.

🎨 Mission 2: 브랜드 가치 및 디자인 시스템 유지 (Design & UX Refinement)

  • refer_landing_page/docs/DESIGN.md에 명시된 에디토리얼 디자인 시스템("Issue 01") 규격을 엄격히 준수합니다.
  • ISL-2026/assets/의 연구실 공식 로고(Lab_logo_color_transparent.png), 인물 사진, 연구 분야 그래픽 이미지를 refer_landing_page/public/으로 이관하여 적용합니다.
  • 매거진 섹션 넘버링(SectionLabel), 카운트업(Counter), 등장 모션(Reveal), 티커(Marquee) 컴포넌트를 효과적으로 활용합니다.

🔍 Mission 3: SEO, 반응형 UI 및 품질 검증 (QA & Verification)

  • 모든 페이지에 SEO 최적화 (Title, Meta Description, Semantic HTML5) 적용.
  • 모바일, 태블릿, 데스크톱 화면 반응형 Breakpoint 및 터치 사용자 경험 검증.
  • npm run build를 통한 TypeScript 및 Next.js 타입/린트 오류 0건 검증.

👥 4. 멀티 에이전트 역할 및 협업 프로토콜 (Multi-Agent Team)

본 프로젝트는 multi-agent-mux 환경에서 3개의 전용 에이전트가 역할 분담하여 작업을 수행합니다.

에이전트 담당 역할 (Role) 주요 임무 (Primary Responsibilities)
🧠 Claude planner and reviewer 전체 마이그레이션 아키텍처 수립, 데이터 누락 검증, 최종 코드 PR 승인
🎨 Agy (Antigravity) creator Component 개발, ISL-2026 데이터 추출 및 refer_landing_page 코드 작성/적용
🔍 Cline reviewer UI/UX 반응형 검수, SEO 및 Accessibility 점검, 린트/타입 안전성 검증

⚠️ 모든 에이전트는 프로젝트 루트의 AGENTS.md 지침 및 .agents/MULTI_AGENT_RULES.md 규약을 최우선으로 숙지하고 준수해야 합니다.


🛠️ 5. 로컬 개발 및 실행 가이드 (Getting Started)

# 1. 참고용 웹 애플리케이션 디렉터리로 이동
cd refer_landing_page

# 2. 의존성 패키지 설치
npm install

# 3. 개발 서버 실행 (기본 포트: http://localhost:3000)
npm run dev

# 4. 프로덕션 빌드 테스트 (검증 시 사용)
npm run build

📜 6. 개발 컨벤션 (Development Conventions)

  • 커밋 메시지 규칙: feat:, fix:, docs:, refactor:, style:, data: 접두사 사용.
  • 이미지 및 자산: 영문 snake_case 파일명 사용 (refer_landing_page/public/images/ 하위에 저장).
  • 디자인 토큰: tailwind.config.tsapp/globals.css 디자인 토큰 참조.