수업 공지, 일정, 자료배포를 한 번에 — AI로 강의 자동화 웹앱 만들기

소개

저는 대학교에서 외국인 학생들에게 한국어를 가르치고 있습니다.

매 학기마다 반복되는 일이 있습니다.

• 과제 제출 마감이 다가올 때마다 일일이 리마인드 메시지 전송

• 학생들이 "이번 주 유인물이 뭐예요?" "중간고사 범위가 어떻게 돼요?" 하고 물어볼 때마다 같은 답변 반복

• 외국인 학생들은 한국어를 잘 못하다 보니 공지가 제대로 전달됐는지도 불안

사실 이런 문제를 해결하고 싶다는 생각은 오래전부터 했어요. 그런데 저는 코딩을 전혀 모릅니다. HTML이 뭔지, CSS가 뭔지, JavaScript가 뭔지 전혀 몰라요. 그래서 늘 "나 같은 사람이 할 수 있을까?" 하는 생각에 시도조차 못했죠.

그러다 Claude AI를 써보게 되었고,

결론부터 말씀드리면, 코딩 한 줄 없이 대화만으로 완성했습니다.

진행 방법

처음에는 거창하게 생각하지 않았어요. 그냥 학생들이 편하게 수업 정보를 확인할 수 있는 페이지 하나면 충분하다고 생각했어요.

하지만 막상 생각해보니 필요한 기능이 꽤 있었어요:

1. 주차별 수업 일정 — 1주차부터 15주차까지 한눈에 보이게

2. 오전반/오후반 구분 — 저는 같은 날 오전반(2~4교시)과 오후반(5~7교시)을 따로 가르치거든요

3. 공지사항 작성 — 제가 쉽게 올리고 학생들이 볼 수 있게

4. 한국어/영어 전환 — 외국인 학생들이 영어로도 볼 수 있게

5. 구글 드라이브 연결 — 유인물, OT 자료 등을 드라이브에 올려두고 링크로 연결

6. 모바일 최적화 — 학생들이 주로 폰으로 확인하니까

이걸 Claude에게 말로 설명했더니, 그냥 만들어줬습니다.

실제로 어떤 프롬프트를 썼나

첫 번째 대화 — 강의계획서 분석

저는 강의계획서 이미지를 캡처해서 Claude에 올리고 이렇게 물었어요.

"나는 레벨별로 한국어 수업을 자동화하는 웹페이지를 제작하고 싶어. 우선은 이번학기 기준으로 내가 자료를 줄테니 그 자료를 참고로 만들어 보았으면 해. 내가 주로 맡는 레벨은 1B, 2A, 2B 수업이 대부분이야. 이중에서 우선 2A 수업과정에 대한 모든 과정을 자동화해보고 싶어."

그러자 Claude는 강의계획서를 직접 분석해서 이렇게 정리해줬어요:

• 1~15주차 전체 구조 파악

• 2, 3, 4교시 = 오전 클래스 / 5, 6, 7교시 = 오후 클래스 구분

• 주차별 유인물 목록 정리

• 중간고사(8주차, 1~5과)와 기말고사(15주차, 6~9과) 자동 감지

강의계획서가 좀 복잡한 표 형태였는데도 정확하게 읽어냈어요. 저는 그냥 "맞아요, 잘 이해했어요"라고만 했습니다.

두 번째 대화 — 기능 요청

"학생들은 매주 과제를 제출해야해. 근데 학생들은 한국어를 잘 못해. 홈페이지를 만든 다음에 한국어, 영어로 변환해서 볼 수 있으면 더 좋을 것 같아. 그리고 내가 공지사항이나 과제 등에 대한 공지를 해 줄 일이 많은데 그럴 경우도 내가 쉽게 메모를 작성하고 그 메모를 학생들이 볼 수 있게 해주었으면 좋겠어. 학생들은 홈페이지 형태로 보게 해 주었으면 좋겠고 휴대폰으로 확인하는 학생도 많을테니 우선은 휴대폰 용으로 만들었으면 좋겠어."

이것만으로도 Claude는 알아서 카카오톡 스타일의 공지 입력 화면을 만들어줬어요. 교수 전용 비밀번호 잠금 기능까지 포함해서요.

세 번째 대화 — 디자인 수정

처음 나온 결과물은 파란색 계열이었어요. 저는 좀 다른 느낌을 원했거든요.

"색상은 피그마 스타일로 파란색 말고 여성스러운 스타일로"

이 한 줄로 전체 색상이 라벤더, 핑크, 퍼플 파스텔 그라데이션으로 바뀌었어요. 직접 색상 코드를 찾거나 입력할 필요가 전혀 없었습니다.

