Back to Projects
Web App Personal Project
EXEC ENGLISH 100
설계 도면을 그리던 엔지니어가 영어로 이사회에 서기까지 — 비즈니스 영어를 1단계부터 100단계까지 한 호흡으로 설계했다.
자동차 내장설계 엔지니어 출신이 경영층으로 성장하는 여정을 따라가는 100단계 비즈니스 영어 코스. 생존 회화부터 설계 검토(DR)·협상·임원 보고·계약 법무·M&A·이사회 발언까지, 모든 자료를 단일 HTML에 내장했다. 핵심표현·실전대화·어휘·한→영 작문 드릴·발음 TTS·진도 저장·인쇄까지 의존성 없이 동작한다.
HTML CSS Vanilla JS Web Speech API localStorage
The Concept
대부분의 비즈니스 영어 교재는 “상황별 표현”을 나열한다. 하지만 자동차 설계자가 경영층으로 올라가는 길은 선형적인 성장 곡선이다. 처음엔 협력사 첫 미팅에서 자기소개를 하고, 몇 년 뒤엔 DR(설계 검토) 회의를 영어로 주도하고, 결국엔 이사회에서 손익을 설명하고 M&A를 논한다.
그 곡선을 그대로 1단계 → 100단계로 펼쳤다. 학습자는 자신의 커리어 궤적을 따라 영어를 쌓아 올린다.
10개 스테이지, 100개 단계
- 생존 비즈니스 영어 (1–10) — 자기소개, 전화, 이메일 기본
- 사내 협업 (11–20) — 회의 참여, 보고, 부서 협조
- 설계 실무 영어 (21–30) — 도면·공차·재질, DR, ECN, 내장 부품
- 미팅 주도 (31–40) — 회의 진행, 의사결정, 갈등 중재
- 협력사·구매 (41–50) — RFQ, 품질 이슈, 8D, VA/VE 원가 절감
- 협상 영어 (51–60) — 앵커링, 양보, 교착 돌파, 클로징
- 프로젝트 관리 (61–70) — 킥오프, 리스크, 에스컬레이션, 상태 보고
- 임원 보고·설득 (71–80) — 결론 우선, 데이터 스토리텔링, Q&A
- 계약·법무 영어 (81–90) — NDA, 공급계약, SOW, 배상·IP·보증 조항
- 경영 리더십 영어 (91–100) — 전략, P&L, JV, M&A, 이사회, Executive Presence
각 단계의 구성
한 단계를 “발라먹을” 수 있도록 5개 층으로 설계했다.
- 핵심 표현 — 외워서 바로 쓰는 원어민 비즈니스 문장 (한국어 대역)
- 실전 대화 — ‘나 ↔ 상대’ 채팅 형식의 현장 시나리오
- 어휘 — 그 상황의 필수 용어
- 작문 드릴 — 한국어를 보고 영어로 먼저 말한 뒤 정답을 여는 능동 회상 방식
- 현업·임원 관점 팁 — 표현 너머의 실무 감각
Technical Highlights
- 단일 HTML, 의존성 0 — 100단계 전 콘텐츠를 하나의 파일에 내장. 인터넷 없이도(폰트 제외) 동작
- Web Speech API — 모든 표현·대화·정답에 원어민 발음 재생 버튼
- localStorage 진도 추적 — 단계별 완료 표시와 스테이지별·전체 진행률
- 능동 회상 드릴 — 정답을 가렸다가 클릭으로 공개해 인출 학습 강제
- 인쇄 최적화 — 정답을 모두 펼친 상태로 출력해 종이 교재로 “하드카피”
- 키보드 내비게이션 — ←/→ 로 단계 이동, 즉시 검색
Why I Built This
나는 설계 도면에서 출발했다. 영어는 늘 “다음 단계”를 막는 벽이었다 — 협력사 협상, 임원 보고, 계약서 검토. 그래서 흩어진 표현집이 아니라, 내가 실제로 통과해야 할 커리어의 관문 순서대로 한 단계씩 올라가는 길을 직접 깔았다. 1단계의 첫인사가 100단계의 이사회 발언까지 끊기지 않고 이어지도록.