generated from Paul.Kim/tpl-superclaude
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.
This commit is contained in:
154
.taskmaster/docs/research/AIROUM-landing-page-design-spec.md
Normal file
154
.taskmaster/docs/research/AIROUM-landing-page-design-spec.md
Normal file
@ -0,0 +1,154 @@
|
||||
# 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 교육 전문성 강화를 위한 강사 양성 과정 |
|
||||
Reference in New Issue
Block a user