# 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/