기능 명세¶

Open Codelabs의 모든 기능에 대한 상세 설명입니다.

핵심 기능¶

1. Codelab 관리¶

Codelab 생성¶

제목, 설명, 작성자 정보 입력
자동으로 고유 ID 생성
생성 시간 자동 기록

Step 관리¶

Markdown 기반 콘텐츠 작성
단계 순서 자동 관리
실시간 미리보기
일괄 저장 (전체 Steps)

Import/Export¶

ZIP 파일로 Export
다른 시스템에 Import 가능
버전 관리 용이 (Git 등)

2. 참가자 관리¶

등록 시스템¶

이름과 참가 코드로 등록
중복 이름 자동 방지
고유 ID 자동 발급

진행 상황 추적¶

현재 Step 추적
실시간 업데이트
대시보드에서 모니터링

참가자 목록¶

전체 참가자 조회
진행 상황 확인
등록 시간 표시

3. 실시간 상호작용¶

도움 요청¶

막힌 Step에서 도움 요청
관리자에게 실시간 알림
상태 관리 (pending/resolved)
요청 시간 기록

채팅 시스템¶

전체 채팅방
1:1 DM
실시간 메시지 전송
채팅 히스토리 저장

WebSocket 통신¶

양방향 실시간 통신
자동 재연결
연결 상태 표시

4. 콘텐츠 작성¶

Markdown 지원¶

표준 Markdown 문법
코드 하이라이팅
이미지 삽입
테이블, 리스트 등

코드 블록¶

// Rust
fn main() {
    println!("Hello, world!");
}

// JavaScript
console.log("Hello, world!");

# Python
print("Hello, world!")

이미지 업로드¶

드래그 앤 드롭
파일 선택
자동 URL 생성
PNG, JPG, GIF, WebP 지원

5. 피드백 시스템¶

피드백 수집¶

난이도 평가 (1-5)
만족도 평가 (1-5)
자유 의견
익명 제출

피드백 분석¶

평균 난이도
평균 만족도
전체 의견 조회
통계 시각화 (향후)

관리자 기능¶

대시보드¶

Codelab 목록¶

생성한 모든 Codelab 조회
카드 형식으로 표시
생성 시간 순 정렬
빠른 접근

Codelab 편집¶

정보 수정
Step 추가/편집/삭제
실시간 미리보기
자동 저장

참가자 모니터링¶

실시간 참가자 목록
진행 상황 표시
막힌 참가자 식별
도움 요청 알림

도움 요청 관리¶

요청 목록¶

모든 도움 요청 조회
대기 중인 요청 우선 표시
Step 번호 표시
요청 시간 표시

요청 처리¶

1:1 DM으로 도움 제공
해결 완료 표시
해결 시간 기록

채팅 관리¶

전체 공지¶

모든 참가자에게 메시지 전송
중요 공지 강조
채팅 히스토리 확인

1:1 지원¶

특정 참가자와 DM
개별 질문 답변
진행 상황 확인

Export/Import¶

Export¶

Codelab 전체 내보내기
ZIP 파일로 다운로드
백업 용도
다른 시스템 이전

Import¶

ZIP 파일 업로드
자동 파싱
새 Codelab 생성
Step 자동 생성

참가자 기능¶

Codelab 선택¶

목록 조회¶

사용 가능한 Codelab 목록
제목, 설명, 작성자 표시
카드 형식 UI

등록¶

이름 입력
참가 코드 입력
고유성 검증
즉시 시작

학습 진행¶

Step 네비게이션¶

다음/이전 Step 이동
진행 상황 표시
Step 목록 사이드바
빠른 이동

콘텐츠 보기¶

Markdown 렌더링
코드 하이라이팅
이미지 표시
반응형 디자인

진행 상황 저장¶

현재 Step 자동 저장
새로고침 후에도 유지
다른 기기에서도 동기화

도움 요청¶

요청 생성¶

버튼 클릭으로 요청
현재 Step 자동 전송
관리자에게 알림

상태 확인¶

대기 중 / 해결됨 표시
예상 대기 시간
DM 알림

채팅 참여¶

전체 채팅¶

다른 참가자와 소통
질문 및 답변
실시간 업데이트

DM 수신¶

관리자로부터 메시지
개별 알림
이력 확인

피드백 제출¶

완료 후 평가¶

마지막 Step 완료 시 표시
난이도 평가
만족도 평가
의견 작성

시스템 기능¶

데이터 영속성¶

자동 저장¶

모든 변경 즉시 저장
트랜잭션 보장
데이터 무결성

관계 관리¶

Foreign Key 제약
Cascade 삭제
참조 무결성

실시간 동기화¶

WebSocket¶

양방향 통신
낮은 레이턴시
자동 재연결

이벤트 브로드캐스트¶

참가자 입장/퇴장
진행 상황 업데이트
채팅 메시지
도움 요청

보안¶

입력 검증¶

SQL Injection 방지
XSS 방지 (DOMPurify)
파일 업로드 검증
크기 제한

인증/권한¶

관리자 인증
참가자 식별
역할 기반 접근 제어

제약 사항¶

현재 제한¶

단일 관리자: 한 명만 로그인 가능
SQLite: 대규모 동시 쓰기 제한
파일 스토리지: 로컬 파일 시스템만
WebSocket: 단일 서버만

향후 개선¶

다중 관리자: 여러 Facilitator 지원
PostgreSQL: 대규모 확장
S3 스토리지: 클라우드 파일 관리
Redis: 분산 WebSocket

성능 특성¶

응답 시간¶

API: < 100ms (평균 ~50ms)
페이지 로드: < 2s
WebSocket 레이턴시: < 50ms

확장성¶

동시 사용자: 100명 (안정적)
최대 테스트: 200명
Codelab 수: 무제한
Step 수: 무제한

리소스 사용¶

메모리: ~200MB
CPU: ~10% (유휴 시)
디스크: SQLite DB + 이미지

다음 단계¶

데이터베이스 스키마 - DB 구조
API 레퍼런스 - REST API
아키텍처 - 시스템 설계