1. 개요

회원, 읽은 레슨, 수료 번호, 내려받은 자료, 로그인 상태는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.

범위 밖: 여러 기기에서 같은 계정을 쓰는 서버 저장, 동영상 강의, 본부 관리자 화면(과정 등록·수정), 메일·문자 알림. 도입할 때 회사 환경에 연결합니다.

2. 과제

1. 신입 교육이 매장마다 다르다.

점장이 바쁘면 교육이 빠지고, 누가 어디까지 들었는지 아무도 모릅니다. 같은 내용을 같은 순서로 읽게 하고, 읽은 기록이 사람마다 남아야 합니다.

2. 읽었다는 것과 안다는 것은 다르다.

"봤어요"만으로는 위생 사고를 막지 못합니다. 짧은 확인 문제를 맞혀야 수료되고, 틀리면 왜 틀렸는지 바로 보여야 합니다.

3. 매장에서 쓰는 서식이 흩어져 있다.

체크리스트와 온도 기록표가 메신저 사진으로 돌면 옛날 판이 계속 쓰입니다. 최신 파일을 한 곳에서 찾아 내려받고, 누가 받아 갔는지 남아야 합니다.

3. 화면 구조

교육 과정·레슨·확인 문제·자료실은 누구나 둘러보고, 가입하면 진도·수료·내려받기가 이름으로 쌓입니다. 화면마다 주소(#/lesson/A/2 등)가 따로 있어 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.

4. 주요 기능

레슨 읽기와 진도 저장

과정 왼쪽에 레슨 차례가 놓이고, 읽은 레슨에는 체크가 붙습니다. "다 읽었어요"를 누르면 진도가 저장되고, 다음에 들어오면 "이어서 읽기"로 멈춘 곳부터 엽니다.

확인 문제 — 틀리면 해설, 모두 맞히면 수료

레슨을 모두 읽어야 문제가 열립니다. 틀린 문제에는 해설이 붙고, 세 문제를 모두 맞히면 수료 번호(C-과정-순번)가 발급됩니다.

수료증

이름·매장 코드·과정·수료 번호·수료일이 들어간 수료증이 열리고, 인쇄하거나 PDF로 저장할 수 있게 인쇄용 배치를 따로 잡았습니다.

자료실 — 거르기와 내려받기

체크리스트·기록표·응대 자료 6개를 종류와 이름으로 거릅니다. 회원만 내려받을 수 있고, 받은 날짜와 시각이 자료 옆과 내 학습에 남습니다.

• 매장 이수 현황 — 점장만점장으로 가입하면 같은 매장 코드 직원의 과정별 진도와 필수 교육 완료 여부를 표로 봅니다. 휴대폰에서는 표가 사람별 카드로 바뀌고, 현황을 CSV로 내려받습니다.
• 회원 가입·로그인이름·매장 코드·구분·이메일·비밀번호를 받고, 형식이 틀린 칸은 각각 다른 문장으로 알려 줍니다. 비회원이 기록을 남기려다 가입하면 보던 화면으로 돌아갑니다. 비밀번호는 입력한 글자 그대로 저장하지 않습니다.
• 내 학습과정별 진도, 받은 수료증, 내려받은 자료가 한 화면에 모입니다. 첫 화면에는 아직 마치지 않은 필수 교육이 먼저 보입니다.
• 휴대폰 메뉴휴대폰에서는 메뉴 버튼으로 과정·자료실·내 학습·이수 현황을 엽니다.

5. 기술

6. 검수

PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)

동작 시험 12가지: 첫 화면 과정 목록과 필수 교육 · 휴대폰 메뉴 열고 닫기 · 비회원 레슨 읽기와 로그인 안내 · 회원 가입(입력 확인, 보던 곳으로 돌아감) · 자료실 거르기·내려받기와 기록 · 레슨 읽기와 진도 저장 · 확인 문제(해설, 모두 맞히면 수료) · 수료증 이름·번호 · 내 학습(진도·수료·내려받은 자료) · 점장 이수 현황과 CSV · 로그아웃 뒤 틀린 비밀번호 차단과 다시 로그인(기록 유지) · 뒤로 가기

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)

휴대폰: 첫 화면 표시 0.8초 · 가장 큰 요소 표시 1.4초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.2초 · 가장 큰 요소 표시 0.3초 · 화면 흔들림 0 · 입력 막힘 0ms

7. 결과