Files

Paul.Kim 90beecd91e refactor(framework): Replace SuperClaude with Claude Flow & SPARC

This commit marks a significant architectural overhaul, replacing the legacy SuperClaude and Taskmaster AI frameworks with the new Claude Flow orchestration system and the SPARC/Roo methodology.

The new framework emphasizes parallel, swarm-based execution and mandatory batch operations for improved efficiency and coordination.

Key Changes:

- **Framework Migration:** The entire `.claude` and `.cursor` directories, containing the old command, persona, and rule systems, have been removed. They are replaced by the new `.roomodes` configuration and a comprehensive `CLAUDE.md` guide for Claude Flow.

- **New Orchestration Engine:** Introduced Claude Flow as the primary MCP server. The updated `CLAUDE.md` defines new rules for swarm orchestration, mandatory concurrent execution, and a clear separation of concerns between coordination (MCP) and execution (Claude Code).

- **Project Initiation (AIROUM):** Added extensive planning, design, and specification documents for a new project: the "AIROUM" educational landing page. This includes:
    - Mood boards and multiple HTML design iterations in `.superdesign` and `gallery`.
    - Detailed planning documents, technical designs, and pseudocode specs in `.taskmaster`.

- **Configuration Updates:**
    - `.mcp.json` now points to `claude-flow` and `ruv-swarm`.
    - `.gitignore` is updated to support the new Claude Flow file structure.

2025-07-24 02:00:24 +09:00

14 KiB

Raw Blame History

AIROUM 랜딩 페이지 디자인 설계 문서

1. 개요

1.1. 프로젝트 목표

AI 교육 전문 기업 '에이로움'의 전문성과 가치를 효과적으로 전달하고, 잠재 고객(학생, 학부모, 교사, 기업)의 교육 프로그램 문의 및 신청을 유도하는 것을 목표로 합니다.

1.2. 타겟 사용자

AI 교육에 관심 있는 초·중·고등학생 및 학부모
AI를 수업에 활용하고자 하는 교사 및 교육 공무원
업무 효율성을 높이고 싶은 기업 및 일반 직장인
AI 교육 전문가로 활동하고 싶은 강사 및 교육 기획자

2. 레이아웃 디자인 (Wireframe)

사용자 동선을 고려하여 핵심 정보를 순차적으로 배치하고, 최종적으로 문의 양식으로 이어지도록 설계했습니다.

┌────────────────────────────────────────────────────────────────────────────────────────┐
│ [AIROUM 로고]      [회사소개]  [교육 프로그램]  [교육 실적]      [문의 및 신청 📝]      │
├────────────────────────────────────────────────────────────────────────────────────────┤
│                                                                                        │
│                      (배경 이미지 위에 아래 텍스트가 표시됩니다)                         │
│                                                                                        │
│   "에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합하여 탄생한 AI 교육 전문 기업입니다.  │
│    초중등 생성형 AI 활용 교육, AI 시대 진로 교육... 미래를 준비하는 든든한 동반자가 되겠습니다." │
│                                                                                        │
└────────────────────────────────────────────────────────────────────────────────────────┘

┌───────────────────────────────────( 회사 소개 )───────────────────────────────────────┐
│                                                                                        │
│   ┌──────────────────────────────────┬──────────────────────────────────┐           │
│   │ 1. 누구나 바로 적용할 수 있는 교육 │ 2. 어디에서나 열려 있는 교육     │           │
│   │    실천 중심 맞춤형 교육 설계    │    지역 거점 센터로 기회 확대    │           │
│   ├──────────────────────────────────┼──────────────────────────────────┤           │
│   │ 3. 미래를 연결하는 교육          │ 4. 검증된 커리큘럼과 강사        │           │
│   │    융합적 사고 기반 교육 제공    │    전문가 중심의 콘텐츠 제공     │           │
│   └──────────────────────────────────┴──────────────────────────────────┘           │
│                                                                                        │
└────────────────────────────────────────────────────────────────────────────────────────┘

┌───────────────────────────────────( 우리만의 차별점 )───────────────────────────────────┐
│                                                                                        │
│   01. 실천 중심 교육 ───────────> 바로 적용 가능한 맞춤형 교육 설계                    │
│                                                                                        │
│   02. 열린 교육 기회 ───────────> 지역 거점 센터를 통한 교육 기회 확대                │
│                                                                                        │
│   03. 미래 연결 교육 ───────────> 진로·교과·현장을 연결하는 융합 사고 교육            │
│                                                                                        │
│   04. 검증된 커리큘럼 ──────────> 현장 경험과 성과로 증명된 전문가 콘텐츠              │
│                                                                                        │
└────────────────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────( 교육 프로그램 )─────────────────────────────────────┐
│                                                                                          │
│ < ┌───────────────────┐   ┌───────────────────┐   ┌───────────────────┐ >                │
│   │ [   이미지   ]    │   │ [   이미지   ]    │   │ [   이미지   ]    │                  │
│   │ ──────────        │   │ ──────────        │   │ ──────────        │                  │
│   │ [대상] 학생       │   │ [대상] 학생       │   │ [대상] 모두       │                  │
│   │ AI 진로·직업     │   │ AI 교과 연계      │   │ AI 윤리 교육      │                  │
│   │ 진로 설계 수업... │   │ 교과 융합 수업... │   │ 디지털 시민의식...│                  │
│   └───────────────────┘   └───────────────────┘   └───────────────────┘                  │
│                                                                                          │
└──────────────────────────────────────────────────────────────────────────────────────────┘

