간호학 논문 실험에 쓸 학습 사이트입니다. 유튜브로 한 번에 몰아 보는 집단과 하루 한 회차씩 나눠 배우는 집단을 비교하는 연구였고, 저희는 후자에 해당하는 마이크로러닝 웹앱과 연구자용 데이터 수집 시스템을 만들었습니다. 학습자가 쓰는 화면과 연구자가 쓰는 화면을 하나의 시스템으로 설계했습니다. ㅡ의뢰 배경 - 논문 실험이라 학습 결과를 숫자로 남겨야 했습니다. 누가 며칠 접속했고 몇 번 만에 맞혔는지까지 - 학습 대상은 병원 신규 간호사. 근무 중 짬을 내 보는 사람들이라 회차당 10분 안팎으로 끊어야 했습니다 - 영상 자료는 개발 막바지에 도착할 예정이었습니다. 그래서 넣기만 하면 되는 구조로 먼저 만들어야 했습니다 ㅡStudio Maestiq 수행 범위 - 기획, 정보구조 설계, UI 디자인, 프론트엔드 개발, 백엔드 개발, 배포 ㅡ기술 스택, 인프라 - 프론트와 백엔드: Next.js 16 App Router + TypeScript, 서버 컴포넌트 기반 - 런타임: Cloudflare Workers 엣지 배포 - 데이터베이스: Cloudflare D1 ㅡ 접속 기록, 문항별 시도 이력, 회차 완료를 각각 분리 저장 - 미디어: Cloudflare R2 + Range 요청 대응 ㅡ 학습 영상 스트리밍, 이어보기 - 인증: 이름과 휴대폰 뒷 4자리, 4자리 비밀번호 ㅡ 전화번호 전체를 수집하지 않는 최소 수집 설계 - 보안: 로그인 반복 실패 시 단계적 잠금, 관리자 계정은 학습자와 완전 분리 ㅡ핵심 기능 1. 회차 자동 오픈 ㅡ 하루에 한 회차씩 정해진 시각에 열립니다. 아직 안 열린 회차는 잠금으로 보이고, 지난 회차는 복습으로 다시 들어갈 수 있습니다. 마이크로러닝의 핵심인 간격 학습을 시스템이 강제합니다. 2. 건너뛰기 잠금 ㅡ 처음 보는 영상은 앞으로 감기가 잠깁니다. 90퍼센트 이상 봐야 다음 단계가 열립니다. 연구 데이터의 신뢰도를 지키기 위한 장치입니다. 3. 형성평가 즉시 채점 ㅡ 누르는 즉시 정답 여부와 해설이 뜹니다. 틀리면 한 번 더 기회를 주고, 그래도 안 되면 정답을 공개합니다. 1차 시도 정답률과 최종 정답률을 따로 저장해 학습 효과를 구분해 측정합니다. 4. 완주 배지와 요약 ㅡ 회차를 마치면 배지와 오늘의 요약이 뜨고 점수가 저장됩니다. 다음 회차가 언제 열리는지도 함께 안내합니다. 5. 연구자 대시보드 ㅡ 가입 인원, 접속률, 평균 진행률, 완주자를 한눈에 봅니다. 학습자 곱하기 회차 매트릭스로 누가 어디서 멈췄는지 바로 찾습니다. 6. 논문용 흑백 차트 ㅡ 회차별 완료 인원, 형성평가 성취도, 일자별 접속 추이, 문항 해결 경로 분포를 그레이스케일 그래프로 그립니다. 캡처해서 논문에 그대로 넣을 수 있게 만든 화면입니다. 7. 원자료 엑셀 내보내기 ㅡ 학습자 명단, 접속 기록, 회차별 학습 기록, 문항별 시도 이력을 4개 시트 엑셀 한 파일로 내려받습니다. 통계 프로그램에 바로 넣을 수 있는 형태입니다. ㅡ이 프로젝트에서 특히 신경 쓴 것 연구용이라 데이터의 정확성이 곧 결과물의 가치였습니다. 문항 하나를 몇 번째 시도에 맞혔는지, 정답을 공개받았는지 스스로 맞혔는지까지 구분해 저장했습니다. 그래서 대시보드에 1차 정답, 기회 소진, 재시도 정답을 나눈 분포 그래프를 만들 수 있었습니다. ㅡ작업 규모 학습 5회차, 학습자 화면과 연구자 관리자 화면 분리, 소스 파일 51종 스크린샷은 실제 서버와 데이터베이스에 연결된 상태에서 촬영한 동작 화면입니다. 학습자 이름과 연락처 뒷자리는 개인정보 보호를 위해 성만 남기고 블러 처리했습니다. 연구 특성상 의뢰인과 소속 기관은 밝히지 않습니다. 교육 콘텐츠를 웹으로 옮기거나, 사용자 행동 데이터를 남겨야 하는 서비스가 필요하시면 편하게 상담 남겨주세요.