목록으로

ping

by Way 9 강사용 SAAS

강사용 설문, 퀴즈 서비스

1일 제작 기간
10명 사용자

빌드 과정

강사·코치가 5분 안에 실시간 청중 투표·Q&A를 진행할 수 있는 경량 인터랙티브 프레젠테이션 도구

웹서비스 Rails 8.1 + PostgreSQL + Redis + Hotwire (Turbo/Stimulus) + Tailwind CSS + Chart.js

빌드 단계 (8단계)

  1. 1

    Rails 8.1 초기화 및 PostgreSQL·Redis 연결

    Rails 8.1 앱을 현재 디렉토리에 직접 생성하고, PostgreSQL DB 연결, Redis 설정, UUID 기본키, Tailwind CSS, Pretendard 폰트, Chart.js 임포트까지 개발 환경 전체를 한 번에 구성한다.

  2. 2

    DB 스키마 생성 및 핵심 모델 구현

    CLAUDE.md에 확정된 7개 테이블(users, sessions, polls, poll_options, poll_responses, questions, question_likes)을 전부 마이그레이션으로 생성하고, 모델 관계·검증·상태 머신·쿠키 발급 로직을 구현한다. 강사 로그인 전에 도메인 구조부터 완성한다.

  3. 3

    OmniAuth 소셜 로그인 및 세션 관리

    구글/카카오 OmniAuth 로그인을 구현하고, 로그인한 강사의 대시보드(세션 목록 + 새 세션 생성)를 완성한다. 청중은 로그인 없이 코드 입장만 가능하도록 라우팅을 분리한다.

  4. 4

    발표자 화면 + 참여자 화면 UI 틀 구현

    실시간 기능을 붙이기 전에 눈에 보이는 두 핵심 화면을 먼저 완성한다. 발표자 화면(다크 모드 전용)과 참여자 모바일 화면(투표 탭 + Q&A 탭) UI를 구현하고, QR 코드 생성(rqrcode), 랜딩 페이지, 코드 입장까지 포함한다.

  5. 5

    ActionCable 실시간 Q&A + 투표 + Chart.js 시각화

    화면 틀이 완성된 상태에서 WebSocket을 연결한다. QuestionChannel(Q&A 실시간 등록·좋아요 정렬)과 PollChannel(투표 제출·결과 Chart.js 시각화)을 구현하고, 강사의 투표 활성화/종료 제어까지 포함한다.

  6. 6

    Pro 구독 결제(토스페이먼츠) + CSV 내보내기

    Freemium 수익 모델 구현: 토스페이먼츠 빌링키 정기결제로 Pro 플랜 전환, Pro 전용 CSV 내보내기(UTF-8-BOM, 엑셀 한글 깨짐 방지), 무료 회원 제한(참여자 30명, 7일 보관) 게이팅을 구현한다.

  7. 7

    모바일 반응형 최적화 + 서비스 카피 확정

    참여자 모바일 화면을 실제 스마트폰 기준으로 최적화하고, 뻔한 표현 없이 숫자 기반의 서비스 카피를 확정한 뒤 랜딩 페이지와 대시보드 온보딩 문구에 반영한다.

  8. 8

    배포 (Render + Fly.io / PostgreSQL + Redis)

    Pro 모드 환경(PostgreSQL + Redis)에 맞게 Render 또는 Fly.io에 프로덕션 배포한다. 환경변수 설정, PostgreSQL·Redis 서비스 연결, Puma 설정, 배포 후 스모크 테스트까지 완료한다.