학교 과제를 HTML로 혁신한 이야기
AI와 함께 만든 인터랙티브 학습 자료 프로젝트
최근 학교 공부하기가 쉽지 않아서 이렇게 활용하고 공부하는 꿀팁 공유하겠습니다
=====================================
프로젝트 시작 스토리
배경: 평범한 MBA 과제에서 시작된 혁신 - 시간 절약하기
학교 과정을 시작하면서 마케팅, 전략, 디지털 비즈니스, IT 서비스 등 4개 과목을 수강하게 되었습니다. 각 과목마다 주차별 과제와 토론, 발표가 많이 있는데 영어 교재등 PPT나 Word 문서로 제출해야 하고 시간이 많이 필요합니다.
"과제를 어떻게 쉽게 이해하고 분석하고 빨리 제출할 수 있을까?"
이 질문에서 프로젝트가 시작되었습니다. Claude AI와 함께 모든 과제를 인터랙티브 HTML 웹페이지로 제작하기로 결정했습니다.
목표 설정:
1. 모든 디바이스에서 완벽하게 작동하는 반응형 디자인
2. 글로벌 MBA 과정을 고려한 다국어 지원 (한국어/중국어/영어)
3. 데이터 시각화와 인터랙티브 차트
4. 외부 의존성 없이 독립 실행 가능한 단일 HTML 파일
5. 전문적이면서도 시각적으로 매력적인 디자인
=====================================
프로젝트 구현 방식
1. 프로젝트 구조 설계
hanyangmba_202509/
├── 01_Marketing_Management_A/
│ ├── week3_discussion/
│ │ ├── bcg_matrix_guide.html
│ │ ├── ge_matrix_guide.html
│ │ ├── porter_5_forces_analysis.html
│ │ └── starbucks_strategy_presentation.html
│ └── week4_discussion/
│ └── Taco_Bell_Korea_Analysis_Korean_Final_vr.2.html
├── 02_Business_Strategy/
│ ├── strategic_theories_analysis.html
│ └── all_strategic_theories.html
├── 03_Digital_Business_Model_and_New_Business_Development/
│ └── 01_assignments/
└── 04_Smart_IT_Service/
└── week4_ai_dx_strategy_analysis.html
2. 기술 스택 선정
핵심 원칙: Zero Dependencies
모든 HTML 파일은 완전히 독립적으로 작동하도록 설계했습니다.
사용된 기술:
- HTML5: 시맨틱 마크업과 구조화
- CSS3: 그라디언트, 애니메이션, Grid/Flexbox 레이아웃
- Vanilla JavaScript: 프레임워크 없이 순수 JS로 구현
- SVG: 벡터 그래픽과 인터랙티브 차트
- CSS Variables: 일관된 디자인 시스템
=====================================
환경 설정 가이드
1. 프로젝트 초기 설정
저장소 클론:
git clone https://github.com/bellaliv423/hanyangmba_202509.git
cd hanyangmba_202509
Python 가 상환경 설정 (Windows):
python -m venv venv
venv\Scripts\activate
Mac/Linux:
python -m venv venv
source venv/bin/activate
Python 패키지 설치:
pip install -r requirements.txt
Node.js 패키지 설치 (선택사항):
npm init -y
npm install @heroui/alert
2. 필수 라이브러리
Python 패키지 (requirements.txt):
데이터 처리 & 분석:
- pandas==2.3.2
- numpy==2.3.2
- plotly==5.24.1
웹 스크래핑 (시장 데이터 수집):
- requests==2.32.4
- beautifulsoup4==4.12.3
- selenium==4.25.0
AI/ML (콘텐츠 생성):
- openai==1.55.3
- langchain==0.3.9
시각화:
- matplotlib==3.9.2
- seaborn==0.13.2
=====================================
HTML 파일 제작 프로세스
1. Claude와의 협업 워크플로우
Step 1: 과제 요구사항 분석
프롬프트 예시:
"Marketing Management 3주차 과제입니다.
BCG Matrix를 설명하는 인터랙티브 HTML 페이지를 만들어주세요.
요구사항:
- 한국어/중국어/영어 3개 언어 지원
- 꼭 16:9로 사이즈 비율을 준수하고 만들어주세요
- 실제 기업 사례 포함
- 인터랙티브 매트릭스 시각화
- 2025년 최신 데이터 반영"
Step 2: 구조 설계
데이터 구조를 먼저 정의하고 시작
Step 3: 스타일링
CSS 변수를 활용한 일관된 디자인 시스템 구축
2. 핵심 기능 구현 패턴
다국어 지원 시스템:
- 각 언어별 번역 객체 생성
- data-i18n 속성으로 요소 식별
- 언어 전환 함수로 동적 변경
인터랙티브 차트 구현:
- SVG 기반 버블 차트
- 호버 이벤트로 상세 정보 표시
- 애니메이션 효과 추가
=====================================
실제 구현 사례
사례 1: GE Matrix 계량화 차트
실제 2025년 시장 데이터로 GE Matrix를 구현했습니다. Apple iPhone, Tesla EV 등 실제 기업 데이터를 시장 매력도와 경쟁력 축으로 시각화했습니다.
사례 2: Porter's 5 Forces 인터랙티브 분석
산업별 실시간 분석 시스템을 구축했습니다. 스마트폰, 자동차 등 다양한 산업의 5가지 경쟁요인을 레이더 차트로 표현했습니다.
사례 3: 타코벨 한국 시장 분석
16:9 프레젠테이션 형식으로 타코벨의 한국 시장 진출 전략을 분석했습니다. 시장 규모, 경쟁 분석, 현지화 전략 등을 시각화했습니다.
=====================================
프롬프트 엔지니어링 가이드
효과적인 프롬프트 작성법:
1. 구체적인 요구사항 명시
좋은 예시: 5개 산업 선택 가능한 드롭다운, 1-10점 시각화, 레이더 차트 표현, 2025년 실제 데이터, 한국어/영어 토글
나쁜 예시: Porter 분석 페이지 만들어주세요
2. 데이터 구조 먼저 정의
JSON 형식으로 데이터 구조를 명확히 제시
3. 스타일 가이드 제공
그라디언트 배경, 카드형 레이아웃, 호버 효과, 모바일 반응형 등 디자인 요구사항 명시
Claude와의 반복적 개선:
1차: 기본 구조 생성
2차: 인터랙티브 기능 추가
3차: 실제 데이터 통합
4차: 다국어 지원 추가
5차: 성능 최적화 및 모바일 대응
=====================================
성과 및 학습 포인트
프로젝트 성과:
1. 10개 이상의 인터랙티브 HTML 파일 제작
2. 3개 언어 지원 (한국어/중국어/영어)
3. 5가지 전략 프레임워크 시각화
4. 100% 독립 실행 가능한 파일
5. 모바일 친화적 반응형 디자인
핵심 학습 포인트:
1. AI와의 효과적인 협업
- Claude는 복잡한 로직과 디자인을 동시에 처 리 가능
- 반복적인 개선을 통해 품질 향상
- 구체적인 요구사항이 더 나은 결과 생성
2. 단일 파일 아키텍처의 장점
- 배포가 간단 (파일 하나만 전송)
- 서버 불필요
- 오프라인 실행 가능
- 버전 관리 용이
3. 교육 콘텐츠의 인터랙티브화
- 정적 문서보다 높은 참여도
- 실시간 데이터 조작으로 이해도 향상
- 시각적 표현으로 복잡한 개념 단순화
=====================================
향후 발전 방향
단기 계획:
1. 데이터 실시간 업데이트: API 연동으로 실시간 시장 데이터 반영
2. PDF 내보내기: 프레젠테이션용 PDF 생성 기능
3. 협업 기능: 여러 사용자가 동시에 분석 가능
장기 비전:
1. AI 기반 분석: 자동으로 전략 제안 생성
2. AR/VR 통합: 3D 시각화와 몰입형 경험
3. 플랫폼화: MBA 학생들을 위한 통합 학습 플랫폼
=====================================
스터디 그룹을 위한 팁
시작하기:
1. 작게 시작: 한 페이지부터 시작해서 점진적 확장
2. 템플릿 활용: 성공적인 패턴을 재사용
3. 피드백 반영: 사용자 의견을 즉시 반영
협업 팁:
Git 워크플로우 활용
- 브랜치 생성: git checkout -b feature/new-analysis
- 작업 수행 후 커밋
- PR 생성 및 리뷰
문제 해결:
- 성능 이슈: 큰 데이터는 점진적 로딩
- 호환성: 모던 브라우저 기준 개발
- 접근성: ARIA 레이블과 키보드 네비게이션
=====================================
결론
이 프로젝트는 전통적인 MBA 과제를 현대적인 인터랙티브 웹 경험으로 변환하는 여정이었습니다.
Claude AI와의 협업을 통해 달성한 것:
- 기술적 장벽 없이 전문적인 결과물 제작
- 학습 내용 을 실용적으로 구현
- 글로벌 스탠다드에 맞는 다국어 지원
- 데이터 시각화로 복잡한 개념 단순화
- 재사용 가능한 컴포넌트와 패턴 확립
"AI는 도구일 뿐, 창의성과 비전은 여전히 인간의 영역"
이 프로젝트가 보여준 것은 AI와 인간이 협력할 때 만들어낼 수 있는 시너지입니다. MBA 과정의 과제를 넘어, 미래의 교육 콘텐츠가 나아갈 방향을 제시했다고 생각합니다.
=====================================
참고 자료
프로젝트 GitHub: https://github.com/bellaliv423/hanyangmba_202509
Claude AI: https://claude.ai
MDN Web Docs: https://developer.mozilla.org
