Paul.Kim/tst-claude-code-samples
1
0
Fork 0
generated from Paul.Kim/tpl-superclaude
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(framework): Replace SuperClaude with Claude Flow & SPARC

Browse Source 
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:
Paul.Kim
2025-07-24 02:00:24 +09:00
parent 15b3eaf5cb
commit 90beecd91e
108 changed files with 5639 additions and 9816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
.taskmaster/docs/aroum_landing_page_plan.md Normal file
View File

@ -0,0 +1,100 @@
# 에이로움(Aroum) 랜딩 페이지 상세 기획안
---
### 1. 벤치마크 사이트 (블랜차드코리아) 디자인 분석 요약
* **레이아웃 및 구조:**
* 전체적으로 섹션 구분이 명확한 수직 분할 레이아웃을 사용합니다.
* Full-width 이미지와 동영상 배경을 적극적으로 활용하여 시각적 몰입감을 높입니다.
* 콘텐츠 영역은 그리드 시스템을 기반으로 안정적이고 정돈된 느낌을 줍니다.
* 정보를 카드 형태로 구조화하여 가독성과 탐색 용이성을 확보했습니다.
* **색상 및 타이포그래피:**
* 신뢰감을 주는 네이비와 블루 계열을 포인트 컬러로 사용하며, 흰색 배경과의 대비를 통해 콘텐츠 주목도를 높입니다.
* 크고 굵은 산세리프 폰트를 헤드라인에 사용하여 자신감 있고 명확한 메시지를 전달합니다.
* 본문 텍스트는 가독성이 좋은 크기와 자간을 유지하여 전문성을 강조합니다.
* **사용자 인터페이스(UI) 요소:**
* 'view more'와 같은 명확한 Call-to-Action(CTA) 버튼을 사용하여 사용자 행동을 유도합니다.
* 캐러셀(Carousel) 슬라이더를 활용하여 많은 정보를 효율적으로 보여줍니다. (메인 배너, 베스트셀러 등)
* 동영상 콘텐츠를 적극적으로 삽입하여 교육 현장의 생생함과 전문성을 전달합니다.
* **전반적인 UX 특징:**
* '재계약률', '교육 실적' 등 구체적인 수치와 고객사 로고를 제시하여 강력한 사회적 증거(Social Proof)를 통해 신뢰를 구축합니다.
* 각 섹션의 목표가 명확하며, 사용자는 스크롤만으로도 회사의 핵심 역량과 서비스를 쉽게 파악할 수 있습니다.
---
### 2. 에이로움(Aroum) 랜딩 페이지 섹션별 상세 기획안
#### **섹션 1: Hero - 미래를 여는 AI 교육**
* **목표:** 방문자가 사이트에 접속하는 즉시 '에이로움'이 'AI 시대를 선도하는 혁신적인 교육 기업'임을 인지시키는 것.
* **콘텐츠:**
* **메인 헤드라인:** "AI로 여는 새로운 교육의 시대, 에이로움이 만듭니다."
* **서브 헤드라인:** "AI 개발자와 교육 전문가가 설계한 실천 중심 교육, 당신의 미래를 지금 준비하세요."
* **CTA 버튼:** `모든 교육 프로그램 보기`, `기업 맞춤 교육 문의`
* **디자인 및 레이아웃:**
* 블랜차드코리아처럼 Full-width 동영상 배경을 사용합니다. 단, 기업 교육 영상 대신 **뉴럴 네트워크, 데이터 시각화 등 추상적이고 세련된 AI 관련 모션 그래픽**을 활용하여 미래지향적이고 기술적인 이미지를 강조합니다.
* 헤드라인은 Pretendard와 같은 현대적인 산세리프 폰트를 사용하여 신뢰감과 전문성을 동시에 표현합니다.
* 전체적인 색감은 딥 블루(#0A2A5B)와 화이트를 메인으로 하고, 포인트 컬러로 생동감 있는 사이버 블루(#00D1FF)를 사용하여 '새로움'과 '기술'의 이미지를 부각합니다.
#### **섹션 2: About Aroum - 왜 에이로움인가?**
* **목표:** 에이로움의 차별화된 강점 4가지를 명확하고 간결하게 전달하여 브랜드 신뢰도를 구축하는 것.
* **콘텐츠:**
* **섹션 제목:** "에이로움은 다릅니다"
* **핵심 강점 4가지 (아이콘과 함께):**
1. **실천 중심 교육:** "수업, 연수, 업무에 바로 적용하는 맞춤형 교육"
2. **열린 교육 기회:** "지역 거점 센터를 통한 전문 AI 교육 기회 확대"
3. **미래 연결 교육:** "진로와 현장을 연결하는 융합적 사고력 증진"
4. **검증된 전문가:** "성과로 증명된 AI 개발자 및 교육 전문가의 협업"
* **디자인 및 레이아웃:**
* 블랜차드코리아의 카드 UI를 차용하여 4개의 핵심 강점을 2x2 그리드 형태로 배치합니다.
* 각 카드에는 직관적인 아이콘, 핵심 키워드, 간결한 설명 문구를 포함하여 정보 전달력을 높입니다.
* 배경에는 미니멀한 그리드 패턴이나 회로도 패턴을 옅게 깔아 AI 전문 기업의 이미지를 강화합니다.
#### **섹션 3: Core Programs - 모두를 위한 AI 교육**
* **목표:** 에이로움이 제공하는 다양한 교육 프로그램을 체계적으로 보여주고, 타겟 고객(학생, 교사, 기업)이 자신에게 맞는 프로그램을 쉽게 찾도록 돕는 것.
* **콘텐츠:**
* **섹션 제목:** "당신의 성장을 위한 최적의 AI 교육 프로그램"
* **프로그램 목록:** AI 진로 프로젝트, AI 교과 연계, AI 윤리 교육, 생성형 AI 실무, 교사 연수, 강사 양성 과정 등.
* **디자인 및 레이아웃:**
* 블랜차드코리아의 'Best Seller'와 유사한 캐러셀 또는 탭(Tab) UI를 적용합니다.
* '학생/대학생', '교사/공무원', '기업/일반' 3개의 탭으로 구분하여 사용자가 원하는 프로그램 그룹을 필터링해서 볼 수 있도록 UX를 개선합니다.
* 각 프로그램 카드는 프로그램명, 한 줄 소개, '자세히 보기' 버튼으로 구성하여 간결하게 정보를 제공합니다.
#### **섹션 4: Testimonials & Partners - 신뢰의 증거**
* **목표:** 실제 교육 실적과 파트너사를 노출하여 에이로움의 전문성과 신뢰성을 객관적으로 증명하는 것.
* **콘텐츠:**
* **섹션 제목:** "이미 많은 분들이 에이로움과 함께하고 있습니다"
* **파트너사 로고:** 주요 교육 기관, 협력 기업의 로고를 슬라이드 형태로 보여줍니다.
* **고객 후기:** "수업의 질이 달라졌어요!" (초등 교사 OOO) 와 같은 구체적인 직책과 이름이 포함된 짧은 후기를 2-3개 배치합니다.
* **디자인 및 레이아웃:**
* 블랜차드코리아의 '국내 10대 대기업의 이유있는 선택' 섹션처럼, 파트너사 로고를 모아 보여주는 섹션을 구성하여 시각적인 신뢰도를 높입니다.
* 고객 후기는 인물 사진과 함께 카드 형태로 디자인하여 진정성을 더합니다.
#### **섹션 5: Call to Action (CTA) - 미래를 향한 첫걸음**
* **목표:** 잠재 고객이 망설이지 않고 다음 단계(문의 또는 상담 신청)로 나아가도록 강력하게 유도하는 것.
* **콘텐츠:**
* **헤드라인:** "AI 시대, 더 이상 망설일 이유가 없습니다."
* **서브헤드라인:** "에이로움의 전문가가 당신의 조직과 개인의 성장을 위한 최적의 솔루션을 제안합니다."
* **CTA 버튼:** `무료 상담 및 교육 문의하기`
* **디자인 및 레이아웃:**
* 배경에 포인트 컬러인 사이버 블루(#00D1FF) 그라데이션을 사용하여 다른 섹션과 시각적으로 명확히 구분하고 주목도를 극대화합니다.
* 버튼은 크고 명확하게 디자인하여 사용자가 쉽게 클릭할 수 있도록 합니다.
#### **섹션 6: Footer - 회사 정보**
* **목표:** 회사 기본 정보, 소셜 미디어 링크, 약관 등을 제공하여 사이트의 완결성을 높이는 것.
* **콘텐츠:**
* 회사명, 주소, 연락처, 사업자등록번호 등 기본 정보.
* 개인정보처리방침, 이용약관 링크.
* 블로그, 인스타그램 등 공식 소셜 미디어 채널 링크.
* **디자인 및 레이아웃:**
* 블랜차드코리아와 유사한 다단 구조를 사용하여 정보를 체계적으로 정리합니다.
* 전체적인 톤앤매너를 유지하되, 배경은 어두운 색(딥 블루)으로 처리하여 페이지의 끝을 명확히 알립니다.

75
.taskmaster/docs/project-structure.md
View File

@ -1,75 +0,0 @@
# Project Structure
_Last Updated: 2025-07-03_
```
.
├── .claude
│   ├── commands
│   │   ├── docs
│   │   │   ├── create-app-design.md
│   │   │   ├── create-doc.md
│   │   │   ├── create-prd-interactive.md
│   │   │   ├── create-prd.md
│   │   │   ├── create-rule.md
│   │   │   ├── create-tech-stack.md
│   │   │   ├── parse-prd.md
│   │   │   ├── update-app-design.md
│   │   │   ├── update-project-structure.md
│   │   │   ├── update-rule.md
│   │   │   └── update-tech-stack.md
│   │   ├── research
│   │   │   ├── architecture.md
│   │   │   ├── security.md
│   │   │   ├── task.md
│   │   │   └── tech.md
│   │   ├── snippets
│   │   │   └── create-snippet.md
│   │   ├── task
│   │   │   ├── add-interactive.md
│   │   │   ├── add.md
│   │   │   ├── done.md
│   │   │   ├── expand.md
│   │   │   ├── list.md
│   │   │   ├── move.md
│   │   │   ├── next.md
│   │   │   ├── research.md
│   │   │   ├── show.md
│   │   │   ├── spec.md
│   │   │   ├── update-task-interactive.md
│   │   │   └── update-task.md
│   │   └── debug.md
│   ├── scripts
│   │   └── tree.sh
│   └── settings.json
├── .cursor
│   ├── rules
│   │   ├── taskmaster
│   │   │   ├── dev-workflow.mdc
│   │   │   └── taskmaster.mdc
│   │   ├── cursor-rules.mdc
│   │   ├── project-status.mdc
│   │   └── self-improve.mdc
│   └── mcp.json
├── .taskmaster
│   ├── docs
│   │   ├── app-design-document.md
│   │   ├── project-structure.md
│   │   ├── taskmaster-guide.md
│   │   └── tech-stack.md
│   ├── reports
│   │   └── .gitkeep
│   ├── tasks
│   │   └── tasks.json
│   ├── templates
│   │   └── example_prd.md
│   ├── config.json
│   └── state.json
├── .gitignore
├── .mcp.json
├── CLAUDE.md
└── README.md
16 directories, 50 files
```

37
.taskmaster/docs/requirements-specification.md Normal file
View File

@ -0,0 +1,37 @@
# 초기 요구사항 명세서 (v1.0)
## 1. 프로젝트 개요
'에이로움(AIROUM)'의 가치와 비전을 효과적으로 전달하고, 제공하는 AI 교육 프로그램에 대한 잠재 고객의 이해를 높여 문의 및 신청으로 연결하는 것을 목표로 하는 공식 랜딩 페이지를 제작합니다.
## 2. 프로젝트 목표 및 비전
- **프로젝트 비전:** "AI 시대를 준비하는 든든한 동반자"로서 에이로움의 전문성과 신뢰성을 전달하는 대표 디지털 채널 구축.
- **핵심 목표:**
- 에이로움의 브랜드 정체성 및 핵심 가치 전파.
- 다양한 교육 프로그램에 대한 정보 제공 및 잠재 고객의 관심 유도.
- 교육 문의 및 수강 신청 전환율 증대.
- **주요 성공 지표(KPI):**
- KPI 1: 월 평균 웹사이트 트래픽 30% 증가.
- KPI 2: '문의 및 신청' 페이지를 통한 월 평균 문의 건수 20% 증가.
- KPI 3: 페이지 평균 체류 시간 1분 이상 달성.
## 3. 핵심 기능 정의 (랜딩 페이지 구성)
제공된 `AIROUM-description.md` 문서에 기반하여 다음과 같이 4가지 핵심 섹션으로 구성합니다.
| 섹션 (네비게이션) | 주요 기능 | 설명 |
|---|---|---|
| **회사소개** | 에이로움의 비전, 강점, 차별성 소개 | 'AI와 새로움'의 가치, 전문가 협업, 지역 거점 운영 등 핵심 메시지를 전달하여 브랜드 신뢰도를 구축합니다. |
| **교육 프로그램** | 7가지 핵심 교육 프로그램 상세 소개 | 각 프로그램의 대상, 기대효과, 커리큘럼 요약 등을 명확하게 제공하여 사용자가 자신에게 맞는 프로그램을 쉽게 찾을 수 있도록 합니다. |
| **교육 실적** | 주요 교육 성과 및 파트너사 전시 | (향후 추가될 섹션) 성공적인 교육 사례, 고객 후기, 파트너 로고 등을 통해 전문성을 입증합니다. |
| **문의 및 신청** | 교육 상담 및 수강 신청 양식 제공 | 사용자가 궁금한 점을 문의하거나 원하는 교육을 신청할 수 있는 명확한 Call-to-Action(CTA)을 제공합니다. |
## 4. 사용자 스토리
- **(모든 방문자로서)** 나는 랜딩 페이지에 접속했을 때 에이로움이 어떤 회사인지 명확하고 빠르게 이해하고 싶다.
- **(학생/학부모로서)** 나는 내게 맞는 교육 프로그램이 무엇인지 쉽게 탐색하고, 각 프로그램의 상세 정보를 확인하고 싶다.
- **(교사/기업 담당자로서)** 우리 기관에 필요한 맞춤형 연수나 교육 프로그램에 대한 정보를 얻고, 쉽게 문의를 남기고 싶다.
- **(모든 방문자로서)** 나는 에이로움의 전문성을 신뢰할 수 있도록 실제 교육 실적이나 후기를 확인하고 싶다.
## 5. 제약 조건
- **기술적 제약:** 현재 단계에서 명시된 특정 기술 스택이나 플랫폼 제약은 없습니다.
- **비즈니스 제약:** 제공된 SNS 채널(블로그, 인스타그램) 링크가 페이지 내에 자연스럽게 포함되어야 합니다.
- **콘텐츠 제약:** "교육 실적" 섹션의 구체적인 콘텐츠는 추후 제공될 예정입니다.

99
.taskmaster/docs/research/AIROUM-content-spec-v2.md Normal file
View File

@ -0,0 +1,99 @@
# AIROUM 랜딩 페이지 콘텐츠 설계 문서 (v2)
## 1. 개요
### 1.1. 프로젝트 목표
AI 교육 전문 기업 '에이로움'의 전문성과 가치를 효과적으로 전달하고, 잠재 고객(학생, 학부모, 교사, 기업)의 교육 프로그램 문의 및 신청을 유도하는 것을 목표로 합니다.
### 1.2. 타겟 사용자
- AI 교육에 관심 있는 초·중·고등학생 및 학부모
- AI를 수업에 활용하고자 하는 교사 및 교육 공무원
- 업무 효율성을 높이고 싶은 기업 및 일반 직장인
- AI 교육 전문가로 활동하고 싶은 강사 및 교육 기획자
---
## 2. 페이지 구조 및 콘텐츠
### 2.1. 헤더 (Header)
- **로고**: AIROUM 로고
- **네비게이션 메뉴**:
- 회사소개
- 교육 프로그램
- 문의 및 신청
### 2.2. 메인 비주얼 (Hero Section)
#### 2.2.1. 핵심 메시지
- **배경**: 동적인 AI 관련 이미지 또는 비디오
- **메인 카피**:
> **"생성형 AI 시대, 기술을 넘어 미래를 설계하는 사람을 키웁니다."**
- **서브 카피**:
> "에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합한 AI 교육 전문 연구소입니다. AI 개발자와 교육 전문가가 함께 만든 현장 중심 교육으로 당신의 성장을 돕는 든든한 동반자가 되겠습니다."
#### 2.2.2. 강사 소개 슬라이드
- **형태**: 자동으로 전환되는 슬라이드 형태
- **내용**: [사진] 최아영 대표 | AI 교육 기획 전문가 | "AI로 아이들의 상상력에 날개를 달아줍니다."
### 2.3. 왜 에이로움인가? (Why AIROUM?)
#### 2.3.1. 에이로움이 추구하는 4가지 핵심 가치
> 생성형 AI 시대, 그저 ‘기술만 아는 사람’이 아니라 기술을 바르게 활용하고, 나아가 미래를 설계할 수 있는 사람이 더 중요해졌습니다. AI 교육 전문 연구소 '에이로움'은 그런 사람을 길러내기 위해 다음 4가지 가치를 중심으로 교육을 설계하고 운영합니다.
| 가치 | 핵심 설명 | 상세 내용 |
| :--- | :--- | :--- |
| **1. 실천형 교육** | **"배우고 바로 쓴다"** | 이론 중심 교육을 넘어, 수업, 연수, 실무에 바로 적용할 수 있는 현장 밀착형 교육을 제공합니다. |
| **2. 열린 교육** | **"지역 격차 없는 기회"** | 서울, 수도권에 집중된 교육 기회를 넘어, 지역 거점 센터를 통해 전국 어디서나 고품질 교육을 제공합니다. |
| **3. 융합형 교육** | **"경계를 허무는 연결"** | 진로 설계, 교과 프로젝트, 업무 실무까지 생성형 AI와 자연스럽게 연결하여 유기적으로 엮은 융합 교육을 운영합니다. |
| **4. 검증된 전문성** | **"전문가들의 협업"** | AI 개발자와 교육 전문가가 협업하여 제작한 신뢰도 높은 커리큘럼과 현장에서 다듬어진 전문 강사진이 직접 수업합니다. |
#### 2.3.2. 이런 분들께 필요합니다.
- **AI 교육이 막막한 교사에게는,**
> “수업에 바로 쓸 수 있는 실전 콘텐츠”를 제공합니다.
- **지역에서도 수준 높은 교육을 만들고 싶은 기획자에게는,**
> “지역 거점 운영 모델과 검증된 커리큘럼”이 준비돼 있습니다.
- **AI 강사가 되고 싶은 분에게는,**
> “수업 기획부터 강의 시연까지 경험할 수 있는 실전형 양성과정”을 제공합니다.
- **AI 시대를 살아갈 학생들에게는,**
> 단순히 도구를 익히는 것을 넘어 “AI를 활용해 진로를 설계하고, 자신만의 아이디어를 실현해볼 수 있는 기회”를 제공합니다.
### 2.4. 교육 프로그램 (Programs)
#### 2.4.1. 프로그램 한눈에 보기
| 프로그램명 | 대상 | 한 줄 소개 |
| :--- | :--- | :--- |
| ✔ **AI 진로·직업 프로젝트** | 학생 | 생성형 AI로 흥미와 강점을 탐색하고 진로를 설계하는 수업 |
| ✔ **AI 교과 연계 프로젝트** | 학생 | 국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업 |
| ✔ **AI 윤리 교육** | 모두 | AI 시대에 필요한 디지털 윤리와 책임감을 배우는 시민 교육 |
| ✔ **생성형 AI 실무 활용** | 교사, 일반인, 기업 | 텍스트·이미지·영상 등 생성형 AI 도구를 실습하는 실무 중심 교육 |
| ✔ **교사·공무원 연수** | 교사, 공무원 | 현장 적용 중심의 워크숍형 AI 연수 프로그램 |
| ✔ **AI 금융 활용 교육** | 학생, 일반인 | 생성형 AI로 금융 정보를 탐색하고 자산을 관리하는 실습 교육 |
| ✔ **생성형 AI 강사 양성** | 강사, 교육기획자 | 생성형 AI 교육 전문가로 성장하기 위한 실전 중심 양성 과정 |
#### 2.4.2. 프로그램 상세 소개 (토글 방식)
*(기존과 동일하게 각 프로그램 상세 내용을 토글(details) 형태로 제공)*
### 2.5. 교육 실적 (Track Record)
*(이 섹션에는 주요 파트너사 로고, 언론 보도, 수강생 후기, 강의 실적 데이터 등을 시각적으로 배치합니다.)*
### 2.6. 마무리 (Closing)
> **생성형 AI는 단순한 유행이 아니라 미래 교육의 기본값입니다.**
>
> 에이로움은 교사와 기획자가 자신 있게 수업할 수 있도록, 강사 지망생이 교육 전문가로 성장할 수 있도록, 학생들이 상상력과 비전을 키워갈 수 있도록 현장 중심의 신뢰할 수 있는 교육을 제공합니다.
>
> ✔️ 교육에 변화를 주고 싶다면
> ✔️ 더 실천적인 AI 교육을 찾고 있다면
>
> **에이로움이 그 시작이 되어드리겠습니다.**
### 2.7. 무료 상담 및 교육 문의 (Contact)
- **헤드라인**: "궁금한 점이 있다면, 지금 바로 문의하세요."
- **입력 폼**: 이름, 연락처, 이메일, 문의 내용
- **CTA 버튼**: 문의하기
### 2.8. 푸터 (Footer)
- **사명**: 에이로움 교육연구소
- **대표**: 최아영
- **연락처**: 010-5095-8821
- **주소**: 서울특별시 송파구 오금로 11길 55, 214-88호
- **SNS 링크**: Naver Blog, Instagram

136
.taskmaster/docs/research/AIROUM-content-structure.md Normal file
View File

@ -0,0 +1,136 @@
# AIROUM 랜딩 페이지 콘텐츠 구조화 문서
## 회사 개요
**에이로움**은 **'AI(인공지능)'와 '새로움'의 가치를 융합하여 탄생한 AI 교육 전문 기업**입니다.
**핵심 가치 제안:**
- 초중등 생성형 AI 활용 교육, AI 시대 진로 교육, 금융교육, 올바른 AI 윤리 교육 제공
- 교사 및 기업 등 AI 교육이 필요한 모든 기관을 위한 맞춤형 교육 프로그램 운영
- AI 개발자와 교육 전문가가 협업하여 전문성을 갖춘 교육 콘텐츠 개발
- 자체 강사 양성 프로그램으로 강의의 질 향상
- 지역 거점 센터 운영을 통해 지역에 구애받지 않는 고품질 AI 교육 제공
**미션:** **미래를 준비하는 든든한 동반자**
## 회사 차별화 포인트 (4가지)
1. **실천 중심 교육**: 누구나 바로 적용할 수 있는 교육 - 수업, 연수, 업무에 곧바로 활용 가능한 실천 중심 맞춤형 교육 설계
2. **열린 교육 기회**: 어디에서나 열려 있는 교육 - 지역 거점 센터 운영을 통해 전문성 있는 AI 교육 기회 확대
3. **미래 연결 교육**: 미래를 연결하는 교육 - 진로·교과·현장을 유기적으로 연결하는 융합적 사고 기반 교육 제공
4. **검증된 커리큘럼**: 검증된 커리큘럼과 강사 - 교육 현장 경험과 성과로 증명된 전문가 중심의 콘텐츠 제공
## 교육 프로그램 전체 목록 (7개)
### 1. AI 진로·직업 프로젝트 수업
**캐치프레이즈:** *"AI와 함께 나를 설계하는 시간!"*
- **한 줄 소개**: 생성형 AI 도구를 활용해 자신의 흥미와 강점을 탐색하고, 미래 진로를 주도적으로 설계하는 수업입니다.
- **대상**: 초·중·고·대학생
- **기대효과**:
- 진로에 대한 이해 증진
- AI 기반 정보 탐색 및 활용 능력 향상
- 주도적 진로 설계 경험
### 2. AI 교과 연계 프로젝트 수업
**캐치프레이즈:** *"교과서를 넘어, 생각을 확장하는 AI 수업!"*
- **한 줄 소개**: 국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트로, 교과 관련 주제를 바탕으로 다양한 프로젝트를 완성하는 수업입니다.
- **대상**: 초·중·고 학생
- **기대효과**:
- 교과 내용에 대한 흥미와 몰입도 향상
- 생성형 AI 활용 능력 및 문제 해결력 강화
- 교과 기반 창의적 표현 능력 증진
### 3. AI 윤리 교육
**캐치프레이즈:** *"생성형 AI를 바르고 똑똑하게 사용하기 위한 첫걸음!"*
- **한 줄 소개**: AI 기술의 윤리적 사용과 디지털 시민 의식을 다루는 윤리 감수성 교육입니다.
- **대상**: 학생, 교사, 공무원, 일반 성인
- **기대효과**:
- AI 윤리 의식 향상
- 책임 있는 AI 활용 태도 함양
- 비판적 사고력 강화
### 4. 생성형 AI 실무 활용 교육
**캐치프레이즈:** *"일 잘하는 사람들의 AI 비밀 도구!"*
- **한 줄 소개**: 수업과 행정에 바로 적용 가능한 생성형 AI 활용법으로 현장 중심 실습으로 자신감을 키웁니다.
- **대상**: 교사, 일반인, 직장인, 콘텐츠 제작자 등
- **기대효과**:
- 업무 효율 향상
- 콘텐츠 제작 능력 향상
- AI 도구 실전 활용력 강화
### 5. 교사·공무원 연수 프로그램
**캐치프레이즈:** *"AI 활용법, 빠를수록 든든합니다!"*
- **한 줄 소개**: 수업과 행정에 적용 가능한 AI 활용법을 배우는 실습 중심 연수입니다.
- **대상**: 초·중등 교사, 교육청·지자체 공무원
- **기대효과**:
- 수업 활용력 향상
- AI 기반 교육 콘텐츠 개발 역량 강화
### 6. AI 금융 활용 교육
**캐치프레이즈:** *"금융 이해력에 생성형 AI를 더하면, 누구나 똑똑한 소비자가 됩니다."*
- **한 줄 소개**: 생성형 AI를 활용해 금융 개념을 이해하고, 예산 계획·소비 분석·금융 정보 탐색 등을 실습하는 교육입니다.
- **대상**: 초·중·고 학생, 금융교육이 필요한 기관, 금융 교육 관심 있는 일반인
- **기대효과**:
- AI 도구를 활용한 정보 탐색 및 데이터 해석 경험
- 실생활 중심 금융 리터러시 함양
### 7. 생성형 AI 강사 양성 과정
**캐치프레이즈:** *"당신이 AI 교육의 기준이 될 수 있습니다."*
- **한 줄 소개**: 생성형 AI 교육을 직접 설계·운영할 수 있도록 기획부터 시연까지 경험하는 실전 중심 과정입니다.
- **대상**: 강사, 교육기획자, AI 교육에 관심 있는 일반인
- **기대효과**:
- AI 기반 수업 기획 및 시연 역량 강화
- 강의 콘텐츠 제작 능력 향상
- 교육 전문가로서의 커리어 확장
## 타겟별 프로그램 분류
### 학생 대상
- AI 진로·직업 프로젝트 수업
- AI 교과 연계 프로젝트 수업
- AI 금융 활용 교육
- AI 윤리 교육
### 교사/공무원 대상
- 교사·공무원 연수 프로그램
- 생성형 AI 실무 활용 교육
- AI 윤리 교육
### 일반인/기업 대상
- 생성형 AI 실무 활용 교육
- 생성형 AI 강사 양성 과정
- AI 윤리 교육
## 웹사이트 구조 제안 (네비게이션)
1. **회사소개** - 에이로움 소개 및 차별화 포인트
2. **교육 프로그램** - 7개 프로그램 상세 정보 (타겟별 분류)
3. **교육 실적** - 파트너사, 교육 현황, 고객 후기
4. **문의 및 신청** - 상담 신청 및 연락처
## Hero 섹션 콘텐츠
**메인 헤드라인:** "AI로 여는 새로운 교육의 시대, 에이로움이 만듭니다."
**서브 헤드라인:** "AI 개발자와 교육 전문가가 설계한 실천 중심 교육, 당신의 미래를 지금 준비하세요."
## 콜투액션 (CTA) 메시지
**메인 CTA:** "무료 상담 및 교육 문의하기"
**보조 CTA:** "모든 교육 프로그램 보기"
**마감임박 CTA:** "AI 시대, 더 이상 망설일 이유가 없습니다."
## 연락처 정보
- **블로그**: https://blog.naver.com/ay8812
- **인스타그램**: instagram.com/aiyi_choi
## 브랜드 색상 제안
- **메인 컬러**: 딥 블루(#0A2A5B) - 신뢰성, 전문성
- **포인트 컬러**: 사이버 블루(#00D1FF) - 혁신, 기술
- **보조 컬러**: 화이트(#FFFFFF) - 깔끔함, 현대성
## 키워드 및 SEO 요소
**주요 키워드**: AI 교육, 생성형 AI, 진로 교육, AI 윤리, 교사 연수, AI 활용 교육, 인공지능 교육, 미래 교육
**메타 설명**: "AI 시대를 선도하는 에이로움의 전문 교육 프로그램. 학생 진로부터 교사 연수, 기업 교육까지 맞춤형 AI 교육을 제공합니다."

113
.taskmaster/docs/research/AIROUM-description.md Normal file
View File

@ -0,0 +1,113 @@
네비게이션 바 구성 : **회사소개 / 교육 프로그램 / 교육 실적 / 문의 및 신청**
## **“에이로움”**
## **회사 개요**
**에이로움**은 **'AI(인공지능)'와 '새로움'의 가치를 융합하여 탄생한 AI 교육 전문 기업**입니다.
초중등 **생성형 AI 활용 교육, AI 시대 진로 교육, 금융교육, 그리고 올바른 AI 윤리 교육**을 제공하며, 교사 및 기업 등 AI 교육이 필요한 모든 기관을 위한 맞춤형 교육 프로그램을 운영합니다.
저희는 **AI 개발자와 교육 전문가가 협업**하여 전문성을 갖춘 교육 콘텐츠를 개발하고, **자체 강사 양성 프로그램**으로 강의의 질을 높이는 데 주력하고 있습니다. 특히, **지역 거점 센터 운영**을 통해 지역에 구애받지 않고 동일한 수준의 고품질 AI 교육을 제공하여, 새로운 AI 시대를 주도할 수 있는 역량을 갖추고 미래를 준비할 수 있도록 돕습니다. 에이로움은 생성형 AI를 이해하고 활용함으로써 학생들의 상상력과 비전을 강화하고, AI 시대에 발맞춰 진로를 확장하는 데 기여하며
**미래를 준비하는 든든한 동반자**가 되겠습니다.
## **회사 소개**
| 1\. 누구나 바로 적용할 수 있는 교육 수업, 연수, 업무에 곧바로 활용 가능한 실천 중심 맞춤형 교육 설계 | 2\. 어디에서나 열려 있는 교육 지역 거점 센터 운영을 통해 전문성 있는 AI 교육 기회 확대 |
| :--------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- |
| **3\. 미래를 연결하는 교육** 진로·교과·현장을 유기적으로 연결하는 **융합적 사고 기반 교육 제공** | **4\. 검증된 커리큘럼과 강사** 교육 현장 경험과 성과로 증명된 **전문가 중심의 콘텐츠 제공** |
##
## **교육 프로그램(요약)**
| 프로그램명 | 설명 (한 줄 소개) |
| --------------------------------- | ------------------------------------------------------------------------- |
| ✔ **AI 진로·직업 프로젝트 수업** | 학생 대상, 생성형 AI를 활용해 흥미와 강점을 탐색하고 진로를 설계하는 수업 |
| ✔ **AI 교과 연계 프로젝트 수업** | 국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업 |
| ✔ **AI 윤리 교육** | 모든 연령 대상, AI 시대에 필요한 디지털 윤리와 책임감 교육 |
| ✔ **생성형 AI 실무 활용 교육** | 텍스트·이미지·영상 등 생성형 AI 도구 실습 중심 교육 |
| ✔ **교사·공무원 연수 프로그램** | 현장 적용 중심의 워크숍형 AI 연수 프로그램 |
| ✔ **AI 금융 활용 교육** | 생성형 AI를 활용해 금융 정보 탐색·자산관리 실습 교육 |
| ✔ **생성형 AI 강사 양성 과정** | 생성형 AI 교육 전문성 강화를 위한 강사 양성 과정 |
###
## **교육 프로그램(상세)**
### **1\. AI 진로·직업 프로젝트 수업**
*“AI와 함께 나를 설계하는 시간\!”*
* **강의 한줄 소개**: 생성형 AI 도구를 활용해 자신의 흥미와 강점을 탐색하고, 미래 진로를 주도적으로 설계하는 수업입니다.
* **대상**: 초·중·고·대학생
* **기대효과**: 진로에 대한 이해 증진,AI 기반 정보 탐색 및 활용 능력 향상, 주도적 진로 설계 경험
---
###
### **2\. AI 교과 연계 수업**
*“교과서를 넘어, 생각을 확장하는 AI 수업\!”*
* **강의 한줄 소개:** 국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트로, 교과 관련 주제를 바탕으로 다양한 프로젝트를 완성하는 수업입니다..
* **대상**: 초·중·고 학생
* **기대효과**:교과 내용에 대한 흥미와 몰입도 향상, 생성형 AI 활용 능력 및 문제 해결력 강화,
교과 기반 창의적 표현 능력 증진
---
### **3\. AI 윤리 교육**
*“생성형 AI를 바르고 똑똑하게 사용하기 위한 첫걸음\!”*
* **강의 한줄 소개**: AI 기술의 윤리적 사용과 디지털 시민 의식을 다루는 윤리 감수성 교육입니다.
* **대상**: 학생, 교사, 공무원, 일반 성인
* **기대효과**: AI 윤리 의식 향상, 책임 있는 AI 활용 태도 함양, 비판적 사고력 강화
---
### **4\. 생성형 AI 실무 활용 교육**
*“일 잘하는 사람들의 AI 비밀 도구\!”*
* **강의 한줄 소개**:수업과 행정에 바로 적용 가능한 생성형 AI 활용법으로 현장 중심 실습으로 자신감을 키웁니다.
* **대상**: 교사, 일반인, 직장인, 콘텐츠 제작자 등
* **기대효과**: 업무 효율 향상, 콘텐츠 제작 능력 향상, AI 도구 실전 활용력 강화
---
### **5\. 교사·공무원 연수 프로그램**
*“AI 활용법, 빠를수록 든든합니다\!”*
* **강의 한줄 소개**: 수업과 행정에 적용 가능한 AI 활용법을 배우는 실습 중심 연수입니다.
* **대상**: 초·중등 교사, 교육청·지자체 공무원
* **기대효과**: 수업 활용력 향상, AI 기반 교육 콘텐츠 개발 역량 강화
---
### **6\. AI 강사 양성 과정**
*“금융 이해력에 생성형 AI를 더하면, 누구나 똑똑한 소비자가 됩니다.”*
* **강의 한줄 소개**: 생성형 AI를 활용해 금융 개념을 이해하고, 예산 계획·소비 분석·금융 정보 탐색 등을 실습하는 교육입니다.
* **대상**: 초·중·고 학생, 금융교육이 필요한 기관, 금융 교육 관심 있는 일반
* **기대효과**: AI 도구를 활용한 정보 탐색 및 데이터 해석 경험, 실생활 중심 금융 리터러시 함양
---
### **7\. AI 강사 양성 과정**
*“당신이 AI 교육의 기준이 될 수 있습니다.”*
* **강의 한줄 소개**: 생성형 AI 교육을 직접 설계·운영할 수 있도록 기획부터 시연까지 경험하는 실전 중심 과정입니다.
* **대상**: 강사, 교육기획자, AI 교육에 관심 있는 일반인
* **기대효과**: AI 기반 수업 기획 및 시연 역량 강화, 강의 콘텐츠 제작 능력 향상, 교육 전문가로서의 커리어 확장
blog: https://blog.naver.com/ay8812
Instagram: instagram.com/aiyi\_choi

154
.taskmaster/docs/research/AIROUM-landing-page-design-spec.md Normal file
View 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 교육 전문성 강화를 위한 강사 양성 과정 |

230
.taskmaster/docs/research/tech-stack.md Normal file
View File

@ -0,0 +1,230 @@
# AIROUM 랜딩 페이지 개발을 위한 기술 스택 조사 보고서
## 1. 요구사항 분석
AIROUM 회사 소개 문서를 기반으로 한 핵심 요구사항은 다음과 같습니다[1]:
**핵심 기능 요구사항:**
- 회사소개, 교육 프로그램, 교육 실적, 문의 및 신청의 4개 주요 섹션으로 구성된 네비게이션
- 7개 교육 프로그램에 대한 상세 정보 표시
- 회사의 4가지 핵심 가치 소개
- 블로그 및 인스타그램 연결 기능
**비기능적 요구사항:**
- **빠른 로딩 속도**: 월 100명 미만의 소규모 트래픽에 최적화
- **반응형 디자인**: 다양한 디바이스 지원
- **최소한의 서버 로직**: 정적 콘텐츠 중심의 단순한 구조
- **쉬운 유지보수**: 자체 서버 호스팅 환경에서 관리 용이성
- **빠른 개발 및 배포**: 프로토타입에서 운영까지 신속한 전환
## 2. 추천 기술 스택
### **Frontend: 순수 HTML/CSS + 최소한의 JavaScript**
소규모 랜딩 페이지 특성상 **순수 HTML/CSS 접근법**을 강력히 추천합니다[2][3][4].
**CSS 프레임워크 선택에 대한 비교:**
- **Tailwind CSS**: 유틸리티 우선 접근법으로 완전한 커스터마이징이 가능하지만, 학습 곡선이 있고 HTML이 복잡해질 수 있습니다[5][6][7][8]
- **Bootstrap**: 빠른 프로토타이핑에 적합하고 초보자 친화적이지만, 동일한 디자인 패턴으로 인한 제한이 있습니다[6][7][9]
**추천 접근법**: 순수 CSS로 시작하여 필요시 나중에 프레임워크 추가. 이는 의존성을 최소화하고 로딩 속도를 최적화합니다[10][2].
### **Backend: Flask (Python 마이크로 프레임워크)**
**Flask를 선택하는 이유:**
- **학습 곡선이 낮음**: 최소 5줄의 코드로 웹 애플리케이션 시작 가능[11][12][13][14]
- **Python 친화성**: 귀하의 Python 배경지식을 직접 활용 가능
- **유연성**: 필요한 기능만 추가하는 미니멀한 접근[15][16][17]
**Django 대신 Flask를 선택하는 근거:**
Django는 대규모 애플리케이션에 적합한 "배터리 포함" 프레임워크이지만, 단순한 랜딩 페이지에는 과도한 복잡성을 가집니다[12][18][15]. Flask는 **"마이크로 프레임워크"**로 랜딩 페이지 목적에 완벽하게 부합합니다[11][17].
**FastAPI 대신 Flask를 선택하는 이유:**
FastAPI는 API 구축에 최적화되어 있지만, 전통적인 웹 페이지 렌더링에서는 Flask가 더 성숙하고 문서화가 잘 되어 있습니다[16][19].
### **배포: 자체 서버 + Nginx + Gunicorn**
자체 서버 호스팅 환경을 고려하여 다음 구성을 추천합니다:
**배포 스택 구성:**
- **Nginx**: 리버스 프록시 및 정적 파일 서빙[20][21]
- **Gunicorn**: 프로덕션용 WSGI 서버[22][23][20]
- **Flask**: 애플리케이션 로직
**클라우드 플랫폼 대안 (참고용):**
월 100명 미만의 트래픽이라면 **Render** (무료 티어)[24][23]나 **Vercel** [25][26] 같은 플랫폼도 고려할 수 있지만, 자체 서버 선호도를 고려했을 때 Nginx + Gunicorn 구성이 최적입니다.
## 3. 기술 선택의 명확한 근거
### **Python 기반 선택의 장점:**
1. **기존 역량 활용**: Python/HTML 친숙도를 최대한 활용[17][27]
2. **빠른 개발**: Flask의 간단한 구조로 신속한 프로토타이핑 가능[13][14]
3. **확장성**: 향후 기능 추가 시 Django나 다른 Python 프레임워크로 마이그레이션 용이[19]
### **React/Vue 대신 서버 사이드 렌더링을 선택하는 이유:**
- **SEO 최적화**: 교육 기업의 온라인 가시성에 중요[2][4]
- **초기 로딩 속도**: 클라이언트 사이드 JavaScript 번들링 불필요
- **학습 부담 감소**: 새로운 프레임워크 학습 시간 절약
- **서버 자원 효율성**: 월 100명 미만 트래픽에 과도한 클라이언트 사이드 처리 불필요
### **정적 사이트 생성기 대신 Flask를 선택하는 이유:**
- **동적 기능 확장성**: 향후 문의 폼, 교육 신청 시스템 추가 가능성
- **Python 생태계 활용**: 데이터 처리, 이메일 발송 등 부가 기능 개발 용이
- **실시간 업데이트**: 교육 프로그램 정보 실시간 수정 가능
## 4. 시작을 위한 최소 실행 가이드
### **프로젝트 초기 설정:**
```bash
# 프로젝트 디렉토리 생성
mkdir airoum-landing
cd airoum-landing
# 가상환경 생성 및 활성화
python3 -m venv venv
source venv/bin/activate # Linux/Mac
# venv\Scripts\activate # Windows
# Flask 설치
pip install Flask gunicorn
pip freeze > requirements.txt
```
### **기본 폴더 구조:**
```
airoum-landing/
├── app.py # Flask 메인 애플리케이션
├── requirements.txt # Python 의존성
├── templates/ # HTML 템플릿
│ └── index.html
└── static/ # 정적 파일 (CSS, JS, 이미지)
└── style.css
```
### **핵심 코드 스니펫:**
**app.py (Flask 애플리케이션):**
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True)
```
**templates/index.html (기본 템플릿):**
```html
AIROUM - AI 교육 전문 기업
AIROUM
회사소개
교육 프로그램
교육 실적
문의 및 신청
AI와 새로움의 가치를 융합한 AI 교육 전문 기업
초중등 생성형 AI 활용 교육, AI 시대 진로 교육, 금융교육, 그리고 올바른 AI 윤리 교육을 제공합니다.
```
### **로컬 개발 서버 실행:**
```bash
# 개발 모드 실행
flask run --host=0.0.0.0 --port=5000 --debug
# 또는 Python으로 직접 실행
python app.py
```
### **프로덕션 배포 (자체 서버):**
```bash
# Gunicorn으로 프로덕션 서버 실행
gunicorn -w 2 -b 0.0.0.0:5000 app:app
```
이 구성은 귀하의 Python 배경지식을 최대한 활용하면서도, 확장 가능하고 유지보수가 쉬운 랜딩 페이지 개발을 가능하게 합니다. 초기 개발에서 프로덕션 배포까지 단계적으로 진행할 수 있으며, 향후 AIROUM의 비즈니스 성장에 맞춰 기능을 점진적으로 확장할 수 있는 탄탄한 기반을 제공합니다.
[1] https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/62302994/1dc5ada7-52d9-46a8-9b43-26994cab7f94/AIROUM-description.md
[2] https://landingi.com/landing-page/41-best-practices/
[3] https://clickdimensions.com/blogs/design-best-practices-for-landing-pages-fonts-sizes-and-more/
[4] https://www.leadfeeder.com/blog/landing-pages-convert/
[5] https://indiespark.webflow.io/blog/tailwind-css-vs-bootstrap-which-is-better-for-landing-pages
[6] https://daily.dev/blog/bootstrap-vs-tailwindcss
[7] https://www.linkedin.com/pulse/tailwind-css-vs-bootstrap-which-one-choose-2025-0uxec
[8] https://www.contentful.com/blog/tailwind-bootstrap-comparing-css-frameworks/
[9] https://strapi.io/blog/bootstrap-vs-tailwind-css-a-comparison-of-top-css-frameworks
[10] https://dev.to/vparul/choosing-the-right-css-approach-tailwind-css-vs-bootstrap-vs-vanilla-css-1l6g
[11] https://www.reddit.com/r/learnprogramming/comments/ucluil/what_is_easiest_python_webdev_framework/
[12] https://www.kdnuggets.com/7-python-web-development-frameworks
[13] https://flask.palletsprojects.com/en/stable/quickstart/
[14] https://dev.to/kouul/building-a-minimal-flask-application-290
[15] https://www.netguru.com/blog/python-frameworks-comparison
[16] https://blog.jetbrains.com/pycharm/2025/02/django-flask-fastapi/
[17] https://www.appypie.com/blog/python-web-development
[18] https://www.browserstack.com/guide/top-python-web-development-frameworks
[19] https://www.netclues.com/blog/python-software-development-2025-guide
[20] https://www.e-tinkers.com/2018/08/how-to-properly-host-flask-application-with-nginx-and-guincorn/
[21] https://www.digitalocean.com/community/tutorials/how-to-serve-flask-applications-with-gunicorn-and-nginx-on-ubuntu-22-04
[22] https://www.koyeb.com/docs/deploy/flask
[23] https://render.com/docs/deploy-flask
[24] https://datasturdy.com/simple-flask-app-hosting-with-render-a-complete-deployment-guide/
[25] https://uideck.com/blog/free-static-website-hosting-platforms
[26] https://www.webstacks.com/blog/best-enterprise-web-hosting-platforms
[27] https://www.wedowebapps.com/python-for-web-development/
[28] https://formbold.com/blog/free-static-website-hosting
[29] https://dev.to/vinishbhaskar/9-best-free-static-website-hosting-7ki
[30] https://buttercms.com/blog/5-best-static-website-hosting-services/
[31] https://www.youtube.com/watch?v=Bd-pAavW-gs
[32] https://bugfender.com/blog/top-static-site-generators/
[33] https://www.creolestudios.com/top-python-web-frameworks/
[34] https://northflank.com/blog/preview-environment-platforms
[35] https://www.youtube.com/watch?v=ZiXkYiI7LoI
[36] https://flask.palletsprojects.com/en/stable/tutorial/deploy/
[37] https://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp
[38] https://uideck.com
[39] https://templatemo.com/tag/landing-page
[40] https://aglowiditsolutions.com/blog/python-best-practices/
[41] https://www.youtube.com/watch?v=Bx_jHawKn5A
[42] https://templatemo.com
[43] https://htmlrev.com
[44] https://www.netguru.com/blog/web-development-best-practices
[45] https://realpython.com/flask-by-example-part-1-project-setup/
[46] https://elements.envato.com/web-templates/landing-page-templates
[47] https://www.moesif.com/blog/technical/api-development/Building-RESTful-API-with-Flask/
[48] https://blog.magezon.com/how-to-make-a-good-landing-page-in-html-ecm/
[49] https://stackoverflow.com/questions/65746422/what-is-the-correct-way-to-run-a-flask-application-with-nginx-and-uwsgi-in-a-rev
[50] https://tedboy.github.io/flask/quickstart/quickstart1.html
[51] https://www.klientboost.com/landing-pages/landing-page-best-practices/
[52] https://www.reddit.com/r/flask/comments/urxbji/how_to_deploy_flask_app_using_nginx/
[53] https://tyoon9781.tistory.com/entry/Flask-tutorial
[54] https://stackoverflow.com/questions/75452696/issues-getting-nginx-to-serve-my-flask-app
[55] https://code.visualstudio.com/docs/python/tutorial-flask
[56] https://blog.hubspot.com/website/create-html-landing-page
[57] https://www.youtube.com/watch?v=KWIIPKbdxD0
[58] https://tyoon9781.tistory.com/entry/Flask-Quickstart-1
[59] https://www.reddit.com/r/Frontend/comments/k7xk38/is_there_an_industry_standard_in_how_you_need_to/

0
.taskmaster/docs/tech-stack.md
View File

151
.taskmaster/docs/technical-design-document.md Normal file
View File

@ -0,0 +1,151 @@
# AIROUM 랜딩 페이지 기술 설계서 (v2.0 - Minimalist)
## 1. 프로젝트 목표 및 핵심 원칙
본 문서는 AIROUM 랜딩 페이지의 기술 설계를 정의합니다. v2.0 설계의 핵심 목표는 **'문의하기'라는 단 하나의 기능에 집중**하여, 가장 빠르고 안정적으로 사용자의 문의를 접수하는 것입니다. 모든 부가 기능(회원가입, 관리자 페이지 등)은 의도적으로 배제하여 복잡성을 최소화합니다.
* **단일 책임 원칙 (Single Responsibility):** 이 시스템의 유일한 책임은 '문의 데이터 수신 및 저장'입니다.
* **최소주의 아키텍처 (Minimalist Architecture):** 가장 필수적인 기술 요소만 사용하여 가볍고 빠른 시스템을 구축합니다.
* **사용자 경험 최우선 (UX First):** 기능이 단순한 만큼, 사용자의 첫인상을 결정하는 랜딩 페이지의 UI/UX와 성능을 최우선으로 고려합니다.
## 2. 시스템 아키텍처 (Simplified Architecture)
### 2.1. 아키텍처 다이어그램
```mermaid
graph TD
subgraph "사용자"
A[사용자 브라우저]
end
subgraph "인프라 (자체 서버)"
B[Nginx] --> D{Flask App}
D --> E[SQLite DB]
end
A -- "Page Request" --> B
B -- "Static Files" --> A
B -- "Proxy API Request" --> D
A -- "Submit Inquiry" --> D
D -- "Save Data" --> E
style A fill:#f9f,stroke:#333,stroke-width:2px
style B fill:#ccf,stroke:#333,stroke-width:2px
style D fill:#cfc,stroke:#333,stroke-width:2px
style E fill:#fcf,stroke:#333,stroke-width:2px
```
### 2.2. 아키텍처 설명
* **Nginx (웹 서버):** 모든 외부 요청의 진입점입니다. HTML, CSS, JavaScript, 이미지와 같은 정적 파일은 Nginx가 직접 처리하여 최고의 속도를 보장합니다. API 요청(`POST /api/inquiry`)만 Flask 애플리케이션으로 전달합니다.
* **Flask App (백엔드):** 오직 하나의 역할, 즉 `POST /api/inquiry` 요청을 받아 유효성을 검사하고 데이터베이스에 저장하는 역할만 수행합니다.
* **SQLite (데이터베이스):** 문의 내용을 저장하기 위한 단일 파일 기반 데이터베이스입니다. 별도의 설정이 필요 없어 배포가 매우 간단하며, 소규모 데이터 처리에 적합합니다.
## 3. 데이터베이스 설계 (Single Table Design)
시스템의 유일한 데이터 모델은 '문의(Inquiry)'입니다.
### 3.1. `INQUIRIES` 테이블 스키마
| 컬럼명 | 데이터 타입 | 제약 조건 | 인덱스 | 설명 |
| ------------ | -------------- | ------------------------------ | ------ | --------------------- |
| `id` | `INTEGER` | `PRIMARY KEY AUTOINCREMENT` | PK | 고유 식별자 |
| `name` | `VARCHAR(50)` | `NOT NULL` | | 문의자 이름 |
| `email` | `VARCHAR(100)` | `NOT NULL` | INDEX | 문의자 이메일 |
| `phone` | `VARCHAR(20)` | `NULL` | | 문의자 연락처 (선택) |
| `message` | `TEXT` | `NOT NULL` | | 문의 내용 |
| `created_at` | `DATETIME` | `NOT NULL, DEFAULT CURRENT_TIMESTAMP` | | 문의 접수 일시 |
**선택 이유:**
`USERS`, `COURSES` 등 모든 부가 테이블을 제거하고 `INQUIRIES` 테이블만 남겨 데이터 모델을 극도로 단순화했습니다. 이는 시스템의 복잡성을 줄이고 유지보수 비용을 최소화합니다.
## 4. API 명세 (Single Endpoint Specification)
시스템에는 단 하나의 API 엔드포인트만 존재합니다.
### **문의 등록 API**
* **Endpoint:** `POST /api/inquiry`
* **Description:** 사용자의 문의를 시스템에 등록합니다.
* **Request Body (JSON):**
```json
{
"name": "김에이",
"email": "airoum.kim@example.com",
"phone": "010-1234-5678",
"message": "AI 윤리 교육에 대해 더 자세히 알고 싶습니다."
}
```
* **Success Response (201 Created):**
```json
{
"status": "success",
"message": "문의가 성공적으로 접수되었습니다."
}
```
* **Error Response (400 Bad Request):**
```json
{
"status": "error",
"message": "입력값을 확인해주세요.",
"errors": {
"email": "올바른 이메일 형식이 아닙니다."
}
}
```
## 5. 프론트엔드 구현 전략 (UI/UX & Performance Focus)
기능이 최소화된 만큼, 랜딩 페이지 자체의 완성도가 프로젝트의 성패를 좌우합니다.
### 5.1. 핵심 목표
* **빠른 로딩 속도:** 사용자가 페이지를 이탈하지 않도록 2초 이내에 주요 콘텐츠가 렌더링되는 것을 목표로 합니다.
* **명확한 CTA (Call to Action):** 사용자가 '문의하기' 버튼을 쉽게 찾고 클릭할 수 있도록 디자인합니다.
* **직관적인 UI/UX:** 불필요한 정보를 제거하고, AIROUM의 핵심 가치와 교육 프로그램을 명확하게 전달합니다.
### 5.2. 성능 최적화 전략
* **이미지 최적화:** 모든 이미지는 WebP 포맷으로 변환하고, `lazy loading`을 적용하여 초기 로딩 속도를 개선합니다.
* **CSS/JS 최소화:** 순수 CSS와 최소한의 Vanilla JS를 사용합니다. CSS는 Critical CSS를 인라인으로 삽입하고, 나머지는 비동기적으로 로드합니다. JavaScript는 `defer` 속성을 사용하여 HTML 파싱을 방해하지 않도록 합니다.
* **브라우저 캐싱 활용:** Nginx 설정을 통해 정적 파일에 대해 긴 만료 시간(long expiry dates)을 설정하여 반복 방문 시 로딩 속도를 높입니다.
### 5.3. '문의하기' 폼 UX 전략
* **입력 필드 최소화:** `이름`, `이메일`, `연락처(선택)`, `문의 내용` 필드를 배치하여 사용자 피로도를 줄입니다.
* **실시간 유효성 검사:** 이메일 형식 등을 실시간으로 검사하여 사용자에게 즉각적인 피드백을 제공합니다.
* **명확한 피드백:** '제출' 버튼 클릭 시, 로딩 상태를 명확히 보여주고, 성공 또는 실패 메시지를 모달이나 토스트 메시지로 명확하게 표시합니다.
## 6. 백엔드 및 인프라 설계 (Simplified)
### 6.1. 디렉토리 구조
`tech-stack.md`에 제안된 가장 단순한 구조를 채택합니다.
```
airoum-landing/
├── app.py # 단일 파일 Flask 애플리케이션
├── requirements.txt # 의존성 (Flask, Gunicorn)
├── templates/
│ └── index.html # 메인 랜딩 페이지
└── static/
└── css/
└── style.css # 스타일시트
```
### 6.2. 배포 전략
* **인프라:** 자체 서버 + Nginx + Gunicorn
* **프로세스:**
1. GitHub에 코드를 Push합니다.
2. 서버에서 Git Pull을 실행합니다.
3. `pip install -r requirements.txt`로 의존성을 업데이트합니다.
4. Gunicorn 서비스를 재시작하여 변경 사항을 적용합니다.
* (주: CI/CD 파이프라인은 초기 단계에서 오버헤드가 될 수 있으므로, 수동 배포로 단순화합니다.)
## 7. 비기능적 요구사항 (Minimal)
* **로깅:** Gunicorn과 Nginx의 기본 access/error 로그를 파일로 기록합니다. Flask 애플리케이션에서는 에러 발생 시에만 `stderr`로 로그를 출력합니다.
* **에러 핸들링:**
* `404 Not Found`: Nginx 단에서 처리하거나, Flask에서 간단한 "페이지 없음" 메시지를 반환합니다.
* `500 Internal Server Error`: "서버 오류" 메시지를 반환하고, 상세 내용은 로그에만 기록합니다.