tst-claude-code-samples/.taskmaster/docs/research/tech-stack.md

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. 시작을 위한 최소 실행 가이드

프로젝트 초기 설정:

# 프로젝트 디렉토리 생성
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 애플리케이션):

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 (기본 템플릿):

    
    
    AIROUM - AI 교육 전문 기업
    


    
        
            AIROUM
            
                회사소개
                교육 프로그램
                교육 실적
                문의 및 신청
            
        
    
    
    
        
            AI와 새로움의 가치를 융합한 AI 교육 전문 기업
            초중등 생성형 AI 활용 교육, AI 시대 진로 교육, 금융교육, 그리고 올바른 AI 윤리 교육을 제공합니다.
        
        
    

로컬 개발 서버 실행:

# 개발 모드 실행
flask run --host=0.0.0.0 --port=5000 --debug

# 또는 Python으로 직접 실행
python app.py

프로덕션 배포 (자체 서버):

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