완성된 기능들

대화를 주고받으면서 최종적으로 만들어진 기능은 이렇습니다:

📅 수업일정 탭

• 1~15주차 버튼으로 주차 선택

• 오전반(2~4교시) / 오후반(5~7교시) 색으로 구분

• 중간고사, 기말고사 주차는 빨간색으로 강조 표시

• 주차별 유인물 목록 + 구글 드라이브 링크 연결

📢 공지사항 탭

• 공지 / 과제 / 시험 / 정보 카테고리 선택 가능

• 교수 비밀번호 입력 후 작성

• 작성한 공지는 localStorage에 저장 → 폰을 껐다 켜도 유지

• 공지 삭제 버튼도 있어서 관리 편함

📝 과제 탭

• 매주 어휘 예습, 발표 성적근거물, 중간/기말 준비 등 항목별 상태 표시

• 학기 진행도 프로그레스 바로 시각화

📁 자료 탭

• 구글 드라이브 전체 폴더 링크

• OT 자료, 강의계획서, 발표 대본 양식 개별 링크

• 주차별 유인물 목록 + 드라이브 링크

🌐 한국어/영어 전환

• 상단 EN 버튼 하나로 전체 앱이 영어로 전환

• 공지사항 내용도 언어에 맞게 표시

📱 모바일 최적화

• 최대 너비 430px, 하단 탭 네비게이션

• 터치에 최적화된 버튼 크기

🖼️ 프로필 & 링크 미리보기

• 헤더에 교수 사진 동그랗게 표시

• 카카오톡 공유 시 교수 사진 + 수업명 미리보기

  

  ALT

  한국 데이트 앱 스크린샷

  

  

  ALT

  한국 달력 앱의 스크린샷

배포까지 — Netlify

앱 자체는 HTML 파일 하나로 완성됐어요. 이걸 인터넷에 올려야 학생들이 접속할 수 있는데, Claude가 Netlify라는 무료 호스팅 서비스를 추천해줬어요.

방법은 정말 간단했어요:

1. netlify.com 접속 → 회원가입

2. 만들어진 HTML 파일을 ZIP으로 압축

3. Netlify 화면에 드래그 앤 드롭

그러면 URL이 바로 생겨요. 이걸 학생들에게 공유하면 끝입니다.

ALT

Google for Education - 스크린샷

중간에 시행착오도 있었어요. 처음에 ZIP 파일 안에 폴더를 포함해서 압축했더니 404 오류가 났는데, Claude가 "폴더 없이 파일만 압축해야 해요"라고 바로 알려줘서 해결했어요.

시행착오와 배운 점

시행착오 — GitHub 연동 시도

처음에는 GitHub와 Netlify를 연동해서 파일 수정 시 자동 배포되게 하려고 했어요. Claude가 단계별로 설명해줬고 연동 자체는 성공했는데, 코딩을 모르는 저에게는 GitHub에서 파일 수정하는 것 자체가 더 복잡했어요. 결국 그냥 수정할 때마다 Claude에게 "이거 바꿔줘"라고 요청해서 새 파일 받아 드래그 앤 드롭하는 방식이 훨씬 편했습니다.

배운 점 — 구체적으로 말할수록 좋다

"피그마 스타일로 파스텔 톤의 여성스러운 색상으로 바꿔줘"처럼 구체적으로 말하니까 원하는 결과가 바로 나왔어요.

코딩을 몰라도 되지만, 내가 원하는 것을 말로 잘 설명하는 능력은 필요합니다. 그게 결국 이 작업의 핵심이었어요.

앞으로의 계획

현재는 2A 수업 한 학기 분량만 구현했어요. 앞으로는:

• 1B, 2B 수업도 동일하게 제작 — 이미 구조를 알고 있으니 빠르게 만들 수 있을 것 같아요

• 출석 체크 기능 추가 — 학생들이 직접 QR코드 찍으면 출석 기록되는 기능

• 퀴즈 기능 — 주차별 어휘 확인 퀴즈 자동 생성

이 모든 것도 코딩 없이 Claude와 대화로 만들 계획이에요.

마무리

저는 이 작업을 하면서 딱 한 가지를 배웠어요.

"AI에게 잘 부탁하는 것도 능력이다."

코딩 지식이 없어도 됩니다. 필요한 건 내가 원하는 것을 구체적으로 설명하는 능력, 그리고 결과를 보고 "이건 좀 다르게 해줘"라고 피드백하는 능력이에요.

한 학기 수업 자동화 웹앱을, 코딩 한 줄 없이, 대화만으로 만들었습니다.