일반물리 강의 홈페이지를 직접 만들었다

March 22, 2026

education physics web astro ai claude

이번 학기 일반물리 I (PHY1001) 강의 홈페이지를 Astro + Markdown으로 직접 만들었다. 파워포인트 대신 웹 슬라이드를 쓰고, 인터랙티브 시뮬레이션을 강의 중에 바로 보여주는 것이 목표였다.

결과물: yw-choi.github.io/PHY1001

왜 만들었나

파워포인트의 한계가 몇 가지 있었다.

수식 편집이 불편하다. 물리 강의는 수식 유도가 핵심인데, PPT에서 수식을 수정하려면 일일이 수식 편집기를 열어야 한다.
시뮬레이션을 보여주려면 별도 프로그램이 필요하다. 강의 흐름이 끊긴다.
다이어그램 수정이 번거롭다. 한 번 그린 그림을 고치려면 원본 파일을 찾아서 다시 편집해야 한다.

Markdown으로 쓰면 수식은 KaTeX로 바로 렌더링되고, 시뮬레이션은 iframe으로 슬라이드 안에 삽입할 수 있다. 다이어그램은 SVG 파일을 직접 편집하면 된다.

구성

슬라이드

12개 챕터(측정~평형과 탄성)의 강의 슬라이드를 Markdown으로 작성했다. ---로 슬라이드를 구분하고, KaTeX 수식은 서버 사이드에서 렌더링한다. 클라이언트에서 수식을 처리하지 않으므로 로딩이 빠르다.

SlideEngine이라는 커스텀 컴포넌트가 네비게이션(방향키, 스와이프), 판서 캔버스, 스크래치패드 기능을 제공한다. 수업 중 펜으로 직접 그리면서 설명할 수 있고, 스크래치패드에서 별도 공간에 풀이를 쓸 수도 있다.

시뮬레이션

24개의 인터랙티브 시뮬레이션을 HTML5 Canvas로 만들었다. 자유 낙하, 포물선 운동, 앳우드 기계, 에너지 보존, 충돌, 관성 모멘트, 사다리 평형 등. 각 시뮬레이션은 단일 HTML 파일이고, 슬라이더로 파라미터를 조절하면 물리량이 실시간으로 변한다. 수식은 KaTeX로 렌더링해서 캔버스 위에 오버레이한다.

강의 슬라이드 안에서  디렉티브로 삽입하면 iframe으로 임베드된다. 별도 페이지(/simulations/id/)로도 접근 가능해서 학생들이 스스로 만져볼 수 있다.

다이어그램

교재(Halliday) 일러스트는 저작권 문제로 사용할 수 없어서, 필요한 다이어그램 60여 개를 SVG로 직접 만들었다. 서강대 빨간색(#8B0029)을 주색으로 쓰고, 힘 벡터·속도 벡터·보조선 등의 색상과 선 굵기를 통일했다.

AI 활용

강의 콘텐츠 제작에 Claude를 적극 활용했다. 교재 PDF를 읽고 슬라이드 초안을 작성하고, 시뮬레이션 코드를 생성하고, SVG 다이어그램을 만드는 과정을 대부분 AI와 함께 진행했다.

작업 방식은 다음과 같다:

계획: 교재 챕터를 읽고 섹션 구성, 필요한 시뮬레이션, 다이어그램 목록을 정한다.
시뮬레이션 구현: 계획에 따라 시뮬레이션 HTML을 생성한다. 물리 법칙이 정확히 구현되었는지 확인한다.
슬라이드 작성: Markdown 슬라이드를 작성하고 다이어그램을 생성한다. 완성 후 물리·수학 오류를 검토한다.

12개 챕터 분량의 강의자료를 한 학기 시작 전에 준비할 수 있었던 것은 AI 덕분이다. 다만, AI가 생성한 콘텐츠를 그대로 쓰지는 않았다. 수식 유도의 논리적 흐름, 한국 학생에게 맞는 예시 선택, 다이어그램의 물리적 정확성 등은 직접 확인하고 수정했다.

기술 스택

Astro: 정적 사이트 생성기. Markdown 컨텐츠 컬렉션으로 강의를 관리한다.
KaTeX: 수식 렌더링. 서버 사이드에서 HTML로 변환한다.
HTML5 Canvas: 시뮬레이션. 외부 라이브러리 없이 순수 Canvas API로 작성했다.
GitHub Pages: 배포. npm run build 후 정적 파일을 올린다.

소감

PPT를 버리고 웹 기반으로 전환한 것은 초기 투자가 크지만, 한 번 세팅하면 유지보수가 편하다. Markdown 파일을 고치면 되니까 수식 하나 수정하는 데 수식 편집기를 열 필요가 없다. 시뮬레이션을 강의 중에 자연스럽게 보여줄 수 있는 것도 큰 장점이다.

소스 코드는 공개되어 있지 않지만, 비슷한 시도를 하고 싶은 분이 계시면 연락 주시기 바란다.