콘텐츠로 이동

시스템 아키텍처

Open Codelabs의 전체 시스템 아키텍처를 설명합니다.

아키텍처 개요

┌─────────────────────────────────────────────────────┐
│                    사용자 (Users)                    │
│  ┌──────────────┐              ┌──────────────┐    │
│  │ Facilitator  │              │  Attendee    │    │
│  │  (관리자)     │              │  (참가자)     │    │
│  └──────┬───────┘              └───────┬──────┘    │
└─────────┼──────────────────────────────┼───────────┘
          │                              │
          │         Browser              │
          └──────────────┬───────────────┘
                         │ HTTPS
          ┌──────────────┴───────────────┐
          │       Frontend Layer         │
          │      (SvelteKit + Vite)      │
          │  ┌────────┐     ┌─────────┐  │
          │  │ Pages  │     │Components│  │
          │  └────────┘     └─────────┘  │
          │  ┌────────┐     ┌─────────┐  │
          │  │ Stores │     │  API    │  │
          │  └────────┘     └─────────┘  │
          └──────────────┬───────────────┘
                         │ HTTP/WebSocket
          ┌──────────────┴───────────────┐
          │       Backend Layer          │
          │      (Rust + Axum)           │
          │  ┌────────┐     ┌─────────┐  │
          │  │ Router │     │Handlers │  │
          │  └────────┘     └─────────┘  │
          │  ┌────────┐     ┌─────────┐  │
          │  │  Auth  │     │WebSocket│  │
          │  └────────┘     └─────────┘  │
          └──────────────┬───────────────┘
                         │ SQLx
          ┌──────────────┴───────────────┐
          │      Database Layer          │
          │         (SQLite)             │
          │  ┌──────────────────────┐    │
          │  │  Tables & Relations  │    │
          │  └──────────────────────┘    │
          └──────────────────────────────┘

레이어 아키텍처

Presentation Layer (Frontend)

  • SvelteKit 5: SSR/SPA 하이브리드
  • Vite: 번들링 및 개발 서버
  • Tailwind CSS: 스타일링
  • WebSocket Client: 실시간 통신

Application Layer (Backend)

  • Axum: 웹 프레임워크
  • Tokio: 비동기 런타임
  • Tower: 미들웨어
  • WebSocket: 실시간 서버

Data Layer (Database)

  • SQLite: 관계형 데이터베이스
  • SQLx: 타입 안전 쿼리
  • Migrations: 스키마 버전 관리

통신 프로토콜

HTTP REST API

  • CRUD 작업
  • 상태 관리
  • 파일 업로드/다운로드

WebSocket

  • 실시간 채팅
  • 진행 상황 업데이트
  • 도움 요청 알림

다음 단계