CLASS PICK / EDUCATION SERVICE / 2026
작품을 제출하고, 발표하고, 서로 평가하는 시간.
분리된 과업을 하나의 수업 경험으로 연결했습니다.
클래스픽은 중·고등학생 약 20명이 함께하는 현장 수업을 위해 기획한 학생작품 랭킹전 서비스입니다. 교사는 수업의 흐름을 제어하고, 학생은 각 단계에서 해야 할 일에 집중합니다. 결과가 만들어지는 기준과 과정도 함께 보여주도록 설계했습니다.
담당 범위: 서비스 기획 · UX/UI 디자인 · 웹 구현 및 검증 / 제작 과정: AI 도구 협업 / 현재 상태: 웹 배포 및 기능 검증 완료, 수업 효과 측정은 후속 과제
01 / CONTEXT & PROBLEM
발표 수업의 진행을
어떻게 하나로 묶을 수 있을까?
출발점은 작품 제출, 발표 순서 결정, 동료 평가, 점수 집계가 연속해서 일어나는 수업의 요구사항이었습니다. 각 학생의 자료와 참여 상태를 확인하면서 발표와 투표의 시점을 맞추려면, 누가 무엇을 할 수 있는지와 언제 다음 단계로 넘어갈지를 명확히 해야 했습니다.
기획에서는 세 가지 과제를 정의했습니다. 이는 요구사항과 구현 과정에서 정리한 설계 문제이며, 별도 인터뷰나 사용성 연구의 정량 결과를 의미하지 않습니다.
| 설계 문제 | 원인·제약 | 해결 방향 |
|---|---|---|
| 자료와 준비 상태를 한눈에 파악하기 어렵다 | 작품 주소·발표 자료·출석·제출 여부가 함께 필요하다 | 링크를 한 작품으로 묶고, 제출·접속·준비 상태를 구분한다 |
| 학생마다 다음 행동을 따로 안내해야 한다 | 대기·발표·평가·완료 단계의 과업이 다르다 | 수업 상태에 따라 화면과 ‘지금 할 일’을 자동으로 바꾼다 |
| 점수와 순위를 설명할 기준이 필요하다 | 항목 비중, 교사 평가, 미투표와 동점 처리가 존재한다 | 가중 계산 규칙을 고정하고 미산출·공동 순위를 구별한다 |
진행 상황을 확인하기 쉽게 만들고, 단계별 행동을 명확히 하며, 평가 결과의 계산 근거를 남긴다.
02 / USERS & JOURNEY
교사는 수업을 이끌고,
학생은 현재 과업에 집중한다.
교사 · 수업 운영자
참여자와 평가 기준을 설정하고, 제출 자료를 점검합니다. 발표자 추첨, 투표 시작·마감, 결과 공개 시점을 결정하고 기록을 내려받습니다.
학생 · 발표자이자 평가자
작품 제목·설명과 자료 링크를 제출합니다. 친구의 발표를 듣고 열린 시간에 평가하며, 저장 결과와 종료 후 순위를 확인합니다.
- 준비·제출: 교사가 계정·참여자·항목과 비중을 설정합니다. 학생은 작품 제목·설명과 이름을 붙인 링크·경로를 1~8개 등록합니다.
- 발표: 교사가 자료를 확인하고 발표자를 추첨합니다. 작품 링크는 교사 화면에서 새 탭으로 엽니다. 학생에게는 현재 발표자와 작품 정보가 표시됩니다.
- 평가: 교사가 투표를 열면 학생이 항목별 1~10점을 제출합니다. 발표자 본인은 투표할 수 없습니다. 교사는 참여 상태를 확인해 마감합니다.
- 결과: 회차를 종료하면 전체 순위와 공개된 작품 링크를 확인할 수 있습니다. 종료한 회차의 산출 점수는 같은 학기 누적 점수에 합산됩니다.
03 / UX & INTERFACE DECISIONS
정보의 양보다,
지금 필요한 행동의 선명함.
교사 화면 · 전체 현황에서 개별 진행으로
목록에서는 준비·진행·종료 상태와 제출 인원을 먼저 보여줍니다. 회차 안에서는 진행, 준비, 평가 설정, 기록을 나눠 수업 중 조작과 준비 작업을 구분했습니다. 미제출 학생을 먼저 보여주고, 이름·문구·인원을 색상과 함께 표시합니다.
준비 상태와 접속 상태를 구분하다
자료가 제출됐다는 사실만으로 발표 준비가 끝났다고 보지 않았습니다. 교사가 링크를 직접 확인한 뒤 준비 완료로 표시하며, 학생이 내용을 수정하면 점검 표시를 해제합니다. 접속 확인은 최근 서버 응답에 대한 정보이며, 출석 판정은 교사가 따로 결정합니다.
학생 화면 · ‘지금 할 일’을 가장 크게
평가 화면은 작품 제목과 항목별 큰 점수 버튼을 중심으로 구성했습니다. 설명은 기본 접힘으로 두고, 익명 투표의 범위를 평가 전에 안내합니다. 발표·평가 중에는 자동 다크모드로 전환하고, 교사는 자신의 브라우저 밝기를 별도로 선택할 수 있습니다.
순위는 종료 후, 내 위치와 함께
결과에서는 상위 순위 카드와 점수 막대, 본인 순위와 점수 차이를 제공합니다. 익명 회차는 다른 학생에게 개별 평가자의 점수를 공개하지 않습니다. 실명 회차는 종료 후 상세 점수표를 제공합니다. 교사는 익명 회차도 상세 평가를 확인할 수 있습니다.
평가가 제출되기 전의 발표는 보류할 수 있습니다. 미완료 평가가 남으면 교사에게 마감 여부를 확인하고, 이미 저장한 점수는 유지합니다. 제출·자기 발표·미제출 마감·발표 사이 대기를 서로 다른 문구로 안내합니다.
04 / HOW IT WORKS
화면은 단순하게,
상태와 권한은 서버에서.
화면은 HTML·CSS·JavaScript로 구성하고 Cloudflare Pages에 배포했습니다. Pages Functions가 API와 인증된 수업별 WebSocket을 담당하며, Supabase의 Auth와 PostgreSQL이 계정·수업·작품·평가를 관리합니다.
한 번의 진행 조작이 학생 화면에 반영되기까지
- 교사가 투표 시작 등의 진행 동작을 요청하면 서버가 세션·교사 권한·현재 상태를 검사합니다.
- PostgreSQL RPC가 회차 상태를 확인하고 변경합니다. 추첨·마감처럼 동시 요청에 민감한 동작은 회차 잠금 안에서 처리합니다.
- 비공개 Supabase Broadcast의 변경 알림을 서버가 수업별 WebSocket으로 전달합니다. 서버 키는 브라우저에 보내지 않습니다.
- 브라우저는 알림을 받은 뒤 인증된 API로 최신 상태를 다시 조회하고 역할에 맞게 화면을 바꿉니다.
- 연결이 끊기거나 알림을 놓치면 재연결과 5초 간격 조회로 상태를 복구합니다.
추첨 애니메이션보다 먼저 결과를 확정한다
운영 서버는 회차 잠금 안에서 발표자와 요청 토큰을 저장한 뒤 회전을 보여줍니다. 회전 중 새로고침해도 같은 추첨을 복원하며 중복 요청도 같은 결과로 처리합니다. 확정 전에는 학생에게 당첨자·후보 ID·토큰을 보내지 않습니다. 체험 모드의 로컬 추첨과 운영 서버의 잠금 처리는 구별됩니다.
데이터 구조와 공개 범위
rank_profiles → rank_rounds → rank_entries → rank_votes
계정은 교사 소속으로, 작품은 회차와 학생으로, 평가는 작품과 평가자로 연결합니다. 회차는 참여자·출석·평가 기준·현재 발표 상태를 관리합니다. 접속 기록은 별도로 보관하며, 기존 첨부 자료용 테이블도 유지합니다.
| 정보 | 교사 | 학생 |
|---|---|---|
| 제출 자료 링크 | 소속 수업의 자료 확인 | 본인 자료 확인. 다른 학생 자료는 종료 후 공개 범위에서 확인 |
| 익명 투표 상세 | 투표자와 점수 확인 | 본인 평가만 확인. 다른 학생의 개별 평가는 숨김 |
| 전체 순위 | 진행 중 확인 가능 | 회차 종료 후 공개 |
| 결과 CSV·기존 첨부 다운로드 | 교사 권한 검사 후 제공 | 제공하지 않음 |
현재 새 제출은 링크·공유드라이브 경로 방식입니다. 작품 원본 파일을 새로 업로드하거나 사이트 안에서 실행·변환하는 기능은 제공하지 않습니다. 권한 제한은 버튼 표시와 API 응답 양쪽에서 적용합니다.
05 / SCORING & RULES
계산 결과뿐 아니라,
계산 기준도 설명할 수 있도록.
각 평가자의 점수는 항목 점수에 비중을 곱한 합계입니다. 유효한 학생 평가의 평균과 교사 점수를 회차에서 정한 비율로 결합해 최종 점수를 구합니다. 교사 평가 사용 여부와 비율도 회차마다 설정합니다.
- 자기 투표·중복 투표: 본인 작품 평가는 차단합니다. 학생·작품별 평가는 하나로 유지하며 마감 전 수정할 수 있습니다.
- 미투표: 평균에 0점으로 넣지 않습니다. 발표자·결석·평가 제외·중지 계정은 평가 대상에서 제외합니다. 작품을 제출하지 못한 참여 학생도 친구 작품을 평가할 수 있습니다.
- 평가 누락: 필요한 학생 평균이나 교사 점수가 없으면 최종 점수는 미산출로 남깁니다. 확인을 거쳐 수업을 종료할 수 있으며 미산출 작품은 순위·누적 합산에서 제외합니다.
- 공동 순위·학기 합산: 같은 최종 점수는 공동 순위로 처리합니다. 종료한 동일 학기 회차의 산출 점수를 합산하고 참여 횟수도 표시합니다. 참여 회차가 많은 학생에게 유리한 합산 방식이라는 특성이 있습니다.
06 / ITERATION & TRADE-OFFS
기능을 더하는 과정에서,
운영 범위도 다시 정했다.
| 초기 구상 | 현재 결정 | 의미와 제약 |
|---|---|---|
| 파일 업로드·ZIP 프로젝트·내장 미리보기 | 링크·공유드라이브 경로 제출 | 변환·실행·파일 관리 범위를 줄임. 외부 자료의 접근 권한과 유효성은 직접 점검 필요 |
| 학생을 직접 지목해 발표 | 미발표 제출자 룰렛과 보류·재개 | 발표 순서 결정을 화면에 드러냄. 준비 목록 정렬은 추첨 확률에 영향 없음 |
| 모든 정보가 함께 있는 진행 화면 | 회차 목록과 진행·준비·기록 분리 | 수업 중 필요한 행동과 관리 과업을 구분 |
| 평가 완료를 전제로 한 종료 | 미완료 확인 후 종료·미산출 표시 | 수업을 끝낼 수 있게 하면서 누락을 임의 점수로 대체하지 않음 |
이 변화는 기획 문서와 버전별 구현·검증 기록을 바탕으로 정리했습니다. 기능 수를 성과로 삼기보다 실제 수업에서 설명할 수 있는 진행 규칙과 운영 범위를 만드는 데 초점을 두었습니다.
07 / VALIDATION & REFLECTION
검증한 것과,
다음 수업에서 배울 것.
확인한 구현 결과
- Cloudflare Pages와 Supabase 연결 및 웹 배포
- 격리된 임시 교사·학생 계정으로 제출·발표·평가·순위·CSV 검증 기록 확보
- 자기 투표·마감 후 제출·참여 권한·익명 데이터 제한 검사
- 동시 추첨·재접속 복구·발표 보류·미완료 마감 등의 예외 상황 검증
아직 측정하지 않은 효과
- 수업 진행 시간과 교사 조작 부담의 변화
- 학생이 다음 행동을 이해하는 데 걸리는 시간
- 평가 기준과 공동 순위에 대한 납득도
- 반복 수업에서의 참여 경험과 경쟁 부담
개발 검증은 기능이 정한 규칙대로 움직이는지 확인합니다. 교육적 효과와 사용성은 실제 수업 관찰이 더 필요합니다. 다음에는 단계별 소요 시간, 도움 요청과 제출 오류, 교사 개입 횟수를 기록하고 학생·교사의 피드백으로 화면과 평가 방식을 개선하려 합니다.
특히 누적 합계가 참여 횟수의 영향을 받는 점, 순위 중심 표현이 학생에게 주는 부담, 초기 비밀번호와 교사의 비밀번호 관리 범위는 후속 개선에서 다룰 과제입니다. 현재 시스템은 특정 수업 운영 조건에 맞춘 범위이며 팀 작품·여러 반 관리·발표 타이머는 포함하지 않습니다.
수업 도구의 UX는 화면의 배치뿐 아니라 누가, 어느 시점에, 어떤 상태를 확정할 수 있는지에 달려 있습니다. 정상 흐름과 함께 재접속·보류·미완료 같은 예외를 설계하는 일이 인터페이스와 시스템 구조를 연결했습니다.
이 페이지의 스크린샷은 배포된 서비스의 체험 모드에서 새로 촬영했습니다. 모든 이름·작품·점수는 가상 데이터입니다. 도식은 기획안·최신 README·프런트엔드 및 서버 코드·검증 기록을 바탕으로 재구성했습니다. 실제 학생 정보나 계정 비밀 값은 포함하지 않습니다. 자료 정리: 2026.11.01.
가상 수업 체험하기 ↗다른 프로젝트 보기 →