┌────────────────────────────────( 무료 상담 및 교육 문의 )────────────────────────────────┐
│                                                                                        │
│                      "AI 시대, 더 이상 망설일 이유가 없습니다."                          │
│                                                                                        │
│   ┌──────────────────────────────────────────────────────────────────────────────────┐ │
│   │  이름: [_________________]    전화번호: [_________________]                      │ │
│   │  이메일: [_________________________________________]                             │ │
│   │  문의 내용: [__________________________________________________________________]  │ │
│   │                                             [ 문의하기 > ]                       │ │
│   └──────────────────────────────────────────────────────────────────────────────────┘ │
│                                                                                        │
└────────────────────────────────────────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────────────────────────────────────┐
│ [AIROUM]                                                                               │
│ (주)에이로움 | 대표: ... | 사업자등록번호: ...                                          │
│ 주소: ...                                [Naver Blog ↗] [Instagram ↗]                  │
└────────────────────────────────────────────────────────────────────────────────────────┘

3. 테마 디자인 (Visual Theme)

전문성과 혁신성을 시각적으로 표현하기 위해 .superdesign/design_system/design-system.json 파일과 브랜드 색상 제안을 조합하여 디자인 시스템을 정의합니다.

3.1. 색상 (Colors)

Primary Color: #0A2A5B (Deep Blue) - 신뢰성, 전문성
Accent Color: #00D1FF (Cyber Blue) - 혁신, 기술, CTA 버튼
Background Color: #FFFFFF (White) - 깔끔함, 현대성
Text Color: #1F2937 (Neutral Black) - 가독성

3.2. 타이포그래피 (Typography)

기본 폰트: Pretendard - 높은 가독성과 현대적인 느낌
헤드라인 (h1, h2): font-weight: 700 (Bold)
본문 (body): font-weight: 400 (Regular), line-height: 1.6

4. 애니메이션 디자인 (Animation)

사용자 경험을 향상시키고 동적인 느낌을 주기 위해 다음과 같은 애니메이션을 적용합니다.

4.1. 핵심 애니메이션 시스템

페이지 로드: 각 섹션이 아래에서 위로 부드럽게 나타나는 Fade In Up 효과 (Duration: 800ms)
스크롤 인터랙션: 스크롤 시 콘텐츠 요소들이 시차를 두고 나타나는 Scroll Reveal 효과
호버(Hover) 효과: 버튼, 카드 등 인터랙티브 요소에 마우스를 올렸을 때 시각적 피드백 제공 (Transition: 0.3s ease)
네비게이션: 스크롤 시 상단에 고정되는 Sticky Navigation
입력 폼: 입력 필드 포커스 시 테두리 하이라이트 효과

4.2. 애니메이션 마이크로-구문

// Page Load & Scroll
sectionLoad: 800ms ease-out [Y+50→0, α0→1] stagger+150ms
navSticky: 300ms ease [bg: transparent→dark, shadow+]

// Hover Effects
btnHover: 300ms ease [S1→1.05, bg→primary-dark]
cardHover: 300ms ease [Y0→-8px, shadow-lg]

// Form Interactions
inputFocus: 200ms ease [border→accent, ring+]
submitBtn: 200ms ease [S1→0.98] press

// Micro-interactions
iconHover: 200ms ease [R±10°]
linkUnderline: 300ms ease [width: 0%→100%]

// Card Carousel
cardScroll: 500ms ease-in-out [X-320→0]
cardNavClick: 200ms ease [S1→0.95→1]

---

## 5. 교육 프로그램 상세 내용

사용자가 카드 캐러셀을 통해 흥미를 느낀 후, 전체 프로그램을 쉽게 비교하고 탐색할 수 있도록 상세 내용을 표 형태로 제공합니다.

| 프로그램명 | 대상 | 설명 (한 줄 소개) |
| :--- | :--- | :--- |
| ✔ **AI 진로·직업 프로젝트 수업** | 학생 | 생성형 AI를 활용해 흥미와 강점을 탐색하고 진로를 설계하는 수업 |
| ✔ **AI 교과 연계 프로젝트 수업** | 학생 | 국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업 |
| ✔ **AI 윤리 교육** | 학생, 교사, 일반인 | 모든 연령 대상, AI 시대에 필요한 디지털 윤리와 책임감 교육 |
| ✔ **생성형 AI 실무 활용 교육** | 교사, 일반인, 기업 | 텍스트·이미지·영상 등 생성형 AI 도구 실습 중심 교육 |
| ✔ **교사·공무원 연수 프로그램** | 교사, 공무원 | 현장 적용 중심의 워크숍형 AI 연수 프로그램 |
| ✔ **AI 금융 활용 교육** | 학생, 일반인 | 생성형 AI를 활용해 금융 정보 탐색·자산관리 실습 교육 |
| ✔ **생성형 AI 강사 양성 과정** | 강사, 교육기획자 | 생성형 AI 교육 전문성 강화를 위한 강사 양성 과정 |

14 KiB Raw Blame History Unescape Escape