generated from Paul.Kim/tpl-superclaude
Paul.Kim
90beecd91e
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.
230 lines
11 KiB
Markdown
230 lines
11 KiB
Markdown
# 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/ |