소개
대학원생 대상 강의("Self-Leadership과 경력개발")를 HTML 슬라이드로 제작했습니다. 슬라이드 안에 ASLQ(약식 셀프리더십 자가진단) 9문항이 이론 설명 형태로 들어가 있었는데, 수강생들이 슬라이드를 '보는' 것에서 그치지 않고 직접 진단해보고 자신의 점수를 확인할 수 있으면 좋겠다고 생각했습니다.
수강생들은 모두 스마트폰을 들고 있으니, 강의 중에 QR코드를 스캔해서 바로 진단까지 할 수 있는 웹앱을 만들면 강의 몰입도가 훨씬 높아질 것 같았습니다.
요구사항을 정리하면:
- 9문항 · 5점 척도 · 3개 차원(행동중심 / 자연보상 / 건설적 사고)
- 모바일 최적화 (수강생이 스마트폰으로 사용)
- 결과: 차원별 평균 점수 + 레이더 차트 시각화
- 응답 내용이 새로고침해도 유지될 것 (localStorage)
- 외부 서버 없이 단일 HTML 파일로 동작
진행 방법
사용 도구
- Claude (Claude Code) — 앱 전체 설계 및 코드 작성
- HTML · CSS · Vanilla JavaScript (의존성 없는 SPA)
- [Chart.js 4.x](https://www.chartjs.org/) — 레이더 차트
- Pretendard 폰트 (CDN)
- localStorage — 응답 자동 저장
프롬프트
> ASLQ 셀프리더십 자가진단 앱을 만들어줘.
> 9문항, 5점 척도, 3개 차원(행동중심 BAV / 자연보상 TM / 건설적 사고 CC).
> 모바일에서 잘 보여야 하고, 결과 화면에는 차원별 점수와 레이더 차트를 보여줘.
> 응답은 localStorage에 저장해서 새로고침해도 유지되게 해줘.
> 외부 백엔드 없이 정적 파일로만 동작해야 해.결과와 배운 점
- 시작 → 진단(9문항) → 결과(레이더 차트 + 점수) 3화면 SPA 완성
- 모바일에서 문제없이 동작, 진행률 바로 완료 여부 직관적 확인 가능
- localStorage 덕분에 강의 중 잠깐 앱을 나갔다 와도 응답이 유지됨
- 강의 슬라이드에 QR코드를 붙여두고 수강생이 강의 중 바로 스캔해서 진단
결과물은 다음의 형태로 나오게 됩니다
삼각형이 표시된 한국 앱의 스크린샷
도움 받은 글 (옵션)
강의자동화 스터디장님들 두분께 중간중간 질문드리고 수업중 공유되는 사례를 참고해서 진행했습니다. 매번 감사드려요~~
